块级元素和内联元素
在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。
- 块级元素在页面中以块的形式展现，相对于其前面的内容会出现在新的一行，其后的内容也会被挤到下一行。块级元素通常用来展示页面的结构化内容，例如段落、列表、导航菜单、页脚等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它的块级元素中。
- 内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素
<a>或者强调元素<em>和<strong>。
空元素
不是所有元素都拥有来说标签，内容和结束标签，一些元素只有一个标签，通常用来在此元素位置插/嵌入一些东西。例如：例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。
属性
元素也可以拥有属性
属性包含元素的额外信息，不出现在实际内容中。在这个例子中，class属性给元素赋予了一个识别的名字（id），这个名字此后被用来识别此元素的样式和其他信息。
一个属性必须包含如下内容:
- 在元素和属性之间有个space（如果有一个或多个已存在的属性，就与前一个属性之间有一个空格）。
- 属性后面紧跟着=号。
- 有一个属性值，由一对引号“”引起来。
为<a>元素添加属性
元素<a>是锚，它使被标签包裹的内容成为一个链接。此元素也可以添加大量的属性，其中几个如下。
-
href:这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至声明的web地址。 -
title:标题title属性为超链接声明额外的信息，当鼠标悬停链接时，将出现一个工具提示。 -
target:目标target属性指定将用于显示链接的浏览上下文。例如，target="_blank"将在新标签页中显示链接。如果你希望在目标标签页显示链接，只需要忽略这个属性。
布尔属性
没有值的属性也是合法的，这是布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled属性，他们可以标记表单输入使之变为不可用（变为灰色)，此时用户不能输入任何数据。
<input type="text" disabled="disabled">
分析HTML文档
<!DOCTYPE html> 声明文档类型，最短有效的文档声明
<html> <!--这个元素包含完整的页面，根元素-->
<head> 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8"> 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。
<title>My test page</title> 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
</head>
<body> 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
<p>This is my page</p>
</body>
</html>
HTML中的空格
下面的两个代码是等价的：
<p>Dogs are silly.</p>
<p>Dogs are
silly.</p>
无论用了多少空格（包括白字符，包括换行），当渲染这些代码的时候，HTML解释器会将这些连续出现的空白字符减少为一个单独的空格符。为了代码的可读性我们会使用多的空白，在HTML代码中，我们让每个嵌套的元素以两个空格缩进。
实体引用：在HTML中包含特殊字符
在HTML中，字符 <, >,",'和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?
必须使用字符引号——表示字符的特殊编码
每个字符引用以符号&开始，以;结束。
原义字符 等价字符引用
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
例子
<p>In HTML, you define a paragraph using the <p> element.</p>
<p>In HTML, you define a paragraph using the <p> element.</p>
元数据：<meta>元素
元素就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据<meta>元素。然而，其他在这篇文章中提到的东西也可以被当作元数据。有很多不同类型的<meta>元素可以被包含进你的页面<head>元素.
指定你文档中字符的编码
<meat charset="utf-8">
这个元素简单的指定文档的字符编码，在这个文档中被允许使用的字符集。utf-8是一个通用的字符集，它包含了任何人类语言中的大部分字符。这意味着你的web页面可以显示任意语言；所以对于你的每一个页面，使用这个设置是很好的。
添加作者和描述
许多<meta> 元素包含了name 和 content 特性：
- name指定了meta元素的类型；说明该元素包含了是什么类型信息。
- content指定了实际的元数据内容
这两个meta元素对于定义你的页面作者和提供页面的描述内容是很有用的。
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
其他类型的metadata
当你在网站上查看源码时，你也会发现其他类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站(如社交网站)提供可使用的特定信息。
例如，Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据
Twitter 还拥有自己的类型的专有元数据协议，当网站的 URL 显示在 twitter.com 上时，它具有相似的效果。例如下面：
<meta name="twitter:title" content="Mozilla Developer Network">
为你的站点增加自定义图标
为进一步丰富网站设计，可以在元素据中添加对自定义图标的引用，这些将在特定的场合中显示。
这个不起眼的图标已经存在很多年了，16×16像素是这种图标的第一种类型。
页面添加图标的方式有：
- 将其保存在与网站页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
- 将以下行添加到HTML<head>中以引用它：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
现代浏览器在各种场合使用favicons，如打开的页面标签页和书签面板中的书签页面。下面是一个favicon 出现在书签面板中的例子：
如今还有很多其他的图标类型可以考虑。例如，你可以在 MDN 主页的源代码中找到它：
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
这些注释解释了每个图标的用途 - 这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到iPad的主屏幕时使用。
在HTML中应用css和JavaScript
如今，几乎你使用的所有网站都会使用 CSS 让网页更加炫酷，使用JavaScript让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link>元素以及 <script> 元素。
-
<link>元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
-
<script>部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在</body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。
<script src="my-js-file.js"></script>
为文档设置主语言
最后，值得一提的是你可以（而且确实应该）为你的站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现 (参考 meta-example.html)，如下所示：
<html lang="en-US">
这在很多方面都很有用。如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示)，对于那些使用屏幕阅读器的视障人士也很有用(比如， 法语和英语中都有“six”这个单词，但是发音却完全不同)。
你还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
在下载链接时使用下载属性节
当您链接到要下载的资源而不是在浏览器中打开时，您可以使用下载属性来提供一个默认的保存文件名。下面是一个下载链接到Firefox 的 Windows最新版本的示例：
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
电子邮件链接节
当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用<a>元素和mailto：URL的方案。
其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。例如:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
这会创建一个链接，看起来像这样： Send email to nowhere.
实际上，邮件地址甚至是可选的。如果你忘记了（也就是说，你的[href](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-href)仅仅只是简单的"mailto:"），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件
具体细节节
除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的邮件URL。 其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。
下面是一个包含cc、bcc、主题和主体的示例：
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
注意: 每个字段的值必须是URL编码的。 也就是说，不能有非打印字符（不可见字符比如制表符、换行符、分页符）和空格 percent-escaped. 同时注意使用问号（?）来分隔主URL与参数值，以及使用&符来分隔mailto:中的各个参数。 这是标准的URL查询标记方法。阅读 The GET method 以了解哪种URL查询标记方法是更常用的。
什么是超链接
超链接是互联网提供的最令人兴奋的创新之一，它们从一开始就一直是互联网的一个功能，使互联网成为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其他东西相比）。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（URL）。
注意：URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。 如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。
链接的解析
通过将文本（或其他内容，见块级链接)转换为<a>元素内的链接来创建基本链接， 给它一个[href]属性（也称为目标），它将包含您希望链接指向的网址。
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
使用title属性添加支持信息
添加到到链接的另一个属性是标题；包含关于链接的补充有用的信息，例如页面包含什么样的信息或需要注意的事情。
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
title="The best place to find more information about Mozilla's
mission and how to contribute">the Mozilla homepage</a>.
</p>
块级链接
可以将一些内容转换为链接，包括块级元素。如果想要将一个图像转换为链接，只需要把图象放到<a></a>标签中间。
<a href="https://www.mozilla.org/en-US/">
<img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>
链接最佳实践
- 用清晰的链接措辞
- 尽可能使用相对链接
- 链接到非html资源 留下清晰的指示
- 在下载链接是使用下载属性
当您链接到要下载的资源而不是在浏览器中打开时，您可以使用下载属性来提供一个默认的保存文件名。下面是一个下载链接到Firefox 的 Windows最新版本的示例：
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
电子邮件链接
当点击一个链接或者按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或者页面，这种情况是可能做到的。这样做是使用<a>元素和mailto:URL的方案。
最基本和常用的使用形式为一个mailto:link(链接)，链接简单说明收件人的电子邮箱地址。
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
实际上，邮件地址甚至是可选的。如果你忘记了（href="mailto:"）,一个新的发送电子邮件的窗口也会被用户的邮件客服端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件。
具体细节
还以可提供其它信息。任何标准的邮件头字段可以被添加到你提供的邮件URL。其中最常用的主题（subject）、抄送（cc）、和主体（body）
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
意: 每个字段的值必须是URL编码的。 也就是说，不能有非打印字符（不可见字符比如制表符、换行符、分页符）和空格 percent-escaped. 同时注意使用问号（
?）来分隔主URL与参数值，以及使用&符来分隔mailto:中的各个参数。 这是标准的URL查询标记方法。阅读 The GET method 以了解哪种URL查询标记方法是更常用的。
什么是超链接
超链接是互联网提供的最令人兴奋的创新之一，它们从一开始就一直是互联网的一个功能，使互联网成为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其他东西相比）。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（URL）。
注意：URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。 如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。
链接的解析
通过将文本（或其他内容，见块级链接)转换为<a>元素内的链接来创建基本链接， 给它一个[href]属性（也称为目标），它将包含您希望链接指向的网址。
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
使用title属性添加支持信息
添加到到链接的另一个属性是标题；包含关于链接的补充有用的信息，例如页面包含什么样的信息或需要注意的事情。
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
title="The best place to find more information about Mozilla's
mission and how to contribute">the Mozilla homepage</a>.
</p>
块级链接
可以将一些内容转换为链接，包括块级元素。如果想要将一个图像转换为链接，只需要把图象放到<a></a>标签中间。
<a href="https://www.mozilla.org/en-US/">
<img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>
链接最佳实践
- 用清晰的链接措辞
- 尽可能使用相对链接
- 链接到非html资源 留下清晰的指示
- 在下载链接是使用下载属性
当您链接到要下载的资源而不是在浏览器中打开时，您可以使用下载属性来提供一个默认的保存文件名。下面是一个下载链接到Firefox 的 Windows最新版本的示例：
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
电子邮件链接
当点击一个链接或者按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或者页面，这种情况是可能做到的。这样做是使用<a>元素和mailto:URL的方案。
最基本和常用的使用形式为一个mailto:link(链接)，链接简单说明收件人的电子邮箱地址。
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
实际上，邮件地址甚至是可选的。如果你忘记了（href="mailto:"）,一个新的发送电子邮件的窗口也会被用户的邮件客服端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件。
具体细节
还以可提供其它信息。任何标准的邮件头字段可以被添加到你提供的邮件URL。其中最常用的主题（subject）、抄送（cc）、和主体（body）
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
意: 每个字段的值必须是URL编码的。 也就是说，不能有非打印字符（不可见字符比如制表符、换行符、分页符）和空格 percent-escaped. 同时注意使用问号（
?）来分隔主URL与参数值，以及使用&符来分隔mailto:中的各个参数。 这是标准的URL查询标记方法。阅读 The GET method 以了解哪种URL查询标记方法是更常用的。
HTML的主要工作是编辑文本结构和文本内容（也称为语义semantics）， 以便浏览器能正确的显示。本文介绍了HTML的使用方法：在一段本文中添加标题和段落，强调语句，创建列表等等。
为什么需要语义
我们在任何地方都要依赖语言学-我们依靠以前的经验就知道日常事务都代表什么。
同样的道理，我们需要确保使用了正确的元素来给予正确的意思、作用以及外形。<h1>元素是一个语义元素，他给出包裹在页面上用来表示顶级标题的角色。
一般来说，浏览器会给它一个更大的字形来让它看上去像个标题（虽然你可以使用CSS让它变成任何你想要的样式。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器）。
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
这是一个<span>元素，它没有语义，当您想要对它用CSS（或者JS）时，您可以用它包裹内容，且不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。我们已经对它使用了CSS来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的HTML元素来标记这个项目。
列表 List
三种不同的列表。
- 无序列表
<ul>
<li>牛奶</li>
<li>鸡蛋</li>
<li>面包</li>
<li>鹰嘴豆泥</li>
</ul>
- 有序列表
<ol>
<li>行驶到这条路的尽头</li>
<li>向右转</li>
<li>直行穿过第一个双环形交叉路</li>
<li>在第三个环形交叉路左转</li>
<li>学校就在你的右边，300米处</li>
</ol>
- 嵌套列表
将一个列表嵌入另一个列表是完全可以的，让一些子项再首项目下。
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" humous, process it for a short time.</li>
<li>If you want a smooth humous, process it for a longer time.</li>
</ul>
</li>
</ol>
重点强调
<em> <strong>
HTML的主要工作是编辑文本结构和文本内容（也称为语义semantics）， 以便浏览器能正确的显示。本文介绍了HTML的使用方法：在一段本文中添加标题和段落，强调语句，创建列表等等。
为什么需要语义
我们在任何地方都要依赖语言学-我们依靠以前的经验就知道日常事务都代表什么。
同样的道理，我们需要确保使用了正确的元素来给予正确的意思、作用以及外形。<h1>元素是一个语义元素，他给出包裹在页面上用来表示顶级标题的角色。
一般来说，浏览器会给它一个更大的字形来让它看上去像个标题（虽然你可以使用CSS让它变成任何你想要的样式。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器）。
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
这是一个<span>元素，它没有语义，当您想要对它用CSS（或者JS）时，您可以用它包裹内容，且不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。我们已经对它使用了CSS来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的HTML元素来标记这个项目。
列表 List
三种不同的列表。
- 无序列表
<ul>
<li>牛奶</li>
<li>鸡蛋</li>
<li>面包</li>
<li>鹰嘴豆泥</li>
</ul>
- 有序列表
<ol>
<li>行驶到这条路的尽头</li>
<li>向右转</li>
<li>直行穿过第一个双环形交叉路</li>
<li>在第三个环形交叉路左转</li>
<li>学校就在你的右边，300米处</li>
</ol>
- 嵌套列表
将一个列表嵌入另一个列表是完全可以的，让一些子项再首项目下。
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" humous, process it for a short time.</li>
<li>If you want a smooth humous, process it for a longer time.</li>
</ul>
</li>
</ol>
重点强调
<em> <strong>
目标 ：学习如何使用不太知名的HTML元素来来标记高级语言特征
描述列表
第三种类型的列表—描述列表（description list）。这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。
描述列表使用与其他列表类型不同的闭合标签— <dl>; 此外，每一项都用 <dt> (description term) 元素闭合。每个描述都用 <dd> (description description) 元素闭合。
<dl>
<dt>soliloquy</dt>
<dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
<dt>monologue</dt>
<dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
<dt>aside</dt>
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
</dl>
请注意：一个术语<dt>可以同时有多个描述<dd>
引用
展示计算机代码
标记时间和日期
缩略语
另一个你在web上看到的相当常见的元素是<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
标记联系方式
<addresss>
<p></p>
</address>
上标和下标
当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 <sup> 和<sub>元素可以解决这样的问题。
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
`
> 目标 了解如何使用语义标签来构建文档，以及如何制定简单网站的结构
# 文档的基本部分
网页可以看起来彼此不同，但它们都倾向于使用类似的标准组件，除非页面显示全视频或游戏，或是某种艺术项目的一部风，或者是结构不当：
- **标题**
通常在顶部有一个大标题和图标，这是一个网站的主要常见信息，通常存在于每一个网页。
- **导航**
链接到网站的主要部分；通常由菜单按钮、链接或选项卡表示。于标题一样，这些内容通常在一个网页于另一个网页之间保持一致——在您的网站上导航不一致只会使人疑惑和恼火。许多网页设计师认为导航栏是标题的一部分，而不是独立的组件，但这并不是一个硬性规定；实际上有些人认为，两个独立的会有更好的可访问性，因为如果它们独立，屏幕阅读器可以更好地阅读两个功能。
- **主要内容**
中心的一个大区域，包含给定网页的大部分独特内容，例如您正在阅读的主要故事，或您要查看的地图，或者新闻标题等...这是网页的一部分，绝对会因页面而异。
- **侧栏**
一些次要信息、链接、引言、广告等。通常这是与主要内容中包含的内容相关（例如在新闻文章页面上，侧边栏可能包含作者的个人信息或相关文章的链接），但有在一些情况下，你会发现一些重复的元素，如辅助导航系统。
- **页脚**
横跨页面底部的条纹，通常包含精美的打印、版权通知或者联系信息。它是一个放置公共信息（如标题）的地方，但通常该信息对网站来说不是特别重要。通过提供用于快速访问内容的链接，页脚有时也用于SEO目的。
# 用于结构化网站的HTML
一些网站有更多的列，有些网站更复杂，但你会有你的想法。使用正确的CSS，您可以使用几乎任何元素来装饰不同的部分，并得到您想要的结果，但如前所述，我们需要遵守语义，并使用正确的元素进行语义化工作。
这是因为视觉效果并不能说明一切。 我们可以对内容最有用的部分使用颜色和字体大小来吸引用户的关注，例如导航菜单和相关链接，但是视觉障碍的人该怎么办，这难道也对那些没有“粉红色”和“大”的概念的人来说非常有用吗？
在您的HTML代码中，您可以根据其功能标记内容部分 - 您可以明确地使用表示上述内容部分的元素，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航 “或”找到主要内容“。 正如我们前面提到的那样，[没有使用正确的元素结构和语义去构建网页会有很多的不良影响](https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E7%BB%93%E6%9E%84%E5%8C%96)。
为了实现这样的语义标记，HTML提供了可以用来表示这些部分的专用标签，例如：
- 标题`<header>`
- 导航栏`<nav>`
- 主要元素`<main>`,具有代表性的内容段落主题可以使用`<article><section>`,和`<div>`元素。
- 侧栏`<aside>`经常嵌套在`<main>`中。
- 页脚`<footer>`
# HTML布局元素细节
从总体详细的理解HTML的元素是不错的——随着你web开发经验的逐渐积累，你将会逐渐理解HTML的元素。你可以通过查阅[HTML元素参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)找到更多的细节。现在，你需要理解这些主要的元素定义：
- `<main>`展现了页面的独特性。只可以在每一个页面上使用一次`<main>`,直接把它放到`<bod>`中，在理想的情况下，不应该把它嵌套进其他的元素中。
- `<article>`闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容（例如一篇单独的博客）。
- `<section>`似于<article>，但是它更多的是伴随着由一个单独功能构成的页面（例如一个小型的地图，或者是一组文章的标题和摘要）。它被认为最好的实际应用是用[标题](https://developer.mozilla.org/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy)作为每一部分（section）的开头；也要注意的是你可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的<article>中，这要取决于内容
- `<header>`现了一系列的介绍性内容。如果它是[`<body>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body "HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。") 的子元素,它就定义了网站的全局页眉。但是如果它是 [`<article>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article "<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。") 或[`<section>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section "HTML Section 元素 (<section>) 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>。") 的子元素，它就定义了这些部分的特定的页眉(不要把这些与[titles and headings](https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title)混淆)。
- `<nav>`包含了页面主要的导航功能。二级链接等，不会进入导航功能部分。
- `<footer>`包含了页面的页脚部分。
# 没有特定语义的装饰元素
有时候，你找不到理想的语义元素来包含项目或内容。有时候你可能只想仅仅用css或JavaScript将一组元素作为一个单独的实体来修饰。HTML提供了`<div>`和`<span>`元素。最好使用`class`属性来提供一些标签，这样他们就能容易的被找到。
`<span>`是一个行内无语义元素，你应该仅仅当无法找到更好的语义元素包含内容时使用，或者不想增加特定的含义。
```html
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>
在这种情况中，the editor’s note 应该仅仅是提供额外的对编辑器的说明；它没有额外的语义。对于用户来说，CSS可能用于从主文本中抽离这些note。
<div>是一个块级无语义元素，你应该仅仅当找不到更好的块级元素时使用，或者不想增加特定的意义。例如，当你浏览淘宝时，有一个购物车部件一直都在你可以选择的地方。
<div class="shopping-cart">
<h2>Shopping cart</h2>
<ul>
<li>
<p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
<img src="../products/3333-0985/" alt="Silver earrings">
</li>
<li>
...
</li>
</ul>
<p>Total cost: $237.89</p>
</div>
这并不是一个<aside>, 因为它和主要内容并没有必要的联系（你想在任何地方都能看到它。它甚至不能用<section>来特定的指定，因为它不是页面上主要内容的一部分。所以在这种情况下用<div>是合适的, 我们还需添加一个head标签帮助屏幕阅读者找到它。
换行与水平分割线
<br>和<hr>将会是你偶然使用并且想要了解的两个元素：
<br>在一个段落中创建一个换行；在你想要生成一系列短行的地方，<br>是唯一能够生成这种结构的元素。例如一个邮寄地址或一首诗。
<p>There once was a girl called Nell<br>
Who loved to write HTML<br>
But her structure was bad, her semantics were sad<br>
and her markup didn't read very well.</p>
没有<br>元素，这一段会直接表示在一行中,有了<br>元素，会生成下面这样的：
There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.
<hr>元素在文档中生成一条水平分割线，表示文本中主题的变化（例如主题或场景的变化）。
看起来就是一条水平线。
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
网友评论