1. table标签：表示表格的开始和结束，表格的所有内容需要写在这一对标签中
2. tr标签：表示表格中的一行 table row
3. td标签：要写在tr中，这一行中的每一个单元格，是真正放数据的地方 table dataceil

1. caption标签：表格的标题
2. thead标签：表头部分
3. tbody标签：表的主体部分
4. th标签：行/列的标题，文字加粗显示

table标签的属性

border = "1px" 设置边框

bordercolor = "" 设置边框颜色

bgcolor ="" 设置背景颜色

width =“”设置表格的宽度

height="" 设置表格的高度

table表格的边框是带有间距的，解决方案：给table标签加style="border-collapse: collapse;"

tr标签的属性

align ="" 设置内容的水平对齐方式 left靠左 center居中 right靠右

valign="" 设置内容的垂直对齐方式 top靠上 middle居中 bottom靠下

colspan="n" 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)

rowspan="n" 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)

被合并的单元格一定得删除掉！

表格的大小是由内容撑起来的

但如果修改了某个单元格的高度，这一行单元格的高度都会随之改变

同理，如果修改了某个单元格的宽度，这一列单元格的宽度都会随之改变

<ol> 有序列表order list

<li></li> 列表项list item

<li></li>

</ol>

<ul> 无序列表 unorder list

<li></li> 列表项 list item

<li></li>

</ul>

有序列表的属性

start = "4" 指定列表项编号的起始值

type = "1" 指定编号的类型，默认值1，代表阿拉伯数字

a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字

无序列表的属性

type ="disc" 实心圆，默认值，还有：

circle空心圆 square方块 none没有标识

ul/ol的直接子元素必须是li,语法规定

所有被嵌套的内容都需要写在li中,符合语义

<dl> 定义列表 Definition List:常用来给一类事物或名字做解释用的

<dt> 这里放要被解释的名词 </dt> Definition Type

<dd> 这里写上面名词的解释内容 </dd> Definition Description

</dl>

1. 提供了一些可视化的输入控件
2. 自动收集整理用户输入的内容，并提交给服务器

<form></form>

可以添加的属性：

1. action="url" 向哪个地址提交数据，如果不写，会提交给当前页面本身
2. method="get" 发送请求的方式 get默认值 post
3. enctype="" 指定表单数据的编码方式，定义表单允许传什么类型的数据给服务器

application/x-www-form-urlencoded 默认值，允许传递任意字符(不能传文件)

multipart/form-data 可以传递文件和任意字符

text/plain 允许传递普通字符(& = * @等符号都不是普通字符)

1. input元素
2. textarea 多行文本域
3. select和option下拉选择框
4. label关联控件

（1）公共属性：

type 设置input元素的类型，默认值text

value 保存用户输入的值，提交服务器后，后期可以获取该属性的值

如果控件是按钮，value是按钮上显示的文本

name 为控件起个名字，注意form表单必须写name,不写提交不了此项数据

（2）文本输入框与密码框

type="text" 普通文本输入框

type="password" 密码框

属性：

placeholder="" 提示信息

maxlength = "5" 设置可以输入的最大长度

value="" 不写input标签中也会默认存在该属性，默认值是空字符串

（3）按钮

type="submit" 提交按钮，自动收集整理用户输入的数据(有name属性的控件)，提交发送请求

type="reset" 重置按钮，将表单控件初始化，恢复到初始状态，注意不是全部清空

type="button" 普通按钮，使用事件，调用JS代码

注意：按钮上的value属性代表的是按钮上的文字

（4）单选框与多选框

type="radio" 单选

type="checkbox" 多选

必须添加name属性，原因：

1. 为控件起名，为控件分组
2. 为了实现单选效果，这么多个选项都在同一组，只能n选1

value必须写，不然提交的是on

checked 表示当前选项被默认选中

（5）文件上传

请输入您要上传的文件<input type="file" name="ufile" multiple>

使用的前提：method="post" enctype="multipart/form-data"

可以设置属性multiple，就可以同时传多个文件了

注意：post提交要双击html文件打开测试，HBuilder测试POST会报错，暂不支持

<select>

<option><option>

</select>

提交的时候，如果没有给option设置value,提交的就是option标签之间的文本

但如果设置了option的value,提交的就是value的值

selected 表示该选项默认被选中

multiple 表示该下拉选框可以多选，按住Ctrl就可以选择多个选项

属性：

cols="50" 文本域的列数，改变的是宽度

rows="10" 文本域的行数，改变的是高度

注意：默认的文本域大小可以被用户随意拖拽改变，想要禁用拖拽：

style = "resize: none;"

用于进行form中文本与控件的关联

<label for="要关联的控件的id值"></label>

（1）数字控件

<input type="number">

属性：

min 最小值

max 最大值

step 步长，一次变化的值

注意：数字输入框不能阻止用户自行输入

（2）颜色控件

<input type="color">

提供了一个取色器，可以选择不同的颜色，默认黑色

（3）日期控件

<input type="date">

只出现日期的选择，因为格式比较单一，因此自定义效果较强的日期插件更加美观合理

（4）月份控件

<input type="month">

（5）星期控件

<input type="week">

（6）邮箱控件

<input type="email">

验证必须有@，同时@前后都有内容

（7）搜索控件

<input type="search">

提供了一个快速删除的小叉叉

（8）URL控件

<input type="url">

验证内容必须有http:

注意：数据的校验还是要放在后端自己写JS去判断

（9）电话号码控件

<input type="tel">

电话类型在PC浏览器中与text普通文本框一样，但在手机中不一样，会有模拟输入键盘

（10）范围控件

<input type="range">

可以控制区间，如：音量 地图缩放 进度

min 最小值，区间的最开始

max 最大值，区间的最末尾

step 直接写数字，数字为移动的跨度

value 用来保存用户拖拽的值，也可以先自定义一个值作为初始值

iframe 在一个html页面，引入其它的html页面

属性：

src ="url" 被引入资源的路径

width="500px" 宽度

height="600px" 高度

scrolling="no" 是否需要滚动条，默认值auto有滚动条 yes一直显示滚动条

frameborder="0" 被引入页面的边框线

优势与劣势：

程序调用静态页面的时候比较方便

样式不好控制

有额外的链接，请求的次数会增加，速度会变慢

H5新增了一些带结构语义的标签，来取代div

虽然在用户看来和之前使用div没有区别，但带语义的标签可以增加代码的可读性

让网络爬虫更快找到

但注意：低版本的浏览器会有兼容问题，所以先做了解

<header></header> 定义网页的头部，或者某个区域的顶部

<nav></nav> 定义网页的导航链接

<section></section> 定义网页的主体

<aside></aside>定义网页的侧边栏

<article></article> 定义与文字相关的内容，比如文章 论坛 回帖

<footer></footer> 定义网页的底部或者某个区域的底部