網頁程式設計 學習紀錄 (二) HTML 文件結構
包含以下六個部分：
- HTML文件的 DOCTYPE - <!doctype> 元素
- HTML文件的 根元素 - <html> 元素
- HTML文件的 標頭 - <head> 元素
- HTML文件的 主體 - <body> 元素
- HTML5 新增的結構元素
- 區段結構與附加資訊
1.HTML文件的 DOCTYPE - <!doctype> 元素
HTML文件結構包含下列三個部分：DOCTYPE、標頭(header)、主體(body)
(1)DOCTYPE
<!doctype> 元素宣告文件定義類型(DTD：Document Type Definition)
DTD 是一組定義了能在特定HTML版本中執行的規則，瀏覽器會根據此規則來解譯HTML文件
HTML5 文件的第一行必須是如下的DOCTYPE，且前面不能有空行或是省略，否則瀏覽器可能不會啟用標準模式
<!doctype html>
2.HTML文件的 根元素 - <html> 元素
HTML5 可以包含一個或多個元素，呈樹狀結構
根元素則為<html>，要放在<!doctype>之後，後面則接著html 文件的標頭與主體
<!doctype html>
<html>
HTML 文件的的標頭與主體
</html>
(1)全域屬性
可以套用到多數的 HTML 元素，其說明如下：
| title="..." | 指定元素的標題，瀏覽器可能用它做為提示文字 |
| id="..." | 指定元素的識別字，限定英文且唯一 |
| class="..." | 指定元素的類別 |
| style="..." | 指定套用到元素的 CSS 樣式表 |
| dir="..." | 指定文字的方向 |
| lang="language-code" | 指定元素的語系 |
| accesskey="..." | 指定將焦點移到元素的按鍵組合 |
| tabledex="n" | 指定元素的[Tab]順序，當按下[Tab]按鍵時，焦點在元素之間跳躍的順序，n越小，順序就越高 |
| translate="{yes,no}" | 指定元素是否啟用翻譯模式 |
| contenteditable="..." | 指定元素的內容是否可被編輯 |
| contentmenu="..." | 指定元素的快顯功能表 |
| draggable="..." | 指定元素是否能進行拖放操作(drag and drop) |
| dropzone="..." | 將元素指定為拖放操作的放置目標 |
| hidden="..." | 指定元素的內容是否被隱藏起來 |
| spellcheck="..." | 指定是否檢查元素的拼字與文法 |
| role="..." | 提升網頁的無障礙性 |
| data="..." | 透過自訂屬性將資訊傳送給 Script |
(2)事件屬性
事件屬性也屬於全域屬性，可以套用到多數的 HTML 元素
用來針對 HTML 元素的某個事件指定處理程式
| onload="..." | 指定當瀏覽器載入網頁或所有框架時所要執行的 Script |
| onunload="..." | 指定當瀏覽器移除視窗或框架內網頁時所要執行的 Script |
| onclick="..." | 指定在元件上按一下滑鼠時所要執行的 Script |
| ondblclick="..." | 指定在元件上按兩下滑鼠時所要執行的 Script |
| onmousedown="..." | 指定在元件上按下滑鼠按鍵時所要執行的 Script |
| onlmouseup="..." | 指定在元件上放開滑鼠按鍵時所要執行的 Script |
| onmouseover="..." | 指定當滑鼠移過元件時所要執行的 Script |
| onmousemove="..." | 指定當滑鼠在元件上移動時所要執行的 Script |
| onmouseout="..." | 指定當滑鼠從元件上移開時所要執行的 Script |
| onfocus="..." | 指定當使用者將焦點移到元件上時所要執行的 Script |
| onblur="..." | 指定當使用者將焦點從元件上移開時所要執行的 Script |
| onkeypress="..." | 指定在元件上按下再放開按鍵時所要執行的 Script |
| onkeydown="..." | 指定在元件上按下按鍵時所要執行的 Script |
| onkeyup="..." | 指定在元件上放開按鍵時所要執行的 Script |
| onsubmit="..." | 指定當使用者傳送表單時所要執行的 Script |
| onreset="..." | 指定當使用者清除表單時所要執行的 Script |
| onselet="..." | 指定當使用者在文字欄位選取文字時所要執行的 Script |
| onchange="..." | 指定當使用者修改表單欄位時所要執行的 Script |
3.HTML文件的 標頭 - <head> 元素
可以使用 <head> 元素來標示 HTML 文件的標頭
可進一步使用：
- <title>來指定文件標題
- <meta>來指定元件相關資訊
- <link>來指定文件之間的關聯
- <base>來指定相對 URL 路徑
- <script>來指定 JavaScript 程式碼
- <style>來指定 CSS 樣式表
<head>要放在<html>元素裡面，而且有結束標籤</head>，範例如下：
<!doctype html>
<html>
<head>
HTML 文件的標頭
</head>
</html>
(1) <title> 元素(文件標題)
<title> 元素用來指定 HTML 文件的標題
此標題會顯示在瀏覽器的標題列或索引標籤，有助於搜尋引擎優化(SEO)
<title>將放在<head>元素裡面：
<!doctype html>
<html>
<head>
<title>標題</title>
...其他標頭資訊...
</head>
</html>
(2) <meta> 元素(文件相關資訊)
<title> 元素用來指定 HTML 文件的相關資訊，稱為 metadata
例如、字元集(編碼方式)、內容類型、作者、搜尋引擎關鍵字、版權宣告等
<title>將放在<head>元素裡面、<title>元素的前面。
1.指定 HTML 的字元集
使用 charset = "..."，例如以下的範例為指定文件的字元集為 UTF-8 ：
<meta charset = "utf-8">
2.指定 metadata 的名稱與內容
1.使用 name = "{application-name,author,generator,keywords,description}" 來指定名稱
上面這些值分別是：網頁應用程式的名稱、作者的名稱、編輯程式、關聯的關鍵字、描述文字(有助於SEO)
2.使用 content = "..." 來指定內容
例如下面敘述是指定名稱為"author"、內容為"Ivan"，即 HTML 的作者為 Ivan：
<meta name="author" content="Ivan">
例如下面敘述是指定名稱為"generator"、內容為"sublime"，即 HTML 的編輯程式為 sublime：
<meta name="generator" content="sublime">
4.HTML文件的 主體 - <body> 元素
可以使用 <body> 元素來標示 HTML 文件的主體
<head>要放在<html>元素裡面，<head>元素得後面，而且有結束標籤</head>，範例如下：
<!doctype html>
<html>
<head>
HTML 文件的標頭
</head>
<body>
HTML 文件的主體
</body>
</html>
<body> 元素有許多屬性，其中background、bgcolor、text、link、alink、vlink 在 HTML5 被標示為 Deprecated(建議勿用)
HTML 已不再列出這些屬性，原因在於W3C鼓勵人員使用 CSS 定義網頁的外觀，範例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁1<title>
<style type="text/css">
body: {background:white; color:black}
a:link {color:red}
a:visited {color:green}
a:active {color:blue}
</style>
</head>
<body>
HTML 文件的主體
</body>
</html>
若有需要顏色代號對照的話可以前往，w3schools 查找。
(1) <h1>~<h6> 元素(標題1~6)
HTML 提供了<h1>、<h2>...~...<h6>等六種層次的標題
※align="{left,center,right}"(Deprecated)：指定標題左、中、右對齊
範例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 示範標題格式 </title> </head> <body> <h1 align="left">這是向左對齊的標題1</h1> <h2 align="center">這是置中的標題2</h2> <h3 align="right">這是向右對齊的標題3</h3> <h4>這是標題4</h4> <h5>這是標題5</h5> <h6>這是標題6</h6> </body> </html>
除了標題之外，包括段落、圖片、表格都有align屬性
但由於這涉及到外觀，所以HTML建議改用CSS來取代
範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 示範標題格式 </title>
<style type="text/css">
h1 {text-align: left}
h2 {text-align: center}
h3 {text-align: right;}
</style>
</head>
<body>
<h1 align="left">這是向左對齊的標題1</h1>
<h2 align="center">這是置中的標題2</h2>
<h3 align="right">這是向右對齊的標題3</h3>
</body>
</html>
(2) <p> 元素(段落)
網頁的內容通常會包含數個段落，HTML 會忽略文件中多餘的空白字元
所以在每個段落須加上開頭<p>結尾</p>
<p> 同樣也有 align 元素。
5.HTML5 的結構元素
常使用<div>標籤來區分網頁上的某些區段
HTML5 則有許多具有語意的結構元素幫助瀏覽器辨別區段
| 結構元素 | 說明 |
| <article> | 標示網頁的本文或獨立的內容，例如一篇文章或一篇報導 |
| <section> | 標示通用的區段，例如將網頁的本文分成不同主題區段 |
| <hgroup> | 將區段內的主標題、副標題、其他標題統整為一群組標題，層級最高的才被列入大綱 |
| <nav> | 標示導覽列 |
| <header> | 標示網頁或區段的頁首 |
| <footer> | 標示網頁或區段的頁尾 |
| <aside> | 標示側邊攔，通常包括摘要、廣告等等 |
| <address> | 標示網頁或文章的作者聯絡資訊 |
| <time> | 標示日期時間，可指定機器讀取或人看得懂的格式 |
6.區段結構與附加資訊
(1) <article>和<section> 元素(文章、通用的區段)
<article>標示網頁的本文或獨立的內容，例如一篇文章或一篇報導
<section>標示通用的區段，例如將網頁的本文分成不同主題區段
<hgroup>將區段內的主標題、副標題、其他標題統整為一群組標題，層級最高的才被列入大綱
<!DOCTYPE html> <html> <head> <title>文章、通用區段</title> </head> <body> <article> <h1>第一本書</h1> <section> <h1>第一個故事</h1> <p>以下將會有兩個文章</p> <article> <h1>第一個文章</h1> <p>文章內容</p> </article> <article> <h1>第二個文章</h1> <p>文章內容</p> </article> </section> <section> <h1>第二個故事</h1> <p>以下將會有兩個文章</p> <article> <h1>第一個文章</h1> <p>文章內容</p> </article> <article> <h1>第二個文章</h1> <p>文章內容</p> </article> </section> </article> </body> </html>
(2) <nav> 、<aside>元素(導覽列、側邊攔)
導覽列：通常包含一組連結至網站內其他網頁的超連結，使用者透過導覽列就可以穿梭往返於網站的各個網頁
側邊攔：通常包含摘要、廣告、贊助廠商超連結、日期月曆等可以從區段抽離的其他內容。
<!DOCTYPE html> <html> <head> <title>導覽列</title> </head> <body> <nav> <ul> <li><a href="a.html">第一個連結</li> <li><a href="b.html">第二個連結</li> <li><a href="c.html">第三個連結</li> </ul> </nav> </body> </html>
(3) <header>和<footer> 元素(頁首、頁尾)
頁首：通常包含標題、標誌圖案、區段目錄、搜尋表單等等
頁尾：通常包含擁有者資訊、建議瀏覽器解析度、瀏覽人數、版權聲明，以及連結至隱私權政策、網站安全政策、服務條款等超連結。
(4) <address> 元素(聯絡資訊)
用來標示與它最近的父<article>或<body>元素的作者聯絡資訊
<address>專門用來標示網頁或文章作者的聯絡資訊，不適合標註其他訊息
(5) <time> 元素(日期時間)
用來標示日期時間，可指定機器讀取或人看得懂的格式
要給機器讀取可使用 datetime 屬性來指定
<time datetime="2018-03-20">2018年3月20日<time>
若將機器可讀取的格直接給人看，就不用指定datetime屬性
<time>2018-03-20<time>
若要加上時間，以 T 區隔，依照 HH:MM:SS 格式，若要指定更小的單位可以小數點做區隔
<time>2018-03-20T16:11:30.332<time>
留言列表
NAS (1)