程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> 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)。就這麼簡單。

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved