文档和网站结构

¥Basic sections of a document

网页可以而且将会看起来彼此相当不同，但它们都倾向于共享相似的标准组件，除非页面正在显示全屏视频或游戏，是某种艺术项目的一部分，或者只是结构很糟糕：

¥Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

标头：

通常是顶部有一个大条带，带有大标题、徽标，也许还有标语。从一个网页到另一个网页，这一点通常保持不变。

导航栏：

指向网站主要部分的链接；通常由菜单按钮、链接或选项卡表示。与标题一样，此内容通常从一个网页到另一个网页保持一致 - 网站上不一致的导航只会导致用户感到困惑和沮丧。许多网页设计师认为导航栏是标题的一部分而不是单独的组件，但这不是必需的；事实上，有些人还认为将这两个功能分开对 accessibility 来说更好，因为如果这两个功能分开，屏幕阅读器可以更好地阅读它们。

主要内容：

中心的一个大区域，包含给定网页的大部分独特内容，例如你想要观看的视频，或者你正在阅读的主要故事，或者你想要查看的地图，或者新闻标题， 等等。这是网站的一部分，每一页肯定会有所不同！

侧边栏：

一些外围信息、链接、引用、广告等。通常，这与主要内容中包含的内容相关（例如在新闻文章页面上，侧边栏可能包含作者的简介或相关文章的链接），但也有 在某些情况下，你还会发现一些重复出现的元素，例如辅助导航系统。

页脚：

页面底部的一条条带，通常包含精美印刷、版权声明或联系信息。这是放置常用信息（如标题）的地方，但通常该信息对于网站本身来说并不重要或次要。页脚有时也用于 SEO 目的，提供快速访问流行内容的链接。

"典型网站" 的结构可以是这样的：

¥A "typical website" could be structured something like this:

注意：上图展示了文档的主要部分，你可以使用 HTML 进行定义。但是，此处显示的页面外观 - 包括布局、颜色和字体 - 是通过将 CSS 应用于 HTML 来实现的。

¥Note: The image above illustrates the main sections of a document, which you can define with HTML. However, the appearance of the page shown here - including the layout, colors, and fonts - is achieved by applying CSS to the HTML.

在本模块中，我们不教授 CSS，但是一旦你了解了 HTML 的基础知识，请尝试深入研究我们的 CSS 第一步 模块，开始学习如何设计你的网站样式。

¥In this module we're not teaching CSS, but once you have an understanding of the basics of HTML, try diving into our CSS first steps module to start learning how to style your site.

¥HTML for structuring content

上面显示的简单示例并不漂亮，但它非常适合说明典型的网站布局示例。有些网站有更多的栏目，有些则复杂得多，但你明白了。有了正确的 CSS，你几乎可以使用任何元素来包围不同的部分，并使其看起来像你想要的那样，但正如前面所讨论的，我们需要尊重语义并为正确的工作使用正确的元素。

¥The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

这是因为视觉效果并不能讲述整个故事。我们使用颜色和字体大小来吸引视力正常的用户注意内容中最有用的部分，例如导航菜单和相关链接，但是对于视力障碍人士来说呢？他们可能不觉得 "pink" 和 "大字体" 等概念非常有用？

¥This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

注意：大约 8% 的男性和 0.5% 的女性 是色盲；或者，换句话说，大约每 12 名男性中就有 1 名，每 200 名女性中就有 1 名。盲人和视障人士约占世界人口的 4-5%（2015 年有 9.4 亿人有不同程度的视力丧失 人，而总人口为 约 75 亿 人）。

¥Note: Roughly 8% of men and 0.5% of women are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2015 there were 940 million people with some degree of vision loss, while the total population was around 7.5 billion).

在 HTML 代码中，你可以根据内容的功能来标记内容部分 - 你可以使用明确表示上述内容部分的元素，屏幕阅读器等辅助技术可以识别这些元素并帮助完成 "找到主导航" 或 "找到主要内容。" 等任务 正如我们在课程前面提到的，有很多 不使用正确的元素结构和语义来完成正确的工作的后果。

¥In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screen readers can recognize those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

为了实现此类语义标记，HTML 提供了专用标签，你可以使用它们来表示此类部分，例如：

¥To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

• 标头：<header>。
• 导航栏：<nav>。
• 主要内容：<main>，具有由 <article>、<section> 和 <div> 元素表示的各种内容小节。
• 侧边栏：<aside>；通常放置在 <main> 内。
• 页脚：<footer>。

