欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-03 07:51:30
...

第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概念的介绍和应用