嵌套元素

舍予轻尘

元素可以放置在其他元素内。这称为嵌套。如果要声明我们的猫非常脾气暴躁，可以将单词非常包装在一个<strong>元素中，这意味着该单词应具有更强的文本格式：

<p>My cat is <strong>very</strong> grumpy.</p>

嵌套有对与错的方法。在上面的示例中，我们p首先打开了元素，然后打开了strong元素。为了正确嵌套，我们应该先关闭strong元素，然后再关闭p。

以下是错误的嵌套方法示例：

<p>My cat is <strong>very grumpy.</p></strong>

该标签具有密切的方式，他们是内部或外部彼此开。上面示例中的重叠部分使浏览器不得不猜测您的意图。这种猜测可能会导致意外结果。

块与内联元素

在HTML中，有两个重要的元素类别：块级元素和内联元素。

• 块级元素在页面上形成可见块。块级元素将在其前面的内容之后的新行中显示。块级元素之后的任何内容也会出现在新行中。块级元素通常是页面上的结构元素。例如，块级元素可能表示标题，段落，列表，导航菜单或页脚。一个块级元素不会嵌套在一个内联元素内，但是可能会嵌套在另一个块级元素内。
• 内联元素包含在块级元素内，并且仅围绕文档内容的一小部分（而不是整个段落或内容分组）。内联元素不会导致新行出现在文档中。它通常与文本一起使用，例如，<a>元素创建超链接，而元素例如<em>或<strong>创建强调。
  

考虑以下示例：

<em>first</em><em>second</em><em>third</em><p>fourth</p><p>fifth</p><p>sixth</p>

<em>是一个内联元素。如下所示，前三个元素位于同一行上，中间没有空格。另一方面，<p> 是块级元素。每个p元素都显示在新行中，在上方和下方都有空格。（该间距是由于浏览器适用于段落的默认CSS样式所致。）

注意：HTML5重新定义了元素类别：请参阅元素内容类别。尽管这些定义比其前身更准确，更不模糊，但新的定义要比block和inline复杂得多。本文将保留这两个术语。

注意：本文中使用的术语“块”和“内联”不应与具有相同名称的CSS盒的类型相混淆。尽管名称在默认情况下是相关的，但是更改CSS显示类型不会更改元素的类别，也不会影响它可以包含哪些元素以及可以包含在哪些元素中。HTML5删除这些术语的原因之一是为了防止这种相当普遍的混乱。

注意：查找有用的参考页，其中包括block和inline元素的列表。请参阅块级元素和内联元素。

空元素

并非所有元素都遵循开始标签，内容和结束标签的模式。有些元素由单个标签组成，通常用于在文档中插入/嵌入某些内容。例如，该<img>元素将图像文件嵌入到页面上：

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

这将输出以下内容：