本例演示如何使用圖像作為鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們通過使用 a 標簽在 HTML 中創建鏈接。

有兩種使用 a 標簽的方式：

通過使用 href 屬性 - 創建指向另一個文檔的鏈接

通過使用 name 屬性 - 創建文檔內的書簽

延伸閱讀：什么是超文本？

鏈接的 HTML 代碼很簡單。它類似這樣：

 a href= url Link text /a 

href 屬性規定鏈接的目標。

開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。

 a href= www.49028c.com/ Visit php /a 

上面這行代碼顯示為：Visit php

點擊這個超鏈接會把用戶帶到 php的首頁。

提示： 鏈接文本 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

 a href= http://www.49028c.com/ target= _blank Visit W3School! /a 

親自試一試

name 屬性規定錨（anchor）的名稱。

name 屬性用于創建 HTML 內部的書簽。

書簽不會以任何特殊方式顯示，它對讀者是不可見的。

當使用命名錨（named anchors）時，我們可以創建直接跳至頁面中某個節的鏈接，這樣使用者就無需不停的滾動頁面來尋找他們需要的信息。

 a name= label Text to be displayed /a 

提示：錨的名稱可以是任何你喜歡的名字。

HTML 文檔內部的已命名的錨：

 a name= tips Useful Tips Section /a 

然后，我們創建指向相同文檔中“有用的提示”部分的鏈接：

 a href= #tips Visit the Useful Tips Section /a 

或者，創建從另一個頁面指向該文檔中“有用的提示”部分的鏈接：

 a href= www.w3school.com.cn/html_links.htm#tips Visit the Useful Tips Section /a 

在上面的代碼中，我們將 # 符號和錨名稱添加到 URL 的末端，就可以直接鏈接到 tips 這個命名錨了。

具體效果：有用的提示

注釋：請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href= www.w3school.com.cn/html ，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：href= www.w3school.com.cn/html/ 。

提示：命名錨經常用于在大型文檔開始位置上創建目錄?？梢詾槊總€章節賦予一個命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科，您會發現其中幾乎每個詞條都采用這樣的導航方式。

提示：假如瀏覽器找不到已定義的命名錨，那么就會定位到文檔的頂端。不會有錯誤發生。

2.HTML 表格

 html  body  p 每個表格由 table 標簽開始。 /p  p 每個表格行由 tr 標簽開始。 /p  p 每個表格數據由 td 標簽開始。 /p  h4 一列： /h4  table border= 1  td 100 /td  /tr  /table  h4 一行三列： /h4  table border= 1  td 100 /td  td 200 /td  td 300 /td  /tr  /table  h4 兩行三列： /h4  table border= 1  td 100 /td  td 200 /td  td 300 /td  /tr  td 400 /td  td 500 /td  td 600 /td  /tr  /table  /body  /html 

這個例子演示如何在 HTML 文檔中創建表格。

 html  body  h4 帶有普通的邊框： /h4  table border= 1  td First /td  td Row /td  /tr  td Second /td  td Row /td  /tr  /table  h4 帶有粗的邊框： /h4  table border= 8  td First /td  td Row /td  /tr  td Second /td  td Row /td  /tr  /table  h4 帶有很粗的邊框： /h4  table border= 15  td First /td  td Row /td  /tr  td Second /td  td Row /td  /tr  /table  /body  /html 

本例演示各種類型的表格邊框。

表格由 table 標簽來定義。每個表格均有若干行（由 tr 標簽定義），每行被分割為若干單元格（由 td 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

 table border= 1  td row 1, cell 1 /td  td row 1, cell 2 /td  /tr  td row 2, cell 1 /td  td row 2, cell 2 /td  /tr  /table 

在瀏覽器顯示如下：

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格

 table border= 1 tr  td Row 1, cell 1 /td  td Row 1, cell 2 /td  /tr  /table 

表格的表頭使用 th 標簽進行定義。

 table border= 1  tr th Heading /th  th Another Heading /th /tr  td row 1, cell 1 /td  td row 1, cell 2 /td  /tr  td row 2, cell 1 /td  td row 2, cell 2 /td  /tr  /table 

在瀏覽器顯示如下：

在大多數瀏覽器中，沒有內容的表格單元顯示得不太好。

 table border= 1  td row 1, cell 1 /td  td row 1, cell 2 /td  /tr  td row 2, cell 1 /td td /td /tr  /table 

在瀏覽器顯示如下：

注意：這個空的單元格的邊框沒有被顯示出來。（不過 Mozilla Firefox 可以將整個邊框顯示出來。）為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。

 table border= 1  td row 1, cell 1 /td  td row 1, cell 2 /td  /tr  td row 2, cell 1 /td td nbsp; /td /tr  /table 

在瀏覽器中顯示如下：

thead , tbody 和 tfoot 很少被用到，這是由于瀏覽器對它們的支持不太好。希望這種情況在未來版本的 XHTML 中會有所改觀。如果你使用 IE5.0 或者更新的版本，可以查看在我們的《XML教程》中的具體例子。

3.HTML 列表

 html  body  h4 一個無序列表： /h4  li 咖啡 /li  li 茶 /li  li 牛奶 /li  /ul  /body  /html 

本例演示無序列表。

 html  body  h4 一個有序列表： /h4  li 咖啡 /li  li 茶 /li  li 牛奶 /li  /ol  /body  /html 

有序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始于 ul 標簽。每個列表項始于 li 。

 ul  li Coffee /li  li Milk /li  /ul 

瀏覽器顯示如下：

Coffee

Milk

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

同樣，有序列表也是一列項目，列表項目使用數字進行標記。

有序列表始于 ol 標簽。每個列表項始于 li 標簽。

 ol  li Coffee /li  li Milk /li  /ol 

瀏覽器顯示如下：

Coffee

Milk

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

自定義列表以 dl 標簽開始。每個自定義列表項以 dt 開始。每個自定義列表項的定義以 dd 開始。

 dl  dt Coffee /dt  dd Black hot drink /dd  dt Milk /dt  dd White cold drink /dd  /dl 

瀏覽器顯示如下：

Coffee

Black hot drink

Milk

White cold drink

定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

【相關推薦】

1. 免費html在線視頻教程

2. html開發手冊

3. VeVb.com原創html5視頻教程

以上就是網頁制作（html）的基本知識（四）鏈接詳解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。