前端学习第12天：表单补充-网页添加图标

第12天

1.表单标签及属性补充

​ 表单作业：手机用户信息

​ 表单组成：

​ 表单域+表单控件

1.1表单字段集

​ 语法：

<fieldset disabled="disabled"></fieldset>	

​ 说明：

​ 相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

1.2 字段集标题

​ 语法：

<legend align="left/center/right"></legend>	

说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。

1.3 提示信息标签

​ 语法：

<lable for="绑定控件id名"></lable>
<!-------------------------------------------------->
<label for="txt">姓名 ：</label> <input type="text" id="txt">
<label>电话号码：<input type="text"></label>
<!-- 说明 -->
<!-- label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
-->

1.4上传文本

​ 语法：

<input type="file" multiple="multiple" />

​ 说明：type属性新增的类型 ==>file,可进行文件的选择，默认是只能选择一个文件，multiple属性可实现多选

1.5 图像域

​ 语法：

<input tyle="image" src="" width="" height="" alt="图" />

​ 说明： 低版本火狐浏览器不支持

2.表格标签及属性补充

​ 表格结构：

<table>
    <tr>
        <td></td> 
    </tr>
</table>

2.1 单元格间距(border-spacing)

​ 语法：

border-spacing:value;

​ 说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

2.2合并相邻单元格边框(border-collapse)

​ 语法：

border-collapse:separater/collapse;

​ 说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

2.3无内容(empty-cells)

​ 语法：

empty-cells:show/hide;

​ 说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

2.4定义表格布局(table-layout)

​ 语法：

table-layout:aotu/fixed;

​ 说明：

​ 定义表格的布局算法，fixed====文本为英文字母且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配；设置auto时，则随内容宽度而定；火狐浏览器存在兼容。 (fixed：固定宽，不会随内容多少改变单元格宽,宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化)

2.5隔行变色

​ 双数行： tr:nth-child(2n){ } even (偶数) 单数行：tr:nth-child(2n+1){ } odd 奇数 设置单数单元格的样式和双数单元格的样式

2.6 表格标题

<caption>标题内容</caption> caption:表格标题 表格标题位置：caption-side:top/right/bottom/left

说明：left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top

2.7 HTML 重要属性

1）colspan="value" 合并列
2）rowspan="value" 和并行
3）valign="top/bottom/middle/baseline" 垂直对齐方式 
4）rules="rows/cols/all/none" 添加组分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条

2.8数据列分组

(1) <colgroup span="value"></colgroup>

(2) <col span="value" />

说明：

1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3）可以通过给table添加rules="groups"属性来给分组列添加组的分割线。

注意：虽然col和colgroup具有相同的功能，一个是单标签一个是双标签，两个都存在浏览器兼容问题。

2.9数据行分组

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。

3.给网页加图标

把下面代码添加在meta标签里：

<link href="img/timg.jpg" rel="shortcut icon">

rel="shortcut icon"属性和属性值必须写

扩展内容：BFC概念的介绍和应用