HTML常用标签（下）

1. 表格标签

1.1 表格的主要作用

主要用于显示、展示数据

1.2 表格的基本语法

<table>                              //<table> </table>用于定义表格的标签
    <tr>                             //<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>中
        <td>单元格中的文字</td>       //<td></td>用于定义表格中的单元格，必须嵌套在<tr> </tr>中
        ...                          //字母td指表格数据（table data），即数据单元格的内容
    </tr>
    ...
</table>

1.3 表头单元格标签

 <table>                              //<table> </table>用于定义表格的标签
    <tr>                             //<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>中
        <th>单元格中的文字</th>       //<th></th> table head 加粗显示
        ...                          //字母td指表格数据（table data），即数据单元格的内容
    </tr>
    ...
</table>

1.4 表格属性（之后常通过CSS来设置）

1.5 表格结构标签

1. <thead></thead>：用于定义表格的头部，<thead>内部必须拥有<tr>标签 ，一般是位于第一行
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体
3. 以上标签都是放在<table></table>标签中

1.6 合并单元格

合并单元格方式：

跨行合并：rowspan = “合并单元格的个数”
跨列合并：colspan = “合并单元格的个数”

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格步骤：

  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格。写上合并方式 = 合并的单元格数量。如：`<td colspan = "2"></td>`
  3. 删除多余的单元格

2. 列表标签

列表是用来布局的，列表最大的特点是整齐、整洁、有序。
列表分为三大类：无序列表、有序列表、自定义列表

2.1 无序列表（重点）

<ul>标签表示HTML页面中项目的无序列表，列表项使用<li>标签定义。
基本语法：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ul>

1. 无序列表的各个列表项没有顺序之分
2. <ul></ul>中只能嵌套<li></li>标签，直接在<ul></ul>标签中输入其他标签是不允许的
3. <li>与</li>之间相当于一个容器，可以放任何元素
4. 通常使用CSS来设置列表的样式

2.2 有序列表

<ol>标签表示HTML页面中的有序列表。其语法和注意事项和无序列表基本一致。

2.3 自定义列表（重点）

基本语法：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
</dl>

1. <dl></dl>里面只能包含<dt>和<dd>；<dt>和<dd>中可以放任何标签
2. <dt>和<dd>个数没有限制，经常是一个 <dt>对应多个<dd>

3. 表单标签

3.1 表单的用途

表单主要用来收集用户信息。

3.2 表单的组成

表单主要由表单域、表单控件（表单元素）和提示信息3部分组成。

3.3 表单域

表单域：是一个包含表单元素的区域。
<form>标签：用于定义表单域、以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器

<form action = "url地址" method = "提交方式" name = "表单域名称">    
各种表单元素控件    
</form>

属性：
1.action：其值为url地址，用于指定接收并处理表单数据的服务器程序的URL地址
2.method：其值为get/post，用于设置表单数据的提交方式
3.name：名称，用于指定表单的名称，以区分同一个页面中的表单域

3.4 表单控件

 1. input 输入表单元素
 2. select 下拉表单元素
 3. textarea 文本域元素 

3.4.1 表单元素

<input>标签（单标签）用于收集用户信息，其中包含type属性（必须），根据不同的type属性值，输入字段拥有多种形式

<input type = "属性值"/> 

input 的其他属性 ：

1. name和value是每个表单元素都有的属性值，主要是给后台人员使用
2. name 表单元素的名字，单选按钮和复选框要有相同的name值 （必须）
3. checked属性主要针对于单选框和复选按钮，主要作用一打开页面就默认选中某个表单元素
4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。后面会使用正则字符串来限制长度。

3.4.2 标签

<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点或者光标转到或者选择对应的表单元素上，来增加用户体验。

<label for="sex">男</label>
<input type="radio" name=sex id="sex" />

注意：label和input要一起出现，for的值和id的值要一样。

3.4.3 select表单元素

如果想让用户有多个选型选择，并且想要节约页面空间，可以使用<select>标签空间定义下拉列表

<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项2</option>
   ...
</select>

1. <select>中至少包含一对<option>
2. 在<option>中定义selected = "selected"时，当前项即为默认选中项

3.4.4 文本域表单元素

1. 当用户输入内容较多的情况下，可以使用<textarea>标签。都需要在form标签中写。
2. 在表单元素中，<textarea>标签是用于定义多行文本输入的控件。常见于留言板，评论等。
   rows="3" cols="20"，一般不使用，其样式之后可以在css中设置

<textarea rows="3" cols="20">
文本内容
</textarea>