前端与 HTML2 | 青训营笔记

Ryan_mfer
209 阅读49分钟

这是我参与「第五届青训营 」笔记创作活动的第1天，之前都在实习，就没有发布笔记。 下面就和大家分享一下我学习前端以及HTML的第二份笔记吧

MDN 上的 HTML 参考，包含每个标签和属性的详细说明

developer.mozilla.org/zh-CN/docs/…

最新版的 W3C HTML5 规范

html.spec.whatwg.org/multipage/

1.1 HTML介绍

1.1.1 什么是HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

超文本：不止是文本，图片、标题等

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

将这行文字封装成一个段落元素来使其在单独一行呈现：

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

备注： HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 <title> 写作 <title>、<TITLE>、<Title>、<TiTlE>，等等都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。

深入探索一下这个段落元素。

这个元素的主要部分有：

  1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

嵌套元素

也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将“very”用 <strong> 元素包围，爆字将突出显示：

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

必须保证元素嵌套次序正确：本例首先使用 <p> 标签，然后是 <strong> 标签，因此要先结束 <strong> 标签，最后再结束 <p> 标签。这样是不对的：

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

元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。

块级元素和内联元素

在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。

  • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素 <a> 或者强调元素：<em> 和 <strong>。

看一看下面的例子：

<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p><p>第五</p><p>第六</p>

<em> 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而 <p> 是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示 <p> 元素的 CSS 样式）。

备注： HTML5 重新定义了元素的类别：见 元素内容分类(译文)。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。

备注： 在这篇文章中提到的“块”和“内联”，不应该与 CSS 盒子的类型中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。

备注： 你可以查阅包含了块级元素和内联元素列表的参考页面—see Block-level elements and Inline elements.

空元素

不包含任何内容的元素称为空元素。比如 <img> 元素：

<img src="images/firefox-icon.png" alt="My test image" />

本元素包含两个属性，但是并没有 </img> 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

1.1.2 属性

元素也可以有属性（Attribute）：

属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

一个属性必须包含如下内容：

  1. 一个空格，在属性和元素名称之间（如果已经有一个或多个属性，就与前一个属性之间有一个空格）。
  2. 属性名称，后面跟着一个等于号。
  3. 一个属性值，由一对引号 ("") 引起来。

备注： 不包含 ASCII 空格（以及 " ' ` = < > ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。

学习实践：为一个元素添加属性

另一个例子是关于元素<a>的——元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：

href

这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如：href="https://www.mozilla.org/"。

title

标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。

target

目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。新窗口打开。

布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。

<input type="text" disabled="disabled">

方便起见，我们完全可以将其写成以下形式（我们还提供了一个非禁止输入的表单元素供你参考，以作为对比）：

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 下面这个输入框没有 disabled 属性，所以用户可以向其中输入 -->
<input type="text">

上面两段 HTML 代码产生的效果如下：

省略包围属性值的引号

当你浏览那些粗糙的 web 网站，你将会看见各种各样奇怪的标记风格，其中就有不给属性值添加引号。在某些情况下它是被允许的，但是其他情况下会破坏你的标记。例如，我们可以写一个只拥有一个 href 属性的链接，如下：

<a href=https://www.mozilla.org/>收藏页面</a>

然而，当我们再添加一个 title 属性时就会出错，如下：

<a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a>

此时浏览器会误解你的标记，它会把 title 属性理解为三个属性——title 的属性值为"The“，另外还有两个布尔属性“Mozilla”和“homepage”。

单引号或者双引号？

在目前为止，本章内容所有的属性都是由双引号来包裹。也许在一些 HTML 中，你以前也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：

<a href="http://www.example.com">示例站点链接</a>

<a href='http://www.example.com'>示例站点链接</a>

但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的：

<a href="http://www.example.com'>示例站点链接</a>

在一个 HTML 中已使用一种引号，你可以在此引号中嵌套另外一种引号：

<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>

如果你想将引号当作文本显示在 html 中，你就必须使用实体引用。

1.1.3 剖析 HTML 文档

学习了一些 HTML 元素的基础知识，这些元素单独一个是没有意义的。

现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

