html元素
作者：互联网
html 列表元素和表格元素
- html快速入门
- html列表元素
- html表格
1.html快速入门
2.html列表元素
（1）有序列表：使用数字进行标记；开始标签：<ol> ；列表项标签： <li>
<html>
…
<body>
<h2>搜索引擎排名</h2>
<ol type="1">
<li>Google</li>
<li>Baidu</li>
<li>Bing</li>
<li>Sogou</li>
</ol>
</body>
</html>
显示界面如下：
列表类型 Type 取值：
| 取值 | 说明 |
| 1(默认) | 使用数字作为项目符号 |
| A/a | 使用大写/小写字母作为项目符号 |
| I/i | 使用大写/小写罗马数字作为项目符号 |
（2）无序列表：使用圆点进行标记；开始标签：<ul> ；列表项标签： <li>
<html>
…
<body>
<h2>软件编程语言</h2>
<ul type=”disc">
<li>Java</li>
<li>C++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
</body>
</html>显示界面如下：
列表类型 Type 取值：
| 取值 | 说明 |
| disc(默认) | 项目符号显示为实体圆心 |
| square | 项目符号显示为实体方心 |
| circle | 项目符号显示为空心圆 |
（3）自定义列表：开始标签：<dl> ；列表项标签：<dt> ；列表定义标签： <dd>
<html>
…
<body>
<h2>健康食品</h2>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>西兰花</dd>
<dd>菠菜</dd>
</dl>
</body>
</html>
显示界面如下：
3.html表格元素
（1）HTML 表格由 <table> 标签来定义
（2）每个表格包含若干行，由 <tr> 标签定义，每行被分割为若干单元格，由 <td> 标签定义
（3）数据单元格可以包含文本、图片、列表、表单、表格等
（4）表格内容精确的分组：
- <caption> 表格标题
- <thead> 表格头
- <tbody> 表格体
- <tfoot> 表格尾
（5）表格定义
<body>
<h2>用户信息表</h2>
<table border="1">
<tr>
<td>张三</td>
<td>23</td>
<td>上海</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>北京</td>
</tr>
</table>
</body>
显示界面如下：
（6）表格合并
- 属性 colspan 将多列合并成
<table border="1"> <tr> <td colspan=“3”>用户信息表</td> </tr> <tr> <td>张三</td> <td>23</td> <td>上海</td> </tr> <tr> <td>李四</td> <td>29</td> <td>北京</td> </tr> </table>显示界面如下：
- 属性 rowspan 将多行合并成一行
<table border="1"> <tr> <td colspan="3" >用户信息表</td> </tr> <tr> <td>张三</td> <td>23</td> <td rowspan="2">上海</td> </tr> <tr> <td>李四</td> <td>29</td> </tr> </table>显示界面如下：
（7）小说排行榜练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>《小说排行榜》练习</title>
</head>
<body>
<table border="1">
<caption><strong>小说排行榜</strong></caption>
<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="素材/images/up.jpg"></td>
<td>356</td>
<td>3560</td>
<td>
<a href="https://tieba.baidu.com/">贴吧 </a>
<a href="https://image.baidu.com/">百度 </a>
<a href="https://baike.baidu.com/">百科 </a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="素材/images/down.jpg"></td>
<td>356</td>
<td>3560</td>
<td>
<a href="https://tieba.baidu.com/">贴吧 </a>
<a href="https://image.baidu.com/">百度 </a>
<a href="https://baike.baidu.com/">百科 </a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="素材/images/up.jpg"></td>
<td>356</td>
<td>3560</td>
<td>
<a href="https://tieba.baidu.com/">贴吧 </a>
<a href="https://image.baidu.com/">百度 </a>
<a href="https://baike.baidu.com/">百科 </a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="https://tieba.baidu.com/">贴吧 </a>
<a href="https://image.baidu.com/">百度 </a>
<a href="https://baike.baidu.com/">百科 </a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="https://tieba.baidu.com/">贴吧 </a>
<a href="https://image.baidu.com/">百度 </a>
<a href="https://baike.baidu.com/">百科 </a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="https://tieba.baidu.com/">贴吧 </a>
<a href="https://image.baidu.com/">百度 </a>
<a href="https://baike.baidu.com/">百科 </a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="https://tieba.baidu.com/">贴吧 </a>
<a href="https://image.baidu.com/">百度 </a>
<a href="https://baike.baidu.com/">百科 </a>
</td>
</tr>
</tbody>
</table>
</body>
</html>显示界面如下：
标签：3560,表格,标签,元素,列表,html,nbsp 来源： https://blog.csdn.net/czswydsg/article/details/117451836