HTML鏈接及屬性
來(lái)源:易賢網(wǎng) 閱讀:2458 次 日期:2015-03-02 11:02:25
溫馨提示:易賢網(wǎng)小編為您整理了“HTML鏈接及屬性”,方便廣大網(wǎng)友查閱!

做鏈接也是通過(guò)元素(element)實(shí)現(xiàn)的。做鏈接只需一個(gè)元素和一個(gè)屬性就行了。下面是一個(gè)例子,它是一個(gè)指向jinanwangzhanjianshe.com的鏈接:

例1:

<a href="">這是一個(gè)指向jinanwangzhanjianshe.com的鏈接</a>

該例在瀏覽器中將顯示如下:

這是一個(gè)指向cnzz.cn的鏈接

元素a代表“鏈接(anchor)”;屬性href代表“超文本引用(hypertext reference)”,它用于指定鏈接指向何處——通常是一個(gè)因特網(wǎng)地址或者一個(gè)文件名。

在上例中,屬性href的值為“http://www.jinanwangzhanjianshe.com”,這是網(wǎng)站的完整地址,也被稱作URL(統(tǒng)一資源定位符)。注意,在URL里必須包含“http://”?!斑@是一個(gè)指向jinanwangzhanjianshe.com的鏈接”是這個(gè)鏈接在瀏覽器中顯示出來(lái)的文本。記得在元素結(jié)尾處寫上</a>。

如何在同一網(wǎng)站的網(wǎng)頁(yè)之間添加相互鏈接?

如果你要在同一網(wǎng)站的不同網(wǎng)頁(yè)間做鏈接,那就不必拼寫出網(wǎng)頁(yè)的完整URL。舉個(gè)例子,假如你有兩個(gè)網(wǎng)頁(yè)(比如說(shuō)page1.htm和page2.htm),而且它們被存放在同一個(gè)文件夾中,那么你在做鏈接的時(shí)候,只要寫出文件名就行了。這樣,page1.htm到page2.htm的鏈接將如下所示:

例2:

<a href="page2.htm">點(diǎn)擊這里轉(zhuǎn)到第2頁(yè)</a>

如果page2.htm被放在下一級(jí)文件夾中(比如“subfolder”),那么鏈接將是這樣:

例3:

<a href="subfolder/page2.htm">點(diǎn)擊這里轉(zhuǎn)到第2頁(yè)</a>

反過(guò)來(lái),從page2.htm(在下級(jí)文件夾中)到page1.htm的鏈接將是這樣:

例4:

<a href="../page1.htm">轉(zhuǎn)到第1頁(yè)</a>

“../”代表當(dāng)前位置(即該鏈接所在文件所處的文件夾)的上一級(jí)文件夾。同理,當(dāng)前位置的上上級(jí)文件夾可用“../../”表示。

明白其中的規(guī)則了嗎?當(dāng)然,如果給出完整URL也行。

如果要在一個(gè)網(wǎng)頁(yè)內(nèi)做鏈接怎么辦呢?

你也可以在一個(gè)網(wǎng)頁(yè)的內(nèi)部做鏈接——比如在網(wǎng)頁(yè)開始處提供一個(gè)目錄,在其中列出指向下面各章的鏈接。這可以通過(guò)使用id屬性和“#”符號(hào)來(lái)實(shí)現(xiàn)。

用id屬性標(biāo)出要被指向的元素。例如:

<h1 id="heading1">標(biāo)題1</h1>

然后通過(guò)在鏈接中利用“#”來(lái)指向那個(gè)元素。 “#”后面必須緊跟著一個(gè)id屬性的值,表明鏈接指向該id屬性被定義的地方。例如:

<a href="#heading1">轉(zhuǎn)到標(biāo)題1</a>

來(lái)看一個(gè)例子就明白了:

例5:

<html>

<head>

</head>

<body>

<p><a href="#heading1">轉(zhuǎn)到標(biāo)題1</a></p>

<p><a href="#heading2">轉(zhuǎn)到標(biāo)題2</a></p>

<h1 id="heading1">標(biāo)題1</h1>

<p>一些文字。。。。</p>

<h1 id="heading2">標(biāo)題2</h1>

<p>一些文字。。。。</p>

</body>

</html>

該例在瀏覽器中將顯示如下(你可以試試看點(diǎn)擊這兩個(gè)鏈接):

轉(zhuǎn)到標(biāo)題1

轉(zhuǎn)到標(biāo)題2

標(biāo)題1

一些文字。。。

標(biāo)題2

一些文字。。。

(注:id屬性必須以字母開頭)

除了網(wǎng)頁(yè),鏈接還能指向什么?

你還可以為e-mail地址做鏈接,方法跟為網(wǎng)頁(yè)做鏈接差不多:

例6:

<a href=mailto:soft@dabaoku>給發(fā)電子郵件</a>

該例在瀏覽器中將顯示如下:

給發(fā)電子郵件

