块与内联元素部分
HTML中有两个重要的元素类别，您应该了解它们。它们是块级元素和内联元素。
- 块级元素在页面上形成一个可见的块 - 它们将显示在前面的任何内容的新行上，并且在它之后的任何内容也将出现在新行上。块级元素往往是页面上的结构元素，例如，段落，列表，导航菜单，页脚等。块级元素不会嵌套在内联元素中，但它可能嵌套在内部另一个块级元素。
- 内联元素是包含在块级元素中的元素，仅包含文档内容的小部分，而不是整个段落和内容分组。内联元素不会导致新行出现在文档中; 它们通常出现在文本段落中，例如
<a>元素（超链接）或强调元素，如<em>或<strong>。
采用以下示例：
<em>first</em><em>second</em><em>third</em> <p>fourth</p><p>fifth</p><p>sixth</p><em>是一个内联元素，如下所示，前三个元素位于同一条线上，两者之间没有空格。另一方面，<p> 是一个块级元素，因此每个元素都出现在一个新行上，每个元素的上方和下方都有空格（间距是由于浏览器应用于段落的默认CSS样式）。
注意：HTML5重新定义了HTML5中的元素类别：请参阅元素内容类别。虽然这些定义比以前更准确，更模糊，但它们比“阻塞”和“内联”更难理解，因此我们将在整个主题中坚持这些定义。
注意：本主题中使用的术语“块”和“内联”不应与具有相同名称的CSS框的类型相混淆。虽然它们默认关联，但更改CSS显示类型不会更改元素的类别，也不会影响它可以包含哪些元素以及可以包含哪些元素.HTML5删除这些术语的原因之一是防止这种相当常见的混乱。
属性编辑部分
元素也可以具有如下属性：
属性包含有关您不希望在实际内容中显示的元素的额外信息。在这种情况下，该class属性允许您为元素提供一个标识名称，以后可以使用该名称来定位具有样式信息和其他内容的元素。
属性应该具有：
- 它与元素名称之间的空格（如果元素已具有一个或多个属性，则为前一个属性。）
- 性名称，后跟等号。
- 一个属性值，包含打开和关闭引号标记。
主动学习：添加属性元素科
元素的另一个例子是<a>- 这代表“锚”并且将它包裹的文本片段变成超链接。这可以采用许多属性，但有几个属性如下：
href：此属性将您希望链接指向的Web地址指定为其值; 单击链接时浏览器导航到的位置。例如，href="https://www.mozilla.org/"。title：该title属性指定有关链接的额外信息，例如您要链接到的页面。例如，title="The Mozilla homepage"。这将在悬停时显示为工具提示。target：该target属性指定将用于显示链接的浏览上下文。例如，target="_blank"将在新选项卡中显示该链接。如果要在当前选项卡中显示链接，请忽略此属性。
编辑输入区域中的下面一行，将其转换为您喜爱的网站的链接。首先，添加<a>元素。其次，添加href属性和title属性。最后，指定target属性以在新选项卡中打开链接。您将能够在“ 输出”区域中实时查看更改。您应该看到一个链接，当悬停时显示title属性的内容，并在单击时导航到href元素中的Web地址。请记住，您需要在元素名称和每个属性之间包含空格。
如果输入有误，可以使用“ 重置”按钮重置它。如果卡住了，请按“ 显示解决方案”按钮查看答案。
<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>
Live output
A link to my favorite website.
布尔属性部分
您有时会看到没有值的属性 - 这是完全允许的。这些被称为布尔属性，它们只能有一个值，通常与属性名称相同。例如，disabled如果要禁用（灰显）它们，则可以将属性分配给表单输入元素，以便用户无法在其中输入任何数据。
<input type="text" disabled="disabled">作为简写，完全允许这样编写如下（我们还包括一个非禁用的表单输入元素供参考，以便更多地了解发生了什么）：
<input type="text" disabled> <input type="text">两者都会给你一个输出如下：
省略属性值部分的引号
当您浏览万维网时，您会遇到各种奇怪的标记样式，包括没有引号的属性值。这在某些情况下是允许的，但会破坏其他人的标记。例如，如果我们重新访问之前的链接示例，我们可以编写仅包含href属性的基本版本，如下所示：
<a href=https://www.mozilla.org/>favorite website</a>但是，只要我们title在此样式中添加属性，就会出现问题：
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>此时浏览器会误解你的标记，认为该title属性实际上是三个属性 - 一个标题属性，其值为“The”，两个布尔属性，Mozilla和homepage。这显然不是预期的，并且会在代码中导致错误或意外行为，如下面的实例中所示。尝试将鼠标悬停在链接上以查看标题文字是什么！
favorite website favorite website
我们的建议是始终包含属性引号 - 它可以避免此类问题，并且还会产生更易读的代码。
单引号还是双引号？部分
在本文中，您将注意到属性都包含在双引号中。但是，您可能会在某些人的HTML中看到单引号。这纯粹是一种风格问题，您可以随意选择自己喜欢的风格。以下两行是等效的：
<a href="http://www.example.com">A link to my example.</a> <a href='http://www.example.com'>A link to my example.</a>但是你应该确保不要将它们混合在一起。以下将出错！
<a href="http://www.example.com'>A link to my example.</a>如果您在HTML中使用了一种类型的引用，则可以在属性值中包含其他类型的引用，而不会导致任何问题：
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>但是，如果要在引号内包含引号，其中引号属于同一类型（单引号或双引号），则必须使用HTML实体作为引号。例如，这将打破：
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>所以你需要这样做：
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>HTML文档的剖析编辑部分
这包含了单个HTML元素的基础知识，但它们本身并不是很有用。现在我们将看看如何组合各个元素以形成整个HTML页面：
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html>我们在这里：
<!DOCTYPE html>：doctype。在时间的迷雾中，当HTML年轻时（约为1991/2），doctypes意味着充当HTML页面必须遵循的一组规则的链接，被认为是好的HTML，这可能意味着自动错误检查和其他有用的东西。他们过去看起来像这样：
然而，现在没有人真正关心它们，它们实际上只是一个历史性的工件，需要包含在一切工作中。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html>是最短的字符串，被视为有效的doctype; 这就是你真正需要知道的。<html></html>：<html>元素。此元素包装整个页面上的所有内容，有时也称为根元素。<head></head>：<head>元素。此元素充当您要包含在HTML页面上的所有内容的容器，该页面不是您向页面查看者显示的内容。这包括您希望在搜索结果中显示的关键字和页面描述，用于设置内容样式的CSS，字符集声明等内容。您将在本系列的下一篇文章中了解更多相关信息。<meta charset="utf-8">：此元素将文档应使用的字符集设置为UTF-8，其中包括绝大多数人类书面语言中的大多数字符。从本质上讲，它现在可以处理您可能放在其上的任何文本内容。没有理由不设置它，它可以帮助避免以后的一些问题。<title></title>：<title>元素。这将设置页面的标题，即加载页面的浏览器选项卡中显示的标题，用于在书签/收藏页面时描述页面。<body></body>：<body>元素。这包含您在访问网页时要向网络用户显示的所有内容，无论是文本，图片，视频，游戏，可播放的音轨还是其他任何内容。
主动学习：添加了一些功能到HTML文档科
如果您想尝试在本地计算机上编写一些HTML，您可以：
- 复制上面列出的HTML页面示例。
- 在文本编辑器中创建一个新文件。
- 将代码粘贴到新文本文件中。
- 将文件另存为
index.html。
注意：您还可以在MDN学习区域Github存储库中找到此基本HTML模板。
您现在可以在Web浏览器中打开此文件以查看呈现的代码的外观，然后编辑代码并刷新浏览器以查看结果。最初它看起来像这样：
因此，在本练习中，您可以在计算机上本地编辑代码，如上所述，或者您可以在下面的可编辑示例窗口中编辑代码（<body>在这种情况下，可编辑示例窗口仅代表元素的内容。）我们' d喜欢你去实现以下步骤：
- 在
<body>元素的开始标记下方，添加文档的主标题。这应该包含在<h1>开始标记和</h1>结束标记内。 - 编辑段落内容以包含有关您感兴趣的内容的一些文本。
- 通过将它们包装在
<strong>开始标记和</strong>结束标记内，使任何重要单词以粗体显示 - 添加指向段落的链接，如本文前面所述。
- 图像添加到您的文档，段后，如本文前面所解释的。如果您设法链接到不同的图像（在计算机本地或网络上的其他位置），您将获得奖励积分。
如果输入有误，可以使用“ 重置”按钮重置它。如果卡住了，请按“ 显示解决方案”按钮查看答案。
<p>This is my page</p>
Live output
This is my page