HTML5 和 CSS3 第 2 部分：构建基础

引言

在我们系列文章的第一部分中，我们学习了 HTML5 和 CSS3 的真正含义以及它们的工作原理。学完之后，我们已经开始编写可用的 HTML 和 CSS 代码。我们顺利地完成了目标，没有偏离方向或感到不知所措。希望这能鼓励你继续学习更多关于 HTML 和 CSS 的知识。如果能这样，你来对地方了。让我们开始吧。

关于样式的更多信息

首先，我想讲几件关于样式的基础知识，这将有助于理解我们在本教程中所做的工作。首先，你可以在 HTML 文档中直接应用样式，而不是单独创建一个样式表（CSS 文档）。要做到这一点，你需要在 HTML 元素上添加一个“style”属性，如下所示：

<h1 style="font-family:  Arial">Sample Hompeage</h1>

注意这看起来就像 CSS。如果我们看 CSS 的名称（Cascading Style Sheets - 层叠样式表），我们就能大概了解为什么 HTML 元素上的样式与我们的 CSS 文本看起来一样。“层叠”意味着样式会堆叠在一起，最重要（通常是离元素最近的那个——我们稍后会讲到）的样式会生效。“表”（Sheets）仅仅意味着文档，而不是在 HTML 文档中。这就剩下“样式”（Style）。样式代表了元素实际的作用。这就是为什么当我们看到 HTML 中的“style”作为属性时，它与 CSS 中的一个元素是一样的。它们都是应用到元素的样式。

所以，现在你知道如何在 HTML 文档中直接应用样式了。现在**永远不要使用它们**。永远。不，我是认真的。行内样式（将 style 属性应用于 HTML 元素）会削弱 CSS 的价值，并使你的 HTML 文档更难修改。它们还会使你的 HTML 文档更混乱，更难理解。在某些特殊情况下，行内样式可能是可以接受的，但请假设不存在这种情况，并在尝试了所有其他选项后，再考虑使用行内样式。

我们提到了 CSS 的“层叠”部分，我想再深入讲讲。有时候，一个样式会干扰另一个样式。例如，上面我们正在为一个 h1 应用一个改变字体家族的样式。我们的 CSS 中已经有一个规则会影响我们 body 的字体家族。由于我们的 h1 标签在 body 内部，两个样式都适用于它。它不会导致错误，h1 标签的字体家族会变成“Arial”。这是如何做到的呢？嗯，这就是 CSS 的本质。样式根据特异性（specificity）以层叠的方式应用。这意味着最具体的规则是“获胜”的那个。在我们的例子中，我们应用了直接附加到 h1 标签的样式，因为它只针对该标签。这比应用于 body 及其所有内容的样式更具体。一般的顺序是（从最不具体到最具体）：元素（如 h1 或 body）、类（class）、ID，然后是行内样式。目前，我们只需要知道这些就足够了。稍后，当你需要重新学习这个问题并想了解更多信息时，可以查看 Smashing Magazine 的这篇文章：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/。

修改文本

文本是几乎所有网页都包含的基本元素之一。在上篇文章中，我们查看了包含文本块的基础知识。然而，几乎可以肯定你会在某种程度上想要修改或标记你的文本。为了指导我们的学习，让我们看一下 Microsoft Word 菜单，并尝试在 CSS 和 HTML 中重现这些操作。

字体选择

如果我们查看菜单的“字体”部分，会看到一个字体下拉菜单。这将改变文档中我们高亮显示文本的字体。要在 CSS 中实现这一点，我们首先选择我们的部分，然后指定“font-family”，就像我们在第一个教程中所做的那样。

body {
   font-family: 'Comic Sans MS';
}

在这个例子中，我们改变了文档中所有文本的字体家族（除非有更具体的规则）。这就是设置项目字体的全部内容。然而，并非所有浏览器都安装了所有字体。为了应对这种情况，你可以按偏好顺序指定多种字体，如下所示：

body {
   font-family: Arial, Helvetica, sans-serif;
}

最后一个字体，sans-serif，实际上是一个通用的字体家族。这允许浏览器在指定的两个字体不生效时选择该家族中的一个字体。另外请注意，这次我不需要在字体名称周围加上引号。这是因为这些字体名称中没有空格。计算机对空格感到困惑，所以你需要加上引号来告诉计算机“所有这些内容作为一个整体”。

