9.3 案例
演示代码如下
<table border="1" align="center" cellpadding="8" cellspacing="0"> <tr><th>排名</th><th>关键词</th><th>趋势</th><th>最近搜索</th><th>最近七日</th><th>相关链接</th></tr> <tr><td>1</td><td>鬼吹灯</td><td><img src="绿色下降箭头.jpg" width="10px"/><td>345</td><td>123</td><td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search">贴吧</a> <a href="鬼吹灯.jpeg">图片</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td></tr> <tr><td>2</td><td>盗墓笔记</td><td><img src="绿色下降箭头.jpg" width="10px"/><td>124</td><td>675432</td><td><a href="https://tieba.baidu.com/f?kw=%B5%C1%C4%B9%B1%CA%BC%C7&fr=ala0&loc=rec&dyTabStr=MCw2LDMsMiw0LDUsMSw4LDcsOQ%3D%3D">贴吧</a> <a href="盗墓笔记.jpg">图片</a> <a href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859?fr=aladdin">百科</a></td></tr> <tr><td>3</td><td>西游记</td><td><img src="红色上升箭头.jpg" width="10px"/><td>212</td><td>7654</td><td><a href="https://tieba.baidu.com/f?kw=%CE%F7%D3%CE%BC%C7&fr=ala0&loc=rec&dyTabStr=MCw2LDIsMyw0LDEsNSw4LDcsOQ%3D%3D">贴吧</a> <a href="西游记.jpeg">图片</a> <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723?fr=aladdin">百科</a></td></tr> <tr><td>4</td><td>东游记</td><td><img src="红色上升箭头.jpg" width="10px"/><td>23</td><td>76545</td><td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&dyTabStr=MCwyLDMsNiwxLDQsNSw3LDgsOQ%3D%3D&kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0">贴吧</a> <a href="东游记.jpg">图片</a> <a href="https://baike.baidu.com/item/%E4%B8%9C%E6%B8%B8%E8%AE%B0/15083?fr=aladdin">百科</a></td></tr> <tr><td>5</td><td>甄嬛传</td><td><img src="绿色下降箭头.jpg" width="10px"/><td>121</td><td>7676</td><td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E7%94%84%E5%AC%9B%E4%BC%A0&dyTabStr=MCwyLDMsNiwxLDQsNSw3LDgsOQ==">贴吧</a> <a href="甄嬛传.jpeg">图片</a> <a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B%E4%BC%A0/4701562?fr=aladdin">百科</a></td></tr> <tr><td>6</td><td>水浒传</td><td><img src="红色上升箭头.jpg" width="10px"/><td>576576</td><td>1231421</td><td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E6%B0%B4%E6%B5%92%E4%BC%A0&dyTabStr=MCwyLDYsNSwzLDQsMSw4LDcsOQ==t">贴吧</a> <a href="水浒传.jpeg">图片</a> <a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348?fromModule=lemma_sense-layer#viewPageContent">百科</a></td></tr> <tr><td>7</td><td>三国演义</td><td><img src="红色上升箭头.jpg" width="10px"/><td>345</td><td>123</td><td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89&dyTabStr=MCwyLDMsMSw2LDQsNSw4LDcsOQ==">贴吧</a> <a href="三国演义.jpg">图片</a> <a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782?fr=aladdin">百科</a></td></tr> </table>
实操效果如下
9.4 表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分在表格标签中，分别用: <thead>标签表格的头部区域、、<tbody>标签 表格的主体区域.这样可以更好的分清表格结构。
1.<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr> 标签一般是位于第一行
2.<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
3.以上标签都是放在 <table></table> 标签中
9.5 合并单元格
方式
演示如下
代码如下
<tr> <td colspan="3"></td> </tr>
表结构标签解析
代码如下
<table border="1" width="300px" height="200px" align="center" cellspacing="0"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
十. 列表标签
表格是用来显示数据的，那么列表就是用来布局的
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便根据使用情景不同，列表可以分为三大类:无序列表、有序列表和自定义列表
10.1 无序列表（重点）
<ul>标签表示 HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义无序列表的基本语法格式如下:
<ul>
<li>列表项1</1i>
<li>列表项2</1i>
<li>列表项3</1i>
. . .
</ul>
1.无序列表的各个列表项之间没有顺序级别之分，是并列的
2.<ul></ul>中只能嵌套 <li></li>直接在<u></u标签中输入其他标签或者文字的做法是不被允许的3.<li>与</i> 之间相当于一个容器，可以容纳所有元素
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置
10.2 有序列表（理解）
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML标签中，<0l>标签用于定义有序列表，列表排序以数字来显示，并且使用<i>标签来定义列表项有序列表的基本语法格式如下:
<o1>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
..
</o1>
1.<ol></ol>中只能嵌套<li></修，直接在<ol></o标签中输入其他标签或者文字的做法是不被允许的.
2. <li>与</li>之间相当于一个容器，可以容纳所有元素.
3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置
10.3 自定义列表
自定义列表的使用场景
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
ps：自定义列表和无序列表有什么差异
在HTML标签中，<dl>标签用于定义描述列表(或定义列表)，该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
1. <dl></dl>里面只能包含 <dt> 和 <dd>
2.<dt>和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。
10.4 总结
十一. 表单标签
目的: 收集信息
组成：
11.1 表单域
表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form action="url地址”method=“提交方式”name="表单域名称">各种表单元素控件
</form>
11.2 表单控件
11.2.1 <input> 标签
在英文单词中，input是输入的意思，而在表单元素中 <input> 标签用于收集用户信息在<input> 标签中，包含一个type属性，根据不同的 type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值" />
<input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
ps：<input> 标签 radio 要想实现多选一，必须设置相同的属性name值
1.name和value是每个表单元素都有的属性值主要给后台人员使用
2.name 表单元素的名字要求单选按钮和复选框要有相同的name值
3.checked属性主要针对于单选按钮和复选框 主要作用一打开页面,就要可以默认选中某个表单元素
4.maxlength是用户可以在表单元素输入的最大字符数一般较少使用
11.2.2 <label>标签
<label> 标签为input元素定义标注(签)
<label>标签用于绑定一个表单元素 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标转到或者选择对应的表单元素上用来增加用户体验
语法:
<label for="sex">男</label>
<input type="radio" name="sex"id="sex" />
核心: <label>标签的 for 属性应当与相关元素的id 属性相同
演示如下
11.2.3 <select> 标签
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
1.<select>中至少包含一对<option>
2.在<option>中定义selected =“selected”时，当前项即为默认选中项
11.2.4 <textarea> 标签（文本域)
语法：<textarea> </textarea>
1.通过<textarea>标签可以轻松地创建多行文本输入框
2.cols=“每行中的字符数”，rows=“显示的行数”我们在实际开发中不会使用,都是用 CSS 来改变大小
十二. 综合案例
实操演示如下
