Download
1 / 101
1.08k likes | 1.58k Vues
HTML 與 CSS. 必備的 HTML 與 CSS 重點. 因為 PHP 的程式碼內嵌在 HTML (Hyper Text Markup Language) 網頁中 , 所以本章的目標是讓不熟悉 HTML 語法的讀者 , 可以具備必須的知識。 故重點會放在 HTML 網頁結構、本書範例中常用到的 HTML 標籤 , 以及對 PHP 而言較重要的表單 (form) 語法 , 以便在後續章節能用表單設計出具互動性的網頁。. 必備的 HTML 與 CSS 重點.
E N D
必備的 HTML 與 CSS 重點 • 因為 PHP 的程式碼內嵌在 HTML (Hyper Text Markup Language) 網頁中, 所以本章的目標是讓不熟悉 HTML 語法的讀者, 可以具備必須的知識。 • 故重點會放在 HTML 網頁結構、本書範例中常用到的 HTML 標籤, 以及對 PHP 而言較重要的表單 (form) 語法, 以便在後續章節能用表單設計出具互動性的網頁。
必備的 HTML 與 CSS 重點 • 此外本章也會介紹如何使用 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 標籤的種類 • 此外, 早期 HTML 規格中, 標籤的名稱是不分大小寫的, 換言之 <html>、<HTML>、<hTmL> 都是合法的。 • 但是到了新版的 XHTML規格中, 規定標籤的名稱統一為小寫。 • 本書將會依照 XHTML 規格, 所有的標籤都使用小寫。
HTML 文件結構 • 在標準的 HTML 文件中, 一定要有 <html>、<head>、<body> 標籤, 它們分別標示出整個 HTML 文件的結構。 • <html> 代表文件的開頭與結束, 而 <head> 及 <body> 標籤分別代表文件的標頭和本體：
HTML 文件結構 • 標頭資訊 • 我們會將網頁屬性設定放置於標頭資訊中, 像是標題、編碼...等設定, 例如：
HTML 文件結構 ex. Ch02-01.htm • 除了使用 <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 編碼的字。
HTML 文件結構 • 文件本體 • 在 <body> 標籤中放置的就是要顯示在網頁中的內容, 例如要顯示在網頁中的文字、圖片等物件, 因此這個標籤將會是內容最豐富的。
標籤屬性 • HTML 的所有標籤, 都有數量不一的屬性, 可設定此標籤的某項性質或行為。
標籤屬性 • 標籤屬性的設定方式如下： • HTML 標籤的屬性種類很多, 而且不同的標籤會有不同的屬性, 在此我們就不詳細介紹。 • 稍後介紹各標籤時, 則會適時介紹一些實用的屬性。
2 - 2 基本的 HTML 標籤 • 在 <body>...</body> 標籤之間, 就是要放入所有要顯示的網頁文字或圖片的 URL。 • 也因此為了讓網頁中的文字看起來段落分明、版面整齊、甚至美觀大方, 我們就需用到許多不同的 HTML 標籤來標示文件中不同的部份。 • HTML 的標籤為數不少, 此處就不一一介紹, 下表列出本書常用到的幾個標籤。
特殊字元表示法 • 在 HTML 程式中, 空白字元、換行字元、定位字元 (tab) 都被視為『空白』, 而且連續出現多個『空白』時, 仍會被當成 1 個空白。 • 所以在 HTML 原始檔中, 即使在每一行行首空好幾個空格、兩段文字間按了幾次 Enter鍵換行, 在瀏覽時仍只會出現一個小小的空白, 也沒有換行的效果。 • 如果真的需要有連續的空白, 該如何呢？
特殊字元表示法 • 另外有讀者或許會想到：HTML 標籤要用大於、小於符號, 那如果網頁中要顯示大於、小於符號, 要如何表示？ • 其實這類特殊的字元及符號都有特殊的表示法：
超連結的連結屬性 • 剛才用到 <a> 標籤來建立超連結 (Hyperlink), 使用 <a> 標籤時需用 href 屬性設定此標籤所指的網址, 網址可以是相對位置或絕對。 • 絕對位置：即瀏覽該網頁或其物件時, 在瀏覽器網址列看到的完整 URL。 • 通常用於表示另一網站的資源。 • 相對位置：通常用於表示同一網站的資源。
超連結的連結屬性 • 使用相對位址時, 只需設定該資源與目前網頁所在路徑的『相對位置』。 • 例如要指向同一資料夾下的另一個網頁, 只要在 herf 中列出該網頁的檔名即可。
2 - 3 表單 • 對 PHP 網頁而言, 最重要的 HTML 標籤應該就是與表單 (form) 相關的標籤。 • 因為表單的功能就是在網頁產生輸入欄位, 讓瀏覽者可輸入資料、並傳回給伺服器。 • 往後幾章設計 PHP 網頁時, 我們都會利用表單讓瀏覽者輸入資料, 並傳送給我們的 PHP 程式處理。
表單中的欄位名稱與欄位值 • 使用者在欄位輸入或選擇的資料稱為欄位值 (value), 上面表單中, username 欄位的欄位值為 "tony"。 • 當 PHP 程式要取得表單資料時, 必須指定欄位名稱, 才能取得該欄的資料 (欄位值)。 • 因此在設定欄位名稱時, 最好取易記、能代表欄位意義的名稱, 以免寫程式時, 自己都分不清楚要處理的欄位是什麼。
建立表單 • 要建立表單, 必須使用 <form>...</form> 標籤, 在這一對標籤中則可加入表單的內容, 例如表單本身的說明文字、各輸入欄位的標籤等等。 • 但除此之外, 表單本身也必須設定下列屬性, 以指定使用者於表單中輸入資料後, 要將資料送到什麼地方處理、以及要以什麼方式傳送： • action 屬性：設定表單資料要送到何處, 其屬性值應設為 PHP 網頁的 URL, 表示表單資料要傳送給該 PHP 網頁處理。
建立表單 • 由於我們還沒撰寫 PHP 網頁, 所以稍後的範例不會設定此屬性, 第 4 章開始才會將此屬性設為網頁本身或其它網頁。 • method 屬性：設定資料送出的方式。 • 可設定的屬性值有兩種： • "get"：使用 HTTP 通訊協定中的 GET 方法送出資料, 此時瀏覽器會將使用者輸入的資料, 附在網頁 URL 後面送出。 • 此種方式不能傳送超過 1024 位元組的資料, 且傳送的內容會出現在瀏覽器的網址列。
建立表單 ex. Ch02-02.htm • "post"：使用 HTTP 通訊協定中的 POST 方法送出資料。 • 此時瀏覽器會將使用者輸入的資料, 附加於 HTTP 的通訊檔頭送出, 所以傳送的內容不會出現在網址列, 使用者不會看到傳送的內容。 • POST 方法沒有大小限制, 可用於傳送大量資料 (例如發表 Blog 文章、上傳檔案等)。
建立輸入欄位 • 單列的文字輸入欄位 • 單列的文字輸入欄位是最常見的欄位： • 要在表單中建立單列的文字輸入欄位, 可以使用 <input> 標籤, 其用法如下：
建立輸入欄位 • name 屬性用來指定該欄位的名稱, 這是所有表單欄位都有的屬性, 隨後介紹其他欄位時, 將不再重複說明 name 屬性。 • 如果我們在上例所建立的欄位輸入 "tony", 送出表單時, 便會以 "欄位值 = 輸入的資料", 也就是 "username = tony" 的格式傳送資料。 • 隨後介紹的密碼輸入欄位與多列文字輸入欄位也都具有一樣的特性。
建立輸入欄位 • 密碼輸入欄位 • 密碼輸入欄位會隱藏使用者輸入的文字, 避免其他人窺視。 • 密碼輸入欄位一樣可以使用 <input> 標籤來建立, 其用法如下：
建立輸入欄位 • 多列的文字輸入欄位 • <input type = "text"> 所建立的是單行的輸入欄位, 不適合於輸入大量、分行、分段的文字資料。 • 若需要提供多列的輸入欄位(如留言板), 可改用 <textarea> 標籤, 其用法為： • 關於 <textarea> 標籤的示範, 請參考下一頁的範例 Ch02-02.htm。
建立輸入欄位 • 送出與清除資料的按鈕 • 有了輸入欄位後, 表單還需要按鈕, 才能將資料送出。 • 建立按鈕也是使用 <input> 標籤, 用法如下：
建立輸入欄位 ex. Ch02-02.htm • 下面例子示範如何結合按鈕, 建立包含密碼欄位與單列、多列文字欄位的表單 (從本例開始, 範例程式視情況只列出 <body>...</body> 標籤的部份)：
建立輸入欄位 • 執行結果如下。
建立輸入欄位 ex. Ch02-03.htm • 單選鈕 • 在表單上使用單選鈕, 可以方便使用者直接選擇, 不用再手動輸入資料： • 建立單選鈕也是使用 <input> 標籤, 下面是其用法：
建立輸入欄位 • 範例如下： • <input> 是空標籤, 標籤內容在 "/>" 的地方已經結束了, 所以上例中, <input> 後面的文字 "男" 與 "女", 都是顯示於網頁上的文字, 與 <input> 無關。 • 當使用者選擇 "男" 前面的單選鈕時, 表單會送出 "gender = male", 若選則 "女" 前面的單選鈕, 則會送出 "gender = female"。
建立輸入欄位 • 多選鈕 • 多選鈕可以讓使用者同時選擇多個項目： • 建立多選鈕也是使用 <input> 標籤, 下面是其用法：
建立輸入欄位 • 下面範例建立一個包含單選鈕與多選鈕的表單：
建立輸入欄位 • 執行結果：
建立輸入欄位 • 上例可以看到, 單選鈕的資料會以 "欄位名稱 = value 屬性值" 的方式送出, 而多選鈕的資料會以 "欄位名稱 = on" 的方式送出。 • 下拉式選單及固定選單 • 當可選的項目較多時, 要全部列在網頁上, 有時會妨礙網頁畫面的設計。
建立輸入欄位 • 此時可改用 <select> 標籤建立下拉式的選單 (Drop Down), 或是固定選單 (在固定大小的窗格列出選項, 供使用者捲動、選取)： • 下面將分別說明下拉式選單及固定選單的建立方式。
建立輸入欄位 ex. Ch02-04.htm • 建立下拉式選單：定義下拉式選單時, 在 <select> 標籤中要用 name 屬性定義此選單的名稱。 • 至於所有可選擇的項目, 則是以 <option> 標籤來設定, 整體的格式如下：
建立輸入欄位 • 說明文字會顯示在網頁上, 成為該項目的名稱。而選項值是實際傳回的表單資料, 不會顯示在網頁上。 • 例如上面表單中, 若選擇第二個項目, 傳回的表單資料就是 "DropDown = 選項值 2"。 • 不過 value 屬性並非必要屬性, 如果該項目沒有選項值, 傳回的表單資料會變成 "DropDown = 說明文字 2"。 • 若在某個 <option> 標籤中加入 selected = "on" 的設定, 則該項會成為預設的選項。 • 請參考以下的例子。
建立輸入欄位 • 執行結果：