分析如下：

  1. <!DOCTYPE html>: 声明文档类型。很久以前，早期的 HTML(大约 1991 年 2 月)，文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然而这种写法已经过时了，这些内容已成为历史。只需要知道 <!DOCTYPE html> 是最短有效的文档声明。

  1. <html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。

  2. <head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。大型页面的 head 会包含很多元数据。可以用开发者工具查看网页的 head 信息。

    1. 添加标题

      • 注意区分不同
      • <h1> (en-US) 元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要，等等）。
      • <title> 元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）。
      • <title> 元素也被以其他的方式使用着。比如说，如果你尝试为某个页面添加书签，（在火狐浏览器中：点击书签 > 将当前标签页添加到书签，或点击地址栏末尾的星标），你会看到 <title> 的内容被作为建议的书签名。

    2. 元素。有很多不同种类的 <meta> 元素可以被包含进你的页面的 元素，但是现在我们还不会尝试去解释所有类型，这只会引起混乱。

      • 制定你文档中字符的编码，<meta charset="utf-8">

          • 备注： 一些浏览器（比如 Chrome）会自动修正错误的编码，所以取决于你所使用的浏览器，你或许不会看到这个问题。无论如何，你仍然应该为你的页面手动设置编码为 utf-8，来避免在其他浏览器中可能出现的潜在问题

      • 添加作者和描述

        •       许多 <meta> 元素包含了 name 和 content 属性：
        • name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
        • content 指定了实际的元数据内容。
        •       这两个 meta 元素对于定义你的页面的作者和提供页面的简要描述是很有用的。
        •       让我们看一个例子：
        • <meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs 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.">
        •       指定作者在某些情况下是很有用的：如果你需要联系页面的作者，问一些关于页面内容的问题。一些内容管理系统能够自动获取页面作者的信息，然后用于某些用途。
        •       指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多（这些行为在术语上被称为：搜索引擎优化，或 SEO。）
        •       找到 description 的 meta 标签。就和如下展示的这样：
        • <meta name="description" content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both Web sites and
  progressive web apps.">
        • 现在，在你喜欢的搜索引擎里搜索“MDN Web Docs”（下图展示的是在谷歌搜索里的情况）。你会看到 description <meta> 和 <title> 元素如何在搜索结果里显示——很值得这样做哦！

        • 备注： 在谷歌搜索里，在主页面链接下面，你将看到一些相关子页面——这些是站点链接，可以在 Google's webmaster tools 配置——一种可以使你的站点对搜索引擎更友好的方式。

          备注： 许多 <meta> 特性已经不再使用。例如，keyword <meta> 元素（<meta name="keywords" content="fill, in, your, keywords, here">）——提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站——已经被搜索引擎忽略了，因为作弊者填充了大量关键词到 keyword，错误地引导搜索结果。

    3. 其他类型的元数据

      •     当你在网站上查看源码时，你也会发现其它类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站（如社交网站）提供可使用的特定信息。
      •     例如，Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据。在 MDN Web 文档源代码中，你会发现：
      • <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">
      •     上面代码展现的一个效果就是，当你在 Facebook 上链接到 MDN 时，该链接将显示一个图像和描述：这为用户提供更丰富的体验。
      •     Twitter 还拥有自己的类型的专有元数据协议（称为：Twitter Cards），当网站的 URL 显示在 twitter.com 上时，它具有相似的效果。例如下面：
      • <meta name="twitter:title" content="Mozilla Developer Network">

    4. 在你的站点增加自定义图标

    5.   为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标（favicon，为“favorites icon”的缩写）的引用，这些将在特定的场合（浏览器的收藏，或书签列表）中显示。

    6.   这个不起眼的图标已经存在很多很多年了，16x16 像素是这种图标的第一种类型。你可以看见这些图标出现在浏览器每一个打开的标签页中以及书签页中。

    7.   页面添加图标的方式有：

    8. 将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器将支持更通用的格式，如 .gif 或 .png，但使用 ICO 格式将确保它能在如 Internet Explorer 6 那样古老的浏览器显示）

    9. 将以下行添加到 HTML 的 <head> 中以引用它：

    10. <link rel="icon" href="favicon.ico" type="image/x-icon">

    11.   下面是一个 favicon 出现在书签页中的例子：

    13.   如今还有很多其他的图标类型可以考虑。例如，你可以在 MDN Web 文档的源代码中找到它：

    14. <!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- basic favicon -->
<link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.png">

    15.   这些注释解释了每个图标的用途——这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到 iPad 的主屏幕时使用。

    16.   不用担心现在实现所有这些类型的图标——这是一个相当先进的功能，你将不会被要求在这个课堂上学习这个知识点。这里的主要目的是让你提前了解有这一样东西以防当你浏览其他网站的源代码时不理解源代码的含义。

    17. 备注： 如果你的网站使用了内容安全策略（Content Security Policy，CSP）来增加安全性，这个策略会应用在图标上。如果你遇到了图标没有被加载的问题，你需要确认 Content-Security-Policy 响应头的 img-src 指令 (en-US) 没有禁止访问图标。

    18. 在 HTML 中应用 CSS 和 JavaScript

    19.   如今，几乎你使用的所有网站都会使用 CSS 来让网页更加炫酷，并使用 JavaScript 来让网页有交互功能，比如视频播放器、地图、游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link> 元素以及 <script> 元素。

    20. <link> 元素经常位于文档的头部。这个 link 元素有 2 个属性，rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径：

    21. <link rel="stylesheet" href="my-css-file.css">

    22. <script> 元素没必要非要放在文档的 <head> 中，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。实际上还有很多方法可用于处理加载 JavaScript 的问题，但这是现代浏览器中最可靠的一种方法。

    23. <script src="my-js-file.js" defer></script>

    24. 备注： <script> 元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入 <script>元素中，而不是指向外部脚本文件。

    25. 为文档设定主语言

    26.   最后，值得一提的是可以（而且有必要）为站点设定语言，这个可以通过添加 lang 属性到 HTML 开始的标签中来实现（参考 meta-example.html），如下所示：

    27. <html lang="zh-CN">

    28.   这在很多方面都很有用。如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引（例如，允许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有“six”这个单词，但是发音却完全不同）。

    29.   你还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：

    30. <p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

    31.   这些代码是根据 ISO 639-1 标准定义的。你可以在 Language tags in HTML and XML 找到更多相关内容。

  3. <meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。

  4. <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

  5. <body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

