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