除了定义网页的各个部分(例如“段落”或“图片”)外,HTML还拥有一些用于定义网站区域的块级元素(例如“头部”,“导航菜单”,“主要内容列”)。本文将探讨如何规划基本的网站结构,并通过编写HTML来表示这种网站结构。

要求: 熟悉基础的HTML, 包括 Getting started with HTML. HTML文本格式, 包括 HTML text fundamentals. 了解超链接是如何工作的, 包括 Creating hyperlinks.
目标: 了解如何使用语义标签来构建文档,以及如何制定简单网站的结构

文档的基本部分

网页可以看起来彼此不同,但它们都倾向于使用类似的标准组件,除非页面显示全屏视频或游戏,或是某种艺术项目的一部分,或者是结构不当:

标题
通常在顶部有一个大标题和(或)标志。 这是一个网站的主要常见信息,通常存在于每一个网页。
导航栏
链接到网站的主要部分; 通常由菜单按钮,链接或选项卡表示。 与标题一样,这些内容通常在一个网页与另一个网页之间保持一致 - 在您的网站上导航不一致只会导致混乱,沮丧的用户。 许多Web设计师认为导航栏是标题的一部分,而不是单个组件,但这不是一个要求; 实际上有些人认为,两个独立的是更好的可访问性accessibility),因为如果他们分开,屏幕阅读器可以更好地阅读两个功能。
主要内容
中心的一个大区域,包含给定网页的大部分独特内容,例如您要观看的视频,或您正在阅读的主要故事,或您要查看的地图,或新闻标题等......这是网站的一部分,绝对会因页面而异。
侧栏
一些外围信息,链接,报价,广告等。通常这是与主要内容中包含的内容相关(例如在新闻文章页面上,侧边栏可能包含作者的生物或相关文章的链接),但有 还有一些情况下,你会发现一些重复的元素,如辅助导航系统。
页脚
横跨页面底部的条纹,通常包含精细打印,版权通知或联系信息。 它是一个放置公共信息(如标题)的地方,但通常该信息不是关键或次要的网站本身。 通过提供用于快速访问热门内容的链接,页脚有时也用于SEO目的。

一个“典型的网站”可能会这样布局:

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

用于结构化网站的HTML

上面显示的简单示例不是很漂亮,但是非常适合用于说明典型的网站布局。 一些网站有更多的列,有些网站更复杂,但你会有你的想法。 使用正确的CSS,您可以使用几乎任何元素来装饰不同的部分,并得到您想要的结果,但如前所述,我们需要遵守语义,并使用正确的元素进行语义化工作。

这是因为视觉效果并不能说明整个故事。 我们使用颜色和字体大小来吸引用户对内容最有用的部分的关注,例如导航菜单和相关链接,但是视觉障碍的人该怎么办,这难道也对那些没有“粉红色”和“大”的概念的人来说非常有用?

Note: 色盲患者大概占了世界人口的 8%(8% of the world population). 盲人和视障人士占世界人口的4-5%左右(2012年全球有2.85亿人 285 million such people in the world, 总人口约70亿 around 7 billion.)

在您的HTML代码中,您可以根据其功能标记内容部分 - 您可以明确地使用表示上述内容部分的元素,并且屏幕阅读器等辅助技术可以识别这些元素,并帮助执行“找到主导航 “或”找到主要内容“。 正如我们前面提到的那样,没有使用正确的元素结构和语义去构建网页会有很多的不良影响 consequences of not using the right element structure and semantics for the right job.

为了实现这样的语义标记,HTML提供了可以用来表示这些部分的专用标签,例如:

自主学习: 探索例子的代码

我们上面所看到的例子用下面的代码表示 (你也可以在这找到 find the example in our Github repo). 我们希望你看看上面的例子,然后看看下面的列表,观察哪些部分组成上面所讨论的内容(标题、导航栏、主要内容、侧栏、页脚)。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

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

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Here is our main header that is used accross 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 commmon 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 部分的时候才能完全理解上面代码。

HTML布局元素细节

从总体详细的理解HTML的元素是不错的——随着你web开发经验的逐渐积累,你将会逐渐理解HTML的元素。你可以通过查阅HTML元素参考找到更多的细节。现在,你需要理解这些主要的元素定义:

  • <main> 展现了页面内容的独特性。只可以在每一个页面上使用一次<main>,直接把它放到<body>中。在理想情况下,不应该把它嵌套进其他的元素中。
  • <article> 闭合一块与自身相关的内容,这块内容能够解释它自身而不是页面上其他的内容(例如一篇单独的博客)。
  • <section> 近似于<article>,但是它更多的是伴随着由一个单独功能构成的页面(例如一个小型的地图,或者是一组文章的标题和摘要)。它被认为最好的实际应用是用标题作为每一部分(section)的开头;也要注意的是你可以把不同的<article>分到不同的<section>中,或者把不同的<section>分到不同的<article>中,这要取决于内容。
  • <aside> 包含的内容并不与主要内容有直接的联系,但是它可以提供额外的不直接有联系的信息(术语表条目,作者简介,相关链接等等)。
  • <header> 展现了一系列的介绍性内容。如果它是<body> 的子元素,它就定义了网站的全局页眉。但是如果它是 <article><section> 的子元素,它就定义了这些部分的特定的页眉(不要把这些与ititles and headings混淆)。
  • <nav> 包含了页面主要的导航功能。二级链接等,不会进入导航功能部分。
  • <footer> 包含了页面的页脚部分。

