建立輸入欄位.ppt

本章重點 2 - 1 HTML 的標籤與結構 2 - 2 基本的 HTML 標籤 2 - 3 表單 2 - 4 CSS 樣式表 2 - 5 使用 CSS 控制版面 2 - 6 實戰演練 － 以 div 區塊規劃網頁版面 2 - 7 實戰演練 － 綜合表單 必備的 HTML 與 CSS 重點 因為 PHP 的程式碼內嵌在 HTML (Hyper Text Markup Language) 網頁中, 所以本章的目標是讓不熟悉 HTML 語法的讀者, 可以具備必須的知識。 故重點會放在 HTML 網頁結構、本書範例中常用到的 HTML 標籤, 以及對 PHP 而言較重要的表單 (form) 語法, 以便在後續章節能用表單設計出具互動性的網頁。 必備的 HTML 與 CSS 重點 如果您已熟悉 HTML, 可略過本章, 直接進入下一章開始學習 PHP。 此外本章也會介紹如何使用 CSS (Cascading Style Sheet) 為 HTML 文件設定外觀樣式, 讓網頁內容能有更多的變化。 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 文件結構 除了使用 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) 用來顯示特殊字元的符號, 因此在這些程式語言中, 便無法顯示與處理『許』、『功』、『蓋』...等 Big5 編碼的字。 為什麼採用 UTF-8 編碼？ 這樣的狀況,