HTML/CSS基础学习总结

来源：互联网发布：淘宝助理5.8.3 编辑：程序博客网时间：2024/04/17 03:21

基本结构

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<span class="red-text">你好我試試史蒂夫</span>

</div>

</body>

</html>

页面基本交互标签

label标签
- 如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
- 语法： <label for="控件id名称">
- 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
输入框
- name：为文本框命名，以备后台程序使用。
- value：为文本输入框设置默认值。(一般起到提示作用该值需要用户手动清除)
- placeholder：为文本输入框设置默认值。(一般起到提示作用该值在用户输入时自动消失)
对表单内部信息进行分组
<fieldset>
<legend>分组标题</legend>
<label>看书:</label>
<input type="checkbox" value="值" name="名称2" "/>
</fieldset>

form表单<form method="传送方式" action="服务器文件">
- 表单可以接收用户的输入并提交给服务端、或者发起http请求 form[action=提交地址][methood=请求方法][enctype=multipart/form-date]
- action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
- method ：数据传送的方式（get/post）。
- 对radio/checkbox多个选项公用一个key,要求name相同
- input[type=password、tel、 email、 number
- input[type=submit、button、reset
- input[type=file、img
- input[type= radio、checkbox

</form>

text、password、radio、checkbox、select、select[multiple]、textarea input[type=submit|file|button|reset|image]

文本域 <textarea rows="行数" cols="列数">文本</textarea>
- cols ：多行输入域的列数。
- rows ：多行输入域的行数。
- 在<textarea></textarea>标签之间可以输入默认值。

举例：

</form>

使用单选框、复选框，让用户选择

- 单选框中的选项用户只能选择一项（name的值要一样才实现单选），请看下面的例子:

</form>

- 而复选框中用户可以任意选择多项，甚至全选。（name的值要不一样才实现多选）

- - type: 当 type="radio" 时，控件为单选框当 type="checkbox" 时，控件为复选框
  - value：提交数据到服务器的值（后台程序PHP使用）
  - name：为控件命名，以备后台程序 ASP、PHP 使用
  - checked：当设置 checked="checked" 时，该选项被默认选中

</form>

使用下拉列表框，节省空间（单选)

</select>

</form>

多选状态只需要这样

</select>

</form>

使用提交、重置按钮，提交/重置表单中的数据
- <input type="submit" value="提交">
- <input type="reset" value="重置">
- type：只有当type值设置为submit时，按钮才有提交作用
- value：按钮上显示的文字
网页嵌入标签<ifream>

在页面中加载一个子页面，指定加载的页面，给ifream的name属性赋值比如pagebox，然后在<a>的 target="pagebox"就行了

样式表

导入样式表文件（外联样式表）：

<link rel="staylsheet" href="样式表的位置"> link标签通常放置于head标签中，否则页面太大时可能会发生闪烁现象

书写样式表的语法

选择器{

样式字段：值；//全英文

}

标签筛选器格式：标签名{ 属性：值；}

html{
/*撑起页面*/
height: 100%;
}
body{
/*去掉默认的边距*/
margin: 0;
height: 100%;

}

id筛选器格式 #id { 属性：值；}

#header ul{
/*清除原有边框*/
margin: 0;
padding: 0;
/*清除列表样式*/
list-style: none;
}

类筛选器 .classname{}

<div class="classname">和控制这里</div>

<div class="classname">以及控制这里</div>

控制标签元素的显示、隐藏、半透明
- 会让出空间 display属性值：none不显示 block 块 inline 行内 inline-block 行内块;
- 不会让出空间 visibility属性值：visible hidden
- 透明度设置 opacity：0~1
超链接的样式注意顺序不可变
- :link 触发
- :visited 访问后
- :hover 鼠标移上去
- :active 鼠标按下

CSS布局

流式布局的局限
- 适合图文混排的页面
- 自动布局
- 要想调整大小和位置只能通过盒模型进行有限的调整 width、height、margin、padding、border
布局的发展
- 流式布局
- 浮动 float
- - 清除浮动对旁边标签的影响 clear
- 定位 position
- - relative （相对于当前位置，用于微调）
  - fix固定
  - z-index 三维坐标的z轴位置
  - absolute 绝对定位：参照物的确定是沿着标签找能够定位的标签，找不到就以body为参照物，比如把一个图标放到div 的中间

h6{

position: absolute;

top: 200px;

left: 300px;

}

- 默认定位position：static；（流式布局）
- 弹性（移动互联网时代产生的一种布局方式）

阅读全文

2 0