Web 文檔和網(wǎng)站結(jié)構(gòu)

2018-09-18 17:30 更新
除了定義網(wǎng)頁的各個(gè)部分（例如“段落”或“圖片”）外，HTML還擁有一些用于定義網(wǎng)站區(qū)域的塊級元素（例如“標(biāo)題”，“導(dǎo)航菜單”，“主要內(nèi)容列”）。本文將探討如何規(guī)劃基本網(wǎng)站結(jié)構(gòu)，并編寫HTML以表示此結(jié)構(gòu)。


前提： 熟悉基本HTML，參考HTML入門。HTML文本格式，參考HTML文本基礎(chǔ)。超鏈接的工作原理，參考創(chuàng)建超級鏈接。
目的： 了解如何使用語義標(biāo)簽來構(gòu)建文檔，以及如何制定簡單網(wǎng)站的結(jié)構(gòu)。

文檔的基本部分

網(wǎng)頁可以看起來彼此不同，但它們都傾向于使用類似的標(biāo)準(zhǔn)組件，除非該頁面顯示全屏視頻或游戲，是某種藝術(shù)項(xiàng)目的一部分，或者是結(jié)構(gòu)不當(dāng)：

標(biāo)題
通常在頂部有一個(gè)大標(biāo)題和/或標(biāo)志。這是關(guān)于網(wǎng)站的主要常見信息，通常在從一個(gè)頁面到另一個(gè)頁面時(shí)是保持不變的。
導(dǎo)航欄
鏈接到網(wǎng)站的主要部分；通常由菜單按鈕，鏈接或標(biāo)簽表示。與標(biāo)題一樣，這些內(nèi)容通常在從一個(gè)頁面到另一個(gè)頁面時(shí)是保持一致的 - 在你的網(wǎng)站上導(dǎo)航不一致會導(dǎo)致用戶產(chǎn)生困惑，阻擾用戶使用。許多Web設(shè)計(jì)師認(rèn)為導(dǎo)航欄是標(biāo)題的一部分，而不是單個(gè)組件，但這不是要求你要這么認(rèn)為；實(shí)際上有些人也認(rèn)為，兩個(gè)獨(dú)立分開會帶來更好的可訪問性（accessibility），因?yàn)槿绻鼈兪欠珠_的，屏幕閱讀器可以更好地讀取這兩個(gè)功能。
主要內(nèi)容
中心的一個(gè)大區(qū)域，包含給定網(wǎng)頁的大部分獨(dú)特內(nèi)容，例如你要觀看的視頻，或者你正在閱讀的主要故事，要查看的地圖，或新聞標(biāo)題等......這是網(wǎng)站內(nèi)絕對會因頁面而異的一部分。
側(cè)邊欄
一些外圍信息，鏈接，報(bào)價(jià)，廣告等。通常這是與主要內(nèi)容中包含的內(nèi)容相關(guān)的信息（例如在新聞文章頁面上，側(cè)邊欄可能包含作者的個(gè)人資料或相關(guān)文章的鏈接），但仍有一些情況下，你會發(fā)現(xiàn)一些重復(fù)的元素，如二級導(dǎo)航系統(tǒng)。
頁腳
橫跨頁面底部的一條區(qū)域，通常包含細(xì)則，版權(quán)聲明或聯(lián)系信息。它是一個(gè)放置公共信息（如標(biāo)題）的地方，但通常該信息對網(wǎng)站本身來說不是關(guān)鍵或次要的。頁腳有時(shí)也用于SEO目的，通過提供用于快速訪問熱門內(nèi)容的鏈接。

一個(gè)“典型網(wǎng)站”可以像這樣布置：

用于結(jié)構(gòu)化網(wǎng)站的HTML

上面顯示的簡單示例不是很漂亮，但是非常適合用于說明典型的網(wǎng)站布局。一些網(wǎng)站有更多的列，有些網(wǎng)站更復(fù)雜，但你會有你的想法。使用正確的CSS，你可以使用幾乎任何元素來裝飾不同的部分，并得到你想要的結(jié)果，但是如前所述，我們需要遵循語義，并使用正確的元素進(jìn)行語義化工作。

這是因?yàn)橐曈X效果并不能說明整個(gè)故事。我們使用顏色和字體大小來吸引用戶對內(nèi)容最有用的部分的關(guān)注，例如導(dǎo)航菜單和相關(guān)鏈接，但是視覺障礙的人該怎么辦，那些“粉紅色”和“大字體”的概念對他們來說有用嗎？

注意：色盲患者大概占了世界人口的8%。盲人和視障人士約占世界人口的4-5％（2012年全球有2.85億這樣的人，而全球總?cè)丝谑谴蠹s70億）。

