HTML5 & CSS3 新手指南 - 第一部分（共 12 部分）

对于新手 Web 开发者来说，发现网页背后的代码可能会让人望而生畏。本文和系列文章将对 HTML5 和 CSS3 的奥秘进行易于理解的分解，并提供一个结构化的网站项目，该项目将在各章节中逐步构建，以演示 HTML 和 CSS 的功能。

HTML5 和 CSS3 的历史

从 SGML 到 HTML5

标准通用标记语言 (SGML) 的存在是为了向政府和行业等机构提供一种信息结构化的方法，使信息在创建多年后仍能被计算机应用程序解析。由于其极度的通用性，有时也被称为元语言。

HTML 于 1989 年由欧洲核子研究中心 (CERN) 的计算机科学家 Tim Berners-Lee 构思。Berners-Lee 最初希望 HTML 成为 SGML 的产品，但它最终被独立创建，其灵感来源于 SGML 的优点。最值得注意的是，HTML 借鉴了元素的概念。

HTML 在 1993 年至今经历了多次修订。最初它只是一个简单的提案，但标准化传输和查看文档的设想本身就引起了极大的兴趣。随着网络的增长，页面设计者的技术也日益精进，随后对 HTML 标准进行了改进。可以预见，这种改进将在可预见的未来继续下去。

HTML5 是超文本标记语言标准的第五个版本，由 W3C 组织于 2012 年 12 月发布为候选推荐 (CR)。

CSS 的兴起

随着网页设计的日益复杂和精细，网页设计者们要求更多的功能。作为回应，浏览器厂商开始创建专有元素——例如，使文本闪烁或设置字体类型的标签。不幸的是，这导致了不同浏览器之间的不兼容。设计者要么为某个浏览器创建具有炫酷功能的页面，要么将页面降级以适应所有浏览器，去除那些花哨的功能。

Web 社区认识到需要新的东西：结构需要与样式分离。提交了多项提案，并在 1996 年，W3C 发布了其 CSS Level 1 推荐。CSS Level 2 于 1998 年发布，CSS3 规范在 Level 2 发布后立即开始制定。截至本文发表时，它仍处于开发中。

如今，Web 设计者严重依赖 CSS。

HTML 和 CSS 的作用

HTML 的目的

HTML 提供文档或网页的结构。也就是说，浏览器或用户代理会根据 HTML 文档中定义的语义来构建要显示的页面。

语义是通过元素定义的，这些元素由开始标签、内容和结束标签组成。根据 Mozilla 开发者网络，有 109 个有效的 HTML5 元素，几乎所有现代浏览器都支持所有这些元素。而完整的 W3C 标准定义了 116 个独立元素，其中一些元素并未在任何地方实现，并可能被删除。

元素命名的目的是为代码提供语义含义。当元素在 HTML 文档中正确排列时，浏览器就会显示一个清晰易读（并（希望）具有视觉吸引力）的网页。同样，当 Web 设计者检查 HTML 代码时，这些元素也赋予了文档含义。

例如，HTML 通过 `<nav>` 元素定义页面上的导航项。其他页面的摘要可以放在 `<article>` 元素中。页面底部出现的内容将放在 `<footer>` 元素中。所有元素协同工作，为 Web 设计者提供文档结构的清晰图景，并为浏览器提供正确的指令。

CSS 的目的

相反，CSS 提供呈现。

嗯，大部分是这样。CSS 可以通过设置宽度和定位来提供一些格式化功能，但其主要目的在于它对内容呈现所能做的事情。

当你想要一个段落显示不同于其他内容的字体时，你会使用 CSS。当你想要将页面颜色设置为赭石色调色板时，你会使用 CSS。新的 CSS3 规范允许 Web 设计者绘制渐变，你还可以让文本在鼠标悬停在内容上时淡入或淡出。简单地说，样式表能为原本枯燥的文本注入活力。

入门

你需要一个编辑器

由于 HTML 文档由纯文本构成，因此可以使用许多编辑器中的任何一个来创建你的 HTML 页面。以下是一些免费编辑器的列表

