HTML5/CSS3 入门指南 - 第 2 部分，共 12 部分
5.00/5 (10投票s)
构建基础
系列文章列表
现在是 HTML 5
在上一个部分，我写了很多关于理论和历史的内容，但关于 HTML 5 或 CSS 3 的内容并不多。即使我们接触了一些实际代码，那也并非真正的 HTML 5（我希望你不会觉得我欺骗了你）。那些代码是基础 HTML 的一个很好的例子，但除了文档类型声明之外，没有任何能使其成为 HTML 5 的特性。然而，在这一部分，我们将学习 HTML 5 为我们的文档设计带来的新内容（关于 CSS，您还需要稍等片刻）。
正如您已经知道的，HTML 的核心是结构化您的内容，根据其功能将文档的不同部分标记出来。HTML 5 通过添加一些语义标签，极大地帮助您以更好的方式构建文档。“语义标签有什么好处？”您可能会问。哦！您看，语义标签对开发者（人类）和浏览器（非人类）都很有用，这样双方都可以轻松理解标签内内容的用途（当我们将讨论 CSS 时，您会看到语义化是多么有利于设计）。而这正是 HTML 的意义所在——以一种可以呈现给人类（借助 CSS）的方式定义您的内容，同时也为非人类“阅读器”提供了“理解”您的 HTML 文档的机会。在本文中，您将学习到我们用来创建 HTML 文档的最重要的标签。我将重点强调新 HTML 5 标签的用法，以及它们如何帮助和改进旧标签。
您能看到我吗？
这个小小的魔法（不是我！而是我在文档中的图片）是通过使用 IMG 标签实现的。图片背后的源代码如下所示：
<img src="me.jpg" width="150" height="150" alt="My wedding day...">
您可以看到 IMG 标签有几个属性，其中 src 和 alt 是必需的。让我们看看这些属性的含义。
src声明了实际图像加载的源。您必须明白，图像并非真正嵌入到 HTML 文档中，而是链接到它。这意味着src指向一个外部位置，图像将从该位置加载。alt用于声明一些替代文本，这些文本可以在没有正确渲染功能的设备上显示（如今这种情况很少见，但在 HTML 的早期，文本设备更为普遍）。它还可以通过让浏览器大声朗读文本来帮助身体有障碍的人。width和height用于定义图片的尺寸。这些属性不是必需的，但提供它们是一个好习惯。
现在，请记住我们正在谈论内容。图像可用作插图、图形、图表或照片。HTML 5 引入了两个新标签来帮助您更好地声明此类内容 - FIGURE 和 FIGCAPTION。让我们看看它是如何工作的...
<figure>
<img src="green-energy.jpg" width="400" height="269" alt="Usage of green energy..." />
<figcaption>Worldwide usage of green energy - 2005-2013</figcaption>
</figure>
这段代码将生成图像及其下方的标签。这可能看起来没什么大不了，但它确实很重要！我们通过逻辑上（语义上）将图像及其对应的标题绑定在一起。从现在开始，我们不仅能够将其作为一个整体进行视觉格式化（当然，使用 CSS，而我们目前对此一无所知），还可以为非人类“阅读器”标记它！这种绑定还使我们能够将此图形作为一个单元在本文内外进行引用。
全球可再生能源使用情况 - 2005-2013 年
您连接了吗？
当 HTML（和万维网）刚开始时，一切都是关于共享科学家的研究成果。在 CERN，人们正在寻找一种方法将所有结果连接成一个相互链接的知识库。就像一个组织良好的电子图书馆。
在 HTML 中，您会发现两种链接
LINK标签用于向您的页面添加外部资源（就浏览器而言，这意味着链接指向的资源是 HTML 文档的一部分）。A标签和AREA标签用于定义导航到其他 HTML 文档，或同一 HTML 文档的其他部分。
现在，对于 LINK 标签，它是我在第一部分提到的“头部元素”之一，这意味着它位于 HEAD 标签内。LINK 标签的唯一实际用途是引入必要的 CSS 文件（LINK 支持其他资源，但我所知的任何浏览器都不会实现那些类型）。例如，您现在正在阅读的文章在其 HEAD 中有一个 LINK 标签，如下所示：
<link type="text/css" rel="stylesheet" href="http://s.codeproject.com/App_Themes/CodeProject/Css/Main.min.css?dt=2.8.140326.1">
LINK 标签有几个属性，它们将声明其精确的行为。
rel属性定义了 HTML 文档与资源之间的关系。对我们来说，它将始终是“stylesheet”。type属性告诉浏览器如何解释该资源。由于我们仅将 LINK 用于样式表，因此type的值为“text/css”，这意味着资源文件包含文本，该文本根据 CSS 规则进行格式化。href属性是加载资源的实际位置。在我们的例子中，它位于 CodeProject 的 Web 服务器上。
AREA 标签 - 与 IMG 和 MAP 标签一起使用 - 用于定义图像中的一个区域，当该区域被点击时，会导航到该标签指向的 HTML 文档。
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
这是一个来自 w3school 站点的示例。现在让我们来理解它。您可以看到 IMG 标签有一个新属性 - usemap。这个属性链接了 MAP 标签，该标签用于为该图像分组区域声明。请注意 IMG 中的 usemap 属性与 MAP 标签的 name 属性之间的匹配！现在，每个 AREA 标签都声明了图像中的一个区域。区域的形状和坐标分别使用 shape 和 coords 属性声明。href 属性的使用方式与 LINK 标签完全相同。
现在来看 A 标签。它到处都在使用。在这篇文章中，您随处可见那个小小的蓝色箭头。每一个箭头后面都有一个 A 标签。让我们来看其中一个。
<a href="https://w3schools.org.cn/tags/tag_a.asp">A</a>
与之前一样，href 指示了您点击此链接将跳转到的位置。A 标签也可以用于在 HTML 文档中定义一个锚点。此锚点可用于构建文档内的链接系列，例如目录或尾注。它还可以用于链接到外部文档的特定部分。
<a> <a id="figure1><figure>...<figure></a>
此行声明了一个锚点，可以使用此 A 标签从同一 HTML 文档中访问它。
<a href="#figure1">See Figure 1...</a>
下一个示例将带您到 w3school 站点 'tag_a.asp' 页面中名为 'sample' 的锚点...
<a href="https://w3schools.org.cn/tags/tag_a.asp#sample">A</a>
您将看到 A 标签对于构建目录、导航菜单或您能想到的任何类型的内部和外部 Web 链接都非常有用（您也可以在本文章的顶部看到一个目录）。
如何烤面包
当您制作食物时，第一步是确保您拥有所有食材，然后您按照食谱来制作食物。准备菜肴所需的食材和步骤都是列表，HTML 为您提供了很好的列表命令。
主要的列表结构是 UL - 无序列表，以及 OL - 有序列表。无序和有序并不意味着这些列表实际上是有序或无序的，这完全取决于语义。UL 告诉浏览器列表中元素的顺序无关紧要，而 OL 告诉浏览器顺序很重要。
现在让我们看一些例子
<ul>
<li>1 spoon of dried yeast</li>
<li>3 cups of water</li>
<li>1 spoon of sugar</li>
<li>2 spoon of salt</li>
<li>1/2 cup of olive oil</li>
<li>1 kg wheat</li>
</ul>
- 1 勺干酵母
- 3 杯水
- 1 勺糖
- 2 勺盐
- 1/2 杯橄榄油
- 1 公斤小麦
<ol>
<li>Mix the wheat with the yeast and the sugar</li>
<li>Add oil and water and knead until it became smooth</li>
<li>Add salt and knead until concealed</li>
</ol>
- 将小麦与酵母和糖混合
- 加入油和水，揉捏直到变得光滑
- 加入盐并揉捏直到混合均匀
正如您所见，浏览器将这两个列表在视觉上区分开来。UL 的项目前有点，而 OL 的项目前有数字 - 表明了顺序。这两种列表类型之间共同的一点是 LI，它在两种列表类型中都代表列表中的一个项目。
这些列表可以嵌套以实现多级列表。您会发现，在每个带有菜单的网站上，开发者都使用无序列表来创建该菜单。例如，CodeProject 中“文章”菜单后面的 HTML 如下所示（稍作简化）：
<ul>
<li>Chapters and Sections
<ul>
<li>[More menues]</li>
</ul>
</li>
<li>Search</li>
<li>Latest Articles</li>
<li>Latest Tips/Tricks</li>
[More items]
</ul>
您可能会注意到，实际的菜单看起来与我们刚才看到的列表完全不同。这是因为 CSS 可以发挥的魔力（请耐心等待，我们会讲到 CSS）。
HTML 支持的另一种列表类型是描述列表 - DL。这是一个两级列表，用于术语及其定义。这些可以用于词典或任何需要列出术语的地方，例如科学文章的序言。我们使用 DT 标签来声明术语，使用 DD 标签来列出定义...
<p><strong>Description:</strong>
<dl>
<dt>Synonyms</dt>
<dd>Definition</dd>
<dd>Explanation</dd>
<dd>Information</dd>
<dd>Characterization</dd>
<dt>Antonyms</dt>
<dd>Concealment</dd>
<dd>Misrepresentation</dd>
</dl>
</p>
描述
- 同义词
- 定义
- 解释
- 信息
- 特征描述
- 反义词
- 隐藏
- 误传
如果您稍作思考，就会明白这个列表可以用前面检查过的任何一种列表类型来完成。但请记住，HTML 的全部意义在于内容的结构和语义。因此，这些不同类型的列表不是给您作为开发者的，而是作为定义内容的工具！
展示您的数据
我们已经看到了图表图像作为在 HTML 文档中呈现数据的一种方式，现在我将向您展示如何添加表格数据。
但在那之前，我想带您回顾一下本系列的第一个部分。当时我写了关于文档布局的内容，并提到有些开发者（也包括设计师）使用表格进行布局。我警告您不要这样做！它存在巨大的可维护性问题。几分钟后，您就会明白表格会变得非常复杂，而布局应该很简单。所以不要使用它们！
那么，让我们来看一个来自 CodeProject 每周投票结果的表格数据示例（为了方便您理解，我删除了所有格式）。
<table>
<caption>Weekly poll</caption>
<thead>
<tr>
<th>Option</th>
<th>Votes</th>
<th>%</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Responses</td>
<td>1991</td>
<td> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Back / neck problems</td>
<td>945</td>
<td>47.46</td>
</tr>
<tr>
<td>Shoulder / Elbow joint problems</td>
<td>445</td>
<td>22.35</td>
</tr>
<tr>
<td>Forearm / wrist / hand (including carpel tunnel)</td>
<td>553</td>
<td>27.77</td>
</tr>
<tr>
<td>Other Musculoskeletal problems</td>
<td>143</td>
<td>7.18</td>
</tr>
<tr>
<td>Vision / eye problems</td>
<td>806</td>
<td>40.48</td>
</tr>
<tr>
<td>Headaches</td>
<td>445</td>
<td>22.35</td>
</tr>
<tr>
<td>Obesity</td>
<td>506</td>
<td>25.41</td>
</tr>
<tr>
<td>Mental health issues</td>
<td>245</td>
<td>12.31</td>
</tr>
<tr>
<td>Other</td>
<td>117</td>
<td>5.88</td>
</tr>
<tr>
<td>No issues for me!</td>
<td>360</td>
<td>18.08</td>
</tr>
</tbody>
</table>
| 选项 | 投票数 | % |
|---|---|---|
| 响应 | 1991 | |
| 背部/颈部问题 | 945 | 47.46 |
| 肩部/肘部关节问题 | 445 | 22.35 |
| 前臂/手腕/手（包括腕管综合征） | 553 | 27.77 |
| 其他肌肉骨骼问题 | 143 | 7.18 |
| 视力/眼部问题 | 806 | 40.48 |
| 头痛 | 445 | 22.35 |
| 肥胖 | 506 | 25.41 |
| 心理健康问题 | 245 | 12.31 |
| 其他 | 117 | 5.88 |
| 我没有问题！ | 360 | 18.08 |
好的。这是一段不错的代码。如您所见，TABLE 标签用于包含您的表格数据。它有四个子元素，每个子元素定义了数据的不同语义部分。
CAPTION- 用于声明表格的易读标题。THEAD用于为每一列声明一些标题信息。TFOOT用于显示一些结束信息 - 在我们的例子中，是一种关于投票的摘要。TBODY包含要显示的数据。
您可能会对标签的顺序感到惊讶 - 简单的人类逻辑认为应该是表头、表体、表尾。然而，HTML 与简单的逻辑无关。它规定表尾必须紧跟在表头之后，并且在表体之前（我可能会剧透，但我要告诉您，浏览器实际上并不在意这个顺序，所以您可以把表尾放在最后）。
至于其他，TR 定义了一行信息，TD 或 TH 定义了一个数据单元格。两者之间的唯一区别是语义。TH 用于 THEAD 中，而 TD 用于其他所有地方。
现在想象一些财务数据，然后想象这些数据是一个月度报告中的图表。是的，您可以像前面几段那样将表格包装在 FIGURE 中！这是使用语义定义内容的绝佳示例，这也是您成为 HTML 专家之路上的第一件事。
更多语义化
在这一部分，我想向您展示一些您可以用到的更多标签，以更好地定义您的内容。我将将其分成两部分
- 文章级语义。此组中的标签用于定义 HTML 文档的不同部分。
- 文本级语义在文本块内部用于定义文本部分。
- PRE 标签
文章级语义
我们已经讨论了标题（H1-H6），它们可以用来在 HTML 文档中构建某种层级结构。但是，我们还有一些其他标签可以用来构建这种层级...
ARTICLE 标签用于定义 HTML 文档中一个与其他部分完全独立的部分。这意味着 ARTICLE 标签内的内容本身就有意义，可以将其从原始上下文中移出而不改变其含义。例如，本文可以标记为 ARTICLE，或者在博客网站中，每个博客都可以这样标记。
SECTION 标签用于定义文章的较小部分，例如章节。SECTION 内的信息是相互关联的，但不能独立存在。
HEADER 和 FOOTER 标签用于标记整个 HTML 文档、文章或章节的全局开头和结尾内容。
NAV 标签用于包含 HTML 文档、文章或章节中的主要导航链接。最恰当的用法是用 NAV 标签包含站点菜单。您需要记住，并非所有导航链接都必须包含在 NAV 标签中，它只用于标记主要导航列表块。如果您寻找 NAV 标签的设计示例，您会发现大部分都有一个在 HEADER 标签内，一个在 FOOTER 标签内。
ASIDE 标签用于定义与其中放置 ASIDE 的内容不直接相关，但读者可能会感兴趣的内容。假设您正在写一篇关于您刚去过的地方的博客，您可能会将该地方的联系信息放在 ASIDE 标签中。
这个例子向您展示了这些标签如何在 HTML 文档中相互关联。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>My Blog</h1>
<header>
<nav>
<ul>
<li>How to count from 1 to ten using your fingers...</li>
<li>Do not kiss him on the first meeting...</li>
</ul>
</nav>
</header>
<article>
<h2>How to count from 1 to ten using your fingers...</h2>
<section>
<p>
Paragraph one
</p>
<p>
Paragraph two
</p>
</section>
<section>
<p>
Paragraph one
<aside>A funny joke I just remembered</aside>
</p>
<p>
Paragraph one
</p>
</section>
</article>
<article>
<h2>Do not kiss him on the first meeting...</h2>
<section>
<p>
Paragraph one
</p>
<p>
Paragraph two
</p>
</section>
<section>
<p>
Paragraph one
<aside>What to tell him to make him go!</aside>
</p>
<p>
Paragraph one
</p>
</section>
</article>
<footer>
<nav>
<ul>
<li>How to count from 1 to ten using your fingers...</li>
<li>Do not kiss him on the first meeting...</li>
</ul>
</nav>
<p>Copyright 2014</p>
</footer>
</body>
</html>
文本级语义
这些语义标签不会将您的内容分成大块，而是将小部分（有时只是单词）定义为与其周围环境在语义上有所不同。
EM 标签用于将内容的一部分标记为强调。默认情况下，浏览器将 EM 渲染为斜体。
STRONG 标签用于将文本标记为重要。默认渲染为粗体。
SMALL 标签用于标记不那么重要的文本。SMALL 的默认渲染是较小的字体。
CITE 标签用于标记被引用的人的姓名。默认渲染为 CITE 的斜体文本。
Q 标签用于标记从其他来源引用的内容部分。浏览器会将此类文本用引号括起来。
BLOCKQUOTE 标签与 Q 标签相同，但用于大块的引用文本。浏览器将缩进 BLOCKQUOTE 内的文本。
ABBR 标签用于定义文本中缩写的含义。浏览器将使用 ABBR 为缩写创建工具提示。
MARK 标签用于标记应该高亮的某个元素。浏览器对这类文本使用不同的背景颜色。
CODE 标签用于标记代表计算机源代码的内容。浏览器会以不同的字体渲染此类内容。
请记住，这些标签不应用于大段文本，并且除了 BLOCKQUOTE 之外，仅用于少量单词。
这些示例来自 w3c...
<p><strong>EM tag</strong></p>
<p>I must say I <em>adore</em> lemonade.</p>
<p><strong>STRONG tag</strong></p>
<p>This tea is <strong>very hot</strong>.</p>
<p><strong>SMALL tag</strong></p>
<p>These grapes are made into wine. <small>Alcohol is addictive.</small></p>
<p><strong>CITE tag</strong></p>
<p>The case <cite>Hugo v. Danielle</cite> is relevant here.</p>
<p><strong>Q tag</strong></p>
<p>The judge said <q>You can drink water from the fish tank</q> but advised against it.</p>
<p><strong>BLOCKQUOTE tag</strong></p>
<blockquote><p>
The truth may be puzzling. It may take some work to grapple with.
It may be counterintuitive. It may contradict deeply held
prejudices. It may not be consonant with what we desperately want to
be true. But our preferences do not determine what's true. We have a
method, and that method helps us to reach not absolute truth, only
asymptotic approaches to the truth — never there, just closer
and closer, always finding vast new oceans of undiscovered
possibilities. Cleverly designed experiments are the key.
</p></blockquote>
<p><strong>ABBR tag</strong></p>
<p>Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.</p>
<p<strong>>MARK tag</strong></p>
<p>Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.</p>
<p><strong>CODE tag</strong></p>
<p>The <code>fruitdb</code> program can be used for tracking fruit production.</p>
PRE 标签
我将这个标签放在一个单独的部分，因为在您理解它之前，您需要了解一些关于 HTML 的知识。您已经看到了一些 HTML 代码示例，并且所有这些示例都经过了精美的格式化，带有缩进和空格，以便于阅读。您没有看到的是，HTML 对空格不敏感。您可以将段落中的文本换行，添加额外的 200 个空格，但 HTML 会忽略它。HTML 会将连续的空格合并成一个空格，然后渲染内容，并根据渲染设备的物理大小引入自己的换行。那么，如果您想保留特殊的格式（就像本文中的示例代码那样）怎么办？为此，我们有 PRE 标签。PRE 标签内的文本将保留其原始格式，包括换行符和空格。
一些好消息
HTML 5 引入了许多标签来辅助 HTML 文档的创建。其中大多数标签都与语义相关的紧密内容有关，但有两个是关于内容本身的类型。
VIDEO 标签
您永远猜不到，所以我来告诉您。VIDEO 标签用于向您的文档添加一些视频内容。
<video controls width="480px">
<source src="video.ogg">
No video for you. Move to some decent browser...
</video>
AUDIO 标签
同样，AUDIO 标签可以用来向您的 HTML 文档添加一些音频。
<audio controls width="240px">
<source src="audio.mp3" />
No audio for you. Move to some decent browser...
</audio>
无评论
在某些情况下，开发者会在代码中添加注释。这有助于向同一团队的其他开发人员解释一些棘手的解决方案，或者仅仅是记住您为什么以某种方式做某事。
HTML 注释标签与其他任何标签都不同，它看起来像这样：
<!--In fact there is a comment...-->
在任何您觉得需要给自己一些解释的地方都可以使用这个标签，并且不必担心，因为这些注释在浏览器中是不可见的。
代码编写最佳实践
HTML 在如何编写方面没有任何规则。没有格式限制，或者何时换行以及如何缩进代码。然而，您可能已经注意到我总是进行缩进和换行，原因是为了使我的代码尽可能易读。我建议您也这样做。
您可能还会注意到我为所有 HTML 标签（DOCTYPE 除外）使用小写字母。使用任何大小写都不是强制性的，您甚至可以混合使用大写和小写，但我建议您坚持使用一种大小写，这也有助于您理解您编写的代码。
浏览器支持
经过多年的形成，HTML 5 仍处于“候选推荐”状态。这意味着直到最近，它的变化速度都非常快。其直接结果是不同的浏览器以不同的方式（如果支持的话）支持不同的标签。因此，在使用新的 HTML 5 标签时，您必须做好该标签在客户端浏览器上不支持的准备。
要检查浏览器支持情况，您可以访问 w3school.com。
摘要
我在本文中向您灌输了大量信息，其中大部分可能您还无法完全理解。没关系，您可以一遍又一遍地阅读，直到您理解为止。但有一个捷径。实践！如果您决定学习 HTML 5，那并非没有原因。您可能有一些关于在哪里使用它的想法，所以继续吧，打开您的编辑器，尝试使用您新学的知识来实现您的想法。成为专家是 5% 的学习 - 另外 95% 来自辛勤工作。