第5章 HTML 標籤介紹.

第5章 HTML 標籤介紹

5-1 HTML

HTML HTML (Hyper Text Markup Language) 中文翻譯成超文件標籤語言，是一套用於超文件上的控制標籤。

HTML 的標準 HTML 的標準是由 W3C (World Wide Web Consortium, WWW協會) 來負責，W3C 制定 HTML 標準的來源，有取自於大家的建議，也有源自於市面上瀏覽器的擴充功能。最新的標準 HTML 4.01(1999/12/24)。

圖5-1： W3C官方網站(http://www.w3c.org/)

PHP PHP是被夾雜在 HTML 檔案裡，PHP 是用來動態輸出成網頁的內容
最後轉換輸出產生成全部是HTML標籤(Tag)的文字或圖形的網頁。

圖5-2：PHP程式必須先轉換成HTML格式

先學 HTML 要學好 PHP 前，要先把 HTML 搞定。接下來我們就來認識HTML標籤。

5-2 HTML 文件基本架構

標籤所有標籤都是由「<」和「>」當作括號，包圍標籤名稱構造而成，如<html>、<body>等，所以<html>的標籤名稱便是html。

終結標籤標記都有起始標籤(opening tag)和終結標籤(closing tag)之分
終結標記便在html之前加上「/」號，</html>就是終結標籤

內容(content) 被起始標記和終結標記圍住的便是內容(content) 。

元素(element) 起始標記、終結標記和內容合稱為元素(element)。

HTML檔案由<html>標籤所建立，所有的標籤包含在其中，整個超文件檔又區分成兩大部份，
一是由<head>標籤所建立的超文件的表頭區，另一個則是由<body>標籤所建立的超文件的主體區。

圖5-3：HTML文件基本架構

HTML標籤在某一 <標籤> 和 </標籤＞之間的內容(content)，均會受到這個標籤的影響。

HTML標籤的語法 <標籤名稱 [屬性名稱 = 參數 ...]>內容 </標籤名稱>

範例5-1：Ex5-1.htm

範例5-1說明：將網頁的標題，設成” PHP 5+MySQL專題實作”。

範例5-2說明：有的標籤，又包含屬性，例如:上面是將” 成功大學”內容，設定成超鏈結，透過屬性href=”

不加結尾標籤在習慣上也有不加結尾標籤的，但是實際上不是正規的HTML語法。

語法： <標籤名稱>

範例5-3說明： HTML語法範例， <BR>執行斷行功能，<HR>加上一條水準線。這是一個段落，<P>會加上一個段落符號，用來標明文字段落的開頭和結尾。

5-3 HTML 文件編寫規則

HTML 文件編寫規則 HTML標籤使用大寫或小寫的英文字母均可
HTML檔的副檔名可以使用.htm或.html，同一個網站在設計網頁時應該儘量使用相同的副檔名。多個標籤寫在同一行或分成數行來寫，結果會是一樣的

亦可寫成範例5-5：Ex5-5.htm

標籤屬性順序可以任意對調標籤中若有超過一個以上的屬性，其順序可以任意對調

亦可寫成範例5-7

顯示＞、＜、＆等特殊字元 HTML 檔中如果要顯示＞、＜、＆等特殊字元，必須使用表5-1下列方式來顯示

表5-1 HTML顯示特殊字元的方式

註解在文件上適度的加上說明，對於文件日後的維護工作會有很大的幫助。

5-4 HTML 文件標籤

文件主體標籤

範例5-9說明：在 HTML 文件中，是以 <html>標籤為文件開頭，以 </html> 為文件結尾，除了宣告文件類型的<!doctype>之外，所有其他html的標籤都必須包含在這個標籤之內。 <html> 是選用命令(註:可寫也可以不寫)，若省略不寫也不會有影響，但是為了保持檔的可讀性與明確性，在此仍建議最好能夠加上。

表頭區標籤

圖5-4：<title>標籤實例

範例5-10說明：表頭區通常是用來描述和整份檔有關的內容。表頭區以 <head> 開頭，以 </head> 結尾。
在 <head> ... </head> 區段中，最重要的標籤是文件標題 (title)的標籤 <title> ... </title>, 其設定的內容即瀏覽器視窗標題列出現的標題內容，最好不要省略標題不寫。

主體區標籤

圖5-5：<body>標籤實例

圖5-5說明：檔主要的部份是放在 <body>…</body> 之間的本體區。
background = “URL” 屬性用來設定背景圖形。 bgcolor = “#rrggbb” 屬性是用來描述背景顏色。 text = “#rrggbb” 屬性用來指定一般文字的顏色。 link = “#rrggbb” 屬性用來指定尚未鏈結過的顏色。 vlink = “#rrggbb” 屬性用來指定曾經鏈結過的顏色。 alink = “#rrggbb” 屬性則是指定鏈結過程中的顏色。 leftmargin="n" marginwidth="n" 屬性代表左邊界的距離。 topmargin="n" marginheight="n" 代表上邊界的距離。

顏色屬性控制碼使用十六進位數字 (0-9, A-F)，它的原理是：所有的顏色都是由光的三原色：紅綠藍 (R G B) 組成，16 x 16 = 256 ，所以每個原色要用二個十六進位數字表示

表15-1 顏色的英文名稱

圖5-6：顏色屬性實例

5-5 字元的格式化

標題樣式 (Headings)

圖5-7：<h#>標籤實例

圖5-7說明：區段標題共有六種大小格式，分別為 H1, H2, ..., H6，其中 H1 的字體最大，H6 的字體最小。
可配合 align屬性指定以靠左 (left)、靠中 (center)、靠右 (right) 的方式來顯示。預設對齊方式是靠左。在一篇檔中，區段標題最好不要使用超過四種，否則容易使人覺得很淩亂。

字體設定 (Font)

圖5-8：<font>標籤實例

圖5-8說明： size 屬性用來指定固定字體的大小，其值範圍可為 1~7 其中一個數字，當size=1時字體最小，size=7 時字體最大。若要設定整篇檔的預設字體大小，可以使用 <basefont=n> (基本字體)標籤，其預設值為 3。 size 屬性亦可使用相對設定法，即使用正號(+)或負號(-)，用以表示與 basefont 的相對大小，相對法是以正負號來表示比 basefont 大或小。 color 屬性是用來指定字體的顏色，設定方式同5.3.4節的顏色屬性方式。 face 屬性是用來指定字型，例如：細明體。行距會因字體大小而改變，因此在混用各種大小字體時必須稍加注意。

字體樣式標籤

圖5-9：字體樣式標籤實例

圖5-9說明：瀏覽器支援標籤可以同時使用兩種標籤，以巢狀組合方式作用在同一內容上，例如: <b> <i> 粗斜體 </i> </b>，應該特別注意標籤的巢狀對應。

5-6 文件的段落結構

段落清晰簡潔的文件段落清晰簡潔的文件，不但容易閱讀，且較容易掌握住重點。反之，則容易使人覺不想閱讀。

圖5-10：檔案經過段落安排容易閱讀

段落結尾 (Paragraph mark)

圖5-11：段落標籤實例

圖5-11說明： <P> 段落標籤需要成對出現，使用時，會產生一個空行與其他段落之間區隔。
可以使用align屬性來指定後面各個段落的靠齊方式，left：左靠，center：置中，right：靠右。

強迫斷行 (Line Break)

圖5-12：強迫斷行標籤實例

圖5-12說明： <br>標籤可以指示瀏覽器在HTML的檔上特定的地方執行斷行功能。<br>只是單純的斷行，後續的文字仍會維持相同的行距，<p>標籤則是另起新的段落，並且會加大行距。

區段標籤 (Division)

圖5-13：區段標籤實例

圖5-13說明： <div>是用來將檔再做章節分割(division)，藉此簡化格式設定的工作，通常可以用來設定整段文字靠齊方向。 align 屬性可以指定文字的靠齊方式，left：左靠，center：置中，right：靠右。預設對齊方式是靠左。

靠中區段 (Center)

圖5-14：靠中區段標籤實例

圖5-14說明：置於 <center> ... </center> 標籤的內容將會被顯示在瀏覽器視窗的中央。
此標籤亦可用來將圖形置於畫面中央。

水平線 (Horizontal line)

圖5-15：水準線標籤實例

圖5-15說明： <hr> 標籤是用來顯示橫隔線。
align 屬性用來指定橫隔線的靠齊方式，left：靠左，center：置中，right：靠右。預設對齊方式是靠左。 size 屬性是用來指定橫隔線的厚度。例：<hr size=10> width 屬性是用來指定橫隔線的寬度，可以用像素(pixel)為單位表示，也可以使用螢幕的百分比表示，例：<hr width=50%> noshade 屬性指定以實線來顯示，而不要立體效果。

5-7 條列 (List) 清單

有序號條列標籤(Numbered List)

圖5-16：有序號條列標籤實例

圖5-16說明：若沒有特別指定，則預設值是以數值 1 為開始的序號。 type屬性用於控制序號的種類:
type = A 表示以大寫英文字母為序號。 type = a 表示以小寫英文字母為序號。 type = I 表示以大寫的羅馬數字為序號。 type = i 表示以小寫的羅馬數字為序號。 type = 1 表示以阿拉伯數字表示序號。 start = n 可以指定起始序號。另外，亦可使用 <li value=n>標籤來設定該項的序號。

無序號條列標籤 (Unnumbered List)

圖5-17：無序號條列標籤實例

圖5-17說明： type 屬性值：disc 為實心圓，circle 為空心圓，square 為方塊。預設值為實心圓 (disc)。

5-8 超鏈結

超鏈結(Hyperlink) 超鏈結(Hyperlink)是最重要的特性之一，透過超鏈結(Hyperlink)我們可以很輕易的，把檔案上所需要參考的其他檔案 (包括圖檔…等)結合起來.

相對路徑相對路徑名稱指出從您現行工作(網頁)目錄(而不是root根目錄)開始的目錄和檔案。
鏈結或圖片來源時，是以相對於自己的網站來表示，所以會出現“./目錄/檔名”或“../目錄/檔名”或“/目錄/檔名”，其中【.】代表目前所在目錄的意思，【..】代表上一層目錄的意思；【/】代表根目錄的意思。

絕對路徑絕對路徑的寫法『一定由Web網站的根目錄寫起』，
例如：這個目錄。

超鏈結標籤

圖5-18：超鏈結標籤實例

圖5-18說明： href屬性如果設定值為一 URL 格式，則可以直接將 URL 所指的該檔案直接超鏈結到檔案中。

設定段名

圖5-19：段名標籤實例

圖5-19說明：為了讓使用者在閱讀檔 (尤其是內容較長的檔) 時，能夠很快的進入檔中某一特定段落，可以使用 A (Anchor) 標籤的 name 屬性在檔特定的位置上加上段名。要跳到指定段名的地方，可以使用 <a href=“#段名”> 的方式來超鏈結，這樣就可以很快的跳到指定的地方。

5-9多媒體(Multimedia)

超媒體(Hypermedia)的特性由於此特性，因此它可以很容易的把圖形檔、影像檔、動畫檔、影片檔、聲音檔、…等多媒體檔案結合起來，使檔案能夠以更加生動活潑的方式來呈現。

圖形(Image)標籤

圖5-20說明： src=“URL” 屬性主要是用來描述圖檔的位置，通常圖檔是放在自己的目錄底下，可以使用相對表示法來指定該檔案的位置，例如：<img src=“ne20222.gif”> 或 <img src=“../icon/ne20222.gif”> 。 align 屬性是用來指定圖檔的對齊方式。如果 <img> 標籤中沒有指定 align 屬性，則即使將文字寫在該標籤的後面，結果一樣會被顯示在圖形的下方。如果希忘圖形和文字在同一列上，則必須要指定 align 屬性。 border 屬性是指定在圖形外面是否要加上框線和框線大小。其預設值為 0, 也就是不顯示框線。 height 及 width 分別用來指定檔案的高度及寬度。如果能夠明確知道圖檔的高度及寬度，建議最好能夠指定該圖檔的高度及寬度，這樣可以加速檔的呈現。若使用百分比方式則可以用來縮放圖形的大小，但即使是使用縮小比例，對於檔案傳輸時間仍然沒有幫助，因為圖形檔的縮放處理必須先將該檔案載入後才能做縮放比例處理。 alt 屬性用來指定一個特定的字串內容，用以代替圖形內容。這主要是在圖片尚未載入完成時，預先顯示ALT的文字。

圖5-20：圖形標籤實例

5-10表格 (Table)

圖5-21：4*3表格範例

表格宣告標籤 (Table)

圖5-22說明： <table> 標籤主要的功能是在檔宣告要使用表格。另外，對於檔的編排，也是經常利用表格的方式來處理的。
border 屬性用來指定表格外框線的寬度，預設值 = 0。 width = n用來設定表格的寬度，以 pixels 為單位。 width = n % 用來設定表格相對於瀏覽器寬度比例。 cellspacing = n 用來設定表格格線的寬度。 cellpadding = n 用來設定格線和內容之間的間距。 bgcolor屬性用來設定表格背景顏色。 background屬性用來設定表格背景圖片。 bordercolor屬性用來設定表格外框線的顏色。

範例5-26：Ex5-26.htm 須先建立表格列(Table Row)及資料儲存格(Table Data), 下列標籤才有作用:

圖5-22：table標籤實例

表格列 (Table Row)和資料儲存格 (Table Data)

表格列 (Table Row)說明： <tr> 標籤用來宣告要增加一列表格儲存列，要搭配<td>來使用。
align 屬性用來設定儲存列裡面的文字、圖形水平對齊方向。 valign 屬性用來設定儲存列裡面的文字、圖形垂直對齊方向。

資料儲存格 (Table Data)

資料儲存格 (Table Data) 說明： <td> 標籤用來宣告要增加一個儲存格。 colspan 屬性用來合併左右儲存格。
rowspan 屬性用來合併上下儲存格。 width=n 設定儲存格寬度，以 pixels 為單位。 width=n % 設定儲存格相對於表格的比例。 align 屬性用來設定儲存列裡面的文字、圖形水平對齊方向。 valign 屬性設定儲存列裡面的文字、圖形垂直對齊方向。 nowrap 屬性指定儲存格內的文字不斷行。

圖5-23：<tr>和<td>標籤實例

表格標題儲存格(Table Header cell)

表格標題儲存格說明： <th> 標籤用來宣告要增加一個表格標題儲存格。 colspan 屬性用來合併左右儲存格。
rowspan 屬性用來合併上下儲存格。 width=n 設定儲存格寬度，以 pixels 為單位。 width=n % 設定儲存格相對於表格的比例。 align 屬性用來設定儲存列裡面的文字、圖形水準對齊方向。 valign 屬性設定儲存列裡面的文字、圖形垂直對齊方向。 nowrap 屬性指定儲存格內的文字不斷行。

圖5-24：<th>標籤實例

5-11 表單

標籤<form> 在client端的網頁中，供使用者輸入的表單，必需使用HTML語法中的標籤<form>來建立，主要的目的在提供使用者有一個表單格式的環境來輸出或輸入一些相關訊息資料。

用戶端在瀏覽器填完一表單後，它包含如下的過程：
1. 將表單資料傳給伺服器：透過Get或Post方式將資料傳遞給伺服器。 2. 呼叫對應的PHP程式：如下面章節的範例程式，每一個html網頁都會呼叫一個對應的response5-??.php的程式。 3. PHP程式處理資料庫：PHP的網頁程式也許會存取資料庫，將重要的資料查詢、新增、更新、刪除。 4.將PHP程式執行的結果回傳給客戶端：最後當然要將PHP程式執行的結果回傳給客戶端，來顯示處理的結果。

圖5-25：表單資料傳遞過程

表5-2 數種表格樣式的輸出入介面元件

表5-2 數種表格樣式的輸出入介面元件(續)

表單語法

表5-3 <form>標籤的屬性

屬性說明: action：為了能接受使用者所送出 <form>資料項，在WWW伺服器端必須要有一個服務程式 ( CGI，Common Gateway Interface ) 來接收action後面的值，即是執行回應的PHP程式檔的URL ( Uniform Resource Locator )。 method：設定將<form>的資料項傳遞到WWW伺服器端的方法，有get和post兩種。通常較常用(建議)的方法是用"post"，後面的章節會詳細post和get的差別。 enctype：設定<form>的資料項在傳送到WWW伺服器端時加密的方法(*僅在method的值為”post”時才可使用)

5-12按鈕

submit/reset/button submit/reset/button
submit 主要用來送出<form>中的資料。 reset 主要用來重置<form>中的資料，供使用者重新設定輸入。 button 是用來產生一個外觀像按鈕的元件。

submit/reset/button

button重要的標籤屬性 name 係指該元件的名稱，例如：toSubmit。在事件處理程式中，您可以用 document.FormName.toSubmit 來稱呼它。 value：顯示在按鈕上的文字即是依其而定。 onClick：當按鈕被滑鼠所點選時，將引發 onClick 事件，您可以將欲進行的相關程式定義在此。

範例5-29

圖5-26：送出按鈕實例

圖5-26說明：範例5-29.htm中，在<form>內加入一送出(Submit)按鈕。
當使用者按下「送出」鈕時，送出表單，其Action(動作)屬性，呼叫對應的response5-29.php程式。 response5-29.php程式最後印出$submit1的值，$submit的值其實是「送出」鈕的值，所以印出”送出”的字串。

5-13文字方塊

text(文字輸入方塊) / password(密碼輸入方塊) /隱藏文字方塊(hidden)
text(文字輸入方塊) / password(密碼輸入方塊) /隱藏文字方塊(hidden)都不是獨立的元件，它們也是 Input 元件的一種使用型態，在瀏覽器上呈現的外觀完全相同，都是一個文字方塊

text 主要用來讓使用者填寫一般的欄位資料，例如「姓名」、「電話」..等欄位。

password 主要用來讓使用者填寫密碼的欄位資料，輸入的文字在畫面上通常會以「*」顯示

hidden 資料並不會顯示在瀏覽器上，使用者是看不到的（除非去檢視原始碼）。
主要用來在<form>中紀錄一些參數值，並隨著其他的輸入值傳送給伺服器端的處理程式。

text/ password/ hidden

text重要的標籤屬性 name：係指該元件的名稱，例如：UserName。 value：用來填寫此一文字輸入框的預設輸入內容。
size：用來設定此一文字輸入框在畫面上顯示的寬度。 maxlength：用來設定此一文字輸入框所容許輸入的字元數。

範例5-30：response5-30.php

結果1：「重設」按鈕的用途。

說明：在範例5-30.htm中，在姓名和密碼內輸入欄位值。當使用者按下「重設」鈕時，並不送出表單。

結果2：「文字方塊」的用途。

說明：在範例5-30.htm中，在姓名和密碼內輸入欄位值。當使用者按下「送出」鈕時，送出表單給response5-2.php程式。

5-14文字區塊

<textarea> 是表單文字區塊標籤，常用於「會員留言」、「錯誤回報」..等需要填寫大量資料的用途。

<textarea>重要的標籤屬性
name：係指該元件的名稱，例如：TextArea1。 rows：用來決定此一文字輸入區之列數。 cols：用來決定此一文字輸入區之欄數。預設值：預設的文字置於 <textarea ... > 與 </textarea> 之間。

範例5-31

圖5-29：文字區塊實例

說明：在範例5-31.htm中，設計了一5列10行的文字區塊，預設值是請留言。當使用者按下「送出」鈕時，送出表單。
response5-31.php中，印出文字區塊的欄位元值。

5-15下拉清單

<select> 是下拉清單標籤，可在表單內加入下拉式功能表，此標籤必須搭配<option>標籤來使用。

<select>重要的標籤屬性
name：係指該<select>元件的名稱，例如：select1。 option：是提供給使用者選取的項目。

範例5-32

圖5-30：下拉清單實例

說明：在範例5-32.htm中，設計了一下拉清單，挑選住的都市。當使用者按下「送出」鈕時，送出表單。
response5-32.php中，印出被挑選的都市。

5-16多選型清單

多選型清單 <select>是下拉清單標籤，可以改成多選型清單，只要在<select>標籤中加入屬性「size=清單大小」和「multiple」。

多選型清單

範例5-33

圖5-31：多選型清單實例

說明：在範例5-33.htm中，設計了一多選型清單，挑選住的都市。欲選取多重選取選項時，只要按住Ctrl鍵，然後用滑鼠點選欲選取的選項即可。也可以按住Shift鍵，然後用滑鼠點選欲選取的選項，將以範圍選取的方式複選選項，其中將以第一個點選的選項為起點，第二個點選的選項為選取的終點。當使用者按下「送出」鈕時，送出表單。 response5-33.php中，改成以迴圈的方式，印出被挑選的都市陣列值。

5-17核取方塊

核取方塊(checkbox) 用途很簡單，就是讓使用者選擇「要」或是「不要」

核取方塊

<checkbox>重要的標籤屬性
name 係指該元件的名稱，例如：chkbox1。 value 表示選取此一選項時，所代表的輸入值。 checked：如您希望預先為使用者勾選某些選項的話，您可以為這些選項加上 checked 參數。例：<input type="checkbox" name="chkbox1" value="1" checked>。 disable：如果您希望某一選項失效（無法使用）的話，您可以加上 disabled 參數。

isset( )函數 PHP程式取得核取方塊欄位內容是使用isset( )函數來檢查欄位是否勾選，傳回值為欄位的value屬性值。

範例5-34

圖5-32：核取方塊實例

說明：在範例5-34.htm中，設計了一核取方塊清單，挑選喜歡的興趣。當使用者按下「送出」鈕時，送出表單。
response5-34.php中，改成以isset( )的方式，印出被挑選的興趣。

5-18收音機鈕

收音機鈕(radio) 又稱選擇鈕，收音機鈕控制的資料是在同一個分組(類)中，其用途則是同一時間只能選中一個radio，需要注意的是: 同一群組的各個radio的value不能相同，否則選哪一項都一樣。

收音機鈕(radio)

radio重要的標籤屬性 name 係指該元件的名稱，例如：radio1。 value 表示選取此一選項時，所代表的輸入值。
checked：如您希望預先為使用者勾選某些選項的話，您可以為這些選項加上 checked 參數。 disable：如果您希望某一選項失效（無法使用）的話，您可以加上 disabled 參數。

範例5-35

圖5-33：收音機鈕實例

說明：在範例5-35.htm中，設計了一收音機鈕選單，挑選血型。當使用者按下「送出」鈕時，送出表單。
response5-35.php中，印出被挑選的血型。

5-19傳遞方式Get與Post

get和post之間的差異使用post會以標準輸出方式將資料送給PHP(CGI)程式，PHP(CGI)程式則經由標準輸入來讀取這些資料。使用post時，傳入的字串長度沒有限制。使用get會將資料當成是URL的一部分，例如：使用get時，URL有長度限制(1024K)。

範例5-36

圖5-34：<form>的method屬性為get實例

說明：在圖5-34中response5-36.php的網址，多了一”?radio1=A”，是因為get屬性值，會透過網址傳遞radio的變數，且其值是A。使用post好?還是使用get好?大部份的人會建議當然是post好，因為駭客就無法從網址上讀取重要的變數值了。

本章結束謝謝!!

第5章 HTML 標籤介紹.

Similar presentations

Presentation on theme: "第5章 HTML 標籤介紹."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

第5章 HTML 標籤介紹.

Similar presentations

Presentation on theme: "第5章 HTML 標籤介紹."— Presentation transcript:

Similar presentations

About project

反馈