零.前言
本文主要介绍列表、表格、块内元素、行内元素。
前置知识及常见标签使用,请见前章:
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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/491204dbc7545eb3416f983c8735c779.png)
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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/242fad7e39abcbcc98b4cb8449ce68f4.png)
三.<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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/d8e8e8e5ec992f5abe79d2026fbcee9f.png)
四.<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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/2fcf40a6bab5928a0c690aa9fd4c2445.png)
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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/529a924f6ebf1d8f478889d34e10ccc8.png)
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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/e9c9d914162b4878feea8c9310e7fb41.png)
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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/bda5df634797c08d2c1e0ed89dc802db.png)
六.块元素和行元素【重要】
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>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/40e802f570e54b7ac98dbd07a234ba59.png)
八.<span>行布局容器
1.定义
<span>是双标签
<span>常用来对某一行内容或者文档某一部分进行特殊处理(突出、强调)
2.使用
<span>常与CSS搭配使用。
<p>我真不是<span style="color: brown;">一头猪</span>!</p>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/83f18eaa224da97ce0a0f846f02ba1c0.png)