1. 第 2 章 HTML 、 XML 和 CSS 的 基礎 2-1 HTML 的基礎 2-2 HTML 標籤 2-3 XML 文件的基礎 2-4 Cascading Style Sheets 2-5 局部套用的 CSS 2-6 內建網頁的 CSS 2-7 使用 CSS 進行絕對位置的編排

2. 2-1 HTML 的基礎 2-1-1 第一份 HTML 文件 2-1-2 HTML 文件的基本架構 2-1-3 Meta 標籤的使用

3. 2-1-1 第一份 HTML 文件 -1 「 HTML 」（ HyperText Markup Language ）標 記語言屬於一種文件編排語言，其目的是編排 文件的內容，以便顯示漂亮的文件內容。 Tim Berners-Lee 在 1991 年建立 HTML ，在 1993 年 HTML1.0 版由 Berners-Lee 和 Connolly 完成， HTML 只是使用 SGML 的慣用語法，也就是標 籤和屬性，如下所示： – 「標籤」（ Tag ）： HTML 標籤是一個字串符號，主要是標示 需要套用編排格式的文字內容，在標籤內的文字是使用預設 格式編排。 – 「屬性」（ Attribute ）：每一個標籤可以擁有一些屬性來定義 文字內容的細部編排。

4. 2-1-1 第一份 HTML 文件 -2 01: 02: 03: Ch2-1-1.htm 04: 05: 06: From: hueyan@ms2.hinet.net 07: To: hueyan@tpts1.seed.net.tw 08: Subject: 測試郵件功能 09: 這是第一封郵件 10: 11:

5. 2-1-2 HTML 文件的基本架構 HTML 文件標籤的基本架構，如下所示： 標示著一份 HTML 網頁 HTML 網頁的基本定義 HTML 網頁的內容 HTML 文件是包含於 和 標籤間的 內容和定義，其中 和 標籤包圍的 區塊定義 HTML 網頁的本身，網頁內容是定義 在 和 標籤間。

6. 2-1-3 Meta 標籤的使用 標籤是位在 區塊，可以用來定義 HTML 標籤所沒有定義的相關資訊，常用的應 用如下所示： – 設定使用的編輯工具 – 設定網頁使用的語系 – 自動更新網頁內容

7. 2-2 HTML 標籤 2-2-1 HTML 的標頭標籤 2-2-2 文字格式標籤 2-2-3 清單項目標籤 2-2-4 圖片和超連結標籤 2-2-5 網頁表格標籤 2-2-6 網頁表單標籤 2-2-7 框架頁標籤

8. 2-2-1 HTML 的標頭標籤

9. 2-2-2 文字格式標籤 -1

10. 2-2-2 文字格式標籤 -2

11. 2-2-2 文字格式標籤 -3

12. 2-2-3 清單項目標籤

13. 2-2-4 圖片和超連結標籤

14. 2-2-5 網頁表格標籤

15. 2-2-6 網頁表單標籤

16. 2-2-7 框架頁標籤

17. 2-3 XML 文件的基礎 2-3-1 什麼是 XML 2-3-2 XML 文件的組成

18. 2-3-1 什麼是 XML-1 「 XML 」（ eXtensible Markup Language ）可擴 展標示語言屬於一種標籤語言， XML 1.0 版規 格在 1998 年 2 月正式推出， XML 的寫法十分類 似 HTML ，繼承 SGML 自定標籤的優點，並且 刪除一些 SGML 複雜的部分，在功能上能夠補 足 HTML 標籤的不足，而擁有更多的擴充性。 XML 並不是用來編排內容，而是用來描述資料， 它並沒有如同 HTML 一般的預設標籤，使用者 需要自己定義描述資料所需的各種標籤。

19. 2-3-1 什麼是 XML-2 01: 02: 03: 04: 05: F8915 06: ASP 網頁製作徹底研究 07: 08: 陳會安 09: 10: 580 11: 12: 13: F8916 14: ASP 與 IIS 4/5 網站架設徹底研究 15: 16: 陳會安 17: 18: 550 19: 20:

20. 2-3-2 XML 文件的組成 XML 文件基本上是由標籤和內容組成， 一共七種組成的元素可以出現在 XML 文 件中。 – 元素（ Element ） – 屬性（ Attribute ） – 實體參考（ Entity Reference ） – 註解（ Comment ） –CDATA 區塊（ CDATA Section ）與 PCDATA –PI （ Processing Instructions ） –DTD （ Document Type Declarations ）

