html表格

table常用標簽

1、table標簽：聲明一個表格

2、tr標簽：定義表格中的一行

3、td和th標簽：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格

table常用屬性：

1、border 定義表格的邊框

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

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

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

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

6、colspan 設置單元格水平合並

7、rowspan 設置單元格垂直合並

傳統布局：

傳統的布局方式就是使用table來做整體頁面的布局，布局的技巧歸納為如下幾點：

1、定義表格寬高，將border、cellpadding、cellspacing全部設置為0

2、單元格裏面嵌套表格

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

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

傳統布局目前應用：

1、快速制作用於演示的html頁面

2、商業推廣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>

HTML（四）