在你的HTML代碼中，你可以根據(jù)其功能標(biāo)記內(nèi)容部分 - 你可以明確地使用代表上述內(nèi)容部分的元素，而像屏幕閱讀器這樣的輔助技術(shù)可以識別這些元素，并幫助執(zhí)行諸如“查找主導(dǎo)航”或“查找主要內(nèi)容”等任務(wù)。正如我們之前在課程中提到的，沒有將正確的元素結(jié)構(gòu)和語義用于對應(yīng)的工作中，會產(chǎn)生一些后果。

為了實(shí)現(xiàn)這種語義標(biāo)記，HTML提供了可以用來表示這些部分的專用標(biāo)簽，例如：

主動(dòng)學(xué)習(xí)：探索我們例子中的代碼

我們上面所看到的例子用下面的代碼表示（你也可以在我們的Github repo中找到該示例）。我們希望你看看上面的例子，然后查看下面的列表，觀察哪些部分組成上面所討論的內(nèi)容（標(biāo)題、導(dǎo)航欄、主要內(nèi)容、側(cè)邊欄、頁腳）。

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

花一些時(shí)間來查看代碼并理解它 - 代碼中的注釋也可以幫助你理解它。我們不要求你在這篇文章中做許多其他事情，因?yàn)槔斫馕臋n布局的關(guān)鍵是編寫一個(gè)完整的HTML結(jié)構(gòu)，然后用CSS布局。等你學(xué)習(xí)到CSS布局部分的時(shí)候才能完全理解上面的代碼。

HTML布局元素更多細(xì)節(jié)

從總體詳細(xì)的理解HTML分段元素是不錯(cuò)的 - 隨著你web開發(fā)經(jīng)驗(yàn)的逐漸積累，你將會逐漸深入理解。你可以通過查閱HTML元素參考找到更多的細(xì)節(jié)?，F(xiàn)在，你需要理解這些元素的主要定義：

  • <main>展現(xiàn)了頁面內(nèi)容的獨(dú)特性。每一個(gè)頁面上只可以使用一次<main>，并直接把它放到<body>中。在理想情況下，不應(yīng)該把它嵌套進(jìn)其他的元素中。
  • <article>閉合一塊與自身相關(guān)的內(nèi)容，這塊內(nèi)容能夠解釋它自身而不是頁面上其他的內(nèi)容（例如一篇單獨(dú)的博客）。
  • <section>近似于<article>，但是它更多的是將構(gòu)成一個(gè)單獨(dú)功能的頁面的單個(gè)部分（例如一個(gè)小型的地圖，或者是一組文章的標(biāo)題和摘要）組合在一起。被認(rèn)為最好的實(shí)際應(yīng)用是用標(biāo)題作為每一部分（section）的開頭；也要注意的是你可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的<article>中，這要取決于上下文。
  • <aside>包含的內(nèi)容并不與主要內(nèi)容有直接的聯(lián)系，但是它可以提供額外的不直接有聯(lián)系的信息（詞匯條目，作者簡介，相關(guān)鏈接等等）。
  • <header>展現(xiàn)了一系列的介紹性內(nèi)容。如果它是<body>的子元素，它就定義了網(wǎng)站的全局頭部。但是如果它是<article>或<section>的子元素，它就定義了這些部分的特定的頭部（不要把這它與title和heading混淆）。
  • <nav>包含了頁面主要的導(dǎo)航功能。二級鏈接等，不會進(jìn)入導(dǎo)航功能部分。
  • <footer>包含了頁面的頁腳部分。

非語義包裝器

有時(shí)候，你會遇到一種情況，你找不到理想的語義元素將一些項(xiàng)目組合起來或者包裝一些內(nèi)容。有時(shí)候你可能只想僅僅用CSS或JavaScript將一組元素作為一個(gè)單獨(dú)的實(shí)體來修飾。為了應(yīng)對這種情況，HTML提供了<div>和<span>元素。你應(yīng)該優(yōu)先使用合適的class屬性來提供一些標(biāo)簽，這樣它們就能比較容易被找到。

<span>是一個(gè)內(nèi)聯(lián)非語義元素，你應(yīng)該僅僅在無法找到更好的語義元素包裝內(nèi)容時(shí)使用，或者不想增加任何特定的含義。例如：

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

在這種情況下，編劇的筆記應(yīng)該只是為戲劇導(dǎo)演提供額外的指導(dǎo)；不應(yīng)該有額外的語義意義。對于觀看的用戶，CSS可能用于將筆記與主文本稍微隔開。

<div>是一個(gè)塊級非語義元素，僅在你找不到更好的塊級語義元素，或者不想增加任何特定的意義時(shí)使用。例如，想象當(dāng)你瀏覽一個(gè)電商網(wǎng)站時(shí)，你可以隨時(shí)選擇拉取一個(gè)購物車部件：

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