字号

在我们的 Microsoft Word 菜单中，字体下拉菜单旁边有一个字号下拉菜单。要在 CSS 中更改字号，我们使用 font-size 属性（我知道，很惊人）。然而，这并不像你最初想象的那么简单。这是你的选项：

• larger/smaller - 相对于父元素
• xx-small, x-small, small, medium, large, x-large, 和 xx-large - 相对于该元素正常应用的字号
• px - 这是一个精确值（如 10px 或 25px），指定字体的高度（以像素为单位）
• pt - 类似于 px，但它适用于打印 CSS，因为它以点（point）为单位指定字体的高度
• % - 相对于该元素正常应用的字号，如 150% 或 75%
• em - 类似于百分比，其中 1em 相当于 100%。要相当于 150%，你需要使用 1.5em。

让我们在代码中演示每个选项。请注意，你只能在一个规则中放入其中一个。如果你在一个规则中放入多个，最后一个将生效（但不要这样做——这是浪费）。

font-size: larger;
font-size: x-small;
font-size: 14px;
font-size: 18pt;
font-size: 175%;
font-size: 0.8em;

字体修饰

在 Microsoft Word 中，你会看到三个组合在一起的图标：粗体、斜体和下划线。我们可以在 HTML 和 CSS 中通过几种方式来重现这些。首先，如果你想通过 CSS 将它们应用于整个部分，你可以使用如下规则：

font-weight: bold;
font-style: italic;
text-decoration: underline;

然而，你可能不想将它们应用于整个段落。要仅将它们应用于文本的某个部分，你可以使用“span”标签，并通过 CSS 来定位该标签。span 标签在 HTML 中除了将文档的特定部分指定为组合在一起之外，什么都不做。你结合使用 span 标签和 CSS 来将样式应用于该部分。让我们来看看实际效果。首先，这是一个 HTML 部分：

<p>
   The <span class="very-important">architecture</span> of the building is what is important.
</p>

注意我在 span 标签上放了一个类（class）。这样我们就可以通过 CSS 来定位这段文本，如下所示：

.very-important {
   font-weight: bold;
   font-style: italic;
   text-decoration: underline;
}

这将使“architecture”这个词变成粗体、斜体和下划线。美学上可能不是最佳选择，但你应该明白了。不过，使用下划线时要小心，因为链接也使用下划线来表示它们是链接。给其他文本加下划线可能会让你的读者感到困惑。

如果你接触 HTML 有一段时间了，你可能知道你也可以直接在 HTML 中修改文本。以前，你会使用 b、i 和 u 标签来分别表示粗体、斜体和下划线。还有 strong 和 em 分别表示粗体和斜体。这些标签在 HTML 中仍然存在，但在 HTML5 规范中，它们不再像以前那样工作了。同样，当你准备好学习上下文重要性和强调文本时，请阅读 Impressive Webs 的这篇文章：http://www.impressivewebs.com/bold-italic-html5/。目前，只需通过 CSS 和 span 标签修改文本即可。这可以让你少操心。

字体颜色

我们在 Microsoft Word 菜单的“字体”部分最后想看的是字体颜色。在 Word 中实际上有两个选项——字体颜色和背景颜色。你可以通过 CSS 来修改它们，如下所示：

color:  red;
background-color: #00ff21;

color 修改的是前景，恰好是字体。background-color 修改的是元素的背景（我知道，很意外）。注意在第一个条目中，我使用了常见的颜色名称（red）。通过名称指定的颜色数量有限。要更具体，你可以使用十六进制数，就像我在第二个属性中那样。还有其他颜色选项可供使用，但这些是最常见的选项。

文本布局

修改文本的外观很棒，但有时你可能想改变文本的位置。再次看看我们的 Microsoft Word 工具栏，我们看到了“段落”部分。这显示了我们在 Microsoft Word 中操纵文本位置的多种方法。让我们在 CSS 和 HTML 中做同样的事情。

列表