與指向網(wǎng)頁(yè)的鏈接的唯一區(qū)別在于:指向e-mail地址的鏈接必須以mailto:開頭,然后緊接著寫e-mail地址。當(dāng)點(diǎn)擊這個(gè)鏈接的時(shí)候,缺省的e-mail程序?qū)⑿陆ㄒ环忄]件,其中的收件人地址為鏈接中指定的e-mail地址。注意:這一功能僅當(dāng)你的計(jì)算機(jī)安裝了e-mail程序后才起作用。試試看吧!

有其他我需要知道的屬性嗎?

創(chuàng)建鏈接總要用到href屬性。另外,你也可以在鏈接上使用title屬性:

例7:

<a href="" title="上網(wǎng)頁(yè)制作濟(jì)南網(wǎng)站建設(shè)學(xué)習(xí)HTML">jinanwangzhanjianshe.com</a>

該例在瀏覽器中將顯示如下:

jinanwangzhanjianshe.com

title屬性用于為該鏈接輸入一個(gè)簡(jiǎn)短描述。當(dāng)你把鼠標(biāo)光標(biāo)停留在該鏈接上(別點(diǎn)擊它)時(shí),提示文字“上網(wǎng)頁(yè)制作濟(jì)南網(wǎng)站建設(shè)學(xué)習(xí)HTML”便會(huì)出現(xiàn)。

許多元素都可以設(shè)置屬性。

屬性是什么?

也許你還記得,HTML通過(guò)標(biāo)簽告訴瀏覽器如何展示網(wǎng)頁(yè)(比如<br />告訴瀏覽器顯示一個(gè)換行)。你可以為某些元素附加一些信息,這些附加信息被稱為屬性(attribute)。

例1:

<h2 style="background-color:#ff0000;">我跟HTML的友誼</h2>

屬性應(yīng)寫在元素的首標(biāo)簽上。具體寫法是:屬性名稱(attribute name)后緊跟一個(gè)等號(hào)(“=”),后面寫上用雙引號(hào)括起來(lái)的屬性值(attribute value)。對(duì)于style屬性的值,可以用分號(hào)(“;”)來(lái)分隔多個(gè)樣式指令。這個(gè)后面會(huì)介紹。

這里涉及什么知識(shí)點(diǎn)?

屬性有許多,我們首先學(xué)習(xí)的是style屬性,它用于為網(wǎng)頁(yè)設(shè)定樣式,比如設(shè)置背景顏色等。

例2:

<html>

<head>

</head>

<body style="background-color:#ff0000;">

</body>

</html>

該例將在瀏覽器中顯示一個(gè)全是紅色的頁(yè)面——自己動(dòng)手試試看。稍后我們會(huì)詳細(xì)講解顏色設(shè)置的原理。

注意,一些元素和屬性的名稱采用的是美式拼寫,比如color(而不是colour)。請(qǐng)留意本教程中元素與屬性名稱的拼寫,千萬(wàn)不要寫錯(cuò)——否則瀏覽器將無(wú)法理解你的代碼。而且,別忘了用雙引號(hào)把屬性值(attribute value)括起來(lái)。

為什么上面那個(gè)頁(yè)面全是紅的?

在上例中,我們將網(wǎng)頁(yè)的背景顏色設(shè)置為“#ff0000”,這個(gè)十六進(jìn)制代碼(HEX)代表紅色。每個(gè)顏色都有其對(duì)應(yīng)的十六進(jìn)制代碼。下面是一些例子:

白色: #ffffff

黑色: #000000

紅色: #ff0000

蘭色: #0000ff

綠色: #00ff00

黃色: #ffff00

十六進(jìn)制代碼由“#”打頭,后面跟六位數(shù)字或字母。由于這樣的十六進(jìn)制代碼太多,不便記住哪個(gè)代碼對(duì)應(yīng)哪個(gè)特定顏色。為此,我們?yōu)樽畛S玫?16個(gè)顏色制作了一張表,供大家參閱:216個(gè)網(wǎng)頁(yè)安全顏色表<見文章底部>。

除此以外,對(duì)于一些最常用的顏色(比如白色、黑色、紅色、蘭色、綠色及黃色等),你還可以使用它們的英語(yǔ)名稱。

例3:

<body style="background-color: red;">

關(guān)于顏色就講這么多了。讓我們繼續(xù)學(xué)習(xí)屬性。

哪些元素可以使用屬性?

不同元素使用不同的屬性。

有些元素(比如body等)被添加屬性的機(jī)會(huì)比較大,而有些元素(比如br等)則較小、甚至不會(huì)被添加屬性。

HTML里有很多元素,同樣也有很多屬性。有些屬性僅用于個(gè)別元素,有些屬性可用于很多元素。反之亦然:有些元素只能使用個(gè)別屬性,有些元素可以使用較多的屬性。

聽起來(lái)這也許很令人困惑,不過(guò)一旦你熟悉了各個(gè)屬性,就會(huì)感到很簡(jiǎn)單,并覺(jué)得它們很有用處。

本教程將介紹大多數(shù)重要屬性。

一個(gè)元素包括哪些部分?

一般來(lái)說(shuō),一個(gè)元素包括一個(gè)首標(biāo)簽(start tag)、零或多個(gè)屬性(attribute)、一些內(nèi)容和一個(gè)尾標(biāo)簽(end tag)。就這么簡(jiǎn)單。

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:HTML鏈接及屬性
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)