页面组成元素

从平常浏览网页的经验中得知，绝大部分页面都是由以下 4 种元素组成的。

文本
图片
超链接
音频和视频

HTML 文本

先来看一个纯文本的网页（如下图所示）。

通过对该网页进行分析，我们可以知道在这一章中至少要学习以下 6 个方面的内容。

标题标签
段落标签
换行标签
文本标签
水平线标签
特殊符号

标题标签

对于一个 HTML 页面来说，一般都会有着各种级别的标题。

在 HTML 中，共有 6 个级别的标题标签：h1、 h2 、h3、 h4 、h5、 h6 。其中 h 是 header 的缩写。6 个标题标签在页面中的重要性是有区别的，其中 h1 标签的重要性最高，h6 标签的重要性最低。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>正心全栈编程 - 标题标签</title>
  </head>
  <body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
  </body>
</html>

浏览器预览效果如下图所示。

从预览图可以看出，标题标签的级别越大，字体也越大。标题标签 h1~h6 也是有一定顺序的。在一个 HTML 页面中，这 6 个标题标签不需要全部都用上，而是根据你的需要来决定。

段落标签

段落标签是 paragraph 的缩写，在 HTML 中，我们可以使用 p 标签来显示一段文字。

语法：

html

<p>段落内容</p>

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>段落标签</title>
  </head>
  <body>
    <h3>爱莲说</h3>
    <p>
      水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
    </p>
    <p>
      予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人?
      牡丹之爱，宜乎众矣。
    </p>
  </body>
</html>

浏览器预览效果如下图所示。

爱莲说

水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。

予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。

从上面的预览效果可以看出，段落标签会自动换行，并且段落与段落之间有一定的间距。

如果想要改变文字的颜色和大小，需要用 CSS 设置文字的颜色和大小。在后面的内容里我们会进行学习。

换行标签

段落标签是会自动换行的。如果想要随意地对文字进行换行处理就需要使用换行标签。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>换行标签</title>
  </head>
  <body>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
  </body>
</html>

浏览器预览效果如下图所示。

静夜思

床前明月光，疑是地上霜。举头望明月，低头思故乡。

如果想对上面的诗句进行换行，有那么两种方法：要么使用两个 p 标签；要么使用 br 标签。

在 HTML 中，我们可以使用 br 标签来给文字换行。其中 <br/> 是自闭合标签， br 是break（换行）的缩写。

举例：使用两个 p 标签

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
  </body>
</html>

浏览器预览效果如下图所示：

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

举例：使用 br 标签

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>换行标签</title>
  </head>
  <body>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。</p>
  </body>
</html>

浏览器预览效果如下图所示。

静夜思

床前明月光，疑是地上霜。
举头望明月，低头思故乡。

分析：

从上面两个例子可以明显看出：使用 p 标签会导致段落与段落之间有一定的间隙，而使用 br 标签则不会。

br 标签是用来给文字换行的，而 p 标签是用来给文字分段的。如果你的内容是两段文字，则不需要使用 br 标签换行那么麻烦，而是直接用两个 p 标签就可以了。

文本标签

在 HTML 中，可以使用“文本标签”来对文字进行修饰，例如粗体、斜体、上标、下标等。常用的有 8 种文本标签。

粗体标签：strong、b
斜体标签：i、 em 、cite
上标标签：sup
下标标签：sub
中划线标签：s
下划线标签：u
大字号标签：big
小字号标签：small

1、粗体标签

在 HTML 中，使用“strong 标签”或“b 标签”来对文本进行加粗。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>粗体标签</title>
  </head>
  <body>
    <p>这是普通文本</p>
    <strong>这是粗体文本</strong><br />
    <b>这是粗体文本</b>
  </body>
</html>

浏览器预览效果如下图所示。

这是普通文本

这是粗体文本
这是粗体文本

分析：

从预览图可以看出，strong 标签和 b 标签的加粗效果是一样的。不过在实际开发中，如果想要对文本实现加粗效果，尽量使用 strong 标签，而不要使用 b 标签。这是因为 strong 标签比 b 标签更具有语义性。

此外，大家可以尝试把上面代码中的 <br/> 去掉，再看看预览效果是怎样的。

2、斜体标签

