HTML+CSS基礎學習筆記（2）

標籤：

一、無序列表標籤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:[email protected]?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"屬性，則該選項就被預設選中

 

HTML+CSS基礎學習筆記（2）