前端学习第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
概念的介绍和应用
上一篇: 前端学习部分题目(补充中)
推荐阅读