¥Active learning: exploring the code for our example

我们上面看到的例子由以下代码表示（也可以 在我们的 GitHub 存储库中查找示例）。我们希望你查看上面的示例，然后查看下面的列表，了解哪些部分构成了视觉效果的哪些部分。

¥Our example seen above is represented by the following code (you can also find the example in our GitHub repository). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>My page title</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- Here is our main header that is used across all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <!-- A Search form is another common non-linear way to navigate through a website. -->

      <form>
        <input type="search" name="q" placeholder="Search query" />
        <input type="submit" value="Go!" />
      </form>
    </nav>

    <!-- Here is our page's main content -->
    <main>
      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

        <h3>Subsection</h3>

        <p>
          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
        </p>

        <p>
          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
        </p>

        <h3>Another subsection</h3>

        <p>
          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
          soclis natoque penatibus et manis dis parturient montes, nascetur
          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
          facilisis semper ac in est.
        </p>

        <p>
          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
          diam iaculis velit, is fringille sem nunc vet mi.
        </p>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well…</a></li>
        </ul>
      </aside>
    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
  </body>
</html>

花一些时间查看代码并理解它 - 代码中的注释也应该可以帮助你理解它。在本文中，我们不会要求你做太多其他事情，因为理解文档布局的关键是编写合理的 HTML 结构，然后使用 CSS 对其进行布局。我们将等到你开始将 CSS 布局作为 CSS 主题的一部分来研究。

¥Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

¥HTML layout elements in more detail

详细了解所有 HTML 分段元素的总体含义是有好处的 - 当你开始获得更多 Web 开发经验时，你将逐渐了解这一点。你可以通过阅读我们的 HTML 元素参考 找到很多详细信息。目前，这些是你应该尝试理解的主要定义：

¥It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

• <main> 用于该页面特有的内容。每页仅使用 <main> 一次，并将其直接放在 <body> 内。理想情况下，它不应嵌套在其他元素中。
• <article> 包含一个相关内容块，这些内容本身就有意义，无需页面的其余部分（例如，单个博客文章）。
• <section> 与 <article> 类似，但它更多的是用于将页面的单个部分组合在一起，构成一个功能（例如，迷你地图或一组文章标题和摘要）或主题。每个部分以 heading 开始被认为是最佳实践；另请注意，你可以根据上下文将 <article> 分解为不同的 <section>，或将 <section> 分解为不同的 <article>。
• <aside> 包含与主要内容不直接相关的内容，但可以提供与其间接相关的附加信息（术语表条目、作者传记、相关链接等）。
• <header> 代表一组介绍性内容。如果它是 <body> 的子级，则它定义网页的全局标头，但如果它是 <article> 或 <section> 的子级，则它定义该部分的特定标头（尽量不要将其与 标题和标题 混淆）。
• <nav> 包含页面的主要导航功能。辅助链接等不会出现在导航中。
• <footer> 代表页面的一组最终内容。

单击上述每个元素都可以阅读 "HTML 元素参考" 部分中的相应文章，其中提供了有关每个元素的更多详细信息。

¥Each of the aforementioned elements can be clicked on to read the corresponding article in the "HTML element reference" section, providing more detail about each one.

¥Non-semantic wrappers

有时你会遇到这样的情况：找不到理想的语义元素来将某些项目组合在一起或封装某些内容。有时你可能只想将一组元素组合在一起，以将它们作为具有某些 CSS 或 JavaScript 的单个实体来影响。对于此类情况，HTML 提供了 <div> 和 <span> 元素。你最好将它们与合适的 class 属性一起使用，为它们提供某种标签，以便轻松定位它们。

¥Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript. For cases like these, HTML provides the <div> and <span> elements. You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.

<span> 是一个内联非语义元素，只有当你想不出更好的语义文本元素来封装你的内容，或者不想添加任何特定含义时，才应该使用它。例如：

¥<span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