图像

重温一下 <img> 元素：

<img src="images/firefox-icon.png" alt="My test image" />

像之前所讲，该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。

该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：

  1. 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
  2. 有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：

alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用 "测试图片" 来描述 Firefox 标志并不合适，修改成 "Firefox 标志：一只盘旋在地球上的火狐" 就好多了。

可以试着为图像编写一些更好的 alt 文本。

备注： 更多信息请参阅 无障碍访问。

HTML 中的空白

在上面的例子中，你可能已经注意到了在代码中包含了很多的空格——这是没有必要的；下面的两个代码片段是等价的：

<p>狗 狗 很 呆 萌。</p><p>狗 狗        很
         呆 萌。</p>

无论你在 HTML 元素的内容中使用多少空格 (包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

那么为什么我们会在 HTML 元素的嵌套中使用那么多的空白呢？答案就是为了可读性。在我们的 HTML 代码中，我们让每一个嵌套的元素以两个空格缩进。你使用什么风格来格式化你的代码取决于你 (比如说对于每层缩进使用多少个空格)，但是你应该坚持使用某种风格。

1.1.4 HTML文字处理基础

标题和段落

内容结构化会使读者的阅读体验更轻松，更愉快。

在 HTML 中，每个段落是通过 <p> 元素标签进行定义的，比如下面这样：

<p>我是一个段落，千真万确。</p>

每个标题（Heading）是通过“标题标签”进行定义的：

<h1>我是文章的标题</h1>

这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等。

编辑结构层次

这里举一个例子。在一个故事中，

表示故事的名字，

表示每个章节的标题，

表示每个章节下的子标题，以此类推。

<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>

所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要层次结构是合理的。一些最佳实践：

  • 您应该最好只对每个页面使用一次

    — 这是顶级标题，所有其他标题位于层次结构中的下方。

  • 请确保在层次结构中以正确的顺序使用标题。不要使用

    来表示副标题，后面跟

    来表示副副标题 - 这是没有意义的，会导致奇怪的结果。

  • 在可用的六个标题级别中，您应该只在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。

标签被用来组合文档中的行内元素。

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

可以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

你可以让任一元素看起来像一个顶级标题，如下：

<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗？</span>

列表

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

  1. 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围。

    1. 列表的每个项目用一个列表项目（List Item）元素 <li> 包围。

  2. 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。

    1. 列表的每个项目用一个列表项目（List Item）元素 <li> 包围。

  3. key-value。用一个 <dl> 元素包围。

    1. 项目中key用<dt>,value用<dd>

比如，要将下面的段落片段改成一个列表：

<p>At Mozilla, we're a global community of technologists, thinkers, and builders working together… </p>

可以这样更改标记：

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together… </p>

可以嵌套列表

重点强调

在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、下划线等效果。下面，我们将学习一些最常见的标签。

强调

在口语表达中，我们有时会强调某些字，用来改变这句话的意思。同样地，在书面用语中，我们可以使用斜体字来达到同样的效果。例如，下面两个句子便有不同的意思：

I am glad you weren't late.

I am glad you weren't late. (ps: 此句中"glad" 和"late"为斜体字体)

在 HTML 中我们用<em>（emphasis）元素来标记这样的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为斜体，但你不应该纯粹使用这个标签来获得斜体风格，为了获得斜体风格，你应该使用<span>元素和一些 CSS，或者是<i>元素（见下文）。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>
非常重要

为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。例如下面这段：

This liquid is highly toxic.

I am counting on you. Do not be late!

在 HTML 中我们用<strong> (strong importance) 元素来标记这样的情况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用<span>元素和一些 CSS，或者是 <b> 元素 (见下文)。

<p>This liquid is <strong>highly toxic</strong>.</p><p>I am counting on you. <strong>Do not</strong> be late!</p>

如有需要你可以将 strong 元素和 em 元素嵌套在其他的标签中：

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

斜体字、粗体字、下划线...

迄今为止我们已经讨论的元素都是意义清楚的语义元素。<b>, <i>, 和 <u> 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但 CSS 仍然不被完全支持的时期。像这样的元素，仅仅影响表象而且没有语义，被称为表象元素（presentational elements） 并且不应该再被使用。因为正如我们在之前看到的，语义对无障碍，SEO（搜索引擎优化）等非常重要。

HTML5 用新的语义规则重新定义了 <b>、<i> 和 <u>,使得它们的语言显得稍微有点混乱。

这里是最好的经验法则：如果没有更合适的元素，那么使用 <b>、<i> 或 <u> 来表达传统上的粗体、斜体或下划线表达的意思是合适的。然而，始终拥有无障碍的思维模式是至关重要的。斜体的概念对人们使用屏幕阅读器是没有帮助的，对使用其他书写系统而不是拉丁文书写系统的人们也是没有帮助的。

  • <i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
  • <b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
  • <u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

备注： 使用下划线的忠告：因为我们常常会认为网页中的下划线代表着一个超链接 ， 所以最好只用下划线来代表超链接。而在语义适合的情况下不得不使用元素时，可以使用 CSS 来改变元素对应的下划线的默认样式，从而和超链接的下划线区分开来。下面是一个具体的例子：

<!-- 学名 -->
<p>
  红喉北蜂鸟（学名：<i>Archilocus colubris</i>）
  是北美东部最常见的蜂鸟品种。
</p>

<!-- 舶来词 -->
<p>
  菜单上有好多舶来词汇，比如 <i lang="uk-latn">vatrushka</i>（东欧乳酪面包）,
  <i lang="id">nasi goreng</i>（印尼炒饭）以及<i lang="fr">soupe à l'oignon</i>（法式洋葱汤）。
</p>

<!-- 已知的错误书写 -->
<p>
  总有一天我会改掉写<u style="text-decoration-line: underline; text-decoration-style: wavy;">措字</u>的毛病。
</p>

<!-- 在一组指令中突出显示关键字 -->
<ol>
  <li>
    <b>切</b>下两片面包，
  </li>
  <li>
    在两片面包中间<b>夹入</b>一片西红柿和一片生菜叶。
  </li>
</ol>

1.1.5 超链接

什么是超链接

备注： URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — <a> — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：

  1. 选择一些文本。比如“Mozilla Manifesto”。
  2. 将文本包含在 <a> 元素内，就像这样：
<a>Mozilla Manifesto</a>
  1. 为此 <a> 元素添加一个 href 属性，就像这样：
<a href="">Mozilla Manifesto</a>
  1. 把属性的值设置为所需网址：
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

如果网址开始部分省略了 https:// 或者 http://，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。

备注： href 这个名字可能开始看起来有点令人费解，代表超文本引用（ hypertext reference）。

你可能要添加到你的链接的另一个属性是 title（标题）；这旨在包含关于链接的补充信息，例如页面包含什么样的信息或需要注意的事情。

<p>我创建了一个指向<a href="https://www.mozilla.org/en-US/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a
   >的超链接。
</p>

备注： 链接的标题仅当鼠标悬停在其上时才会显示，这意味着使用键盘来导航网页的人很难获取到标题信息。如果标题信息对于页面非常重要，你应该使用所有用户能都方便获取的方式来呈现，例如放在常规文本中。

块级链接

如上所述，你可以将一些内容转换为链接，甚至是块级元素。例如你想要将一个图像转换为链接，你只需把引用了图像文件的 <img> 元素放到 <a> 标签内。

<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>

统一资源定位符（URL）与路径（path）快速入门

统一资源定位符（英文：Uniform Resource Locator，简写：URL）是一个定义了在网络上的位置的一个文本字符串。例如 Mozilla 的中文主页定位在 https://www.mozilla.org/zh-CN/.

URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件所在的位置。看一下一个简单的目录结构的例子（参见创建超链接目录。）

此目录结构的根目录称为 creating-hyperlinks。当在网站上工作时，你会有一个包含整个网站的目录。在根目录，我们有一个 index.html 和一个 contacts.html 文件。在真实的网站上，index.html 将会成为我们的主页或登录页面（作为网站或网站特定部分的入口的网页。）。

我们的根目录还有两个目录——pdfs 和 projects，它们分别包含一个 PDF（project-brief.pdf）文件和一个 index.html 文件。请注意你可以有两个 index.html 文件，前提是他们在不同的目录下，许多网站就是如此。第二个 index.html 或许是项目相关信息的主登录界面。

  • 指向当前目录：如果 index.html（目录顶层的 index.html）想要包含一个超链接指向 contacts.html，你只需要指定想要链接的文件名，因为它与当前文件是在同一个目录的。所以你应该使用的 URL 是 contacts.html:
<p>要联系某位工作人员，请访问我们的<ahref="contacts.html">联系人页面</a>。</p>
  • 指向子目录：如果 index.html （目录顶层 index.html）想要包含一个超链接指向 projects/index.html，你需要先进入 projects 项目目录，然后指明要链接到的文件 index.html。通过指定目录的名称，然后是正斜杠，然后是文件的名称。因此你要使用的 URL 是 projects/index.html：
<p>请访问<a href="projects/index.html">项目页面</a>。</p>
  • 指向上级目录：如果你想在 projects/index.html 中包含一个指向 pdfs/project-brief.pdf 的超链接，你必须先返回上级目录，然后再回到 pdf 目录。“返回上一个目录级”使用两个英文点号表示（..），所以你应该使用的 URL 是 ../pdfs/project-brief.pdf：
<p>点击打开<a href="../pdfs/project-brief.pdf">项目简介</a>。</p>

备注： 如果需要的话，你可以将这些功能的多个例子和复杂的 URL 结合起来。例如：../../../complex/path/to/my/file.html。

文档片段

超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个 id 属性。例如，如果你想链接到一个特定的标题，可以这样做：

<h2 id="Mailing_address">邮寄地址</h2>

然后链接到那个特定的 id，你可以在 URL 的结尾使用一个井号指向它，例如：

<p>要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>

你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：

<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>
绝对 URL 和相对 URL

你可能会在网络上遇到两个术语，绝对 URL 和相对 URL（或者称为，绝对链接和相对链接）：

绝对 URL：指向由其在 Web 上的绝对位置定义的位置，包括协议和域名。像下面的例子，如果 index.html 页面上传到了 projects 这一个目录。并且 projects 目录位于 web 服务站点的根目录，web 站点的域名为 http://www.example.com，那么这个页面就可以通过 http://www.example.com/projects/index.html 访问（或者通过 http://www.example.com/projects/ 来访问，因为在没有指定特定的 URL 的情况下，大多数 web 服务器会默认访问加载 index.html 这类页面）

不管绝对 URL 在哪里使用，它总是指向确定的相同位置。

相对 URL：指向与你链接的文件相关的位置，更像我们在前面一节中所看到的位置。例如，如果我们想从示例文件链接 http://www.example.com/projects/index.html 转到相同目录下的一个 PDF 文件，URL 就是文件名（例如 project-brief.pdf），没有其他的信息要求。如果 PDF 文件能够在 projects 的子目录 pdfs 中访问到，相对路径就是 pdfs/project-brief.pdf（对应的绝对 URL 是 http://www.example.com/projects/pdfs/project-brief.pdf）

一个相对 URL 将指向不同的位置，这取决于它所在的文件所在的位置——例如，如果我们把 index.html 文件从 projects 目录移动到 Web 站点的根目录（最高级别，而不是任何目录中），里面的 pdfs/project-brief.pdf 相对 URL 将会指向 http://www.example.com/pdfs/project-brief.pdf，而不是 http://www.example.com/projects/pdfs/project-brief.pdf

当然，project-brief.pdf 文件和 pdfs 文件夹的位置不会因为你移动了 index.html 文件而突然发生变化——这将使你的链接指向错误的位置，因此如果单击它，它将无法工作。你得小心点！

链接最佳实践

下面是一些在编写链接元素时可以遵循的最佳实践。

使用清晰的链接措辞

把链接放在你的页面上很容易。这还不够。我们需要让所有的读者都可以使用链接，不管他们当前的环境和哪些工具。例如：

  • 使用屏幕阅读器的用户喜欢从页面上的一个链接跳到另一个链接，并且脱离上下文来阅读链接。
  • 搜索引擎使用链接文本来索引目标文件，所以在链接文本中包含关键词是一个很好的主意，以有效地描述与之相关的信息。
  • 读者往往会浏览页面而不是阅读每一个字，他们的眼睛会被页面的特征所吸引，比如链接。他们会找到描述性的链接。

下面是一个具体的例子：

好的链接文本：下载 Firefox

<p><a href="https://www.mozilla.org/firefox/">
 下载 Firefox
</a></p>

不好的链接文本：点击这里下载 Firefox

<p><a href="https://www.mozilla.org/firefox/">
  点击这里
</a>下载 Firefox</p>

其他提示：

  • 不要重复 URL 作为链接文本的一部分——URL 看起来很丑，当屏幕阅读器一个字母一个字母的读出来的时候听起来就更丑了。
  • 不要在链接文本中说“链接”或“链接到”——它只是无用的内容。屏幕阅读器告诉人们有一个链接。可视化用户也会知道有一个链接，因为链接通常是用不同的颜色设计的，并且存在下划线（这个惯例一般不应该被打破，因为用户习惯了它。）
  • 保持你的链接标签尽可能短——这非常重要，因为屏幕阅读器需要解释整个链接文本。
  • 尽量减少相同文本的多个副本链接到不同地方的情况。如果存在标记为“单击此处”、“单击此处”、“单击此处”这样脱离上下文的链接文本，容易对使用屏幕阅读器的用户带来问题。
链接到非 HTML 资源——留下清晰的指示

当链接到一个需要下载的资源（如 PDF 或 Word 文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载 Flash 电影），你应该添加明确的措辞，以减少混乱。

如下的例子会让人反感：

  • 你在使用低带宽连接的情况下，点击一个链接，然后就开始下载大文件。
  • 你没有安装 Flash 播放器，点击一个链接，然后突然被带到一个需要 Flash 的页面。

让我们看看一些例子，看看在这里可以使用什么样的文本：

<p><a href="https://www.example.com/large-report.pdf">
  下载销售报告（PDF, 10MB）
</a></p><p><a href="https://www.example.com/video-stream/" target="_blank">
  观看视频（将在新标签页中播放，HD 画质）
</a></p><p><a href="https://www.example.com/car-game">
  进入汽车游戏（需要 Flash 插件）
</a></p>
在下载链接时使用 download 属性

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

电子邮件链接

当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用 <a> 元素和 mailto:URL 的方案。

其最基本和最常用的使用形式为一个 mailto: 链接，链接指明收件人的电子邮件地址。例如：

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

这会创建一个链接，看起来像这样：向 nowhere 发邮件。

实际上，电子邮件地址是可选的。如果你忘记了（也就是说，你的 href 仅仅只是简单的“mailto”），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以给他们选择的地址发送邮件。

指定详细信息

除了电子邮件地址，你还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的 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 编码的，即使用百分号转义的非打印字符（不可见字符比如制表符、换行符、分页符）和空格。同时注意使用问号（?）来分隔主 URL 与参数值，以及使用 & 符来分隔 mailto: URL 中的各个参数。这是标准的 URL 查询标记方法。阅读 GET 方法以了解哪种 URL 查询标记方法是更常用的。

这里有一些其他的示例 mailto 链接：

1.1.6 高阶文字排版

描述列表

在 HTML 基础部分，我们讨论了如何在 HTML 中标记基本的列表，但是我们没有提到你偶尔会遇到的第三种类型的列表——描述列表（description list）。这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。让我们看一组术语和定义的示例：

内心独白 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。 语言独白 戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。 旁白 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

描述列表使用与其他列表类型不同的闭合标签——<dl>；此外，每一项都用 <dt>（description term）元素闭合。每个描述都用 <dd>（description definition）元素闭合。让我们来完成下面的标记例子：

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

浏览器的默认样式会在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进。MDN 非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义。

下面是前述代码的显示结果：

内心独白

戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

语言独白

戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

旁白

戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

请注意：一个术语 <dt> 可以同时有多个描述 <dd>，比如说：

旁白

戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其它位置（通常位于主线内容旁边一个文本框内）。

引用

HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。

块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用 URL 来指向引用的资源。例如，下面的例子就是引用的 MDN 的<blockquote>元素页面：

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

要把这些转换为块引用，我们要这样做：

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN 是这样做的，但是也增加了额外的样式：

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

行内引用

行内元素用同样的方式工作，除了使用<q>元素。例如，下面的标记包含了从 MDN<q>页面的引用：

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

浏览器默认将其作为普通文本放入引号内表示引用，就像下面：

引文

cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为<cite>元素附上链接：

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

引文默认的字体样式为斜体。你可以在quotations.html中参看代码。

实体引用：在 HTML 中包含特殊字符

在 HTML 中，字符 <、>、"、' 和 & 是特殊字符。它们是 HTML 语法自身的一部分，那么你如何将这些字符包含进你的文本中呢，比如说如果你真的想要在文本中使用符号&或者小于号，而不想让它们被浏览器视为代码并被解释？

我们必须使用字符引用 —— 表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号&开始，以分号 (;) 结束。

原义字符等价字符引用
<<
>
""
''
&&

在下面的例子中你可以看到两个段落，它们在谈论 web 技术：

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

在下面的实时输出中，你会看到第一段是错误的，因为浏览器会认为第二个

是开始一个新的段落！第二段是正确的，因为我们用字符引用来代替了角括号（'<'和'>'符号）.

备注： 维基百科上有一个包含所有可用 HTML 字符实体引用的列表：XML 和 HTML 字符实体引用列表

缩略语

另一个你在 web 上看到的相当常见的元素是<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。

缩略语示例

让我们一起看一个示例。

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

<p>第 33 届<abbr title="夏季奥林匹克运动会">奥运会</abbr>将于 2024 年 8 月在法国巴黎举行。</p>

这些代码的显示效果如下：

备注： 还有另一个元素 <acronym>，它基本上与 <abbr> 相同，专门用于首字母缩略词而不是缩略语。然而，这已经被废弃了——它在浏览器的支持中不如 <abbr>，并且具有类似的功能，所以没有意义。只需使用 <abbr>。

标记联系方式

HTML 有个用于标记联系方式的元素——<address>。它仅仅包含你的联系方式，例如：

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

但要记住的一点是，<address>元素是为了标记编写 HTML 文档的人的联系方式，而不是任何其他的内容。因此，如果这是 Chris 写的文档，上面的内容将会很好。注意，下面的内容也是可以的：

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。<sup> 和<sub>元素可以解决这样的问题。例如：

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

展示计算机代码

有大量的 HTML 元素可以来标记计算机代码：

  • <code>: 用于标记计算机通用代码。
  • <pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
  • <var>: 用于标记具体变量名。
  • <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
  • <samp>: 用于标记计算机程序的输出。

让我们看看一些例子。你应该尝试运行一下（尝试运行一下other-semantics.html样例文件的拷贝）：

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}</code></pre>