在 HTML 中，可以使用 i 标签、em 标签和 cite 标签来实现文本的斜体效果。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>斜体标签</title>
  </head>
  <body>
    <i>斜体文本</i><br />
    <em>斜体文本</em><br />
    <cite>斜体文本</cite>
  </body>
</html>

浏览器预览效果如下图所示。

斜体文本
斜体文本
斜体文本

在实际开发中，如果想要实现文本的斜体效果，尽量使用 em 标签，而不是 i 标签或 cite 标签。这也是因为 em 标签比其他两个标签的语义性更好。

此外，大家可以尝试把上面代码中的 <br/> 去掉，再看看预览效果是怎样的。

3、上标标签

在 HTML 中，可以使用“sup标签”来实现文本的上标效果。sup ，是 superscripted（上标）的缩写。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>上标标签</title>
  </head>
  <body>
    <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
  </body>
</html>

浏览器预览效果如下图所示。

(a+b)²=a²+b²+2ab

如果你想要将某个数字或某些文字变成上标效果，只要把这个数字或文字放在标签内就可以了。

4、下标标签

在 HTML 中，可以使用“sub标签”来实现文本的下标效果。 sub ，是 subscripted（下标）的缩写。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>下标标签</title>
  </head>
  <body>
    <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
  </body>
</html>

浏览器预览效果如下图所示。

H₂SO₄指的是硫酸分子

如果想要将某个数字或某些文字变成下标效果，只要把这个数字或文字放在标签内就可以了。

5、中划线标签

在 HTML 中，可以使用“s 标签”来实现文本的中划线效果。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>删除线标签</title>
  </head>
  <body>
    <p>新鲜的新西兰奇异果</p>
    <p><s>原价:￥6.50/kg</s></p>
    <p><strong>现在仅售：￥4.00/kg</strong></p>
  </body>
</html>

浏览器预览效果如下图所示。

新鲜的新西兰奇异果

~~原价:￥6.50/kg~~

现在仅售：￥4.00/kg

中划线效果一般用于显示那些不正确或者不相关的内容，常用于商品促销的标价中。

不过等学了 CSS 之后，对于删除线效果，一般用 CSS 来实现，几乎不会用 s 标签来实现。

6、下划线标签

在 HTML 中，可以使用“u 标签”来实现文本的下划线效果。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>下划线标签</title>
  </head>
  <body>
    <p><u>正心全栈编程</u>是一个做编程教学的自媒体。</p>
  </body>
</html>

正心全栈编程是一个做编程教学的自媒体。

等学了 CSS 之后，对于下划线效果，一般用 CSS 来实现，几乎不会用 u 标签来实现。

7、大字号标签和小字号标签

在 HTML 中，可以使用“big标签”来实现字体的变大，还可以使用“small标签”来实现字体的变小。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>big标签和 `small` 标签</title>
  </head>
  <body>
    <p>普通字体文本</p>
    <big>大字号文本</big><br />
    <small>小字号文本</small>
  </body>
</html>

浏览器预览效果如下图所示。

普通字体文本

小字号文本

在实际开发中，对于字体大小的改变，我们几乎不会用 big 标签和 small 标签来实现，而是使用 CSS 来实现，因此只需要简单了解一下即可。

水平线标签

在 HTML 中，可以使用“hr 标签”来实现一条水平线。 hr ，是 horizon（水平线）的缩写。

语法：

html

<hr />

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>水平线标签</title>
  </head>
  <body>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr />
    <h3>春晓</h3>
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
  </body>
</html>

浏览器预览效果如下图所示。

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。

夜来风雨声，花落知多少。

在大多数网页中有不少的水平线效果，其实都可以使用 hr 标签来实现的。

div 标签

在 HTML 中，可以使用“div 标签”来划分 HTML 结构，从而配合 CSS 来整体控制某一块的样式。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>div标签</title>
  </head>
  <body>
    <!--这是第一首诗-->
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr />
    <!--这是第二首诗-->
    <h3>春晓</h3>
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
  </body>
</html>

浏览器预览效果如下图所示。

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。

夜来风雨声，花落知多少。

