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