<p>请不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表象元素。</p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>


<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

上面的代码显示效果如下：

标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的 <time> 元素。例如：

<time datetime="2016-01-20">2016 年 1 月 20 日</time>

为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被写成：

  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/06/16
  • 06/20/16
  • The 20th of next month
  • 20e Janvier 2016
  • 2016 年 1 月 20 日
  • And so on

但是这些不同的格式不容易被电脑识别 — 假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，<time> 元素允许你附上清晰的、可被机器识别的 时间/日期来实现这种需求。

上述基本的例子仅仅提供了一种简单的可被机器识别的日期格式，这里还有许多其他支持的格式，例如：

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 调用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

1.1.7 文档与网站架构

文档的基本组成部分

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

页眉

通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页。

导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚

横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

一个“典型的网站”可能会这样布局：

用于构建内容的 HTML

以上简单示例不是很精美，但是足够说明网站的典型布局方式了。一些站点拥有更多列，其中一些远比这复杂，但一切在你掌握之中。通过合适的 CSS，你可以使用相当多种的任意页面元素来环绕在不同的页面区域来做成你想要的样子，但如前所述，我们要敬畏语义，做到正确选用元素。

这是因为视觉效果并不是一切。我们可以修改最重要内容（例如导航菜单和相关链接）的颜色、字体大小来吸引用户的注意，但是这对视障人士是无效的，“粉红色”和“大字体”对他们并不奏效。

