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

超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。

當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>

我們通過(guò)使用 a 標(biāo)簽在 HTML 中創(chuàng)建鏈接。

有兩種使用 a 標(biāo)簽的方式：

通過(guò)使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接

通過(guò)使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書(shū)簽

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

鏈接的 HTML 代碼很簡(jiǎn)單。它類(lèi)似這樣：

 a href= url Link text /a 

href 屬性規(guī)定鏈接的目標(biāo)。

開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。

 a href= www.companysz.com/ Visit php /a 

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

點(diǎn)擊這個(gè)超鏈接會(huì)把用戶(hù)帶到 php的首頁(yè)。

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

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

下面的這行會(huì)在新窗口打開(kāi)文檔：

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

親自試一試

name 屬性規(guī)定錨（anchor）的名稱(chēng)。

name 屬性用于創(chuàng)建 HTML 內(nèi)部的書(shū)簽。

書(shū)簽不會(huì)以任何特殊方式顯示，它對(duì)讀者是不可見(jiàn)的。

當(dāng)使用命名錨（named anchors）時(shí)，我們可以創(chuàng)建直接跳至頁(yè)面中某個(gè)節(jié)的鏈接，這樣使用者就無(wú)需不停的滾動(dòng)頁(yè)面來(lái)尋找他們需要的信息。

 a name= label Text to be displayed /a 

提示：錨的名稱(chēng)可以是任何你喜歡的名字。

HTML 文檔內(nèi)部的已命名的錨：

 a name= tips Useful Tips Section /a 

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

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

或者，創(chuàng)建從另一個(gè)頁(yè)面指向該文檔中“有用的提示”部分的鏈接：

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

在上面的代碼中，我們將 # 符號(hào)和錨名稱(chēng)添加到 URL 的末端，就可以直接鏈接到 tips 這個(gè)命名錨了。

具體效果：有用的提示

注釋：請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書(shū)寫(xiě)鏈接：href= www.w3school.com.cn/html ，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：href= www.w3school.com.cn/html/ 。

提示：命名錨經(jīng)常用于在大型文檔開(kāi)始位置上創(chuàng)建目錄。可以為每個(gè)章節(jié)賦予一個(gè)命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問(wèn)百度百科，您會(huì)發(fā)現(xiàn)其中幾乎每個(gè)詞條都采用這樣的導(dǎo)航方式。

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

2.HTML 表格

 html  body  p 每個(gè)表格由 table 標(biāo)簽開(kāi)始。 /p  p 每個(gè)表格行由 tr 標(biāo)簽開(kāi)始。 /p  p 每個(gè)表格數(shù)據(jù)由 td 標(biāo)簽開(kāi)始。 /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 

這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。

 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 

本例演示各種類(lèi)型的表格邊框。

表格由 table 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由 tr 標(biāo)簽定義），每行被分割為若干單元格（由 td 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

 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 

在瀏覽器顯示如下：

使用邊框?qū)傩詠?lái)顯示一個(gè)帶有邊框的表格

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

表格的表頭使用 th 標(biāo)簽進(jìn)行定義。

 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 

在瀏覽器顯示如下：

在大多數(shù)瀏覽器中，沒(méi)有內(nèi)容的表格單元顯示得不太好。

 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 

在瀏覽器顯示如下：

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

 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 很少被用到，這是由于瀏覽器對(duì)它們的支持不太好。希望這種情況在未來(lái)版本的 XHTML 中會(huì)有所改觀。如果你使用 IE5.0 或者更新的版本，可以查看在我們的《XML教程》中的具體例子。

3.HTML 列表

 html  body  h4 一個(gè)無(wú)序列表： /h4  li 咖啡 /li  li 茶 /li  li 牛奶 /li  /ul  /body  /html 

本例演示無(wú)序列表。

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

有序列表

無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。

無(wú)序列表始于 ul 標(biāo)簽。每個(gè)列表項(xiàng)始于 li 。

 ul  li Coffee /li  li Milk /li  /ul 

瀏覽器顯示如下：

Coffee

Milk

列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。

有序列表始于 ol 標(biāo)簽。每個(gè)列表項(xiàng)始于 li 標(biāo)簽。

 ol  li Coffee /li  li Milk /li  /ol 

瀏覽器顯示如下：

Coffee

Milk

列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

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

自定義列表以 dl 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 dt 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 dd 開(kāi)始。

 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

定義列表的列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

【相關(guān)推薦】

1. 免費(fèi)html在線視頻教程

2. html開(kāi)發(fā)手冊(cè)

3. VeVb.com原創(chuàng)html5視頻教程

以上就是網(wǎng)頁(yè)制作（html）的基本知識(shí)（四）鏈接詳解的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。