没有特定语义的装饰元素

有时候,你会遇到一种情况——你找不到理想的语义元素来包含项目或内容。有时候你可能只想仅仅用CSSJavaScript将一组元素作为一个单独的实体来修饰。为了应对这种情况,HTML提供了<div><span>元素。你应该最好使用class属性来提供一些标签,这样他们就能容易的被找到。

<span> 是一个行内无语义元素,你应该仅仅当无法找到更好的语义元素包含内容时使用,或者不想增加特定的含义。例如:

<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>

在这种情况中,the editor’s note 应该仅仅是提供额外的对导演戏剧的说明;它没有额外的语义。对于用户来说,CSS可能用于从主文本中抽离这些note。

<div> 是一个块级无语义元素,你应该仅仅当找不到更好的块级元素时使用,或者不想增加特定的意义。例如,想象当你浏览一个电子商务网站时,有一个购物车部件一直都在你可以选择的地方。

<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/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

这并不是一个<aside>,因为它和主要内容并没有必要的联系(你想在任何地方都能看到它)。它甚至不能用<section>来特定的指定,因为它不是页面上主要内容的一部分。所以在这种情况下用<div>是合适的。我们已经把它包含进head标签里作为帮助屏幕阅读者找到它的引导。

警告: Divs是可以如此便利的使用以至于很容易就被滥用。因为它们不携带语义值,所以会让你的HTML代码变的混乱。要小心的使用它们,只有当没有更好的语义解决方案才能使用,而且要尽可能把它的使用量降到最低,否则,当你升级和维护你的文档时会非常困难。

换行与水平分割线

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

<br>在一个段落中创建一个换行;在你想要生成一系列的短行的地方,<br>是唯一能够生成这种结构的元素。例如一个邮寄地址或一首诗。比如:

<p>There once was a girl called Nell<br>
Who loved to write HTML<br>
But her structure was bad, her semantics were sad<br>
and her markup didn't read very well.</p>

没有<br>元素,这一段会直接表示在一行中(正如我们之前在课程中看到的HTML ignores most whitespace);有了<br>元素,会生成下面这样的:

There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.

<hr>元素在文档中生成一条水平分割线,表示文本中主题的变化(例如主题或场景的变化)。看起来就是一条水平线。像下面的例子:

<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 hasily, and lept to his feet; "better get back to work then", he mused.</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.


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 hasily and sighed; "better get back to work then", he mused.

设计一个简单的网站

一旦你设计好了一个简单网站的所有内容, 按照正常的逻辑思维, 我们应该尝试制定出你想要放在整个网站上的内容, 哪些页面是你需要的, 这些页面应该如何排列, 以及如何互相链接, 带给用户最好的使用体验. 这就是所谓的 Information architecture. 在一个结构庞大, 复杂的网站里, 大多数设计都可以参照上述的 information architecture (信息架构), 不过对于一个只有几个页面的简单网站, 设计过程可以更简单, 更有趣!

  1. 记住, 你的大多数 (不是全部) 页面会使用一些相同的元素 — 例如导航菜单, 以及页脚. 如果你的网站是一个商业网站, 那么你就可以在每个页面都使用相同的页脚, 页脚内容可以包括你的联系方式, 这或许是一个不错的主意. 所以说, 如果在你的设计中, 每个页面都有一些内容是重复的, 你可以先把这些重复的内容记录下来. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
  2. 接下来, 你可以通过画一个草图的方式, 来说明你希望的每个页面的结构的样子, (或许你画出来的草图和我们上文中提到的示例页面比较像.) 在空白段落上做上标记, 来说明之后要填充在这里的内容. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
  3. 现在, 所有的网站设计人员可以一起讨论, 还希望网站上显示哪些内容 (不包括每个页面的重复页面) — 以列表的形式写下来. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
  4. 接着, 尝试把这些内容进行分组, 这样可以让你了解, 哪些内容可以放在一个相同的页面上. 这种做法和 Card sorting 非常相似. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
  5. 现在, 尝试着再画一个网站的草图 — 每个气泡代表网站的一个页面, 在气泡与气泡之间用连线的方式, 来说明它们之间的联系. 主页面可能位于中心位置, 并且链接到其他的大多数页面; 对于一个小型网站, 大多数页面都可以从主页的导航栏中链接跳转, 虽然也存在例外. 你可能也希望记录下内容将如何显示的笔记. A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

积极的学习方式: 创建你自己的站点地图

尝试对你自己创造的网站进行上述步骤的练习. 你想要做一个关于什么的网站?

注意: 将你的工作成果保存在任意的地方, 之后你可能还会需要它.

概要

通过本文, 你应该对于如何构建一个 网站/站点 有了更好的理解. 在本单元的最后一篇文章中, 我们将学习如何调试 HTML.

另外

文档标签和贡献者

 最后编辑者: zhaoqize,