試驗2 常用HTML標(biāo)簽使用
實驗?zāi)康模菏褂?/span>HTML標(biāo)簽熟練編寫靜態(tài)頁面。
由于所選教材未涉及這部分內(nèi)容，此處列出常用的標(biāo)簽。
詳細(xì)的標(biāo)記用法請參考網(wǎng)站：http://www.w3school.com.cn/html/index.asp
1. 文件標(biāo)記
(1) <html></html>
<html>標(biāo)記表示HTML文件從此處開始，到</html>標(biāo)記結(jié)束，這對標(biāo)記處在最外層，網(wǎng)頁的內(nèi)容寫在此標(biāo)記內(nèi)。
(2) <head></head>
這對標(biāo)記表示此處是HTML文檔的文件頭。文件頭內(nèi)部的信息一般不會在瀏覽器的正文區(qū)顯示。此標(biāo)記對內(nèi)可以插入其他標(biāo)記，如網(wǎng)頁標(biāo)題標(biāo)記<title></title>。
(3) <body></body>
這對標(biāo)記表示此處是網(wǎng)頁的主體，一般不能省略，標(biāo)記體的內(nèi)容在瀏覽器正文區(qū)中顯示，例如文字、圖片和超鏈接等。
2．排版標(biāo)記
(1)<!-- -->標(biāo)記
<!---->標(biāo)記在HTML文件中作注釋用，對網(wǎng)頁中的代碼作說明，可以放在網(wǎng)頁中的任何位置。注釋內(nèi)容會返回到客戶端瀏覽器上，但不顯示。例如在瀏覽器中輸入http://www.sina.com.cn，查看源文件可以看到此類注釋。
(2)<p></p>
<p></p>標(biāo)記對用于標(biāo)示一個段落，兩個相鄰的段落間有一空行的間隔。
(3)<br>
這個標(biāo)記沒有結(jié)束標(biāo)記，表示換行。<p></p>標(biāo)記和<br>都能換行，但<br>換行后，上下兩行的間距比較小，<p></p>標(biāo)記換行后，上下兩行有一空行的間距。
3．字體標(biāo)記
字體標(biāo)記包括<STRONG>，<B>，<EM>，<I>，<FONT>等。
<font>標(biāo)記用于定義字體、字號大小和顏色。<font>標(biāo)記的主要屬性有face、size、color。face屬性用于設(shè)置字體，如：<font face=“宋體”>。size屬性用于設(shè)置字號，HTML中定義了7種字號，1號最小，7號最大，如：<font size=“4”>。字號也可以用“磅”(px)表示。color屬性用于設(shè)置文本的顏色，color有三種方法來設(shè)定顏色，第一種方法用顏色名稱，第二種方法用紅、綠、藍(lán)百分比的值來設(shè)定，第三種方法是用16進(jìn)制的顏色代號還設(shè)定顏色。如：
<FONTCOLOR=”RED”>紅色字體設(shè)置</FONT>
<FONTCOLOR=”RGB(70%，10%，30%)”>顏色設(shè)置</FONT>
<FONT COLOR=”#EF0000”>顏色設(shè)定</FONT>
4．表格標(biāo)記
在網(wǎng)頁中，表格主要分成排版表格和數(shù)據(jù)表格兩種。排版表格在瀏覽器中不顯示邊線，僅供排版、布局用。數(shù)據(jù)表格在瀏覽器中顯示邊線或背景色，用于列表顯示數(shù)據(jù)。<table>標(biāo)記表示表格的開始，</table>表示表格到此結(jié)束。<tr></tr>表示表格中的一行。<table></table>間如有n對<tr></tr>標(biāo)記，表示此表格有n行。<td></td>表示一行中的一列，一般寫在<tr></tr>內(nèi)。<table>、<tr>、<td>間的嵌套關(guān)系為：
<table>
<tr>
<td></td>
</tr>
</table>
5．表單
表單時系統(tǒng)和用戶交互的重要手段。用戶在表單中填寫數(shù)據(jù)，提交后，表單中的數(shù)據(jù)傳遞給后臺程序處理，實現(xiàn)了客戶端和服務(wù)器的交互。
(1)<form></form>標(biāo)記
<form>和</form>標(biāo)記表示表單的開始和結(jié)束。在表單標(biāo)記中可以存放各種表單元素，如文本域、按鈕等。一個表單元素相當(dāng)于一個變量，它的取值相當(dāng)于變量的取值。
<form>標(biāo)記中的id和name屬性均為表單的ID名，用于在當(dāng)前網(wǎng)頁中標(biāo)識表單，在當(dāng)前網(wǎng)頁中此ID名應(yīng)該唯一。
<form>中action屬性值為后臺表單處理程序的URI。
<form>標(biāo)記中的method屬性標(biāo)識數(shù)據(jù)的提交方式，一般有GET和POST兩種方式。GET方式將表單中的數(shù)據(jù)按照“變量名=變量值”的形式附加在URL的查詢串中，各個變量之間使用“&”連接。如：
http://127.0.0.1:8080/exam.jsp?name=user1
(2)文本域標(biāo)記
文本域表單的常見用法如下：
<inputname=”name” type=”text” id=”name” value=”123”/>
<input>標(biāo)記表示此標(biāo)記是寫人標(biāo)記，存儲用戶寫入的信息。標(biāo)記中的id和name屬性為文本域的ID名，type屬性表示此寫入標(biāo)記的類型，value屬性存儲文本域的值。
多行文本框用文本域表單元素實現(xiàn)，它的HTML標(biāo)記使用格式如下：
<textareaname=”context”>內(nèi)容說明</textarea>
Name屬性是文本區(qū)域的名字。由于多行文本框可以輸入較多的內(nèi)容，所以把寫入的內(nèi)容存儲在標(biāo)記中。
(3)單選按鈕標(biāo)記
在實際應(yīng)用中的“性別”信息一班通過單選按鈕采集，用戶在給定的“男”和“女”兩個選項中選擇其中一個，相應(yīng)的HTML代碼如下：
<inputname=”sex” type=”radio” value=”男”checked=”checked”/>
<inputname=”sex“ type=”radio” value=”女”/>
<input>標(biāo)記中的type=”radio”屬性表示此寫入標(biāo)記為單選按鈕類型。name=”sect”定義表單元素的名稱，這兩個單選按鈕屬于同一組，它們name屬性的取值均為”sex”，稱之為“同名單選表單”。同一組的單選按鈕具有互斥性，即只能是多選一操作。value=”男”屬性為單選按鈕的取值，同組中的各單選按鈕name屬性值相同(同名)，但value屬性值不能相同(不同值)。checked=”checked”表示當(dāng)前此單選按鈕被選中。
(4)復(fù)選鈕標(biāo)記
在實際應(yīng)用的“愛好”信息一般通過復(fù)選按鈕采集，用戶在列出的多個愛好中做出選擇，可以選零個，也可以全選，相應(yīng)的HTML代碼如下：
<inputname=”hobby” type=”checkbox” id=”hobby” value=”籃球”/>
<inputname=”hobby” type=”checkbox” id=”hobby” value=”羽毛球”/>
<inputname=”hobby” type=”checkbox” id=”hobby” value=”排球”/>
<inputname=”hobby” type=”checkbox” id=”hobby” value=”足球”/>
<input>標(biāo)記中的type=”checkbox”屬性表示此表單元素的類型為復(fù)選按鈕。name和id屬性均為復(fù)選按鈕的名稱，這4個復(fù)選按鈕同屬于“愛好”組，它們的name和id值均為“hobby”（同名表單）。value=”籃球”屬性為復(fù)選按鈕的值，同一組中不同復(fù)選按鈕的value屬性值不同。
(5)隱藏表單域
列表表單元素預(yù)先把一組可供選擇的數(shù)據(jù)存儲在列表中，以下拉菜單或列表的形式供用戶在其中選擇，其中name是選項的提示文字，value才是選項的值。它的HTML代碼如下：
<inputname=”loginname” type=”hidden” id=”loginname” value=”zhukai”/>
(6)列表表單元素
列表表單元素預(yù)先把一組可供選擇的數(shù)據(jù)存儲在列表中，以下拉菜單或列表的形式供用戶在其中選擇，其中name是選項的提示文字，value才是選擇的值。它的HTML代碼如下：
<selectname=”career” size=”3” multiple=”multiple”>
<option value=”001” selected=”selected”>公司員工</option>
<option value=”002”>在校學(xué)生</option>
<option value=”003”>公務(wù)員</option>
</select>
<select></select>表示此處為列表表單元素，name為表單元素的名字。Size屬性表示一次顯示n個值，如果n=1則用下拉列表形式，n>1表示帶滾動條的列表。multiple=”multiple”屬性表示此列表允許多選，沒有此屬性時表示單選。<option></option>標(biāo)記定義列表的一個列表項，標(biāo)記體中的文字為提示漢字。Selected屬性表示此項是否已經(jīng)被選定。選定一個”name=value”可選項，提交表
單后，只有value被提交，提示文字name不被提交。
(7)文件域表單元素
文件域表單由一個文本域和一個按鈕組成，單擊按鈕后會激活一個文件選擇對話框，從本地磁盤中選擇一個文件，被選中文件的路徑極文件名自動填寫在文本域中。上傳文件時，需要用到文件域。文件域的HTML代碼如下：
<inputname=”doc” type=”file” id=”doc” value=”c:\my1.txt”/>
文件域用<input>標(biāo)記實現(xiàn)，type=”file”表示這是一個文件域表單元素。id和name屬性均為文件域的名字，value屬性為被選中文件的路徑及文件名。
6．超鏈接
<a>標(biāo)記的href屬性可以定義超鏈接，它的一般用法是：
<a href=”next.htm”>下一頁</a>
href屬性值為目標(biāo)資源的URL，如果是空鏈接，則URL寫為“#”
