初学者必知的 HTML 标签
如果你正打算成为一名优秀的前端开发者，那么学习 HTML 绝对是首要任务。HTML，即超文本标记语言，是构建网页的基石。
HTML 由多种元素构成，比如标签、属性以及元素本身。今天，我们主要聚焦于 HTML 标签。HTML
标签的作用在于指导浏览器如何组织内容，例如标题、段落、图片等。简而言之，HTML
标签就像是关键字，定义了浏览器如何展示或格式化网页内容。
浏览器会按照从上到下的顺序解析 HTML 标签。一个网页可以包含的 HTML 标签数量没有限制。
- 所有 HTML 标签都包含在 <> 符号内。
- 每个 HTML 标签都有其特定的功能。
- 大多数 HTML 标签都成对出现，包含起始标签 <tag> 和结束标签 </tag>。
HTML 标签、HTML 元素与 HTML 属性
很多人可能会混用 HTML 标签和元素这两个术语。但是，它们之间存在区别吗？从技术角度来看，HTML
元素和 HTML 标签的确不同。
HTML 标签用于定义 HTML 元素。为了实现这个目标，内容会被包裹在起始和结束标签中，且标签名称与所使用的内容相匹配。
以下是一个 HTML 元素的例子：
<p> 这是一个段落 </p>
<p> 是一个 HTML 标签的示例。
HTML 属性则提供了关于 HTML 元素的额外信息，它们通常位于 HTML 元素内部。
以下是一个 HTML 属性的例子：
<button id="SubmitOrder" class="btn">下单</button>
每个人都应该知道的 HTML 标签
自从蒂姆·伯纳斯-李在 1993 年推出 HTML
以来，这种标记语言已经经历了多年的发展。最初的 HTML 版本只有 18 个标签。每个
HTML 版本都会添加新的标签；最近的一次更新是 2014 年的 HTML5。
通过比较 HTML 和 HTML5，你会发现后者引入了诸如
<article>、<header> 和 <footer> 等语义化标签，这些标签能更清晰地描述内容。现在，我们有超过
100 个 HTML 标签。以下是一些你应当了解的常用标签：
<!DOCTYPE>
<!DOCTYPE>
技术上不是一个标签，它是一个声明，告知浏览器将加载哪种文件类型。这个声明告诉浏览器将要加载的
HTML 版本。
在 HTML5 中，你可以这样声明文件：
<!DOCTYPE html>
或者：
<!doctype html>
注意：这个声明没有结束标签，且不区分大小写。
<html> </html>
<html> … </html> 标签位于 <!DOCTYPE> 标签之后。这个标签定义了文档为网页，所有其他元素都嵌套在其中。
<html>
标签标识了 HTML 文档的开始和结束。
<html> 标签表示如下：
<html>内容</html>
<head> </head>
HTML 文档的头部部分由 <head> 标签表示。这个标签包含在 <html>
标签内，并提供关于网页的整体信息。
<head>
标签包含其他提供网页详细信息的标签，例如页面标题和作者。该标签的内容不会显示在网页上。
这是 <head> 标签的语法：
<head> …….. </head>
<title> </title>
<title> 标签声明了网页的标题。这个标签包含在 <head> 标签内。
<title>
标签会显示在浏览器窗口的标题栏或选项卡上，但不会显示在实际网页上。
<title> 标签的语法是：
<title>HTML 初学者标签</title>
当它位于 <head> 标签内时，它将显示为：
<head> <title>HTML 初学者标签</title> </head>
<body> </body>
<body> 标签显示了网页上所有可见的内容。图片、链接、纯文本、视频等都可以在
<body> 和 </body> 标签内找到。
你还会在 <body>
中找到其他一些标签，比如用于段落的 <p> 标签，用于图片的 <img>
标签，用于粗体文本的 <strong> 标签，以及用于有序列表的 <ol>
标签等等。
<body> 标签的语法是：
<body> 内容 </body>
<h1> 到 <h6> 标签
一个 HTML 文档中最多可以有 6 个标题标签。每个标签都由从 1 到 6 的数字表示，如
<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。
<h1> 是最大的标题标签，而 <h6> 是最小的。
在 HTML 文档中，标题标签可以表示如下：
<h1>标题 1</h1> <h2>标题 2</h2> <h3>标题 3</h3> <h4>标题 4</h4> <h5>标题 5</h5> <h6>标题 6</h6>
<h1> 到 <h6> 标签包含在 <body> 标签内。
例如，一个 <h1> 标签将会被包含为：
<body> <h1> 这是一个标题 1 </h1> </body>
<p> </p>
<p>
，即段落标记，用于将内容结构化为段落。在代码编辑器中点击 HTML 文档的“输入”键并不会创建新的段落。
如果想要多个段落，你必须在文档中使用多个 <p> 标签。段落标签应该包含在
<body> 标签中。
段落标签的语法是：
<p> ….这里是一些内容….</p>
如果你想要有四个段落，你的代码将会被构建为：
<body> <p>第一个段落的内容。</p> <p>第二个段落的内容。</p> <p>第四个段落的内容。</p> </body>
<b> </b>
<b> </b>，即粗体标记，会将起始 <b> 和结束 </b>
标签之间的任何内容格式化为粗体。
粗体标签可以位于标题（例如 <h1>）之间，甚至可以位于段落标签内。
以下是粗体标签的例子：
<b> 粗体标签 </b>
短语“粗体标签”将显示为粗体。
<h1>保持冷静，<b>第五版</b>，获胜者版</h1>
第五版将会被加粗。
<i> </i>
斜体标签，由 <i> 表示，会将标签内的文本显示为斜体。
例如，如果我们有：
<i> 这是斜体字 </i>
“这是斜体字”这个词将显示为斜体。
<u> </u>
下划线标记，或 <u>，用于在 HTML 文档中为特定文本添加下划线。
例如，如果我们有：
<u> 为这些词添加下划线 </u>
标签之间的短语将会被添加下划线。
<center> </center>
中心标记 <center> 用于将内容置于 HTML 文档的中心。
例如，如果我们有一个 h2 标签写为
在 HTML 中居中内容
，我们可以这样居中：
<center> <h2> 在 HTML 中居中内容 </h2> </center>
<span> </span>
Span 标签 <span> 是一个通用的内联容器，没有默认样式。你可以使用 span
标签对需要设置样式的文本进行分组。
你可以在其他标签内跨越标签，例如标题和段落：
<h2> 学习HTML <span>来自专家</span>并为市场做好准备</h2>
<p> 学习HTML <span>来自专家</span>并为市场做好准备</p>
<div> </div>
分区标签，即 <div>，是一种允许你对 HTML 文档中的不同标签进行分组的标签。
可以为 div 标签指定一个 “类” 以使用 CSS 添加外部样式。
这是一个包含 h1、h2 和段落标签的 div 的表示方式。
<div> <h1> 学习 HTML </h1> <h2> HTML 标签 </h2> <p> HTML 是一种标记语言…… </p> </div>
<em> </em>
强调标签，即 <em> 标签，用于强调 HTML 文档中的某些词语。
<em> 标签之间的内容将显示为倾斜或斜体。
在段落中强调的内容在代码编辑器中会显示为：
<p> 会议将在 <em> 08:00 </em> 开始，请准时到达 </p>
<sup> </sup>
<sup>
，即上标标签，允许包含的文本位于其余部分之上。一个很好的例子是你想要表示一个数字
X 的平方，即 X²。
段落标记中 <sup> 的语法将会是：
<H1>哈维斯<sup>TM</sup>有限公司</H1>
<sub> </sub>
下标标签，即 <sub>，与上标标签相反。<sub>
标签中的内容将出现在正常文本行的下方。一个完美的例子是将水的化学式写成 H₂O。
下标标签的语法是：
请记住，H <sub> 2 </sub> 0 是水的化学式
<br>
<br>
是一个自闭合标签，代表换行。 <br>
之后的所有内容将另起一行。
段落中 <br> 的语法是：
<p> HTML 是超文本标记语言的缩写 <br> 关于它是否是一种编程语言一直存在争议 <br> 然而，我们不能低估它的重要性 <br> HTML 现在已被超过 95% 的网站使用 </p>
<ol> </ol> 和 <li> </li>
有序列表标记，即 <ol>，必须与另一个标记一起使用，比如 <li>。
两者可以在代码编辑器中表示为：
<ol> <li> 亚洲 </li> <li> 非洲 </li> <li> 欧洲 </li> </ol>
在浏览器上呈现时，内容将显示为编号列表。
<img src=””/>
你可能想要添加图像来提高视觉吸引力，或者添加一个标志。在这种情况下，自闭合的图像标签
<img src=””/> 将会派上用场。
图像标签的语法是：
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
引号中的内容代表源 URL。
总结
HTML 标签超过 100 个，但以上这些是你作为初学者应该了解的。大多数代码编辑器都支持
HTML，所以你可以放心地开始学习，不会出错。