【本文章為「Head First深入淺出HTML、CSS與XHTML」的學習心得。若有侵犯或不妥之處請告知。】
#3_〖把網站由概念變成藍圖，構建它，再添加些格調〗
主要學習內容：
- 網頁建構；
- 認識 <q> 元素；
- 使用 <blockquote> 元素；
- 換行；
- 建立列表；
- 什麼是「嵌套」；
1. 網頁構建
試著利用先前全過的 HTML 元素，來構建一個一頁式的網站。
- 思考頁面要怎麼用標題、主題、圖像、內文等結構元素來構建網站？
- 要怎麼把概念變為網頁？
制定大體結構，如下：
除了瀏覽器顯示出來（我們看得到）的元素之外，要記得每個網頁都需要以 <html> 元素開始，並包括 <head> 和 <body>這兩個元素。
利用這章節給的資源，所構建的一頁式網站看起來像這樣：
只用 <h1>、<p>、<h2>、<img>、<a>等這些基本的 HTML 元素，就能做出陽春版的網頁喔！
2. 認識 <q> 元素
- 想在 HTML 中來段簡短的引用，可以使用 <q> 元素。
- <q> 為行內元素 (inline element) ，用來標示引用語，呈現方式是在一段文字前後加上雙引號。
- 在文本中使用雙引號的原因有很多，但我們使用<q>元素就代表文本的真正引用。
練習：
結果：
這裡延伸了另一個問題：「為何瀏覽網頁時，出現的是亂碼？」
解決出現亂碼問題：
如果您在瀏覽某個網頁發現文字出現亂碼時，可先判斷是個人瀏覽器設定問題，還是網頁設計的問題。您可使用其它電腦觀看該網頁是否一樣有亂碼問題，如果其它電腦看也是一樣的話，那應該就是網頁設計不良所造成的原因，通常是網頁的語系在設計階段時沒有設定正確，或是由程式、及資料庫編碼錯誤所產生；若其它電腦看到的文字是正常，只有自已的電腦瀏覽時會有亂碼的情況時，那應該是您電腦瀏覽器設定的問題囉，若您是使用IE瀏覽器，可於「檢視 / 編碼」中設定適合的語系，通常如果您是瀏覽繁體中文的網頁，可將編碼設定成繁體中文(Big5)或是Unicode(UTF-8)，若是其它國家的網頁，則使用該國別之編碼即可。
怎麼解決亂碼事件？
在文本<head>後，加入這一段 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> ，如下：
再次看結果：
注意：
有些瀏覽器，對於 <q> 元素包圍的文字前後不顯示雙引號。
3. 使用<blockquote>元素
<blockquote> 是區塊 (block) 元素，區塊引用，引用一大段文字並獨立顯示。
練習：
結果：
<q> 元素與 <blockquote> 元素之間的差別在於： <q> 元素是出現在一個段落的文字中；<blockquote> 元素則是獨立呈現，前後都有換行符。
記住：<blockquote> 元素特立獨行；<q> 元素隨波逐流。
區塊（塊） VS 行內（內聯）：
4. 換行
- <br> 標籤，是一個换行符。
- <br> 元素是沒有內容的元素，它只代表換行，沒有其他意義。<br>沒有內容</br>，所以 <br> 沒有結束標籤，所以，<br></br> 是錯誤的，單寫 <br>就好。
回到前面 <blockquote> 的練習，我在 HTML 文本裡寫的是換行的句子，但瀏覽器顯示卻是全部連在一起。原因是我沒有在文本裡加入 <br> 元素，讓它可以換行。
練習：
結果：
沒有 HTML 內容的元素稱為空元素。當你需要一個空元素，例如 <br> 或者 <img> 時，只需要寫一個開始標記。這種方法的縮寫減少了 HTML 標記的數量。
5. 建立列表
建立一個 HTML 列表需要兩個元素：第一個元素用來標記列表項目；第二個元素決定列表的類型（有序或者無序）。
第一步：加入<li> 元素來標記列表項目。
第二步：決定列表的類型：有序 <ol> 或者無序 <ul>。
這裡加入有序 <ol> 元素：
結果：
- ul = unordered list
- ol = ordered list
- li = list item
6. 什麼是「嵌套」
把一個元素放進另一個元素，叫做「嵌套」。
嵌套最重要的作用是，可以避免標記不匹配。
例如： <body> 嵌套在 <html> 中， <title> 嵌套在 <head> 中。
補充：為特殊符號做準備
有時候我們會需要用到特殊符號，例如在瀏覽器要出現 <html> ，必須使用特殊符號來代替原本的符號。
HTML Entities：http://www.w3schools.com/html/html_entities.asp
Unicode 8.0 Character Code Charts：http://www.unicode.org/charts/
【本文章為「Head First深入淺出HTML、CSS與XHTML」的學習心得。若有侵犯或不妥之處請告知。】