零.前言
本文主要介绍列表、表格、块内元素、行内元素。
前置知识及常见标签使用，请见前章：
HTML（一）---【基础】-CSDN博客
HTML（二）---【常见的标签使用】-CSDN博客
一.<li>表内列表项
1.定义
<li>是双标签
<li>不单独使用，用于<ul>(无序列表)、<ol>(有序列表)、<menu>(菜单列表)中。
2.使用
<li>仅有一个属性(value)，该属性仅在<li>用于<ol>时指定列表项的起始值。
二.<ul>无序列表
1.定义
<ul>是双标签
<ul>需搭配<li>实现效果
2.使用
<ul>无属性。
<ul>
<li>我是一只狗</li>
<li>我是一只猫</li>
<li>我是一只猪</li>
</ul>
效果：
3.注意
可以使用CSS来美化<ul>。
<ul style="list-style-type:circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ul style="list-style-type:disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ul style="list-style-type:square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
效果：
三.<ol>有序列表
1.定义
<ol>是双标签
<ol>相较于<ul>最大的区别就是，对所有的列表项进行了编号处理，编号可以是：“数字”、“字母”。
2.使用
<ol>属性：
- “reversed”：编号是否逆序，例如：“987654321....”
- “start”：编号从哪里开始
- “type”：编号是字母形式还是数字形式
<ol type="A">
<li>我是一只猪</li>
<li>我是一只狗</li>
<li>我是一只猫</li>
</ol>
<ol start="50">
<li>我是一只猪</li>
<li>我是一只狗</li>
<li>我是一只猫</li>
</ol>
<ol reversed>
<li>我是一只猪</li>
<li>我是一只狗</li>
<li>我是一只猫</li>
效果：
四.<menu>无序列表
1.定义
<menu>是无序列表，本质上和<ul>并无不同，即使使用<menu>浏览器也会当做<ul>处理。
顾不再赘述。
五.<table>表格
5.0前言
因<table>表格一般与<tr>、<th>、<td>标签结合使用，故我们先介绍<tr>、<th>、<td>，最后再介绍<table>标签。
在<table>中，单元格被分为：“标题单元”、“数据单元”，分别由<th>、<td>来创建。
5.1<th>标题单元(表格头)
1.定义
<th>是双标签
<th>用来定义表格的标题单元(每一列的标题)，例如EXCEL中的标题单元。
2.注意
默认情况下，<th>的字体是粗体，并且居中。
3.使用
<table>
<tr>
<th>一月</th>
<th>二月</th>
<th>三月</th>
<th>四月</th>
<th>五月</th>
</tr>
</table>
效果：
5.2<td>表格列
1.定义
<td>是双标签
<td>用来创建数据单元，常与<tr>结合使用。
2.注意
默认情况下，<td>中的文本是普通且布局居左的。
3.使用
<table>
<tr>
<td>我是一只猪</td>
<td>我是一只猫</td>
<td>我是一只狗</td>
</tr>
<tr>
<td>我是一只猪</td>
<td>我是一只猫</td>
<td>我是一只狗</td>
</tr>
</table>
效果：
5.3<tr>表格行
1.定义
<tr>是双标签
<tr>的元素可以包含多个<th>、<td>标签
2.使用
<tr>的使用常与<th>、<td>一起使用，不可单独出现，这时是无意义的。
<tr>用来给表格插入一行。
<table>
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>￥3400</td>
</tr>
<tr>
<td>二月</td>
<td>￥4500</td>
</tr>
</table>
效果：
5.4<table>的使用
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
//创建CSS样式增加边框
<table>
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>￥3400</td>
</tr>
<tr>
<td>二月</td>
<td>￥4500</td>
</tr>
</table>
效果：
六.块元素和行元素【重要】
1.块元素定义
块元素在开始展示自己的内容时会另开一新行，当展示完自己的内容后，会自动换行。
这相当于在某个标签的开始和结尾处各加一个<br>标签
这在HTML页面展示上类似于一块一块的，故块元素由此而来。
例如：
<p>、<h1> ---- <h6>、<ul>、<table>等。
2.行元素定义
行元素在开始展示自己的内容时不会新开一行，而是延续当前位置向后扩展。
当展示完自己的内容后，也不会自动换行。
这在HTML上就是挤在一行的效果，故行元素由此而来。
例如：
<b>、<td>、 <a>、 <img>等。
七.<div>块布局容器
1.定义
<div>是双标签
<div>定义HTML文档的分割或部分(分区或小节)
<div>可以把HTML的布局分割成若干块，且块之间相互独立。
2.注意
在使用<div>时，强烈建议给每一个<div>标签加一个class属性或者id属性，方便使用CSS更改布局。
<div>是块元素，浏览器会自动在开始处和结束处换行。
3.使用
<div>的使用一般搭配CSS，旨在对页面的不同功能区域做一个细致划分，并且给它们应用不同的方式，使用<div>进行分割布局，将会变得高效且方便。
例如下面的例子，我们将创建一个div区域，用来展示某一个特定的区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>div 元素</h1>
<div class="myDiv">
<h2>这是 div 元素中的标题</h2>
<p>这是 div 元素中的一些文本。</p>
</div>
<p>这是 div 元素之外的一些文本。</p>
</body>
</html>
效果：
八.<span>行布局容器
1.定义
<span>是双标签
<span>常用来对某一行内容或者文档某一部分进行特殊处理(突出、强调)
2.使用
<span>常与CSS搭配使用。
<p>我真不是<span style="color: brown;">一头猪</span>！</p>
效果：
本文详细介绍了HTML中的关键标签，如