第 3 节 HTML 标签（下）

表格标签

1. 表格的主要作用
用于显示和展示数据

2. 表格的基本语法

<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
</table>

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

3. 表头单元格标签（ < th> ）
一般表头单元格位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示。

<table>
	<tr>
		<th>姓名</th>  <!--表示HTML表格的表头部分（table head缩写）-->
		...
	</tr>
	...
</table>

4. 表格属性
实际开发不常用，都是通过CSS来设置。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">

5. 表格结构标签
1）< thead> 表示表格头部区域，< thead>内部必须拥有< tr>标签。一般位于第一行。
2）< tbody> 表示表格主体区域 ，主要放数据本体。
3）以上两个标签都是放在 table 标签中。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
    <thead>  <!--表格头部区域-->
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
   
    <tbody>  <!--表格主体区域-->
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="arrow-down.png"></td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="http://jump2.bdimg.com/f?kw=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">贴吧</a> 
                <a href="https://cn.bing.com/images/search?q=%e9%ac%bc%e5%90%b9%e7%81%af&form=HDRSC2&first=1&tsc=ImageBasicHover" target="blank">图片</a> 
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790" target="_blank">百科</a>
            </td>
        </tr>

        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="arrow-down.png"></td>
            <td>124</td>
            <td>675432</td>
            <td>
                <a href="https://jump2.bdimg.com/f?kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&ie=utf-8&tab=good" target="_blank">贴吧</a> 
                <a href="https://cn.bing.com/images/search?q=%e7%9b%97%e5%a2%93%e7%ac%94%e8%ae%b0&form=HDRSC2&first=1&tsc=ImageBasicHover" target="_blank">图片</a> 
                <a href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859 " target="_blank">百科</a>
            </td>
        </tr>
    </tbody>    
</table>

6. 合并单元格
1）合并单元格方式：
（1）跨行合并：rowspan = “合并单元格的个数”
（2）跨列合并：colspan = “合并单元格的个数”

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

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

<table align="center" border="1" cellspacing="0" width="500" height="200">
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>

    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

结果：

7. 表格总结

列表标签

列表是用来布局的，最大的特点是整齐、整洁、有序。根据实用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

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）无序列表会带有自己的样式属性，但是在实际使用时，我们会使用CCS来设置。

2. 有序列表（理解）
< ol> 标签表示HTML页面中项目的有序列表，列表排列以数字来显示，并且使用 < li> 标签来定义列表项。
有序列表的基本语法格式：

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

1）< ol>< /ol> 中只能嵌套 < li>< /li>，直接在 < ol>< /ol> 标签中输入其它标签或者文字的做法是不被允许的。
2）< li> 与 < /li> 之间相当于一个容器，可以容纳所有元素。
3）有序列表会带有自己的样式属性，但是在实际使用时，我们会使用CCS来设置。

3. 自定义列表（重点）
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前面没有任何项目符号。

在HTML标签中，< dl> 标签用于定义描述列表（或定义列表），该标签会与 < dt>（定义项目/名字）和 < dd>（描述每一个项目/名字）一起使用。
自定义列表的基本语法格式：

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

1）< dl>< /dl>里面只能包含< dt>和< dd>。
2）< dt>和< dd>个数没有限制，经常是一个< dt>对应多个< dd>。

表单标签

1. 为什么需要表单
使用表单目的是收集用户信息。例如，注册页面。

2. 表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息 3个部分组成。

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

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

4. 表单控件（表单元素）
表单元素是允许用户在表单中输入或者选择的内容控件。

1）< input> 表单元素
< input> 标签用于收集用户信息。在< input>标签中，包含一个type 属性值，输入字段拥有很多种形式（文本字段、复选框、掩码之后的文本控件、单选按钮、按钮等）

<input type="属性值" />

（1）< input />标签为单标签
（2）type 属性设置不同的属性值用来指定不同的控件类型

（3）除 type 属性外，< input>标签还有其他很多属性，常用属性如下：

