1.表格标签:
格式:<table>
<tr></tr>
<td></td>
</table>
border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
给table设置align属性, 是让表格在浏览器中居左/居右/居中
给tr设置align属性, 是让当前行中所有内容居左/居右/居中
给td设置align属性,是让当前单元格中所有内容居左/居右/居中
该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
给table设置valign属性, 无效
给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
bgcolor:规定表格的背景颜色
给table设置bgcolor属性, 是给整个表格设置背景颜色
给tr设置bgcolor属性, 是给当前行设置背景颜色
给td设置bgcolor属性, 是给当前单元格设置背景颜色
2.表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th
th标签: 给每一列设置标题, 单元格中的内容会自动加粗,居中
caption标签:给整个表格设置标题
一定要嵌套在talbe标签内部才有效
格式:<table>
<caption>title</caption>
<tr>
<th></th>
<tr>
<tr>
<td></td>
</tr>
</table>
3.合并单元格
合并当前列的哪几个单元格, 注意colspan之后向后合并, 不会向前合并
3.1横向合并calspan
格式:
<td calspan="2"></td>
3.2纵向合并rowspan
格式:<td rowspan="2"</td>
4.表单
作用: 用于收集用户信息, 让用户填写、选择相关信息
所有的表单内容,都要写在form标签里面
form标签中有两个比较重要的属性action和method
明文输入框
作用: 用户可以在输入框内输入内容
title:<input type="text">
暗文输入框
作用: 用户可以在输入框内输入内容
title:<input type="password">
给输入框设置默认值
title:<input type="text" value="good">
规定输入字段中的字符的最大长度
title:<input type="password" name="liming" maxlength="8">
单选框(radio)
作用: 用户只能从众多选项中选择其中一个
单选按钮,天生是不互斥的,如果想互斥,必须要有相同的name属性
checked是用来设置默认属性
<input type="radio" name="Lihua">男
<input type="radio" name="Lihua" checked="checked">女
多选框(checkbox)
作用: 用户只能从众多选项中选择多个
复选框,最好也是有相同的name(虽然他不需要互斥,但是也要有相同的name)
<input type="checkbox" name="hobby">篮球
<input type "checkbox" name="boddy">足球
abel标签
作用: label标签不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性
注意事项:
表单元素要有一个id,然后label标签就有一个for属性,for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定
格式:
<label for="account">账号:</label>
<input type="text" id="account">
按钮
作用: 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)
<input type="botton"value ="我是按钮">
图片按钮
作用:定义图像形式的提交按钮
<input type="img" src="0.jpg">
重置按钮
作用: 定义重置按钮。重置按钮会清除表单中的所有数据
这个按钮不需要写value自动就有“重置”文字
reset只对form表单中表单项有效果
<input type="reset">
提交按钮
作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
格式:
<input type="submit">
注意事项:
这个按钮不需要写value自动就有“提交”文字
要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)
隐藏域
作用: 定义隐藏的输入字段
格式:
<input type="hidden">
取色器
格式:
<input type="color">
HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解
日期选择器
<input type="date">
HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解
数据列表
作用: 给输入框绑定待选项
格式:
<datalist type="text" list="">
<option>待选项内容</option>
</datalist>
多行文本框(文本域)
作用: textarea标签用于在表单中定义多行的文本输入控件
cols属性表示columns“列”, 规定文本区内的可见宽度
rows属性表示rows“行”, 规定文本区内的可见行数
格式:<textarea cols="30" rows=10>默认