這不是一個(gè)真正的<aside> ，因?yàn)樗椭饕獌?nèi)容并沒有必要的聯(lián)系（你想在任何地方都能看到它）。它甚至不會特別保證使用<section>，因?yàn)樗皇琼撁嬷饕獌?nèi)容的一部分。所以在這種情況下用<div>是合適的。我們已經(jīng)將標(biāo)題包含進(jìn)去作為幫助屏幕閱讀者查找的引導(dǎo)。

警告：Div使用起來非常方便以至于很容易就被濫用。因?yàn)樗鼈儾粩y帶語義值，所以會讓你的HTML代碼變的混亂。要小心的使用它們，只有當(dāng)沒有更好的語義解決方案才使用，而且要盡可能把它的使用量降到最低，否則，當(dāng)你升級和維護(hù)你的文檔時(shí)會非常困難。

換行符和水平分割線

<br>和<hr>將會是你偶爾使用并且想要了解的兩個(gè)元素：

<br> 在一個(gè)段落中創(chuàng)建一個(gè)換行；在你想要一系列的固定短行的地方，它是唯一能夠生成這種結(jié)構(gòu)的元素，例如一個(gè)郵寄地址或一首詩。例如：

<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> 元素，這一段將只會呈現(xiàn)在一個(gè)長行中（正如我們之前課程中所述，HTML忽略大多數(shù)空格 ）；代碼中有了<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> 元素在文檔中創(chuàng)建一條水平分割線，表示文本中主題的變化（例如主題或場景的變化）。視覺上它看起來像一條水平線。舉個(gè)例子：

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

將呈現(xiàn)如下：

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.

規(guī)劃一個(gè)簡單的網(wǎng)站

一旦你規(guī)劃了一個(gè)簡單網(wǎng)頁的內(nèi)容，接下來的合乎邏輯的步驟就是嘗試找出你想要放在整個(gè)網(wǎng)站上的內(nèi)容，你需要什么頁面，以及如何排列和鏈接到彼此，以獲得最佳的用戶體驗(yàn)。這被稱信息架構(gòu)。在一個(gè)大型、復(fù)雜的網(wǎng)站上，很多規(guī)劃都可以進(jìn)入這個(gè)過程，而對于一個(gè)簡單的網(wǎng)站的幾個(gè)頁面，這可以是相當(dāng)簡單、有趣的！

  1. 請記住，你將擁有大多數(shù)（如果不是全部）頁面常用的幾個(gè)元素，如導(dǎo)航菜單和頁腳內(nèi)容。假設(shè)，如果你的網(wǎng)站是商務(wù)用的，最好在每個(gè)頁面的頁腳中提供你的聯(lián)系信息。注意你想要每個(gè)頁面都有的共同之處。
  2. 接下來，繪制一個(gè)粗略的你希望每個(gè)頁面所呈現(xiàn)的結(jié)構(gòu)的草圖（可能看起來像我們上面的簡單網(wǎng)站）。注意每一塊都將是什么。
  3. 現(xiàn)在，頭腦風(fēng)暴一下所有其他你想放在網(wǎng)站上的內(nèi)容（不是每個(gè)頁面都用的內(nèi)容） - 寫下一個(gè)大的清單。
  4. 接下來，嘗試將所有這些內(nèi)容項(xiàng)目進(jìn)行分類，以便你能想清楚在不同頁面上哪些部分要放在一起。這與卡片分類法非常相似。
  5. 現(xiàn)在嘗試草繪一個(gè)粗略的站點(diǎn)地圖 - 為你網(wǎng)站上的每個(gè)頁面創(chuàng)建一個(gè)氣泡，并繪制線條以顯示頁面之間的典型工作流程。主頁可能位于中心，并連接到大多數(shù)（如果不是全部）網(wǎng)頁；盡管會有例外，但小型網(wǎng)站中的大多數(shù)頁面都應(yīng)該可以通過主導(dǎo)航訪問。你可能還需要注意如何展現(xiàn)事物。

主動(dòng)學(xué)習(xí)：創(chuàng)建你自己的站點(diǎn)地圖

嘗試對你自己創(chuàng)建的網(wǎng)站進(jìn)行上述練習(xí)。你想做什么樣的網(wǎng)站？

注意：將你的工作保存在某處；你以后可能需要它。

總結(jié)

此時(shí)，你應(yīng)該更好地了解了如何構(gòu)建網(wǎng)頁/網(wǎng)站。在本單元的最后一篇文章中，我們將學(xué)習(xí)如何調(diào)試HTML。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號