<p>
  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door.
  <span class="editor-note">
    [Editor's note: At this point in the play, the lights should be down low].
  </span>
</p>

在这种情况下，编者注应该只是为该剧的导演提供额外的指导；它不应该具有额外的语义含义。对于视力正常的用户来说，CSS 或许可以用来稍微拉开注释与正文的距离。

¥In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

<div> 是一个块级非语义元素，只有在你想不出更好的语义块元素来使用，或者不想添加任何特定含义时才应该使用它。例如，想象一下你可以在访问电子商务网站期间随时选择拉出的购物车小部件：

¥<div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>Silver earrings</strong></a>: $99.95.
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
    </li>
    <li>…</li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

这并不是真正的 <aside>，因为它不一定与页面的主要内容相关（你希望可以从任何地方查看它）。它甚至不特别保证使用 <section>，因为它不是页面主要内容的一部分。所以在这种情况下 <div> 就可以了。我们添加了一个标题作为路标，以帮助屏幕阅读器用户找到它。

¥This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screen reader users in finding it.

警告：Div 使用起来非常方便，因此很容易过度使用它们。由于它们没有语义价值，因此只会让你的 HTML 代码变得混乱。仅当没有更好的语义解决方案时才小心使用它们，并尝试将它们的使用减少到最低限度，否则你将很难更新和维护文档。

¥Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

¥Line breaks and horizontal rules

你偶尔会使用并且想要了解的两个元素是 <br> 和 <hr>。

¥Two elements that you'll use occasionally and will want to know about are <br> and <hr>.

<br>:换行元素

¥\
: the line break element

<br> 在段落中创建换行符；当你需要一系列固定的短行（例如在邮政地址或一首诗中）时，这是强制采用刚性结构的唯一方法。例如：

¥<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

<p>
  There once was a man named O'Dell<br />
  Who loved to write HTML<br />
  But his structure was bad, his semantics were sad<br />
  and his markup didn't read very well.
</p>

如果没有 <br> 元素，该段落将仅呈现为一长行（正如我们在课程前面所说的，HTML 忽略大部分空白）；代码中包含 <br> 元素时，标记呈现如下：

¥Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

<hr>:主题剩余元素

¥\

<hr> 元素在文档中创建一条水平线，表示文本中的主题更改（例如主题或场景的更改）。从视觉上看，它看起来就像一条水平线。举个例子：

¥<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

<p>
  Ron was backed into a corner by the marauding netherbeasts. Scared, but
  determined to protect his friends, he raised his wand and prepared to do
  battle, hoping that his distress call had made it through.
</p>
<hr />
<p>
  Meanwhile, Harry was sitting at home, staring at his royalty statement and
  pondering when the next spin off series would come out, when an enchanted
  distress letter flew through his window and landed in his lap. He read it
  hazily and sighed; "better get back to work then", he mused.
</p>

会渲染成这样：

¥Would render like this:

¥Planning a simple website

一旦你规划出一个简单网页的结构，下一个逻辑步骤就是尝试确定你想要在整个网站上放置哪些内容，你需要哪些页面，以及它们应该如何排列和相互链接 以获得最佳的用户体验。这就是所谓的 Information architecture。在一个大型、复杂的网站中，这个过程可以进行很多规划，但对于只有几个页面的简单网站来说，这可能相当简单，而且有趣！

¥Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

1. 请记住，你将拥有大多数（如果不是全部）页面共有的一些元素，例如导航菜单和页脚内容。例如，如果你的网站是针对企业的，那么最好在每个页面的页脚中提供你的联系信息。记下你想要每个页面共有的内容。
2. 接下来，画出你可能希望每个页面的结构的粗略草图（它可能看起来像我们上面的简单网站）。注意每个块的内容。
3. 现在，集体讨论你想要在网站上拥有的所有其他（并非每个页面都通用）内容 - 写下一个大列表。
4. 接下来，尝试将所有这些内容项进行分组，以便你了解哪些部分可能会同时存在于不同的页面上。这与名为 Card sorting. 的技术非常相似
5. 现在尝试绘制一个粗略的站点地图 - 为站点上的每个页面添加一个气泡，并绘制线条以显示页面之间的典型工作流程。主页可能位于中心，并链接到大多数（如果不是全部）其他页面；小网站中的大多数页面应该可以从主导航中访问，但也有例外。你可能还想包含有关如何呈现事物的注释。

¥Active learning: create your own sitemap

尝试对你自己创建的网站进行上述练习。你想建立一个关于什么的网站？

¥Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

注意：将你的工作保存在某个地方；你稍后可能需要它。

¥Note: Save your work somewhere; you might need it later on.

¥Summary

此时，你应该对如何构建网页/网站有更好的了解。在本模块的下一篇文章中，我们将学习如何 调试 HTML。

¥At this point, you should have a better idea about how to structure a web page/site. In the next article of this module, we'll learn how to debug HTML.