本节书摘来异步社区《响应式Web图形设计》一书中的第1章，第1.4节，作者： 【美】Christopher Schmitt 译者： 曾斌 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4　布置页面内容

响应式Web图形设计
现在，网页中已经有了一些内容，让我们添加一些标题并进行排版处理吧。

1.4.1　HTML标题

首先，使用h1标签给网页添加一个标题（见图1.13）：

标题标签可以从h1（顶级标题）一直到h6（最低级别的标题），如图1.14所示。

通过使用标题组织网页页面，可以将内容划分为更易管理的块，以便让访客更加轻松地浏览页面和查找信息。

1.4.2　HTML文本标签

现在我们给文本添加一些语义化的标签。因为在该页面中有一段引用，所以我们使用blockquote（块引用）元素（见图1.15）。

使用正确的方式标记标题

以正确的顺序使用标签是一个正确的实践。如果你在h2标签下使用一个小标题，例如，这个小标题应该嵌套在h3标签（不是h4或h5）中。页面的标题嵌套在h1标签中，而不是h2标签中。总之，不要跳过标题的层次！

以正确的顺序使用标题标签能够保证语义正确，并且有助于优化搜索引擎的搜索结果，因为搜索引擎是根据标题来排列信息的重要性的。不要担心特殊标题的大小或样式——你将在第3章中学习如何使用CSS调节这些属性。
接下来，让我们通过使用strong和em元素，为文档添加粗体和斜体格式（见图1.16）。

请注意，strong和em默认的渲染方式分别是粗体和斜体。而且，在浏览器中可以使用b和i元素来实现同样的视觉效果。换句话说，你可以使用任意一对元素来实现这些效果。

1.4.3　为网站创建链接

网站最有特色的地方就是链接。如果不能使用超链接来互连我们的网页（见图1.17），那么万维网的特性将会大大减少。

我们使用锚标签来定义超链接。a元素用于标记一些文本或图像作为一个路径（见图1.18），跳转到别的文档或当前文档的不同部分。

开始的锚标签可以通过添加的属性和值进行扩展。属性是包含在开始标签中的附加信息，可以提供关于元素的上下文信息。每一个属性都有一个用引号包裹的引用值。

只需要一个属性就够了

有时候在HTML里面，只需要添加一个属性就可以让浏览器渲染一个元素。

1.4.4　添加title属性

title属性用于提供关于链接的额外信息（或其他任何元素）。当访客用鼠标滑过附有title属性的链接（或其他元素）时，浏览器会显示附有标题内容的提示信息。

结果如图1.19所示。

！标题属性与标题元素

title属性与title元素是不同。title元素放置在head元素中，并且只能命名页面一次。

1.4.5　网站的链接

让我们再看一下我们创建的第一个链接：

<a href="http://en.wikipedia.org/wiki/ Mark_Twain" title="Information on Mark Twain">Mark Twain</a>

以上地址类型被认为是一个绝对链接。因为这个链接是一个完整的URL或网页地址，所以无论用户在网上的什么地方，都可以访问这个网页。

1．使用相对链接
当在网站内或页面中创建链接时，有时你会想使用相对链接。只要你在同一个网站浏览别的页面，相对链接的地址就是有效的。例如，某个网站由4个页面构成：index.html、page1.html、page2.html和page3.html。设想它们都在同一个根文件夹下，该文件夹包括网站的HTML文件、图像和辅助文件（见图1.20）。

如果想在网站内创建一个从index页面跳转到另一个页面的链接，那么就需要创建一个有着绝对路径的链接，例如：

<a href="http://example.com/page1.html">Page 1</a>

你也可以使用相对链接，例如：

<a href="page1.html">Page 1</a>

以其他名称命名根文件夹

在整个网站中，根文件夹是必需的，它包含了你的网站运行所需的所有文件和资源。
相对链接既没有完整的http://协议，也没有域名。当浏览器捕捉到一个相对链接时，它就会寻找与用户当前浏览的页面相关的页面进行跳转。尝试添加一个从index.html文档到page1.html的相对链接（见图1.21）。你也可以再添加一个链接返回到index页面！

