HTML學習（5）列表、塊、表單

HTML列表

1. 有序、無序和定義列表

無序列表：
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於 <ul> 標籤。每個列表項始於 <li>。

有序列表：
有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。

定義列表：
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<ul>、<ol>標籤中有個type屬性，可以設置列表項目標記的樣式。

HTML塊

1.可以通過 <div> 和 <span> 將 HTML 元素組合起來。

HTML 塊元素
大多數 HTML 元素被定義爲塊級元素或內聯元素。
“塊級元素”譯爲 block level element，“內聯元素”譯爲 inline element。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例子：<h1>, <p>, <ul>, <table>

HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。
例子：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。
如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的作用是顯示錶格化的數據。

HTML <span> 元素
HTML <span> 元素是內聯元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。

HTML表單

1. 表單

表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、複選框等等）輸入信息的元素。
表單使用表單標籤（<form>）定義。

2. 輸入

多數情況下被用到的表單標籤是輸入標籤（<input>）。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

文本域（Text Fields）
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

注意，表單本身並不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。
多行文本輸入控件（用戶可在文本域中寫入文本。可寫入字符的字數不受限制）

<textarea rows="10" cols="30">
please input something.

單選按鈕（Radio Buttons）
當用戶從若干給定的的選擇中選取其一時，就會用到單選框。

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" checked="checked" name="sex" value="female" /> Female
</form>

注意，只能從中選取其一。checked屬性代表默認選項。

複選框（Checkboxes）
當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到複選框。

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

表單的動作屬性（Action）和確認按鈕
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如您在上面的文本框內鍵入幾個字母，然後點擊確認按鈕，那麼輸入數據會傳送到 "html_form_action.asp" 的頁面。該頁面將顯示出輸入的結果。

下拉列表

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

selected屬性代表默認選項。

按鈕

<form>
<input type="button" value="Hello world!">

從表單發送電子郵件

<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
電郵：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
內容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="發送">
<input type="reset" value="重置">
</form>

Fieldset around data（在數據周圍繪製一個帶標題的框）

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>