21. 2-4 Cascading Style Sheets 2-4-1 CSS 的基礎 2-4-2 CSS 的基本語法 2-4-3 常用的 CSS 樣式屬性

22. 2-4-1 CSS 的基礎 -1 「 Cascading Style Sheets 」簡稱 CSS ，中 文稱為層級式樣式表， CSS 層級式樣式表 是一種樣式語言，能夠定義 HTML 標籤 的顯示效果。 瀏覽程式在解譯 HTML 標籤時是使用預 設顯示樣式，例如： 標籤是段落、 為清單項目， CSS 能夠重新定義標籤 的顯示樣式。

23. 2-4-1 CSS 的基礎 -2 如果想在網頁上使用 CSS 編排網頁內容， 一共有三種方式，如下所示： – 局部套用的 CSS （ In-Line Style Sheets ）。 – 內建網頁的 CSS （ Embedded Style Sheet ）。 – 外部連結的 CSS （ External Style Sheet ）。

24. 2-4-2 CSS 的基本語法 CSS 能夠針對指定標籤定義全新的樣式， 其基本語法如下所示： Selector {property1: value1; property2: value2 } 選擇器 Selector 選擇樣式套用的標籤，大 括號括起的樣式組，就是重新定義的標 籤樣式，例如：前面的 標籤，如下所 示： p { font-size: 10pt; color: red; }

25. 2-4-3 常用的 CSS 樣式屬性 在選擇好定義的標籤後，可以定義 CSS ， CSS 常用的樣式屬性分類成幾大類。 – 字型的樣式屬性 文字內容顯示的字型效果屬性 – 色彩和背景樣式屬性 標籤內容的顯示和背景色彩屬性 – 文字樣式屬性 文字內容的顯示屬性包含對齊、字距的屬性 – 區塊樣式屬性 文字內容顯示的區塊，這也包含外框顯示的屬性 – 絕對位置的樣式屬性 絕對位置編排，也就是可以顯示在指定的位置

26. 2-5 局部套用的 CSS 局部套用的 CSS 是直接在標籤使用 style 屬 性定義樣式，常用的 HTML 標籤有 、 、 和 。

27. 2-6 內建網頁的 CSS 2-6-1 重設 HTML 標籤樣式 2-6-2 重新設定超連結標籤的樣式 2-6-3 自訂樣式名稱

28. 2-6-1 重設 HTML 標籤樣式 CSS 能夠重新定義 HTML 標籤顯示的編排樣式，內建網 頁的 CSS 是將樣式定義在 標籤前的 標籤， 如下所示： body { font-size: 9pt; font-family: 標楷體 ; line-height: 120%; } span {text-transform: uppercase} p { font-size: 12pt; color: yellow; background-color: blue; line-height: 20px; }

29. 2-6-2 重新設定超連結標籤的樣 式 網頁超連結的顯示狀態分為多種情況， 不同狀態的超連結樣式需要分別定義， 如下所示： a:link {font-size: 9pt; text-decoration: none} a:active {font-size: 9pt; text-decoration: none} a:visited {font-size: 9pt; text-decoration: none} a:hover {font-size: 15pt; text-decoration: underline}

30. 2-6-3 自訂樣式名稱 CSS 允許使用者在網頁定義個人風格的樣 式名稱，樣式名稱是一個 Class ，以「. 」 句點開始的名稱定義在 標籤，如 下所示：.littlered {color: red; font-size: 9pt}.littlegreen {color: green; font-size: 9pt} HTML 標籤使用 class 屬性指定樣式名稱， 在標籤套用定義的樣式，如下所示： Style

31. 2-7 使用 CSS 進行絕對位置的編 排 CSS 擁有絕對位置的定位能力，能夠讓您隨心 所欲的編排網頁元素，如下所示：.titlered { position: absolute; top: 100pt; left: 50pt; visibility: visible; z-index: 1; background-color: blue; color: yellow; font-size: 19pt; } 樣式使用絕對位置顯示元素，即 absolute ，其位 置是離上方邊界 100 像素，左邊 50 像素的位置。