所列编辑器的安装在链接中都有详细说明。一旦安装好其中一个（或者如果你选择使用操作系统自带的编辑器）

在本系列文章中，我将以 Notepad++ 为例。当 Notepad++ 打开时，会显示一个默认的空白文档。

如果需要创建新文档，请单击“文件”，然后单击“新建”。

由于所有代码示例都以纯文本格式显示，因此文本可以直接复制并粘贴到你选择的任何编辑器中。然后，你可以通过单击“文件”，然后单击“另存为”来保存文档。第一次保存文件后，单击“文件”和“保存”将保存文档。Ctrl-s 是执行相同操作的快捷键。

Notepad++ 的一个优点是，它会自动打开你上次关闭应用程序时打开的文档。

第一步

在编辑器中创建一个新文件，并将其保存为basic.html。如果你使用 Notepad++，你应该会看到类似这样的内容

然后可以将代码复制并粘贴或直接输入到此文件中。稍后将介绍在浏览器中显示 HTML 文件的方法。

基本 HTML 语法和结构

浏览器和谐共处

Hello browser! 

上面输入的文本就是你在浏览器中显示“Hello browser!”所需的所有内容。HTML5 规则非常宽松，你可以输入几乎任何内容来显示一些东西。

<strong>This AWESOME text should show up as bold.</STRONG>  

除显示内容外，元素对大小写不敏感。请注意，上面的开始标签名称是小写字母，而结束标签中的元素名称是大写字母。这是因为浏览器认为大小写对有效的 HTML 语法没有影响。XHTML 文档要求所有标签都用小写，但 W3C 对 HTML5 的建议取消了该规则。

规则

所有元素都必须以开始标签开头。

元素标签用“<”和“>”字符括起来。元素名称位于尖括号之间。元素名称的字母之间不应有空格，元素名称前面也不应有空格。

Hello browser!                       
<sTronG>Nice day.</Strong>           --> Works.
< strong >Nice day.</strong>         --> Fails.  Space after '<' confuses the browser.
<str ong>Nice day.</strong>          --> Fails.  Space inside word invalid.
<p><strong >Nice day.</ strong ></p> --> Works. 

元素不需要结束标签，但...

元素内容是介于开始标签和结束标签之间的内容。结束标签的形成方式是，以“</”字符开头，以“>”字符结尾。并且，就像开始标签一样，结束标签也需要在括号之间包含元素名称。请看下面的例子

<p>The rain in Spain falls mainly on the plain.</p> But not in the forest. 

开始标签是 `<p>`，结束标签是 `</p>`。`<p>` 和 `</p>` 标签之间的文本构成了 p 元素的內容。然而，“But not in the forest”这段文本不在标签内，不被视为 p 元素的內容。

有些元素称为“空”元素，因为它们不包含任何内容。空元素的闭合方式是在“>”字符前加上“/”字符。这是一个空元素的例子

<br /> 

`<br>` 元素插入一个换行符。换行符不能有内容，因为它只提供垂直间距。另一个空元素是 `<img>` 元素。

仅仅因为不需要结束标签，并不意味着你不需要它们。几个元素可以包含其他嵌套在其中的元素。

<p>The rain in <b>Spain</b> falls mainly on the plain.</p> Oh yeah. 

注意 `<b>` 元素如何在其开始和结束标签位于 `<p>` 元素的开始和结束标签之间。如果我们省略 `<b>` 元素的结束标签，显示效果将不是我们想要的。

当 `</b>` 标签存在时

当 `</b>` 标签不存在时

请注意，在“in”之后的所有文本都变为粗体。

如果你将嵌套元素的结束标签放在父元素的结束标签之外，也会发生同样的情况

<p>The rain in <b>Spain falls mainly on the plain.</p> Oh yeah.</b> 

