超鏈接的基礎使用方法及知識拓展
2018-09-28 20:52 更新
當我們在網(wǎng)頁或是文章中想要“點擊一個關鍵詞跳轉(zhuǎn)到指定頁面”的時候就需要用到超鏈接啦。超鏈接指向的目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網(wǎng)頁中被用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊被鏈接過的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據(jù)目標的類型來打開或運行。
超鏈接基本語法：
<a href="url地址替換">關鍵詞替換</a>
<a href="值">關鍵詞替換</a>
示例：
<a href="//www.o2fo.com/">W3Cschool</a>顯示效果：
W3Cschool解析：
①等號（=）后面的“值”即//www.o2fo.com/是鏈接指向的目標網(wǎng)址
②書寫時用雙引號囊括
"//www.o2fo.com/"
③W3Cschool是被賦予超鏈接的關鍵詞
舉一反三：
如果想要實現(xiàn)“嗶哩嗶哩彈幕網(wǎng)”這個效果該怎么寫？
答：<a href="http://www.bilibili.com/">嗶哩嗶哩彈幕網(wǎng)</a>
檢驗代碼：
知識拓展
基礎語法的變形：<a href="url地址" 屬性="值">關鍵詞</a>
示例
<a href="//www.o2fo.com/attachments/day_160919/201609191741153486.png"download="小師妹">手繪小師妹</a>
顯示效果
手繪小師妹解析：
①這是一個下載文件的超鏈接，點擊“手繪小師妹”即會彈出下載對話框，如下圖所示
②在示例代碼 <a href="//www.o2fo.com/attachments/day_160919/201609191741153486.png"download="小師妹">手繪小師妹</a> 中，//www.o2fo.com/attachments/day_160919/201609191741153486.png為語法里的“url地址”，即這個文件的下載地址。
③在示例代碼中，download為語法里的“屬性”，即這條超鏈接指向什么類型的目標，在示例中為指向“下載文件”的意思。
④在示例代碼中，"小師妹"為語法里的“值”，和屬性是對應的關系，不同的屬性所對應的值也是不同的，在示例中為“文件名”的意思。
⑤在示例代碼中，“手繪小師妹”為語法里的“關鍵詞”，就是被賦予超鏈接的關鍵詞。
屬性：rel
值：
alternate 文檔的可選版本（例如打印頁、翻譯頁或鏡像）。
stylesheet 文檔的外部樣式表。
start 集合中的第一個文檔。
next 集合中的下一個文檔。
prev 集合中的前一個文檔。
contents 文檔目錄。
index 文檔索引。
glossary 文檔中所用字詞的術語表或解釋。
copyright 包含版權信息的文檔。
chapter 文檔的章。
section 文檔的節(jié)。
subsection 文檔的子段。
appendix 文檔附錄。
help 幫助文檔。
bookmark 相關文檔。
nofollow 使用 "nofollow"，用于指定搜索引擎不要跟蹤鏈接，對谷歌較為管用
licence 許可證
tag 標簽
friend 友情鏈接
stylesheet 文檔的外部樣式表。
start 集合中的第一個文檔。
next 集合中的下一個文檔。
prev 集合中的前一個文檔。
contents 文檔目錄。
index 文檔索引。
glossary 文檔中所用字詞的術語表或解釋。
copyright 包含版權信息的文檔。
chapter 文檔的章。
section 文檔的節(jié)。
subsection 文檔的子段。
appendix 文檔附錄。
help 幫助文檔。
bookmark 相關文檔。
nofollow 使用 "nofollow"，用于指定搜索引擎不要跟蹤鏈接，對谷歌較為管用
licence 許可證
tag 標簽
friend 友情鏈接
比如說你想要做友情鏈接，那么代碼就是
<a rel="friend" href="//www.o2fo.com/">w3cschool</a>這樣你就成功地定義了這個鏈接為友情鏈接
屬性：target(在何處打開文檔）
值：
_blank 在新標簽頁打開鏈接
_parent 在父框架中打開鏈接
_self 在當前頁打開鏈接
_top 在整個窗口中打開鏈接
freamename 在制定框架當中打開鏈接
我們經(jīng)常會在點擊一個鏈接的時候，瀏覽器自動彈出新頁面，而舊頁面也被保存了下來，這就是_blank 的功勞了，代碼如下
<a target="_blank" href="//www.o2fo.com/">w3cschool</a>顯示效果
上面列舉是比較常見的應用，然而其實<a>標簽當中還有很多門道可以細細道來
不同的屬性及值的列表圖
以上內(nèi)容是否對您有幫助：
← 前言
更多建議：