备注： 全球色盲患者比例为 4%，换句话说，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和视障人士约占世界人口（约 70 亿）的 13％（2015 年 全球约有 9.4 亿人口存在视力问题）。

HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航“或”找到主内容“等任务。参见前文所讲的 页面中元素结构和语义不佳所带来的后果。

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

  • <header>：页眉。
  • <nav>：导航栏。
  • <main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
  • <aside>：侧边栏，经常嵌套在 <main> 中。
  • <footer>：页脚。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>二次元俱乐部</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <header> <!-- 本站所有网页的统一主标题 -->
      <h1>聆听电子天籁之音</h1>
    </header>

    <nav> <!-- 本站统一的导航栏 -->
      <ul>
        <li><a href="#">主页</a></li>
        <!-- 共 n 个导航栏项目，省略…… -->
      </ul>

      <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
        <input type="search" name="q" placeholder="要搜索的内容">
        <input type="submit" value="搜索">
      </form>
    </nav>

    <main> <!-- 网页主体内容 -->
      <article>
        <!-- 此处包含一个 article（一篇文章），内容略…… -->
      </article>

      <aside> <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
          <li><a href="#">这是一个超链接</a></li>
          <!-- 侧边栏有 n 个超链接，略略略…… -->
        </ul>
      </aside>
    </main>

    <footer> <!-- 本站所有网页的统一页脚 -->
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