由于 `<b>` 元素没有在 `<p>` 元素结束之前结束，因此在“in”之后的所有文本都变为粗体。几个好的编辑器提供了高亮显示机制，可以指示成对的标签，并帮助保持代码的有效性。但总的来说，你应该能够轻松地看到嵌套问题，而不是让它们变成问题。

实用技巧：由于浏览器会忽略文档中的多余空格，你可以轻松地为代码创建视觉结构，从而消除大多数嵌套问题。这将在本系列的第二部分讨论。

结构验证

如果你想要有效的 HTML5 代码，那么只需要满足几个条件。下面 HTML 元素部分包含的模板将通过验证。我建议在开始每个 HTML5 文档时使用它或类似的模板。

有效的代码意味着所有必要的条件都已满足，并且所有元素都格式正确。网上有验证工具，例如 Validator.nu，可以让你扫描文档以验证其语法。

应该经常进行验证。创建有效的 HTML 文档可以将专业人士与其他人区分开来，并促进良好的职业道德。在本作者看来，没有什么比验证其产品更能让 Web 设计者脱颖而出了。验证并非必需，但验证服务产生的输出会指出编码时遗漏的问题。

W3C 提供了一个在线 HTML5 文档验证服务。你可以单击页面顶部的任何一个选项卡来选择页面来源。选择文档后，按“检查”按钮即可获得即时报告。

因此，为了演示代码验证，请执行以下操作

1. 访问 http://validator.w3.org/。
2. 在“地址”字段中输入：www.google.com。
3. 单击“检查”按钮。
4. 注意报告的错误列表以及窗口顶部附近的红色条。这意味着 Google 主页的 HTML5 语法不是有效的，尽管它在浏览器中运行得很好。
5. 在“地址”字段中输入：www.jjensen2.com/wgu/index.html。
6. 单击“重新验证”按钮。
7. 注意页面顶部附近的绿色条。这意味着地址字段中的页面通过了验证。

.
HTML 元素

有一组基本元素可用于在文档中构建结构。如前所述，浏览器会容忍许多错误，但有抱负的 Web 开发者应该练习以适度的结构来构建他们的 HTML5 文档。请注意以下几点

<!DOCTYPE html>
 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Beginner's HTML5 Practice Page</title>
    </head>
    <body></body>
</html> 

上面的代码可以用作模板，以方便文档中的结构。上面没有一个标签是浏览器显示内容所必需的，但如果你想确保文档通过验证服务，则需要这些元素。

另请注意，这些元素可能不需要结束标签，但我包含了它们以阐明元素的排列。

基本元素

下面将简要介绍模板中的元素。我省略了 `meta` 元素，因为它用于更高级的需求。尽管如此，它对于验证是必需的。关于该元素的解释将在本系列的后续部分中进行。

<!DOCTYPE html>

虽然不是一个元素，但 `DOCTYPE` 是一个必需的前导声明。它告诉浏览器在文档的其余部分预期 HTML5 代码。仅此而已。早期 HTML 和 XHTML 的 DOCTYPE 定义非常严格且有些令人困惑。HTML5 的建议大大简化了事情。

<html></html>

`html` 元素被称为文档的“根”元素。所有其他元素都嵌套在 `html` 元素内部。

<head></head>

`head` 元素是嵌套在根元素中的第一个元素。在 `head` 元素内，可以表示几个其他元素。模板中的 `meta` 元素是其中之一。也可以在此处定义外部 CSS 文件，但具体细节将在后续讨论。

<title></title>

`title` 元素显示在 `head` 元素内。开始和结束标签之间的文本成为页面的标题。因此，标题将显示在浏览器选项卡上。没有 `title` 元素，浏览器通常会显示文件名。

<body></body>

`body` 标签跟在 `head` 标签之后。浏览器会将 `body` 元素开始和结束标签之间的所有内容视为网页内容。你的 HTML5 代码的 99% 或更多将嵌套在 `body` 元素中。

我们现在将简要介绍的基本元素都将嵌套在 `body` 标签内。

<p></p>

