基本結構 HTML

重要度:⭐⭐⭐⭐⭐難度:⭐⭐

HTML 超文本標記語言

這裡本書不會教導你所有HTML元素的應用及意義但會教你如何查詢需要的元素。

不像JavsScript，HTML與CSS的錯誤不會顯示在控制台上。

所以在偵錯時，請務必注意這點。

網頁內容都可由特定的HTML元素構成，每個元素都有其獨特的應用及意義，以下本書將用功能分類並介紹一些常用的元素。

圖片來源:菜鳥教程

上圖是簡單的 html 版型包含頭部、導覽欄、文字內容、側邊導航與底部等。

之前許多網頁設計者常用 <div id="nav"> <div class="fooder"> 來區分網頁內容。

而現在 HTML5 新增不少常用元素來定義網頁區分網頁內容，以下將介紹這些新增的元素。

無障礙網路空間

網頁內容的區分對打造良好使用者體驗非常重要，無障礙設計不只是為了身障者也包含網路較慢或設備較差的使'用者，我們可以做這些設計來幫助他們

1. 給予有意義的HTML標籤。

2. 使用鍵盤或觸控式介面的人能順利操作 UI 按鈕。

3. 效能較佳的設計。

無障礙設計遠遠不止這些，更多資訊你可以在國家通訊傳播委員會 無障礙網路空間服務網找到。

導航欄:

<nav> : 通常會包含 <li> 與 <a> 並指定 href 鏈結以製作選單。

		<nav class="menu">
		  <ul>
		    <li><a href="#">Home</a></li>
		    <li><a href="#">About</a></li>
		    <li><a href="#">Contact</a></li>
		  </ul>
		</nav>

顯示結果

頭部:

<header> : 通常包含導覽列、Logo、帳戶資訊等。

<header class="page-header"> 
    <h1>Welcome!</h1> 
</header>

<article> : 通常表示文章內容。

<section> : 通常用於區分細部內容，類似文章中的章節。

<aside> : 側邊欄，通常用於側邊導覽。

<footer> : 通常包含聯絡資訊與版權聲明。

查詢所需的元素

HTML參考手冊- (HTML5標準)

[Ctrl] + [F] 開啟尋找功能。