对于上面这段代码，我们发现 HTML 代码结构比较凌乱。那么接下来，我们可以使用“div标签”来划分一下区域，代码如下：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>div标签</title>
  </head>
  <body>
    <!--这是第一首诗-->
    <div>
      <h3>静夜思</h3>
      <p>床前明月光，疑是地上霜。</p>
      <p>举头望明月，低头思故乡。</p>
    </div>
    <hr />
    <!--这是第二首诗-->
    <div>
      <h3>春晓</h3>
      <p>春眠不觉晓，处处闻啼鸟。</p>
      <p>夜来风雨声，花落知多少。</p>
    </div>
  </body>
</html>

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。

夜来风雨声，花落知多少。

这两段代码的预览效果是一样的，不过实际代码却不一样。使用 div 标签来划分区域，使得代码更具有逻辑性。当然，div 标签最重要的用途是划分区域，然后结合 CSS 针对该区域进行样式控制。

自闭合标签

在前面的学习中，我们接触的大部分标签都是成对出现的，这些标签都有一个“开始符号”和一个“结束符号”。不过细心的小伙伴也发现了，有些标签是没有结束符号的，例如<br /> 和 <hr /> 。

在 HTML 中，标签分为两种：一般标签和自闭合标签。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>自闭合标签</title>
  </head>
  <body>
    <div>
      <h3>正心全栈编程</h3>
      <hr />
      <p>“是一个做编程教学的自媒体”</p>
    </div>
  </body>
</html>

效果如下：

正心全栈编程

“是一个做编程教学的自媒体”

div 标签的“开始符号”和“结束符号”之间是可以插入其他标签或文字的，但是 meta 标签和 hr 标签中是不能插入其他标签或文字的。

现在我们来总结一下“一般标签”和“自闭合标签”的特点。

一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。
自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

需要注意的是，在 HTML5 标准中，自闭合标签中的“/”，加与不加都是可行的。小伙伴们不需要纠结这一点。

在 HTML 中，常见的自闭合标签如下表所示。

标签	说明
`<meta />`	定义网页的信息（供搜索引擎查看）
`<link />`	引入“外部 `CSS` 文件”
`<br />`	换行标签
`<hr />`	水平线标签
`<img />`	图片标签
`<input />`	表单标签

块元素和行内元素

块元素和行内元素，是 HTML 中极其重要的概念，同时也是学习 CSS 的重要基础知识。对于这一节的内容，需要重点掌握。

在之前的学习中：在浏览器预览效果，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如 p、 div、hr 等。而有些元素不是独占一行的，其他元素可以跟这个元素位于同一行，如 strong、em 等。特别注意一下，这里所谓的“独占一行”，并不是在 HTML 代码里独占一行，而是在浏览器显示效果中独占一行。

提示

标签，也叫“元素”，例如 p 标签又叫 p 元素。叫法不同，意思相同。这一节使用“元素”来称呼，也是让大家熟悉这两种叫法。

在 HTML 中，根据元素的表现形式，一般可以分为两类（暂时不考虑 inline-block ）。

块元素（block）
行内元素（inline）

块元素

在 HTML 中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。

块元素	说明
h1~h6	标题元素
p	段落元素
div	div 元素
hr	水平线
ol	有序列表
ul	无序列表

上表列举的是 HTML 入门阶段常见的块元素，而并不是全部。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>块元素和行内元素</title>
  </head>
  <body>
    <div>
      <h3>正心全栈编程</h3>
      <p>“是一个做编程教学的自媒体。”</p>
      <strong>正心全栈编程</strong>
      <em>“是一个做编程教学的自媒体。”</em>
    </div>
  </body>
</html>

浏览器预览效果如下图所示：

正心全栈编程

“是一个做编程教学的自媒体。”

正心全栈编程“是一个做编程教学的自媒体。”

分析：

上面为每一个元素加入虚线框来分析它们的结构，从中我们可以很容易得出以下结论。

h3 和 p 是块元素，它们的显示效果都是独占一行的，并且排斥任何元素跟它们位于同一行； strong 和 em 是行内元素，即使代码不是位于同一行，它们的显示效果也是位于同一行的（显示效果跟你代码是否位于同一行没有关系）。
h3、 p 、strong 和 em 元素都是在 div 元素内部的，也就是说，块元素内部可以容纳其他块元素和行内元素。

由此，我们可以总结出块元素具有以下两个特点。

块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
块元素内部可以容纳其他块元素和行内元素。

行内元素

在 HTML 中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。