HTML 布局元素细节

理解所有 HTML 区段元素具体含义是很有益处的，这一点将随着个人 web 开发经验的逐渐丰富日趋显现。更多细节请查阅 HTML 元素参考。现在，你只需要理解以下主要元素的意义：

  • <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。
  • <article> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
  • <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
  • <aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
  • <header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。
  • <nav> 包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer> 包含了页面的页脚部分。
无语义元素

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML 提供了 <div> 和 <span> 元素。应配合使用 class 属性提供一些标签，使这些元素能易于查询。

<span> 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：

<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">
[编辑批注：此刻舞台灯光应变暗]</span>.</p>

这里，“编辑批注”仅仅是对舞台剧导演提供额外指引；没有具体语义。对于视力正常的用户，CSS 应将批注内容与主内容稍微隔开一些。

<div> 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。

<div class="shopping-cart">
  <h2>购物车</h2>
  <ul>
    <li>
      <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>售价：$237.89</p>
</div>

这里不应使用 <aside>，因为它和主内容并没有必要的联系（你想在任何地方都能看到它）。甚至不能用 <section> ，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用 <div>，为满足无障碍使用特征，还应为购物车的标题设置一个可读标签。

警告： <div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

换行与水平分割线

有时会用到 <br> 和 <hr> 两个元素，需要介绍一下。

