1.6 html鏈接

html鏈接

<a>標簽可以在網頁上定義一個鏈接地址，通過src屬性定義跳轉的地址，通過title屬性定義滑鼠懸停時彈出的提示文字框。

1 <a href="#"></a> <!--  # 表示鏈接到頁面頂部   -->
2 <a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a>
3 <a href="2.html">測試頁面2</a>

定義頁面內滾動跳轉

頁面內定義了“id”或者“name”的元素，可以通過a標簽鏈接到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。

1 <a href="#mao1">標題一</a>
2 ......
3 ......
4 <h3 id="mao1">跳轉到的標題</h3>

1.7 html列表

有序列表

在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下：

1 <ol>
2     <li>列表文字一</li>
3     <li>列表文字二</li>
4     <li>列表文字三</li>
5 </ol>

在網頁上生成的列表，每條項目上會按1、2、3編號，有序列表在實際開發中較少使用。

無序列表

在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，代碼如下：

1 <ul>
2     <li>列表文字一</li>
3     <li>列表文字二</li>
4     <li>列表文字三</li>
5 </ul>

在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉預設的小圖標，如果需要圖標，可以用樣式自定義圖標，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。

定義列表

定義列表通常用於術語的定義。<dl>標簽表示列表的整體。<dt>標簽定義術語的題目。<dd>標簽是術語的解釋。一個<dl>中可以有多個題目和解釋，代碼如下：

 1 <h3>前端三大塊</h3>
 2 <dl>
 3     <dt>html</dt>
 4     <dd>負責頁面的結構</dd>
 5 
 6     <dt>css</dt>
 7     <dd>負責頁面的表現</dd>
 8 
 9     <dt>javascript</dt>
10     <dd>負責頁面的行為</dd>
11 
12 </dl>

1.8 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.9 html表單

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

 1 <!-- form定義一個表單區域,action屬性定義表單數據提交的地址，
 2 method屬性定義提交的方式。   -->
 3 <form action="http://www..." method="get">
 4 
 5 <!-- label標簽定義表單控制項的文字標註，input類型為text定義了
 6 一個單行文本輸入框  -->
 7 <p>
 8 <label>姓名：</label><input type="text" name="username" />
 9 </p>
10 
11 <!-- input類型為password定義了一個密碼輸入框  -->
12 <p>
13 <label>密碼：</label><input type="password" name="password" />
14 </p>
15 
16 <!-- input類型為radio定義了單選框  -->
17 <p>
18 <label>性別：</label>
19 <input type="radio" name="gender" value="0" /> 男
20 <input type="radio" name="gender" value="1" /> 女
21 </p>
22 
23 <!-- input類型為checkbox定義了單選框  -->
24 <p>
25 <label>愛好：</label>
26 <input type="checkbox" name="like" value="sing" /> 唱歌
27 <input type="checkbox" name="like" value="run" /> 跑步
28 <input type="checkbox" name="like" value="swiming" /> 游泳
29 </p>
30 
31 <!-- input類型為file定義上傳照片或文件等資源  -->
32 <p>
33 <label>照片：</label>
34 <input type="file" name="person_pic">
35 </p>
36 
37 <!-- textarea定義多行文本輸入  -->
38 <p>
39 <label>個人描述：</label>
40 <textarea name="about"></textarea>
41 </p>
42 
43 <!-- select定義下拉列表選擇  -->
44 <p>
45 <label>籍貫：</label>
46 <select name="site">
47     <option value="0">北京</option>
48     <option value="1">上海</option>
49     <option value="2">廣州</option>
50     <option value="3">深圳</option>
51 </select>
52 </p>
53 
54 <!-- input類型為submit定義提交按鈕  
55      還可以用圖片控制項代替submit按鈕提交，一般會導致提交兩次，不建議使用。如：
56      <input type="image" src="xxx.gif">
57 -->
58 <p>
59 <input type="submit" name="" value="提交">
60 
61 <!-- input類型為reset定義重置按鈕  -->
62 <input type="reset" name="" value="重置">
63 </p>
64 
65 </form>

1.10 html內嵌框架

html內嵌框架

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

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

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

a標簽的target屬性可以將鏈接到的頁面直接顯示在當前頁面的iframe中，代碼如下：

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