通常在文档中，我们会根据需要使用项目符号列表和编号列表。在 HTML 中，我们可以分别通过无序列表和有序列表来实现同样的事情。让我们看看两者的 HTML，然后我们可以讨论具体细节。

<ul>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ul>

<ol>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ol>

当你在浏览器中运行这段代码时，你会得到以下结果：

当你查看创建这两个列表的 HTML 时，你会发现它们基本相同。区别在于外部标签。对于无序列表，你使用 ul 标签（猜猜为什么？）。对于有序列表，你使用 ol 标签（请告诉我你知道为什么）。在这两种情况下，每个列表项都包含在 li 中（我不会解释这个）。

然而，CSS 的好处在于，列表不必看起来像传统的列表。一种常见的 CSS 用法是将其转换为导航菜单。列表项变成菜单选项。嵌套列表变成子菜单。

文本对齐

默认情况下，我们文本是左对齐的。然而，有时你可能希望居中或右对齐文本。要做到这一点，使用 CSS 属性 text-align。标准的选项是 left、right、center 或 justify。所以，要右对齐文本，你会使用如下 CSS：

text-align: right;

很简单，对吧？

其他标签

好的，我们基本上用完了 Microsoft Word 菜单的例子。我们可以使用其他菜单，但现在你可能感觉像是在上 MS Word 101 课程。相反，让我们看看 HTML 中其他几个你可能会经常使用的流行标签。

链接

几乎每个网页都有链接到其他页面的功能。无论你是链接到自己网站上的另一个页面，还是链接到外部资源，大多数页面都会利用链接标签。在看到了 ul、ol、li 以及其他所有显而易见的标签名称后，你可能认为链接标签会是 l 或 link，对吧？不是。它是“a”。明白了吗？我来解释一下。它代表 anchor（锚点）。现在明白了？我猜没有。它不是书中最重要的直观标签。事实上，更糟糕的是，“link”实际上用于不同的目的：导入资源。当我们“链接”我们的样式表时就看到了。但是，让我们回到正题。以下是 HTML 中的一个锚点标签的样子：

<a href="http://www.google.com" title="Google homepage" target="_blank">Google</a>

我在这个标签中包含了三个属性。技术上你只需要 href 属性（要去的网站的 URL），但 title 属性的值会在你将鼠标悬停在链接上时显示，target 属性告诉浏览器在哪里打开链接。在这种情况下，target 的“_blank”告诉浏览器在新标签页/窗口中打开此链接。我认为展示这些属性会很有用，这样你就知道可以做什么了。最后一部分是标签之间的文本。这才是实际显示在网页上的内容。在这种情况下，它就是“Google”这个词。你可以在锚点标签之间放置几乎任何东西，包括一张图片或一整行文字。这取决于你想将什么变成一个可点击的链接。

在上面的例子中，我使用了绝对链接。这意味着我包含了完整的路径，包括 http。然而，还有其他类型的链接。有几种方法可以进行相对链接。例如，你可以只包含 html 页面，这意味着该页面与当前页面在同一个文件夹中。你也可以包含一个路径，如“work/hard.html”，这将是一个位于名为 work 的文件夹中的页面。该 work 文件夹将与当前页面在同一级别。你还可以做的另一件事是，在 url 的末尾包含一个标签的 ID，如下所示：“work/hard.html#breaks”。这会跳转到 hard.html 页面，然后滚动到 ID 属性值为“breaks”的元素。我们讨论的最后一个锚点标签类型是 mailto 链接。在 href 属性中，你不使用 http:，而是使用 mailto:，然后是电子邮件地址，如下所示：

<a href="mailto:bill@microsoft.com">Email Bill</a>

这将创建一个邮件，发件人是当前用户，收件人是 bill@microsoft.com。这些不总是可靠的，并且它们会轻易地将你的电子邮件地址泄露给垃圾邮件机器人，但它们在某些情况下可能很有用，尤其是在私有 Web 服务器（如内联网）上。

表格

表格用于以有序的列显示数据集。它们曾用于在网页上布局文本，但这是对表格的误用。一个表格包含多个部分。让我来展示一下，因为我认为你看了就会明白：

 <table>
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First data</td>
            <td>Second data</td>
            <td>Third data</td>
        </tr>
        <tr>
            <td>First data</td>
            <td>Second data</td>
            <td>Third data</td>
        </tr>
    </tbody>
 </table>