`p` 元素表示一个文本段落。对于 HTML 页面，段落更多的是一个结构概念，而不是一个逻辑概念。段落会自动在内容周围生成边距，从而在视觉上提供一种隔离感。例如，Chrome 浏览器会在文本周围设置 8 像素的边距。

这

        <p>Someone once told me that a stitch in time saves nine.  I
        never really understood that saying.  Perhaps, if he gave it
        some context, I would not feel so idiotic.</p>
        <p>Ah, well, that's just water under the bridge.</p> 

在 Chrome 浏览器中看起来像这样

段落是几种可以包含其他元素（以及文本内容或代替文本内容）的元素之一。

<h1></h1>...<h6></h6>

有六个标题元素，其中 `h1` 是最重要的标题，`h6` 是最不重要的。在浏览器页面中，标题级别通常直接与显示内容的字体大小相关。

标题元素也显示默认边距，其确切距离最初取决于浏览器本身。以下是显示所有标题元素与正常文本对比的代码

        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <p>This is normal text.</p> 

<br /> 

`<br>` 元素插入一个换行符，也称为回车符。不使用 `p` 元素，可以使用 `br` 元素将无格式内容分开，并显示类似段落的信息。例如，以下内容

        This is the default font style and size.
        <br />
        This text is continued on a new line. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Beginner's HTML5 Practice Page</title>
    </head>
    <body>
        <h1>My HTML5 Practice Page</h1>
        
        <h2>History</h2>
        <h3>SGML</h3>
        <p>SGML stands for Standard Generalized Markup Language.</p>
        <h3>HTML</h3>
        <p>I found out that HTML is a derivative of SGML.</p>
        
        <h2>Tags Learned</h2>
        <h3>Required</h3>
        <p>!DOCTYPE, html, head, title, meta, body</p>
        <h3>Basic</h3>
        <p>p,br,h1-h6</p>
        
        <h2>Encoding</h2>
        <p>The encoded URL in the browser looks normal in the file system.</p>
        <h2>Just the Beginning</h2>
        <p>I just realized how easy HTML can be!</p>
    </body>
</html> 

现在这个网页非常枯燥。但是，正如你将在后面的章节中看到的，CSS 可以让这些单调的文本看起来非常漂亮。

保存和查看网页

如果你一直试图在自己的系统上通过复制粘贴等方式查看前面的示例，你可能对如何在浏览器中查看本地文件感到困惑。

幸运的是，选择文件非常简单。在 Windows 机器的浏览器中按 Ctrl-o 会弹出一个文件选择器对话框。只需搜索你的文件，单击它，然后单击“打开”按钮。浏览器将显示你选择的文件。

在浏览器的地址栏中，情况可能会有点奇怪，尤其是当你的路径或文件名包含与 URL 标准不兼容的字符时。例如，这个

D:\Articles\Beginner's Guide to HTML\begin.html 

在地址栏中看起来像这样

file:///D:/Articles/Beginner's%20Guide%20to%20HTML/begin.html

在上面的例子中，空格被转换成了“%20”。这实际上是百分号后面跟着一个空格字符的十六进制表示。包含非法 URL 字符十六进制表示的 URL 被称为已编码。这是你随着 Web 开发经验的增长需要理解的一个重要概念，但现在我们不需要详细讨论它。

现在，你真的在开发了

反复编辑文件、保存、查看——然后重复编辑、保存等——这是网页开发中一个正常的开发周期。这个过程在所有行业中的差异非常小。虽然你可能会使用功能强大的集成应用程序来编辑文件，或者使用一个晦涩的浏览器来查看它，但编辑-保存-查看的周期基本上保持不变。所以，如果你按照练习说明进行了操作，你就成为了一名正式的 Web 开发者。恭喜！

摘要

在本章中，我们回顾了 HTML 和 CSS 的历史，它们之间的关系，以及一小部分 HTML5 元素如何使平淡的文本在网页上以不同的方式显示。我还简要演示了如何使用一个编辑器来辅助你的 Web 设计过程。

本系列的第二部分即将发布。

历史

2014-03-27：首次发布。