<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。比如：

<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>

没有 <br> 元素，这段会直接显示在长长的一行中（如前文所讲，HTML 会忽略大部分空格）；使用 <br> 元素，才使得诗看上去像诗：

从前有个人叫小高 他说写 HTML 感觉最好 但他写的代码结构语义一团糟 他写的标签谁也懂不了。

<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。

规划一个简单的网站

在完成页面内容的规划后，一般应按部就班地规划整个网站的内容，要可能带给用户最好的体验，需要哪些页面、如何排列组合这些页面、如何互相链接等问题不可忽略。这些工作称为信息架构。在大型网站中，大多数规划工作都可以归结于此，而对于一个只有几个页面的简单网站，规划设计过程可以更简单，更有趣！

  1. 时刻记住，大多数（不是全部）页面会使用一些相同的元素，例如导航菜单以及页脚内容。若网站为商业站点，不妨在所有页面的页脚都加上联系方式。请记录这些对所有页面都通用的内容：

  1. 接下来，可为页面结构绘制草图（这里与前文那个站点页面的截图类似）。记录每一块的作用：

  1. 下面，对于期望添加进站点的所有其它（通用内容以外的）内容展开头脑风暴，直接罗列出来。

  1. 下一步，试着对这些内容进行分组，这样可以让你了解哪些内容可以放在同一个页面。这种做法和 卡片分类法 非常相似。

  1. 接下来，试着绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式。