2．导航文件夹
正如你的电脑中有许多包含文件的文件夹，网站也是由许多文件和文件夹所构成的。在同一个网站中从一个文件夹链接到不同文件夹中的另一个文档时，通常使用相对链接。例如，我们假设有一个名为“subfolder”的文件夹中有一个主页面。下面的代码示例链接到了“subfolder”文件夹里的page1.html。

<a href="subfolder/page1.html">page1.html<a>

这个文件夹必须与导航之前的页面放在同一个目录下。

接下来的代码示例将链接到page1.html，而当前页面必须与page1.html放在相同的文件夹里。也就是说，浏览器导航到当前页面的外部，然后在这个文件夹上一级的文件夹中寻找这个文件（见图1.22）。两点加一个斜杠告诉浏览器跳转到上一级文件夹。

<a href="../page1.html">Page 1</a>

如果你想去上两级目录，需要重复输入两个点和斜杠的组合（见图1.23）。

<a href="../../page1.html">Page 1</a>

3．使用根相对链接
同一个网站中的文件夹之间使用相对链接进行跳转，对大网站来说可能很复杂。想象一下，在一个巨型的网站中，你不得不通过两点加一个斜杠的方式来建立导航。

另一种链接方法是使用根相对链接，它会告诉浏览器到达文件堆栈的顶部，并且从这个地方根据指定的路径进行寻找。假设page1.html在一个名为products的文件夹里，但是这个页面当前正在被别的文件查看（见图1.24）。我们使用一个斜杠来告诉浏览器到达文件夹堆栈的顶层，然后查看products文件夹从而寻找page1.html。

<a href="/products/page1.html">Products Page 1</a>

每个网站都有一个根目录——主目录包含主页和第一组子文件夹集。如果你正在访问根目录下的一个子文件夹，并且你想指向根目录下的一个页面或子文件夹中的页面，那么就要在路径前使用正斜杠（“/”）。

快速复习一下两种不同类型的链接。

• 当所指向的页面在你的网站外部时，使用绝对链接。
• 当所链接的页面在你的网站内时，使用相对链接。这样能减少很多麻烦，尤其是在你要将页面移到另一个网站，需要重新指定链接时。

关于Web服务器

当你将页面上传到Web服务器时，根相对链接就开始工作了。联系你的本地网站管理员或请求Web主机的技术支持，以了解如何上传页面。

你也可以配置一个本地的网站环境。本地意味着它仅仅对你是可见的，但这是一种非常好的方法，这种方法可以测试你的网站应该如何运作，以及如何利用独特的服务器特性，如根相对链接。检验一下如何在Mac上建立一个本地服务器（http://www.macinstruct.com/node/112）和在PC上建立一个本地服务器（http://www.labnol.org/internet/turn-home-computer-into-web-server/9111/）。

就我本人而言，我用一台Mac作为主要的操作系统，我推荐使用MAMP PRO

（http:/www.mamp.info/）。

高级HTML

现在你了解了一些HTML的基础知识，但你可能并不满足。去看一下HTML 5 Boilerplate

（http://html5boilerplate.com）吧，这里有许多关于HTML和浏览器异常表现的应对技巧和技术。在第2章中，我们会深入探索HTML 5 Boilerplate。不要忘记查阅Boilerplate的文档（https://github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/README.md）。

如果阅读文档，你会发现一些陌生的文件扩展名。.md代表Markdown文件（http://daringfireball.net/projects/markdown/），它是一个文本文件，你可以通过任何文本编辑器打开它。Markdown将HTML视为一种简单的标记语言。它用在像GitHub这样的代码库网站中，以帮助程序员来编写软件文档。

你可以在Chrome浏览器中通过TextDown扩展程序（http://joaocolombo.com/textdown）来直接阅读Markdown文件。如果你使用的是Mac或者iOS设备，Byword（http://bywordapp.com）是一个非常优秀的用于编写和读取Markdown内容的应用。