• name 和 value 是每个表单元素都有的属性值，主要给后要人员使用。
• name 表单元素的名字，要求 同组的单选按钮（radio）或复选框（checkbox）必须设定相同的 name 值。
• checked属性主要针对单选按钮和复选框，主要作用是再打开页面时默认选中某个表单元素。

举例：

<form action="xxx.php" method="GET"> 
    <!-- text 文本框 用户可以在里面输入任何文字 -->
    用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
    
    <!-- password 密码框 用户看不见输入的密码 -->
    密码：<input type="password" name="pwd"> <br>
    
    <!-- radio 单选按钮 可以实现多选一 -->
    <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才能实现多选1 -->
    <!-- 单选按钮和复选框可以设置checked 属性，当页面打开时默认选中该按钮 -->
    性别：男 <input type="radio" name="sex"> 女 <input type="radio" name="sex" checked="checked"> <br>
    
    <!-- checkbox 复选框 可以实现多选 -->
    爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"> <br>
    
    <!-- 点击提交按钮，可以把 表单域form 里面 表单元素的值 提交给后台服务器  -->
    <input type="submit" value="免费注册"> 
    
    <!-- 重置按钮可以使表单元素的值恢复至初始状态 -->
    <input type="reset" value="重新填写"> <br>

    <!-- 普通按钮 button 后期结合 js 搭配使用 -->
    <input type="button" value="获取短信验证码"> <br>

    <!-- 文件域 使用场景 上传文件使用的 -->
    上传头像：<input type="file">
</form>

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

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

核心：< label>标签的 for 属性应当与相关元素的 id 属性相同。

2） select 下拉表单元素
使用场景：多个选择，节约页面空间。可以使用< select> 标签控件定义下拉列表。
基本语法：

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

selected 属性主要针对单选按钮和复选框，主要作用是再打开页面时默认选中某个选项。

<option selected="selected">上海</option>

3）< textarea> 表单元素
使用场景：用户输入内容较多的情况下
< textarea> 标签用于定义多行文本输入的控件。
多行文本输入控件，可以输入更多的文字，该控件常见于留言板、评论。
基本语法：

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

（1）通过< textarea> 标签可以轻松地创建多行文本输入框。
（2）cols=“每行中的字符数”，row=“显示的行数”，在实际开发中不会使用，都是用CCS来改变大小。

综合案例

案例：注册页面

<body>
    <h3>注册页面</h3>

    <form>
        <table width="600">
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" id="male" name="sex">
                    <label for="male">
                        <image src="男.png" width="20"></image>
                    </label>
                    <label for="male">男</label>

                    <input type="radio" id="female" name="sex">
                    <label for="female">
                        <image src="女.png" width="20"></image>
                    </label>
                    <label for="female">女</label>
                </td>
            </tr>

            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option>--请选择年--</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                    </select>

                    <select>
                        <option>--请选择月--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>

                    <select>
                        <option>--请选择日--</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>所在地</td>
                <td>
                    <input type="text" value="北京">
                </td>
            </tr>

            <tr>
                <td>婚姻状况</td>
                <td>

                    <input type="radio" id="single" name="marital_status">
                    <label for="single">未婚</label>

                    <input type="radio" id="married" name="marital_status">
                    <label for="married">已婚</label>

                    <input type="radio" id="divorced" name="marital_status">
                    <label for="divorced">离婚</label>
                </td>
            </tr>

            <tr>
                <td>学历</td>
                <td>
                    <input type="text" value="大学">
                </td>
            </tr>

            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="hobby">打篮球
                    <input type="checkbox" name="hobby">打羽毛球
                    <input type="checkbox" name="hobby">打乒乓球
                    <input type="checkbox" name="hobby">打台球
                </td>
            </tr>

            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>自我介绍</textarea>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <a href="#">我是会员，立即登录</a>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <h4>我承诺</h4>
                    <ul>
                        <li>年满18</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚希望加入</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>
</body>

查阅文档

推荐网址：
百度：http://www.baidu.com
W3C：http://www.w3school.com.cn/
MDN：http://developer.mozilla.org/zh-CN/