html 鏈接 a
https://www.xiaobuteach.com/html/markup-base/a.html?from=bili
html 鏈接 a
鼠標(biāo)點(diǎn)擊鏈接，會(huì)打開鏈接指定的新頁面。
1 基本語法
<a href="頁面地址" target="目標(biāo)窗口位置">鏈接內(nèi)容</a>
點(diǎn)擊 鏈接內(nèi)容，在target指定的位置打開href指定的頁面。
示例
<a href="https://www.xiaobeach.com">小步教程首頁</a>
2 href屬性
a標(biāo)簽的href屬性的頁面地址路徑與img標(biāo)簽的src屬性的地址路徑規(guī)則一樣。
包括3種路徑。
1）絕對(duì)路徑：以http://或https://開頭的路徑
2）相對(duì)當(dāng)前路徑：不以斜杠或http(s)://開頭的路徑
3）相對(duì)根路徑：以斜杠開頭的路徑。
1）絕對(duì)路徑
直接以http或https開頭的路徑，也稱完整路徑。
例1：鏈接到網(wǎng)站首頁
<a href="https://www.xiaobuteach.com">小步教程首頁</a>
例2：鏈接到網(wǎng)站指定頁面
<a href="https://www.xiaobuteach.com/html/tutorial/function.html">小步教程HTML教程</a>
2）?相對(duì)當(dāng)前路徑
不以斜杠/與http(s)開頭的路徑，表示當(dāng)前網(wǎng)站的網(wǎng)頁，相對(duì)當(dāng)前html文件的路徑。
相關(guān)html文件的目錄結(jié)構(gòu)說明
html(項(xiàng)目根目錄)
html/hello.html
html/c03-box/d01-box1.html
html/c05-base/d01-ul.html
html/c05-base/d04-a.html
html/c05-base/test/test1.html
VSCode瀏覽器內(nèi)容如下：
現(xiàn)在 html/c05-base/d04-a.html 文件中加入鏈接，鏈接到其它4個(gè)html文件，寫法如下：
? ?<!-- 同一級(jí)目錄直接寫html文件名 -->
? ?<a href="d01-ul.html">無序列表 示例</a>
? ?<br>
? ?<!-- 子目錄需寫子目錄名稱 -->
? ?<a href="test/test1.html">test1 頁面</a>
? ?<br>
? ?<!-- 上一級(jí)目錄通過..表示 -->
? ?<a href="../hello.html">hello 示例</a>
? ?<br>
? ?<!-- 并列上一級(jí)目錄，先通過..找到上級(jí)，再繼續(xù)找下級(jí) -->
? ?<a href="../c03-box/d01-box1.html">盒子模型 示例</a>
? ?<br>
3）相對(duì)根路徑
斜杠/開頭，表示相對(duì)于網(wǎng)站根路徑。
把上例中相對(duì)當(dāng)前路徑的寫法全部改為相對(duì)根路徑寫法。
? ?<!-- 總是從根路徑一級(jí)一級(jí)寫起 -->
? ?<a href="/c05-base/d01-ul.html">無序列表 示例</a>
? ?<br>
? ?
? ?<a href="/c05-base/test/test1.html">test1 頁面</a>
? ?<br>
? ?
? ?<a href="/hello.html">hello 示例</a>
? ?<br>
? ?
? ?<a href="/c03-box/d01-box1.html">盒子模型 示例</a>
? ?<br>
3 target屬性
target屬性常用值說明_self默認(rèn)值。表示在當(dāng)前窗口打開新頁面。_blank表示在新窗口打開新頁面。
示例
<a href="https://www.xiaobuteach.com"? target="_blank">小步教程首頁</a>
建議
為保證用戶體驗(yàn)，盡量少的使用_blank；彈出太多新窗口會(huì)讓用戶很煩。
小技巧
Chrome瀏覽器，即使鏈接設(shè)置target屬性為_self，也可以通過快捷鍵選擇打開窗口。
Ctrl+點(diǎn)擊鏈接：新的TAB頁打開鏈接，并且頁面不跳轉(zhuǎn)。非常適用。搜索時(shí)，連續(xù)打開多個(gè)頁面。
Shift+點(diǎn)擊鏈接：新的窗口打開鏈接。
4 鏈接內(nèi)容的類型
鏈接內(nèi)容的類型包括：文字、圖片、div等html元素。
例：鏈接圖片
?<!-- 鏈接內(nèi)容是圖片 -->
??<a href="https://www.xiaobuteach.com"><img src="logo.jpg"></a>
例：鏈接div
? ?<!-- 鏈接內(nèi)容是div -->
? ?<a ?href="https://www.xiaobuteach.com">
? ? ? ?<div>
? ? ? ? ? ?<p>第1段</p>
? ? ? ? ? ?<p>第2段</p>
? ? ? ?</div>
? ?</a>
5 頁面內(nèi)部跳轉(zhuǎn)
鏈接不僅可以跳轉(zhuǎn)到其它頁面，也可以跳轉(zhuǎn)到當(dāng)前頁面指定位置。
例如：從頂部跳到頁面尾部，從頁面尾部跳到頁面頂部。
說明：通常當(dāng)前頁面有滾動(dòng)條，才能更好的看到效果。
基本用法
第1步：定義id錨點(diǎn)，設(shè)置id屬性值即可。
以后可以跳轉(zhuǎn)到此處。
例：
<div id="header">
id值可以自定義。
第2步：a標(biāo)簽跳轉(zhuǎn)
<a href="#header">鏈接內(nèi)容</a>
href值的內(nèi)容需要帶#，表示id錨點(diǎn)；
#后的內(nèi)容與第1步設(shè)置的id值需要一致。
完整示例
<body>
? ?<div id="header">頂部</div>
? ?<div id="main" style="height: 1000px;">主體內(nèi)容</div>
? ?<div>
? ? ? ?<a href="#header">回到頂部</a>
? ?</div>
</body>
6 默認(rèn)樣式
a鏈接的默認(rèn)樣式是真的丑，但很有代表性。
a默認(rèn)不是只有一個(gè)樣式，當(dāng)不同的動(dòng)作時(shí)，a有不同的樣式。
鏈接動(dòng)作默認(rèn)值已經(jīng)訪問過的鏈接有下劃線，暗紅色。沒有訪問過的鏈接有下劃線，藍(lán)色。鼠標(biāo)懸停在鏈接上有下劃線，顏色與是否訪問過一致。鼠標(biāo)點(diǎn)擊未松開時(shí)有下劃線，紅色
上圖中，百度已經(jīng)訪問過顯示暗紅色，bing未訪問過顯示藍(lán)色。
上圖中，鼠標(biāo)正在點(diǎn)擊bing未松開時(shí)，顯示紅色。
實(shí)際項(xiàng)目，通常會(huì)對(duì)上述各動(dòng)作的樣式進(jìn)行定制，需要通過CSS的偽類技術(shù)實(shí)現(xiàn)。
設(shè)置當(dāng)前頁面所有鏈接的樣式
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>html 鏈接 a 例子 | 小步教程</title>
? ?<style>
? ? ? ?/* 設(shè)置默認(rèn)樣式 */
? ? ? ?a{
? ? ? ? ? ?text-decoration: none;
? ? ? ?}
? ? ? ?/* 沒有訪問過的樣式 */
? ? ? ?a:link{
? ? ? ? ? ?color:#f00;
? ? ? ? ? ?
? ? ? ?}
? ? ? ?/* 訪問過的樣式 */
? ? ? ?a:visited{
? ? ? ? ? ?color:#0f0;
? ? ? ?}
? ? ? ?/* 鼠標(biāo)懸停的樣式 */
? ? ? ?a:hover{
? ? ? ? ? ?color:#00f;
? ? ? ?}
? ? ? ?/* 鼠標(biāo)激活(點(diǎn)擊未松開)的樣式 */
? ? ? ?a:active{
? ? ? ? ? ?color:#ccc;
? ? ? ?}
? ? ? ?
? ?</style>
</head>
<body>
? ?<a href="https://www.baidu.com" >百度</a>
? ?<br>
? ?<a href="https://www.bing.com">bing</a>
</body>
</html>
后續(xù)進(jìn)一步介紹。