基本上，table 标签包裹着整个内容。然后你有一个 thead 部分，它是头部，还有一个 tbody，包含实际数据。对于这两个部分，你首先需要一个 tr（table row - 表格行），然后是实际数据。在头部，我们使用 th 作为列标题，然后在主体中，我们使用 td 作为这些列中的数据。在 thead 和 tbody 中，可以有多行。

图像

我们怎么可能在没有讨论图像的情况下走到这一步？我敢肯定你一直想把你家小猫的照片放到你的新网站上，而你只需要知道如何做。好了，别担心，时候到了。首先，HTML：

<img src="kittens.png" alt="Cute cats" />

好的，你可能已经发现图像标签叫做 img，它没有闭合标签。src 可能看起来很熟悉。它的工作方式几乎与 anchor 标签的 href 属性完全相同，因为它可以使用相对或绝对路径。区别在于这个路径是图片的“源”（明白了吗？）。alt 属性在图片无法加载时显示。它也可以被屏幕阅读器用于视障人士。

最佳实践

如果你正在阅读这篇文章，说明你做得很好。你已经超越了 HTML 的基础知识，进入了一些更深入的内容。在我们结束之前，我想回顾几个我认为重要的关键点。

注释

当你编写代码时，注释对于告诉下一个人（或六个月后的你）某个文档中正在发生什么非常重要。HTML 非常相似。总的来说，你不想在 HTML 中充斥太多注释，但识别 HTML 的主要部分是一个好主意，这样以后可以轻松浏览。要添加注释，请使用以下标签：

<!-- This is a comment -->

请注意，这些不是真正的标签，但它们的功能像标签一样。你可以注释单行或多行。只是不要嵌套注释。那不会起作用。第一个闭合注释“标签”会关闭外部注释，从而导致 HTML 格式错误。

可读性

既然我们刚刚讨论了注释，我们也应该讨论 HTML 和 CSS 的可读性。首先，最好的做法是根据嵌套级别缩进你的 HTML。例如，让我们再次看看我们的表格：

 <table>
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First data</td>
            <td>Second data</td>
            <td>Third data</td>
        </tr>
        <tr>
            <td>First data</td>
            <td>Second data</td>
            <td>Third data</td>
        </tr>
    </tbody>
 </table>

注意，由于 thead 是 table 的子元素，所以它的缩进比 table 更深。由于 tbody 是 thead 的同级元素，所以它的缩进级别相同。明白了吗？照做。

间距也很重要。在解析页面时，空白会被删除，所以不要害怕在似乎合适的地方添加额外的换行符。通常你应该考虑这样做来分隔 HTML 中的逻辑部分（就像我们对段落所做的那样）。这样做可以让我们的 HTML 更具可读性。

测试

并非所有浏览器都相同。我们在上一篇教程中讨论过这一点。因此，你应该在多个浏览器中测试你的 HTML（至少包括 Internet Explorer、Chrome、Firefox 和 Safari）。确保在所有浏览器中看起来都和你想要的一样。有时字号可能略有不同，导致奇怪的换行或其他类似问题。Web Matrix 使这种测试更容易，因为它允许你只需点击一个按钮即可在多个浏览器中运行你的网站。请注意，Web Matrix 中的“运行”按钮底部有一个向下的箭头。单击该箭头，你将看到所有已安装的浏览器。你可以使用“全部打开”选项一次性在所有已安装的浏览器中运行你的网站。这可以使测试更容易。

另外，请务必测试不同的屏幕分辨率，以确保你的网站外观符合你的要求。快速做到这一点的方法就是将浏览器窗口调整到不同大小，看看你的网站如何响应。

结论

好了，我们已经超越了 HTML 和 CSS 的基础知识。我们没有偏离方向，再次顺利完成了目标。HTML 和 CSS 并没有那么可怕，对吗？当我向你介绍新事物时，通常只是一个新开标签和闭合标签。虽然知道所有标签似乎是一个庞大的列表，但实际使用它们却相当简单。因此，你只需要保留一份你所学知识的列表，以便再次使用。希望你喜欢这个教程。请尽快回来查看第三部分。