1.1.8 HTML调试

调试其实没有那么可怕，写代码和调试的关键其实是：熟悉语言本身和相关工具。

HTML 和调试

HTML 并不像 Rust 那么难以理解，浏览器并不会将 HTML 编译成其它形式，而是直接解析并显示结果（称之为解释，而非编译）。可以说 HTML 的 元素 语法比 Rust、JavaScript 或 Python 这样“真正的编程语言”更容易理解。浏览器解析 HTML 的过程比编程语言的编译运行的过程要宽松得多，但这是一把双刃剑。

宽松的代码

宽松是什么意思呢？通常写错代码会带来以下两种主要类型的错误：

  • 语法错误：由于拼写错误导致程序无法运行，就像上面的 Rust 示例。通常熟悉语法并理解错误信息后很容易修复。
  • 逻辑错误：不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。

HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。

备注： HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。如果 Web 以严格的风格起步，也许就不会像今天这样流行了。

HTML 验证

阅读以上示例后，你发现保持良好 HTML 格式的重要性。那么应该如何做呢？以上示例规模较小，查找错误还不难，但是一个非常庞大、复杂的 HTML 文档呢？

最好的方法就是让你的 HTML 页面通过 Markup Validation Service。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织）创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行，网页会返回一个错误报告。

网页可以接受网址、上传一个 HTML 文档，或者直接输入一些 HTML 代码。

错误信息分析

错误信息一般都是有用的，也有没用的，有一些经验后你就能够分析并修复这些错误。下面来观察这些错误信息。可以看到每条信息都对应一个行号和一条信息，使得定位错误更方便。

  • End tag li implied, but there were open elements（需要 li 的结束标签，但又开始了新的元素）（共出现 2 次）：这条信息表明有开始标签必须有结束标签，必须出现结束标签的地方却没有找到它。行/列信息指出结束标签必须出现的位置的第一行，这一线索已经足够明显了。

  • Unclosed element strong（未闭合元素 strong ）：非常容易理解，<strong> 元素没有闭合，行/列信息表明了它的位置。

  • End tag strong violates nesting rules（结束标签 strong 违反了嵌套规则）：指出了错误嵌套的元素，行/列信息表明了它的位置。

  • End of file reached when inside an attribute value. Ignoring tag（在属性值内达到文件末尾。忽略标签）: 这个比较难懂，它说的是在某个地方有一个属性的值格式有误，估计是在文件末尾附近，因为文件的结尾出现在了一个属性值里。事实上浏览器没有渲染超链接已经是一个很明显的线索了。

  • End of file seen and there were open elements（文件结尾有未闭合的元素）：这个略有歧义，但基本上表明了有元素没有正确闭合。行号指向文件最后几行，且错误信息给出了一个这种错误的案例：

    ↩ ↩

备注： 属性缺少结束引号会导致元素无法闭合。因为文档所有剩余部分（直到文档某处出现一个引号）都将被解析为属性的内容。

  • Unclosed element ul（未闭合元素 ul）：这个意义不大，因为 <ul> 已经正确闭合了。出现这个错误是因为 <a> 元素没有右引号而没有闭合。

如果你不能一次弄懂所有的错误，别着急，可以试试先修复那些已经弄懂的，再申请验证，看看剩下哪些错误。有时候先修复的错误可能让你摆脱后面一系列的错误，因为一个小问题可能引发一连串错误，就像多米诺骨牌。

avatar
文章
阅读
粉丝