【精选】表格常用标签及属性(表格标签基本使用,表格结构和常用列表,自定义列表和表单,表单输入,表单输入)

三个基本的表格标签：

注意:

第一行通常用来显示标题而不是实际的数据，这样可以方便用户阅读和理解下放表格数据的含义

th同样可以存放内容，但是默认会被加粗并且居中显示。

属性是用来描述标签的特征（显示效果）的，因此属性都应该写在 table 标签中

属性语法复习：

注意：

表格居中显示，设置表格边框、宽度、高度、内容间距和单元格间距。

就语义而言，表格可以被划分成以下两个区域：

合并单元格的方式：

列表就是用来布局的，可以整齐、有序的展示数据，用列表做布局会更加自由和方便；

无序列表的的基本语法：

两个无序列表标签：

有序列表 ol 会在列表项前面自动增加数字排序，并且排序依次递增；

有序列表的的基本语法与无序列表基本一直，只需要把 ul 替换成 ol 即可：

有序列表除了序号之外，与无序列表的使用及注意事项没有区别。

网站首页下方的网站导航通常可以使用自定义列表来实现 自定义列表的基本语法：

注意：虽然一个 dl 中可以包含多个 dt，但是在实际开发中通常只包含一个 dt，因为这样更方便布局

三个自定义列表标签：

在开发网站时，可以使用表单收集用户信息，统一提交给后台处理；

表单通常包含 3 个部分：

用户通过表单控件能够输入或者选择内容，以达到通过表单收集信息的目的。

表单控件包含以下三大类：

input 标签的基本语法：

type 的常用属性值：

提交按钮（sumbit) 可以把表单域中的数据提交给后台

重置按钮（reset) 可以把表单域中的数据清空

通过 value 属性可以指定提交按钮或重置按钮中的文字

在多选一的时候，使用单选框（radio），例如：性别；

在多选多的时候，使用复选框（checkbox)，例如：爱好。

注意：在开发时，无论是单选还是复选，都不适合提供太多选项

同一组单选框或复选框，name 属性的值应该一致

注意：在 H5 中 checked="checked" 可以简写为 checked。

用 value 属性可以设置普通按钮的属性值

上传文件的 type 属性值是 file；

点击普通按钮不能提交表单，后续学习了 JavaScript 之后普通按钮就非常有用了。

label 可以和表单中的元素绑定，增加点击范围，提高用户体验

步骤：

选项太多，希望节约空间，提升用户体验时可以使用下拉列表

下拉列表的基本语法：

三个下拉列表的标签：

在 H5 中 selected=“selected” 可以简写为 selected。