HTML（四）

html表格

table經常使用標籤

一、table標籤：聲明一個表格

二、tr標籤：定義表格中的一行

三、td和th標籤：定義一行中的一個單元格，td表明普通單元格，th表示表頭單元格

table經常使用屬性：

一、border 定義表格的邊框

二、cellpadding 定義單元格內內容與邊框的距離

三、cellspacing 定義單元格與單元格之間的距離

四、align 設置單元格中內容的水平對齊方式,設置值有：left | center | right

五、valign 設置單元格中內容的垂直對齊方式 top | middle | bottom

六、colspan 設置單元格水平合併

七、rowspan 設置單元格垂直合併

傳統佈局：

傳統的佈局方式就是使用table來作總體頁面的佈局，佈局的技巧概括爲以下幾點：

一、定義表格寬高，將border、cellpadding、cellspacing所有設置爲0

二、單元格里面嵌套表格

三、單元格中的元素和嵌套的表格用align和valign設置對齊方式

四、經過屬性或者css樣式設置單元格中元素的樣式

傳統佈局目前應用：

一、快速製做用於演示的html頁面

二、商業推廣EDM製做(廣告郵件)

table佈局實例（我的簡歷頁面佈局實例）：

表格經常使用樣式屬性

border-collapse:collapse 設置邊框合併，製做一像素寬的邊線的表格

html表單

表單用於蒐集不一樣類型的用戶輸入，表單由不一樣類型的標籤組成，實現一個特定功能的表單區域（好比：註冊），首先應該用<form>標籤來定義表單區域總體，在此標籤中再使用不一樣的表單控件來實現不一樣類型的信息輸入，具體實現及註釋可參照如下僞代碼：

<!-- form定義一個表單區域,action屬性定義表單數據提交的地址，
method屬性定義提交的方式。   -->
<form action="http://www..." method="get">

<!-- label標籤訂義表單控件的文字標註，input類型爲text定義了
一個單行文本輸入框  -->
<p>
<label>姓名：</label><input type="text" name="username" />
</p>

<!-- input類型爲password定義了一個密碼輸入框  -->
<p>
<label>密碼：</label><input type="password" name="password" />
</p>

<!-- input類型爲radio定義了單選框  -->
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>

<!-- input類型爲checkbox定義了單選框  -->
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>

<!-- input類型爲file定義上傳照片或文件等資源  -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>

<!-- textarea定義多行文本輸入  -->
<p>
<label>我的描述：</label>
<textarea name="about"></textarea>
</p>

<!-- select定義下拉列表選擇  -->
<p>
<label>籍貫：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>

<!-- input類型爲submit定義提交按鈕  
     還能夠用圖片控件代替submit按鈕提交，通常會致使提交兩次，不建議使用。如：
     <input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">

<!-- input類型爲reset定義重置按鈕  -->
<input type="reset" name="" value="重置">
</p>

</form>

html內嵌框架

html內嵌框架

<iframe>標籤會建立包含另一個html文件的內聯框架（即行內框架），src屬性來定義另外一個html文件的引用地址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條，代碼以下：

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

內嵌框架與a標籤配合使用

a標籤的target屬性能夠將連接到的頁面直接顯示在當前頁面的iframe中，代碼以下：

<a href="01.html" target="myframe">頁面一</a>
<a href="02.html" target="myframe">頁面二</a>
<a href="03.html" target="myframe">頁面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>