必备的HTML与CSS重点.PPT

著作權所有 ? 旗標出版股份有限公司 本著作僅授權老師於課堂使用, 切勿置放在網路上播放或供人下載, 除此之外, 未經授權不得將全部或局部內容以任何形式重製、轉載、變更、散佈或以其他任何形式、基於任何目的加以利用。 必備的 HTML 與 CSS 重點 第 2 章 * 本章重點 2 - 1 HTML 的標籤與結構 2 - 2 基本的 HTML 標籤 * 必備的 HTML 與 CSS 重點 因為 PHP 的程式碼內嵌在 HTML (Hyper Text Markup Language) 網頁中, 所以本章的目標是讓不熟悉 HTML 語法的讀者, 可以具備必須的知識。 故重點會放在 HTML 網頁結構、本書範例中常用到的 HTML 標籤, 以及對 PHP 而言較重要的表單 (form) 語法, 以便在後續章節能用表單設計出具互動性的網頁。 * 2 - 1 HTML 的標籤與結構 HTML 標籤的種類 HTML 文件結構 標頭資訊 文件本體 標籤屬性 * HTML 標籤的種類 我們稱以 HTML 語法撰寫的文字檔案為『HTML 文件』, 也就是一般俗稱的網頁。 『使用 HTML 語法』的意思, 就是用 HTML 語言標準中所定義的標籤 (Tag), 來標示要顯示在網頁中的文字、圖片...等物件。 依照最新的 XHTML 規格, HTML 標籤依其用法可分為 2 類： 第一類使用時需起始標籤與結束標籤成對出現, 例如 html.../html。 * HTML 標籤的種類 另一類標籤則可單獨出現, 不需結束標籤, 我們稱之為空標籤 (Empty Tag), 空標籤的用法是在標籤名稱後加上斜線, 例如 br /。 早期的 HTML 規格並無空標籤的語法, 所以換行標籤會寫成 br 而不是 br /。 本書將依照 XHTML 規格, 使用加上斜線的空標籤。 此外, 為了避免只支援舊 HTML 語法的瀏覽器無法判讀, 一般會建議在斜線前空一格, 例如寫成 br /, 本書也會採用此用法。 * HTML 標籤的種類 此外, 早期 HTML 規格中, 標籤的名稱是不分大小寫的, 換言之 html、HTML、hTmL 都是合法的。 但是到了新版的 XHTML 規格中, 規定標籤的名稱統一為小寫。 本書將會依照 XHTML 規格, 所有的標籤都使用小寫。 * HTML 文件結構 在標準的 HTML 文件中, 一定要有 html、head、body 標籤, 它們分別標示出整個 HTML 文件的結構。 html 代表文件的開頭與結束, 而 head 及 body 標籤分別代表文件的標頭和本體： * HTML 文件結構 標頭資訊 我們會將網頁屬性設定放置於標頭資訊中, 像是標題、編碼...等設定, 例如： * HTML 文件結構 請同學依照範例輸入，將檔名命為 ex01.html 並上傳到學校個人家目錄底下，並確定 .tw/~s99xxxxxx/ex01.html 可以瀏覽。 * HTML 文件結構 除了使用 title 標籤標示出文件的標題外, 在標頭資訊中常見的另一種標籤則是 meta 標籤。 * HTML 文件結構 此標籤可用以提供與文件本身相關的資訊, 以供瀏覽器、搜尋引擎等程式參考。 例如上述範例中即是用它來指定本文件採用的文字編碼： 本書的範例網頁與程式一率使用 UTF-8 編碼儲存, 因此都會加入上述的 meta 標籤, 或在 PHP 程式中設定。 * HTML 文件結構 瀏覽器看到文件中有用 meta 標籤指定文件的編碼時, 就會自動使用該編碼來顯示其中的文字內容。 所以如果指定錯誤：例如使用 UTF-8 編碼的文件, 在標籤中卻寫 Big5 碼, 就會造成顯示的內容變成亂碼, 必須由使用者手動在瀏覽器切換正確的編碼, 才能讓文件正常顯示。 * 為什麼採用 UTF-8 編碼？ 為促進資訊交流, 資訊業界合組 Unicode Consortium 組織, 制訂一套編碼, 讓所有語系的文字, 都採用同一套編碼來表示, 這就是一般所熟知的 Unicode (通用碼)。 為了讓這套文字編碼能用於大大小小、或新或舊的電腦系統上, 就產生了以不同位元數為單位, 來表示 Unicode 的『編碼方式』。 例如 UTF-8 就是以 8 位元為單位來表示 Unicode；同理, UTF-16 則是以 16 位元為單位來表示 Unicode。 * 為什麼採用 UTF-8 編碼？ 台灣通用的中文 Big5 編碼中, 有些字元如『許』、『功』、『蓋』...等, 包含了 \ 符號的 ASCII 碼。 而 \ 卻是大多數程式語言 (包括 PHP) 用來顯示特殊字元的符號, 因此在這些程式語言中, 便無法顯示與處理『許』、『功』、『蓋』...等 Big