HTML 中的容器标签和空标签
HTML 使用预定义标签来指示浏览器如何显示内容。标签只不过是一些用尖括号括起来的指令(例如 <>)。尽管标签在网站上随处可见，但许多访问者常常不清楚某个标签是容器标签还是空标签。他们之所以感到困惑，是因为他们不确定除了开始标签之外，哪些标签还需要结束标签。HTML 中有两种不同的标签类别 -
空
容器
现在，让我们深入研究本文，以便更好地理解 HTML 中的容器标签和空标签。我们将逐一讨论
HTML 容器标签
容器标签通常包含三个部分 - 开始标签、内容(浏览器将显示的内容)和结束标签。它们可能还会在内容部分包含一些额外的标签。这些开始和结束标签(也称为 ON 和 OFF 标签)成对使用，分别称为开始标签和结束标签。如果您忽略了关闭容器标签，浏览器将继续使用开始标签的效果，直到页面结束。因此，使用容器标签时务必谨慎。HTML 中的大多数标签都是由容器标签构成的。
语法
遵循 HTML 容器标签的语法
<tagname>….</tagname>
常用标签
让我们来看看 HTML 中常用的容器标签
基本标签
这些标签用于构成网页的结构。
<html>…</html> − 这表示网页的开始和结束，并表明它是一个 HTML 文档。这包括用于创建网页的所有其他标签以及位于这些标签之间的标签。
<head>..</head> − 此标签用于指定文档的头部部分，其中包含与网页相关的数据。
<title>..</title> − 此标签存储网页的描述;这些标签中提供的任何信息都会在浏览器打开标签页时显示在标签页名称上。head 标签中对此进行了描述。
<body>..</body> − 此标签用于向浏览者显示网页上的所有信息或数据，包括文本、图片、超链接、视频等。
标题
此标签用于创建网页中的标题。
<h1>…</h1>至 <h6>…</h6> − 此标签用于包含不同大小的页眉，范围从 1 到 6。
文本格式化程序
此标签用于网页中的文本格式化。
<p>….</p> − 此标签用于包含用户需求的段落。
<b>….</b> − 此标签用于使包含的文本变为粗体。
<i>…</i> − 此标签用于使包含的文本变为斜体。
超链接
此标签用于在网页中定义超链接
<a href="link">…</a> − <a...>...</a>标签用于在链接到其他网页时添加指向其他网页的超链接。
按钮标签
此标签用于在网页上创建可点击的按钮。
<button>…</button> − 此标签的主要应用是操作，通过添加事件和许多其他方法来实现。
分区标签
此标签用于在网页。
<div>…</div> − 这描述了文档中的某个部分。使用 <div>…</div>标签，可将网页拆分成不同的部分。
脚本标签
此标签用于向网页添加 JavaScript。
<script>..</script> − 指定用于与网页交互的 JavaScript 代码。
列表
此标签用于将数据格式化为有序列表或无序列表。
<ol>…</ol> − 用于创建有序列表。
<ul>…</ul> − 用于创建无序列表。
<li>…</li> − 用于添加列表项。
示例
以下是我们将在网页中使用容器标签的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Containe Tags</title>
</head>
<body>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
<p>Add the text of yor wish. which looks like a paragraph.</p>
<h4> Link </h4>
<a href="https://www.cainiaomax.com/index.htm">TutorialsPoint</a>
<ol>
<li>ListItem1</li>
<li>ListItem2</li>
<li>ListItem3</li>
<li>ListItem4</li>
</ol>
</body>
</html>
执行上述代码后，输出窗口将会弹出，显示网页上标签之间的所有内容。
HTML 空标签
空标签是指没有结束标签的标签。空标签即使只有开始标签，也会在网页上执行某些操作。
语法
以下是 HTML 空标签的语法
<tagname>
现在，让我们来看看 HTML 中一些常用的空标签。
<br> − 用于在网页中用户需要的位置插入换行符。
<hr> − 用于在网页中需要的位置插入水平线。
<img> − 此标签用于在网站上显示标签 src 属性中指定的图像。
<input> − 这主要用于表单来收集用户输入，我们也可以指定输入的类型。
<link> − 主要用于在将我们的 CSS 存储在外部文件中，因为它可能用于将其他外部文件和文档链接到网页。
<meta> − 包含网页的所有元数据。head 标签描述的是元数据，即关于数据的数据。
<source> − 当需要在网页上添加外部媒体源时。任何媒体源，包括音频、视频等，都可以使用 source 标签添加到我们的网站。
示例
请考虑以下示例，我们将在网页中使用空标签。
<!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">
</head>
<body>
<hr>
<p>Welcome To The TutorialsPoint</p>
<hr>
<p>Line <br>Break </p>
<img src="https://www.cainiaomax.com/images/logo.png?v2" alt="Logo" width="150" height="20">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
</form>
<video width="320" height="240" controls>
<source src="https://player.vimeo.com/external/415068616.hd.mp4?s=e6dc106b7cccb956aa1d00d705e440977290df18&profile_id=174&oauth2_token_id=57447761.mp4" type="video/mp4">
</video>
</body>
</html>
运行上述代码后，会弹出输出窗口，显示我们使用的网页上所有空标签的内容。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
