Head First深入淺出HTML、CSS與XHTML_學習筆記#3

【本文章為「Head First深入淺出HTML、CSS與XHTML」的學習心得。若有侵犯或不妥之處請告知。】

#3_〖把網站由概念變成藍圖,構建它,再添加些格調〗

主要學習內容:

  1. 網頁建構;
  2. 認識 <q> 元素;
  3. 使用 <blockquote> 元素;
  4. 換行;
  5. 建立列表;
  6. 什麼是「嵌套」;

1. 網頁構建

試著利用先前全過的 HTML 元素,來構建一個一頁式的網站。

  1. 思考頁面要怎麼用標題、主題、圖像、內文等結構元素來構建網站?
  2. 要怎麼把概念變為網頁?

制定大體結構,如下:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

除了瀏覽器顯示出來(我們看得到)的元素之外,要記得每個網頁都需要以 <html> 元素開始,並包括 <head> 和 <body>這兩個元素。

利用這章節給的資源,所構建的一頁式網站看起來像這樣:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

只用 <h1>、<p>、<h2>、<img>、<a>等這些基本的 HTML 元素,就能做出陽春版的網頁喔!

 

2. 認識 <q> 元素

  • 想在 HTML 中來段簡短的引用,可以使用 <q> 元素。
  • <q> 為行內元素 (inline element) ,用來標示引用語,呈現方式是在一段文字前後加上雙引號。
  • 在文本中使用雙引號的原因有很多,但我們使用<q>元素就代表文本的真正引用。

練習:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

這裡延伸了另一個問題:「為何瀏覽網頁時,出現的是亂碼?」

解決出現亂碼問題:

如果您在瀏覽某個網頁發現文字出現亂碼時,可先判斷是個人瀏覽器設定問題,還是網頁設計的問題。您可使用其它電腦觀看該網頁是否一樣有亂碼問題,如果其它電腦看也是一樣的話,那應該就是網頁設計不良所造成的原因,通常是網頁的語系在設計階段時沒有設定正確,或是由程式、及資料庫編碼錯誤所產生;若其它電腦看到的文字是正常,只有自已的電腦瀏覽時會有亂碼的情況時,那應該是您電腦瀏覽器設定的問題囉,若您是使用IE瀏覽器,可於「檢視 / 編碼」中設定適合的語系,通常如果您是瀏覽繁體中文的網頁,可將編碼設定成繁體中文(Big5)或是Unicode(UTF-8),若是其它國家的網頁,則使用該國別之編碼即可。

來源:為何我瀏覽網頁時,看到的是一堆亂碼?

怎麼解決亂碼事件?

在文本<head>後,加入這一段 <meta http-equiv="Content-Type" content="text/html; charset=utf-8″> ,如下:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

再次看結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

注意:

有些瀏覽器,對於 <q> 元素包圍的文字前後不顯示雙引號。

 

3. 使用<blockquote>元素

<blockquote> 是區塊 (block) 元素,區塊引用,引用一大段文字並獨立顯示。

練習:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

<q> 元素與 <blockquote> 元素之間的差別在於: <q> 元素是出現在一個段落的文字中;<blockquote> 元素則是獨立呈現,前後都有換行符。

記住:<blockquote> 元素特立獨行;<q> 元素隨波逐流。

區塊(塊) VS 行內(內聯):

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

4. 換行

  • <br> 標籤,是一個换行符。
  • <br> 元素是沒有內容的元素,它只代表換行,沒有其他意義。<br>沒有內容</br>,所以 <br> 沒有結束標籤,所以,<br></br> 是錯誤的,單寫 <br>就好。

回到前面 <blockquote> 的練習,我在 HTML 文本裡寫的是換行的句子,但瀏覽器顯示卻是全部連在一起。原因是我沒有在文本裡加入 <br> 元素,讓它可以換行。

練習:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

沒有 HTML 內容的元素稱為空元素。當你需要一個空元素,例如 <br>  或者 <img> 時,只需要寫一個開始標記。這種方法的縮寫減少了 HTML 標記的數量。

 

5. 建立列表

建立一個 HTML 列表需要兩個元素:第一個元素用來標記列表項目;第二個元素決定列表的類型(有序或者無序)。

第一步:加入<li> 元素來標記列表項目。

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

第二步:決定列表的類型:有序 <ol> 或者無序 <ul>。

這裡加入有序 <ol> 元素:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

  • 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」的學習心得。若有侵犯或不妥之處請告知。】

You may also like

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *