本文共 9287 字，大约阅读时间需要 30 分钟。
一. 列表
列表
- 结构
- 表现
- 行为
- 结构
- 表现
- 行为
- 结构
- 结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
- 结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
- 结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
- aa
- aa-1
- aa-2
结果：
1. 符号列表
HTML5 + CSS + JS --- 符号列表
- 圆点符号列表1
- 圆点符号列表2
- 圆点符号列表3
- 空心圆形符号列表1
- 空心圆形符号列表2
- 空心圆形符号列表3
- 方形符号列表1
- 方形符号列表2
- 方形符号列表3
2. 编号列表
符号列表标签 HTML5 + CSS + JS --- 编号列表
- 列表1
- 列表2
- 列表3
- 列表I
- 列表i
- 列表ii
- 列表II
- 列表A
- 列表a
- 列表b
- 列表c
- 列表B
- 列表C
3. 自定义列表
自定义列表标签 HTML5 + CSS + JS --- 自定义列表
- HTML 5
- HyperText Mark-up Language 5th
- CSS3
- Cascading Style Sheets 3
- JavaScript
- 非常、非常强大的脚本语言
二. 表格
1. 定义
HTML表格一般由表格标题、表头、表格主体、表格行、表格列、单元格、表注等部分组成
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格的表头单元格使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
2. 属性
(1). 定义表格主体的标签
<caption>标签--------定义表格的标题
表格标题
<thead>标签 ---------表格的页眉（表头部分）
<tbody>标签 ---------表格的主体
<tfoot>标签 ---------定义表格的页脚（表格的注脚）
表格三要素 table、tr、td 缺一不可。
(2). 定义表格属性的标签
语法：
<table> 标签（定义表格）
常用属性：border="1" 表格边框的宽度bordercolor="#fff" 表格边框的颜色cellspacing="5" 单元格与单元格之间的空白间距cellpadding="6" 设置单元格内容与其边框之间的空白距离宽度width="500" 表格的总宽度height="100" 表格的总高度 bgcolor="#fff" 表格整体的背景色align="对齐方式" 设置表格对齐方式
(3). th标签属性
<th> 标签（定义表格的表头单元格）
常用属性:width="500" 单元格的宽度，设置后对当前一列的单元格都有影响height="100" 单元格的高度，设置后对当前一行的单元格都有影响bgcolor="fff" 单元格的背景色align="right" 单元格文字的水平对齐方式 (参数left、center、right)valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top) rowspan="3" 合并垂直水平方向的单元格colspan="3" 合并水平方向单元格
(4). tr标签属性
<tr> 标签（定义表格的行）
常用属性:bgcolor="#fff" 行的颜色align="right" 行内文字的水平对齐方式 (参数有left、center、right)valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
(5). td标签属性
<td>标签（定义表格的列）
常用属性：定义表格内文字的对齐 水平排列：align="right" 表格整体对齐方式 (参数有 left、center、right) 垂直排列：valign=top/ middle /bottom/ baseline(基线)
举例：
课程表
| 项目 | 理论课：11 | 实验课：ss | 休息：00 | ||||
|---|---|---|---|---|---|---|---|
| 星期 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 | 星期天 |
| 上午 | 11 | 00 | 11 | 00 | 11 | 00 | 00 |
| 11 | 11 | 11 | 00 | 11 | 11 | ||
| 下午 | ss | ss | 00 | 00 | ss | 00 | 00 |
| 00 | ss | 00 | 00 | 00 | ss | ||
三. 表单
用户需要使用它来输入数据，并向服务器提交数据，服务器的有关应用程序将处理提交信息，处理结果或是将用户提交的信息存储在服务器端的数据库中，或是将有关信息返回到客户端的浏览器上。用户在表单中输入的数据将作为请求参数发送给服务器，从而实现用户与web应用的动态交互
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,
比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)、提交重置按钮等等。
最终通过表单提交实现数据传递的组件
表单使用表单标签 <form> 来设置
1. 表单<form>标签元素
在HTML中，表单form标签中可以添加一系列属性
accept-charset：定义服务器可处理表单数据字符集action：属性值为URL，定义当提交表单时向该URL发送表单数据method：属性值为get或post，用于定义发送form-data的HTTP方法 get 方法是默认的，使用get时，表单数据在页面地址栏可见 post 在页面地址栏中被提交的数据是不可见的name：定义表单的名称target：定义何处打开action URL，属性值一般为_blank, _self
form标签具体来说有两方面的作用：
- 限定表单范围，即定义一个区域，表单各元素都要设置在这个区域内，点击提交按钮时，提交的也是这个区域的数据
- 携带表单的相关信息，如处理表单的程序
基本语法
2. 表单<form>标签组成
(1). 输入标签<input>
多数情况下被用到的表单标签是输入标签（<input> ）。
<input>标签根据不同的type属性值，会有不同的的表现形式，例如：文本字段、文本域、列表、单选框、复选框、密码框、文本控件、分组、单选按钮
基本语法
注：表单中的单选按钮可以设置以下几个属性：value、name、checked
value：提交数据到服务器的值（后台程序PHP使用） name：为控件命名，以备后台程序 ASP、PHP 使用 checked：当设置 checked="checked" 时，该选项被默认选中
| type属性值 | 描述 |
|---|---|
| text | 设置单行文本框元素 |
| password | 设置密码元素 |
| file | 设置文件元素 |
| hidden | 设置隐藏元素 |
| radio | 设置单选框元素 |
| checkbox | 设置复选框元素 |
| button | 设置普通按钮元素 |
| submit | 设置提交按钮元素 |
| reset | 设置重置按钮元素 |
注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
1. 文本框（Text Fields）
文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
注：
input属性中 type类型为reset表示重置
type类型为submit表示提交 type类型为text表示文本域label标签主要作用是为input标签定义标记文本域添加关联标记通过label标签的for属性，其属性值与input标签中的id属性值一一对应
表单 HTML5 + CSS + JS --- HTML表单<form>文本域
2. 密码字段
密码字段通过标签<input type=“password”> 来定义:
3. 单选按钮（Radio Buttons）
<input type=“radio”> 标签定义了表单单选框选项
4. 复选框（Checkboxes）
<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
5. 提交按钮(Submit Button)
<input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
6. 隐藏域(hidden)
主要用于在不同页面中传递域中设定的值
基本语法：
name设置隐藏域的名称value用于设置隐藏域需要传递的值
7. 文件域(file)
用于创建文件域，文件域可以将本地文件上传到服务器端
基本语法：
注：name设置文件域的名称，用于在脚本中获取域的数据。
在将文件内容上传到服务器，还必须修改表单的编码，这需要使用form标签的enctype属性，应该将属性的值设置为multipart/form-data，同时提交表单方法必须为post(2). 选择列表标签<select>
下拉列表
在使用下拉列表时，用户每次只能选择一项，这点和单选按钮的功能比较接近
但是当选项很多时，下拉列表的优势就比较明显
下列列表通过<select><option>标签来实现
select标签的name=web属性表示，PHP服务器将通过该属性值获取下拉列表的选项值
通过option标签元素value定义了6中语言类型修改默认项方式：在option中添加selected属性即可
表单 HTML5 + CSS + JS --- HTML表单<form>示例
多项选择列表
多项选择列表是指一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表
基本语法：
size设置同时显示的列表选项个数(默认为1)，取值大于或等于1
multiple设置列表中的项目可多选 selected设置默认选项，可对多个列表选项进行此属性的设置(3). 多行文本域标签<textarea>
多行文本域textarea可以在控件内输入多行数据信息元素，且可以设定标签元素的行高和列宽
基本语法：
HTML 之表单 HTML5 + CSS + JS --- HTML表单<form>多行文本域
