萬盛學電腦網 >> 網絡編程 >> 編程語言綜合 >> HTML鏈接及屬性
HTML鏈接及屬性
做鏈接也是通過元素（element）實現的。做鏈接只需一個元素和一個屬性就行了。下面是一個例子，它是一個指向jinanwangzhanjianshe.com的鏈接：
例1：
<a href="http://www.jinanwangzhanjianshe.com/">這是一個指向jinanwangzhanjianshe.com的鏈接</a>
該例在浏覽器中將顯示如下：
這是一個指向cnzz.cn的鏈接
元素a代表“鏈接（anchor）”；屬性href代表“超文本引用（hypertext reference）”，它用於指定鏈接指向何處——通常是一個因特網地址或者一個文件名。
在上例中，屬性href的值為“http://www.jinanwangzhanjianshe.com”，這是www.jinanwangzhanjianshe.com網站的完整地址，也被稱作URL（統一資源定位符）。注意，在URL裡必須包含“http://”。“這是一個指向jinanwangzhanjianshe.com的鏈接”是這個鏈接在浏覽器中顯示出來的文本。記得在元素結尾處寫上</a>。
如何在同一網站的網頁之間添加相互鏈接？
如果你要在同一網站的不同網頁間做鏈接，那就不必拼寫出網頁的完整URL。舉個例子，假如你有兩個網頁（比如說page1.htm和page2.htm），而且它們被存放在同一個文件夾中，那麼你在做鏈接的時候，只要寫出文件名就行了。這樣，page1.htm到page2.htm的鏈接將如下所示：
例2：
<a href="page2.htm">點擊這裡轉到第2頁</a>
如果page2.htm被放在下一級文件夾中（比如“subfolder”），那麼鏈接將是這樣：
例3：
<a href="subfolder/page2.htm">點擊這裡轉到第2頁</a>
反過來，從page2.htm（在下級文件夾中）到page1.htm的鏈接將是這樣：
例4：
<a href="../page1.htm">轉到第1頁</a>
“../”代表當前位置（即該鏈接所在文件所處的文件夾）的上一級文件夾。同理，當前位置的上上級文件夾可用“../../”表示。
明白其中的規則了嗎？當然，如果給出完整URL也行。
如果要在一個網頁內做鏈接怎麼辦呢？
你也可以在一個網頁的內部做鏈接——比如在網頁開始處提供一個目錄，在其中列出指向下面各章的鏈接。這可以通過使用id屬性和“#”符號來實現。
用id屬性標出要被指向的元素。例如：
<h1 id="heading1">標題1</h1>
然後通過在鏈接中利用“#”來指向那個元素。 “#”後面必須緊跟著一個id屬性的值，表明鏈接指向該id屬性被定義的地方。例如：
<a href="#heading1">轉到標題1</a>
來看一個例子就明白了：
例5：
<html>
<head>
</head>
<body>
<p><a href="#heading1">轉到標題1</a></p>
<p><a href="#heading2">轉到標題2</a></p>
<h1 id="heading1">標題1</h1>
<p>一些文字。。。。</p>
<h1 id="heading2">標題2</h1>
<p>一些文字。。。。</p>
</body>
</html>
該例在浏覽器中將顯示如下（你可以試試看點擊這兩個鏈接）：
轉到標題1
轉到標題2
標題1
一些文字。。。
標題2
一些文字。。。
（注：id屬性必須以字母開頭）
除了網頁，鏈接還能指向什麼？
你還可以為e-mail地址做鏈接，方法跟為網頁做鏈接差不多：
例6：
<a href=mailto:soft@dabaoku>給[email protected]發電子郵件</a>
該例在浏覽器中將顯示如下：
給[email protected]發電子郵件
與指向網頁的鏈接的唯一區別在於：指向e-mail地址的鏈接必須以mailto:開頭，然後緊接著寫e-mail地址。當點擊這個鏈接的時候，缺省的e-mail程序將新建一封郵件，其中的收件人地址為鏈接中指定的e-mail地址。注意：這一功能僅當你的計算機安裝了e-mail程序後才起作用。試試看吧！
有其他我需要知道的屬性嗎？
創建鏈接總要用到href屬性。另外，你也可以在鏈接上使用title屬性：
例7：
<a href="http://www.jinanwangzhanjianshe.com/" title="上網頁制作濟南網站建設學習HTML">jinanwangzhanjianshe.com</a>
該例在浏覽器中將顯示如下：
jinanwangzhanjianshe.com
title屬性用於為該鏈接輸入一個簡短描述。當你把鼠標光標停留在該鏈接上（別點擊它）時，提示文字“上網頁制作濟南網站建設學習HTML”便會出現。
許多元素都可以設置屬性。
屬性是什麼？
也許你還記得，HTML通過標簽告訴浏覽器如何展示網頁（比如<br />告訴浏覽器顯示一個換行）。你可以為某些元素附加一些信息，這些附加信息被稱為屬性（attribute）。
例1：
<h2 style="background-color:#ff0000;">我跟HTML的友誼</h2>
屬性應寫在元素的首標簽上。具體寫法是：屬性名稱（attribute name）後緊跟一個等號（“=”），後面寫上用雙引號括起來的屬性值（attribute value）。對於style屬性的值，可以用分號（“;”）來分隔多個樣式指令。這個後面會介紹。
這裡涉及什麼知識點？
屬性有許多，我們首先學習的是style屬性，它用於為網頁設定樣式，比如設置背景顏色等。
例2：
<html>
<head>
</head>
<body style="background-color:#ff0000;">
</body>
</html>
該例將在浏覽器中顯示一個全是紅色的頁面——自己動手試試看。稍後我們會詳細講解顏色設置的原理。
注意，一些元素和屬性的名稱采用的是美式拼寫，比如color（而不是colour）。請留意本教程中元素與屬性名稱的拼寫，千萬不要寫錯——否則浏覽器將無法理解你的代碼。而且，別忘了用雙引號把屬性值（attribute value）括起來。
為什麼上面那個頁面全是紅的？
在上例中，我們將網頁的背景顏色設置為“#ff0000”，這個十六進制代碼（HEX）代表紅色。每個顏色都有其對應的十六進制代碼。下面是一些例子：
白色： #ffffff
黑色： #000000
紅色： #ff0000
蘭色： #0000ff
綠色： #00ff00
黃色： #ffff00
十六進制代碼由“#”打頭，後面跟六位數字或字母。由於這樣的十六進制代碼太多，不便記住哪個代碼對應哪個特定顏色。為此，我們為最常用的216個顏色制作了一張表，供大家參閱：216個網頁安全顏色表<見文章底部>。
除此以外，對於一些最常用的顏色（比如白色、黑色、紅色、蘭色、綠色及黃色等），你還可以使用它們的英語名稱。
例3：
<body style="background-color: red;">
關於顏色就講這麼多了。讓我們繼續學習屬性。
哪些元素可以使用屬性？
不同元素使用不同的屬性。
有些元素（比如body等）被添加屬性的機會比較大，而有些元素（比如br等）則較小、甚至不會被添加屬性。
HTML裡有很多元素，同樣也有很多屬性。有些屬性僅用於個別元素，有些屬性可用於很多元素。反之亦然：有些元素只能使用個別屬性，有些元素可以使用較多的屬性。
聽起來這也許很令人困惑，不過一旦你熟悉了各個屬性，就會感到很簡單，並覺得它們很有用處。
本教程將介紹大多數重要屬性。
一個元素包括哪些部分？
一般來說，一個元素包括一個首標簽（start tag）、零或多個屬性（attribute）、一些內容和一個尾標簽（end tag）。就這麼簡單。
- 上一頁:getimagesize獲取圖片尺寸實例
- 下一頁:C#語言的幾個層次
