HTML+CSS之列表表單介紹

一、無序列表標簽ul

<ul>

<li>信息</li>

<li>信息</li>

　　......

</ul>

代碼解釋：每項<li>前為一個黑點

二、有序列表標簽ol

<ol>

<li>信息</li>

<li>信息</li>

　　......

</ol>

代碼解釋：每項<li>前為都自帶一個序號，序號默認從1開始

 

三、<a>標簽

1、<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

2、在新建瀏覽器窗口中打開鏈接

<a href="目標網址"  target="_blank">click here!</a>

3、郵件鏈接

 <a href=" mailto:[e-mail]?subject=主題&body=郵件內容">加入郵件鏈接</a>

代碼解釋：mailto后面同時有多個參數，第一個參數必須以"?"開頭，后面的參數都以"&"分隔。

 

四、表格標簽<table>

<table summary="表格文本簡介，增加表格可讀性，不會在瀏覽器顯示出">
<caption>標題文本</caption>
<tr>
<td>列一</td>
<td>列二</td>
</tr>
</table>

 

五、<img>插入圖片標簽

<img src="圖片地址" alt="下載失敗時的替換文本" title="提示文本" />

代碼解釋：

1、src：標識圖像位置

2、alt：指定圖像的描述性文本，當圖像不可見時可看到

3、title:鼠標滑過圖片時顯示的文本

4、圖像可以是GIF, PNG, JPEG格式的圖像文件

 

六、表單標簽，與用戶交互

<form method="傳送方式" action="服務器文件"></form>

代碼解釋：

1、<from>:<form>標簽成對出現，以<from>開始，以</from>結束

2、action:瀏覽者輸入的數據被傳送到的地方，比如一個PHP頁面(save.php)

3、method:數據傳送的方式(get/post)

注：

1、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間，否者用戶輸入的信息可能提交不到服務器。

2、method:post/get的區別這一部分屬於后端考慮的問題。

 

七、文本輸入框、密碼輸入框

<form>

<input type="text/password" name="名稱" value="文本" />

</form>

代碼解釋：

1、type:

當type="text"時，輸入框為文本輸入框

當type="password"時，輸入框為密碼輸入框

2、name:為文本框命名，以備后台程序ASP、PHP使用。

3、value:為文本輸入設置默認值。（一般起提示作用）

舉例：

<form>

　　姓名：

　　<input type="text" name="myName">

　　<br />

　　<input type="password" name="pass">

</form>

 

八、文本域<textarea>

 <textarea rows="行數" cols="列數">文本</textarea>

例：

<form method="post" action="save.php">

　　<lable>聯系我們</lable>

　　<textarea rows="10" cols="50">在這里輸入內容....</textarea>

</form>

 

九、單選框、復選框、下拉框

<input type="radio/checkbox" value="值" name="名稱" checked="checked" />

代碼解釋：

1、type="radio"   單選框

　  type="checkbox"   復選框

2、value:提交數據到服務器的值（后台程序PHP使用）

3、name:為控件命名，以備后台程序ASP、PHP使用

4、checked:當設置checked="checked"時，該選項被默認選中。

例1（單/復選框）：

 

注意：同一組的單選按鈕，name取值一定要一致，比如例1為同一個名稱"radioLove",這樣同一組的單選按鈕才可以起到單選的作用。

 

例2（下拉框）：

 

 代碼解釋：

1、<option value="提交值">選項</option >

2、設置selected="selected"屬性，則該選項就被默認選中