Web開發——HTML基礎（文件和網站結構）
阿新 • • 發佈：2018-10-11
情況 擁有 navig extern 主動 value 基本 query 搜索引擎優化
參考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
除了定義頁面的各個部分（例如“段落”或“圖像”）之外，HTML還擁有許多用於定義網站區域的塊級元素（例如“標題”，“導航”菜單“，”主要內容欄“。）本文探討如何規劃基本網站結構，並編寫HTML來表示這種結構。
1、基本部分
網頁可以並且看起來會彼此截然不同，但它們都傾向於共享類似的標準組件，除非頁面顯示全屏視頻或遊戲，是某種藝術項目的一部分，或者只是結構糟糕：
- 頭
- 通常頂部有一個大條帶，帶有大標題和/或徽標。這是關於網站的主要常見信息通常從一個網頁停留到另一個網頁的地方。
- 導航欄
- 鏈接到網站的主要部分; 通常由菜單按鈕，鏈接或標簽表示。與標題一樣，此內容通常在一個網頁上保持一致 - 在您的網站上導航不一致只會導致混淆，沮喪的用戶。許多網頁設計師認為導航欄是標題的一部分而不是單個組件，但這不是必需的; 事實上，有些人還認為，將兩者分開是更好的可訪問性，因為屏幕閱讀器可以更好地閱讀這兩個功能，如果它們是分開的。
- 主要內容
- 中心的一個大區域，包含給定網頁的大部分獨特內容，例如您要觀看的視頻，您正在閱讀的主要故事，您想要查看的地圖，或新聞標題等這是網站的一部分，絕對會因頁面而異！
- 側邊欄
- 一些外圍信息，鏈接，引用，廣告等。通常這與主要內容中包含的內容相關（例如，在新聞文章頁面上，側邊欄可能包含作者的簡歷或相關文章的鏈接）但有還有一些情況，你會發現一些重復的元素，如輔助導航系統。
- 頁腳
- 頁面底部的條帶，通常包含精細打印，版權聲明或聯系信息。這是一個放置公共信息（如標題）的地方，但通常這些信息對網站本身並不重要或次要。頁腳有時也用於搜索引擎優化目的，通過提供快速訪問流行內容的鏈接。
一個“典型的網站”可以這樣布置：
2、用於構造內容的HTML 編輯
在HTML代碼中，您可以根據其功能標記內容的各個部分- 可以使用明確表示上述內容部分的元素，並且屏幕閱讀器等輔助技術可以識別這些元素並幫助完成諸如“查找主導航”之類的任務“，或”找到主要內容。“ 正如我們在本課程前面提到的那樣，對於正確的工作，不使用正確的元素結構和語義會產生許多後果。
為了實現這種語義標記，HTML提供了可用於表示此類部分的專用標記，例如：
- 標題：
<header>。 - 導航欄：
<nav>。 - 主要內容是：
<main>與由代表的各種內容的小節<article>，<section>和<div>元件。 - 側邊欄：
<aside>; 經常放在裏面<main>。 - 頁腳：
<footer>。
2.1 主動學習：探索我們的例子的代碼
我們上面看到的示例由以下代碼表示（您也可以在我們的GitHub存儲庫中找到該示例）。我們希望您查看上面的示例，然後查看下面的列表，看看哪些部分組成了視覺的哪個部分。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 6 <title>My page title</title> 7 <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> 8 <link rel="stylesheet" href="style.css"> 9 10 <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--> 11 <!--[if lt IE 9]> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 13 <![endif]--> 14 </head> 15 16 <body> 17 <!-- Here is our main header that is used across all the pages of our website --> 18 19 <header> 20 <h1>Header</h1> 21 </header> 22 23 <nav> 24 <ul> 25 <li><a href="#">Home</a></li> 26 <li><a href="#">Our team</a></li> 27 <li><a href="#">Projects</a></li> 28 <li><a href="#">Contact</a></li> 29 </ul> 30 31 <!-- A Search form is another commmon non-linear way to navigate through a website. --> 32 33 <form> 34 <input type="search" name="q" placeholder="Search query"> 35 <input type="submit" value="Go!"> 36 </form> 37 </nav> 38 39 <!-- Here is our page‘s main content --> 40 <main> 41 42 <!-- It contains an article --> 43 <article> 44 <h2>Article heading</h2> 45 46 <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> 47 48 <h3>subsection</h3> 49 50 <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> 51 52 <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> 53 54 <h3>Another subsection</h3> 55 56 <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> 57 58 <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> 59 </article> 60 61 <!-- the aside content can also be nested within the main content --> 62 <aside> 63 <h2>Related</h2> 64 65 <ul> 66 <li><a href="#">Oh I do like to be beside the seaside</a></li> 67 <li><a href="#">Oh I do like to be beside the sea</a></li> 68 <li><a href="#">Although in the North of England</a></li> 69 <li><a href="#">It never stops raining</a></li> 70 <li><a href="#">Oh well...</a></li> 71 </ul> 72 </aside> 73 74 </main> 75 76 <!-- And here is our main footer that is used across all the pages of our website --> 77 78 <footer> 79 <p>?Copyright 2050 by nobody. All rights reversed.</p> 80 </footer> 81 82 </body> 83 </html>
輸出結果：
Web開發——HTML基礎（文件和網站結構）