行内元素	说明
strong	粗体元素
em	斜体元素
a	超链接
span	常用行内元素，结合 `CSS` 定义样式

对于行内元素效果，可以看块元素的例子，从这个例子我们可以总结出行内元素具有以下两个特点。

行内元素可以与其他行内元素位于同一行。
行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

块元素和行内元素非常复杂，大家在这一节重点理解其概念就行了，而不需要去记忆块元素有哪些、行内元素有哪些。

特殊符号

网页中的“空格”

在网页排版中，为了让段落美观一些，我们都会让每一个段落首行缩进两个字的空格。不过在默认情况下，p 标签的段落文字“首行”是不会缩进的，先来看一个例子。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>网页中的“空格”</title>
  </head>
  <body>
    <h3>爱莲说</h3>
    <p>
      水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
    </p>
    <p>
      予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人?
      牡丹之爱，宜乎众矣。
    </p>
  </body>
</html>

浏览器预览效果如下图所示。

爱莲说

予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。

如果想要让每一个段落首行都缩进两个字的距离，我们可能会想通过在代码中按下 “space键” 来实现。事实上，这是无效的做法。在 HTML 中，空格也是需要用代码来实现的。空格的代码是 。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>网页中的“空格”</title>
  </head>
  <body>
    <h3>爱莲说</h3>
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
    </p>
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人?
      牡丹之爱，宜乎众矣。
    </p>
  </body>
</html>

浏览器预览效果如下图所示。

爱莲说

予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。

分析：

其中，1 个汉字约等于 3 个  。因此如果想要往 p 标签内加入 2 个空格，那么我们需要往 p 标签内加入 6 个  。

网页中的“特殊符号”

经常使用 Word 的小伙伴都知道，当没法使用输入法来输入某些字符（如欧元符号€、英镑符号￡等）时，我们可以通过 Word 内部提供的特殊字符来辅助插入。不过对于一个网页来说，就完全不是这么一回事了。

在 HTML 中，如果想要显示一个特殊符号，也是需要通过代码形式来实现的。这些特殊符号对应的代码，都是以“&”开头、并且以“;”（英文分号）结尾的。这些特殊符号，可以分为两类。

特殊符号	说明	代码
`"`	双引号（英文）	`"`
`‘`	左单引号	`‘`
`’`	右单引号	`’`
`×`	乘号	`×`
`÷`	除号	`÷`
`>`	大于号	`>`
`<`	小于号	`<`
`&`	“与”符号	`&`
`—`	长破折号	`—`
\|	竖线	`\|`

特殊符号	说明	代码
`§`	分节符	`§`
`©`	版权符	`©`
`®`	注册商标	`®`
`™`	商标	`™`
`€`	欧元	`€`
`£`	英镑	`£`
`¥`	日元	`¥`
`°`	度	`°`

从上面我们可以知道：实际上，空格也是一个特殊符号。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>特殊符号</title>
  </head>
  <body>
    <p>欧元符号：&euro;</p>
    <p>英镑符号：&pound;</p>
  </body>
</html>

浏览器预览效果如下图所示：

欧元符号：€

英镑符号：£

分析：

这个例子的特殊符号效果，使用下面的代码同样能够实现，浏览器预览效果是一样的。

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>特殊符号</title>
  </head>
  <body>
    <p>欧元符号：€</p>
    <p>英镑符号：￡</p>
  </body>
</html>

对于这一节，我们只需要记忆“空格”这一个特殊符号就行了，其他特殊符号不需要记忆，等需要时再回这里查一下就可以了。

页面组成元素 ​

HTML 文本 ​

标题标签 ​

段落标签 ​

爱莲说

换行标签 ​

静夜思

静夜思

静夜思

文本标签 ​

水平线标签 ​

静夜思

春晓

div 标签 ​

静夜思

春晓

静夜思

春晓

自闭合标签 ​

正心全栈编程

块元素和行内元素 ​

块元素 ​

正心全栈编程

行内元素 ​

特殊符号 ​

网页中的“空格” ​

爱莲说

爱莲说

网页中的“特殊符号” ​

页面组成元素

HTML 文本

标题标签

段落标签

换行标签

文本标签

水平线标签

div 标签

自闭合标签

块元素和行内元素

块元素

行内元素

特殊符号

网页中的“空格”

网页中的“特殊符号”