注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時再頭部記得機上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端站起來學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

一、外部資源超鏈接

👸小媛：這一節咱們學一些什么？

🐶1_bit：這一節咱們講解一下超鏈接，超鏈接在第一節中我們已經有過一些了解，指當前區域（空間）或其他區域（空間）的內容。例如咱們現在做一個超鏈接，點擊該鏈接跳轉到某一個頁面之中。

👸小媛：那應該怎么做呢？

🐶1_bit：這個時候我們只需要使用對應的標簽即可。在HTML中不同的標簽有不同的功能，在此咱們需要使用超鏈接的標簽，鏈接到某一個頁面之中。超鏈接的標簽是a標簽，寫作<a></a>。使用示例如下。
在這里插入圖片描述
👸小媛：就這樣就可以了嗎？

🐶1_bit：當然還沒有，我們還需要給這個 a 標簽添加一個對應指向的鏈接，代碼如下。
在這里插入圖片描述
👸小媛：我打上去試過了，但是跳轉不到百度的頁面。

🐶1_bit：這是因為咱們還需要加一個 http://，完整代碼如下。

<a href="http://www.baidu.com">這里可以連接到百度</a>

在這里插入圖片描述
👸小媛：為什么要這么做呢？

🐶1_bit：你可以簡單的理解為加了 http:// 就表示咱們所鏈接（指向）的是一個網頁，因為在一個網頁之中，咱們的超鏈接所指向的不一定是“網址”，也有可能是一張圖片、一個pdf文件、一個視頻等。例如咱們的 01.html （就是上節課的代碼文件）也在當前文件夾 G:/HTML實戰課代碼/ 之下，我們可以準確的對 01.html 這個文件用文件路徑表示這個文件的位置，那就是 G:/HTML實戰課代碼/01.html ，由于在當前目錄，那就可以直接用文件名表示，那么咱們現在將這個文件當作是超鏈接的指向，例如如下代碼：
在這里插入圖片描述
🐶1_bit：這個時候保存文件并且刷新，點擊這個鏈接將會跳轉到 01.html 這個網頁之中。

二、內部資源超鏈接

👸小媛：真的耶，所以說圖片和視頻都可以嗎？

🐶1_bit：對的。

👸小媛：還有一個問題，就是那個路徑怎么表示？是什么意思？

🐶1_bit：路徑就是表示一個文件在計算機磁盤的位置，例如你打開一個文件夾，這個時候這個文件夾上部就是這個文件所在的位置。

🐶1_bit：咱們需要注意的是，如果需要表示具體的某個文件，咱們需要加上該文件名及其后綴，例如G:/HTML實戰課代碼/01.html 。

👸小媛：明白了，那剛剛你說的同一個目錄之下不需要前面一大串的指向只需要使用文件名即可？

🐶1_bit：對的，不過需要注意的是一定要加上后綴，否則資源將會指向不明確。

👸小媛：那如何指向當前目錄下對應文件夾的內容呢？

🐶1_bit：如果是想指向當前目錄下的文件夾中的圖片也很簡單，例如當前文件夾下有一個文件叫做 img。
在這里插入圖片描述
🐶1_bit：在 img 中有一個名稱叫做 1 的png 圖片，我們需要在 html 中點擊某個鏈接跳轉到改圖片，此時只需要更改 a 標簽 href 屬性所對應的資源地址即可。

<a href="./img/1.png">點擊跳轉到圖片</a>

在這里插入圖片描述
👸小媛：那為什么這里的路徑是"./img/1.png"呢？

🐶1_bit：這是因為小數點“.”表示的意思是當前路徑的意思，“./”就表示當前路徑下的意思，在“./”后面接上 img 就表示當前路徑下的 img 文件夾，在 img 后加上“/”則表示當前目錄下的img文件夾下的 1.png 這個圖片，此時直接保存該 html 代碼點擊該鏈接即可跳轉到改圖片。

👸小媛：哇，我成功了。

三、超鏈接的其他屬性

🐶1_bit：在超鏈接標簽中，href 是a標簽的屬性，a標簽所對應的屬性還有 name、title、target 等；其中 name 表示給這個鏈接命名，title 指的是給這個鏈接加一個提示文字，target 指給目標窗口打開的方式，例如如下代碼。

<a href="./img/1.png" title="打開圖片" target="_blank">_blank 點擊跳轉到圖片</a>
<a href="./img/1.png" title="打開圖片" target="_self">_self 點擊跳轉到圖片</a>

🐶1_bit：我們將鼠標移動上去懸停將會發現該鏈接有提示。

🐶1_bit：接著我們點擊self方式打開鏈接將會在當前頁面上直接跳轉到圖片資源，點擊blank方式則會直接新建一個頁面進行跳轉。

👸小媛：原來是這么回事，我懂了。

🐶1_bit：a超鏈接還可以以一種叫錨點的方式跳轉到當前頁面的某個資源。

👸小媛：這個是啥意思？當前頁面的資源？

🐶1_bit：就像一篇很長的文章有不同的段落或者章節，在同一個網頁中進行顯示，咱們可以視同超鏈接跳轉到不同的段落之中。

👸小媛：那怎么做呢？

🐶1_bit：這很簡單，首先你看下面的代碼。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a連接錨點跳轉</title>
</head>
<body><h1>段落跳轉</h1><a href="#a">山經·南山經</a><a href="#b">山經·北山經</a><a href="#c">山經·中山經</a><a href="#d">海經·海外西經</a><h2 id="a">山經·南山經</h2><p>南山經之首曰?山。其首曰招搖之山，臨于西海之上。多桂多金玉。有草焉，其狀如韭而青花，其名曰祝馀，食之不饑。有木焉，其狀如榖而黑理，其花四照。其名曰迷榖，佩之不迷。有獸焉，其狀如禺而白耳，伏行人走，其名曰狌狌，食之善走。麗𪊨之水出焉，而西流注于海，其中多育沛，佩之無瘕疾。又東三百里曰堂庭之山。多棪木，多白猿，多水玉，多黃金。又東三百八十里曰猨翼之山。其中多怪獸，水多怪魚。多白玉，多蝮蟲，多怪蛇，多怪木，不可以上。又東三百七十里曰杻陽之山。其陽多赤金。其陰多白金。有獸焉，其狀如馬而白首，其文如虎而赤尾，其音如謠，其名曰鹿蜀，佩之宜子孫。怪水出焉，而東流注于憲翼之水。其中多玄龜，其狀如龜而鳥首虺尾，其名曰旋龜，其音如判木，佩之不聾，可以為底。又東三百里柢山。多水，無草木。有魚焉，其狀如牛，陵居，蛇尾有翼，其羽在魼下，其音如留牛，其名曰鯥，冬死而復生。食之無腫疾。</p><h2 id="b">山經·北山經</h2><p>北山經之首，曰單狐之山，多機木，其上多華草。逢漨水出焉，而西流注于泑水，其中多芘石文石。又北二百五十里，曰求如之山，其上多玉，無草木。滑水出焉，而西流注于諸毗之水。其中多滑魚。其狀如鱓，赤背，其音如梧，食之已疣。其中多水馬，其狀如馬，文臂牛尾，其音如呼。又北三百里，曰帶山，其上多玉，其下多青碧。有獸焉，其狀如馬，一角有錯，其名曰灌疏，可以辟火。有鳥焉，其狀如烏，五采而赤文，名曰鵸余?是自為牝牡，食之不疽。彭水出焉，而西流注于芘湖之水，中多鯈魚，其狀如雞而赤毛，三尾六足四首，其音如鵲，食之可以已憂。又北四百里，曰譙明之山。譙水出焉，西流注于河。其中多何羅之魚，一首而十身，其音如吠犬，食之已癰。有獸焉，其狀如貆而赤毫，其音如榴榴，名曰孟槐，可以御兇。是山也，無草木，多青雄黃。又北三百五十里，曰涿光之山。囂水出焉，而西流注于河。其中多鰼之魚，其狀如鵲而十翼，鱗皆在羽端，其音如鵲，可以御火，食之不癉。其上多松柏，其下多棕橿，其獸多麢羊，其鳥多蕃。又北三百八十里，曰虢山，其上多漆，其下多桐椐。其陽多玉，其陰多鐵。伊水出焉，西流注于河。其獸多橐駝，其鳥多窩，狀如鼠而鳥翼，其音如羊，可以御兵。又北四百里，至于虢山之尾，其上多玉而無石。魚水出焉，西流注于河，其中多文貝。又北二百里，曰丹熏之山，其上多樗柏，其草多韭韭，多丹雘。熏水出焉，而西流注于棠水。有獸焉，其狀如鼠，而菟首麋身，其音如獆犬，以其尾飛，名曰耳鼠，食之不?采，又可以御百毒。又北二百八十里，曰石者之山，其上無草木，多瑤碧。泚水出焉，西流注于河。有獸焉，其狀如豹，而文題白身，名曰孟極，是善伏，其鳴自呼。又北百一十里，曰邊春之山，多蔥、葵、韭、桃、李。杠水出焉，而西流注于泑澤。有獸焉，其狀如禺而文身，善笑，見人則臥，名曰幽鴳，其鳴自呼。又北二百里，曰蔓聯之山，其上無草木，有獸焉，其狀如禺而有鬣，牛尾、文臂、馬蹄，見人則呼，名曰足訾，其鳴自呼。有鳥焉，群居而朋飛，其毛如雌雉，名曰，其鳴自呼，食之已風。又北八百里，曰單張之山，其上無草木。有獸焉，其狀如豹而長尾，人首而牛耳，一目，名曰諸犍，善吒，行則銜其尾。有鳥焉，其狀如雉，而文首、白翼、黃足，名曰白鵺，食之已嗌痛，可以已痸。櫟水出焉，在而南流注于杠水。又北三百二十里，曰灌題之山，其上多樗柘，其下多流沙，多砥。有獸焉，其狀如牛而白尾，其音如詨，名曰那父。有鳥焉，其狀如雌雉而人面，見人則躍，名曰竦斯，其鳴自呼也。匠韓之水出焉，而西流注于泑澤，其中多磁石。又北二百里，曰潘侯之山，其上多松柏，其下多榛楛，其陽多玉，其陰多鐵。有獸焉，基狀如牛，而四節生毛，或曰旄牛。邊水出焉，而南流注于櫟澤。又北二百三十里，曰小咸之山，無草木，冬夏有雪。北二百八十里，曰大咸之山，無草木，其下多玉。是山也，四方，不可以上。有蛇名曰長蛇，其毛如彘豪，其音如鼓柝。又北三百二十里，曰敦薨之山，其上多棕枬，其下多茈草。敦薨之水出焉，而西流注于泑澤。出于昆侖之東北隅，實惟河原。其中多赤鮭，其獸多兕，旄牛，其鳥多柝鳩。又北二百里，曰少咸之山，無草木，多青碧。有獸焉，其狀如牛，而赤身、人面、馬足，名曰窺窳，其音如嬰兒，是食人。敦水出焉，東流注于雁門之水，其中多魳魳之魚。食之殺人。又北二百里，曰獄法之山。瀼澤之出焉，而東北流注于泰澤。其中多繅魚，其狀如鯉而雞足，食之已疣。有獸焉，其狀如犬而人面，善投，見人則笑，其名山?，其行如風，見則天下大風。又北二里，曰北岳之山，多枳棘剛木。有獸焉，其狀如牛，而四角、人、耳、彘耳，其名曰諸懷，基音如鳴雁，是食人。諸懷之水出焉，而西流注于囂水，水中多鮨魚，魚身而犬首，其音如嬰兒，食之已狂。又北百八十里，曰渾夕之山，無草木，多銅玉。囂水出焉，而西流注于海。有蛇一首兩身，名曰肥遺，見則其國大旱。又北五十里，曰北單之山，無草木，多蔥韭。又北百里，曰羆差之山，無草木，多馬。又北百八十里，曰北鮮之山，是多馬，鮮水出焉，而西北流注于涂吾之水。又北百七十里，曰堤山，多馬。有獸焉，其狀如豹而文首，名曰狕。堤水出焉，而東流注于泰澤，其中多龍龜。凡北山經之首，自單狐之山至于堤山，凡二十五山，五千四百九十里，其神皆人面蛇身。其祠之，毛用一雄雞彘瘞，吉玉用一珪，瘞而為不糈。其山北人，皆生食不火之物。北次二經之首，在河之東，其首枕汾，其名曰管涔之山。其上無木而多草，其下多玉。汾水出焉，而西流注于河。</p><h2 id="c">山經·中山經</h2><p>中山經薄山之首，曰甘棗之山，共水出焉，而西流注于河。其上多杻木。其下有草焉，葵本而可葉。黃華而莢實，名曰籜，可以已懵。有獸焉，其狀如猷鼠而文題，其名曰鏹，食之已癭。又東二十里，曰歷兒之山，其上多橿，多杤木，是木也，方莖而員葉，黃華而毛，其實如揀，服之不忘。又東十五里，曰渠豬之山，其上多竹，渠豬之水出焉，而南流注于河。其中是多豪魚，狀如鮪，赤喙尾赤羽，可以已白癬。又東三十五里，曰蔥聾之山，其中多大谷，是多白堊，黑、青、黃堊。又東十五里，曰涹山，其上多赤銅，其陰多鐵。又東七十里，曰脫扈之山。有草焉，其狀如葵葉而赤華，莢實，實如棕莢，名曰植褚，可以已癙，食之不瞇。又東二十里，曰金星之山，多天嬰，其狀如龍骨，可以已痤。又東七十里，曰泰威之山。其中有谷，曰梟谷，其中多鐵。又東十五里，曰橿谷之山。其中多赤銅。又東百二十里，曰吳林之山，其中多葌草。又北三十里，曰牛首之山。有草焉，名曰鬼草，其葉如葵而赤莖，其秀如禾，服之不憂。勞水出焉，而西流注于潏水，是多飛魚，其狀如鮒魚，食之已痔衕。又北四十里，曰霍山，其木多楮。有獸焉，其狀如貍，而白尾有鬣，名曰朏朏，養之可以已憂。又北五十二里，曰合谷之山，是多薝棘。又北三十五里，曰陰山，多礪石、文石。少水出焉，其中多雕棠，其葉如榆葉而方，其實如赤菽，食之已聾。又東北四百里，曰鼓鐙之山，多赤銅。有草焉，名曰榮草，其葉如柳，其本如雞卵，莨之已風。凡薄山之首，白甘棗之山至于鼓鐙之山，凡十五山，六千六百七十里。歷兒、冢也，其祠禮：毛，太牢之具，縣以吉玉。其余十三者，毛用一羊，縣嬰用桑封，瘞而不糈。桑封者，桑主也，方其下而銳其上，而中穿之加金。中次二經注山之首，曰煇諸之山，其上多桑，其獸多閭麋，其鳥多鹖。又西南二百里，曰發視之山，其上多金玉，其下多砥礪。即魚之水出焉，而西流注于伊水。又西三百里，曰豪山，其上多金玉而無草木。又西三百里，曰鮮山，多金玉，無草木，鮮水出焉，而北流注于伊水。其中多鳴蛇，其狀如蛇而四翼，其音如磬，見則其邑大旱。又西三百里，曰陽山，多石，無草木。陽水出焉，而北流注于伊水。其中多化蛇，其狀如人面而豺身，鳥翼而蛇行，其音如叱呼，見其邑大水。又西二百里，曰昆吾之山，其上多赤銅。有獸焉，其狀如彘而有角，其音如號，名曰蠪蚔，食之不瞇。又西百二十里，曰荔山。荔水出焉，而北流注于伊水，其上多金玉，其下多青雄黃。有木焉，其狀如棠而赤時，名曰芒草，可以毒魚。又西一百五十里，曰蔓渠之山，其上多金玉，其下多竹箭。伊水出焉，而東流注于洛。有獸焉，其名曰馬腹，其狀如人面虎身，其音如嬰兒，是食人。凡濟山之首，自煇諸之山至于蔓渠之山，凡九山，一千六百七十里，其神皆人面而鳥身。祠用毛，用一吉玉，投而不糈。中次三以萯山之首，曰敖岸之山，其陽多?琈之玉，其陰多赭、黃金。神熏池居之。是常出美玉。北望河林，其狀如茜如舉。有獸焉，其狀如白鹿而四角，名曰夫諸，見則其邑大水。又東十里，曰青要之山，實惟帝之密都。北望河曲，是多駕鳥。南望墠渚，禹父之所化，中多仆累、蒲盧。魎武羅司之，其狀人面而豹文，小要而白齒，而穿耳以囗，其鳴如鳴玉。是山也，宜女子。畛水出焉，而北流注于河。其中有鳥焉，名曰鴢，其狀如鳧，青身而朱目赤尾，食之宜子。?有草焉，其狀如葌，而方莖黃華赤實，其本如藁木，名曰荀草，服之美人色。又東十里，曰騩山，其上有美棗，其陰有?琈之玉。正回之水出焉，而北流注于河。其中多飛魚，其狀如豚而赤文，服之不畏雷，可以御兵。又東四十里，曰宜蘇之山，其上多金玉，其下多蔓居之木滽滽之水出焉，而北流注于河，是多黃貝。合而北流注于河，其中多蒼玉。吉神泰逢司之，其狀如人而虎尾，是好居于萯山之陽，出入有光。泰逢神動天地氣也。凡萯之首，自敖岸之山至于和山，凡五山，四百四十里。其祠：泰逢、熏池、武羅皆一牡羊副，嬰用吉玉。其二神用一雄雞瘞之。糈用稌。中次四經厘山之首，曰鹿蹄之山，其上多玉，其下多金。甘水出下，而北流注于洛，其中多泠石。西五十里，曰扶豬之山，其上多礝石。有獸焉，其狀如貉而人目，其名曰?。虢水出焉，而北流注于洛，其中多礝石。又西一百二十里，曰厘山，其陽多玉，其陰多蒐。有獸焉，其狀如牛。蒼身，其音如嬰兒，是食人，其名曰犀渠。滽滽之水出又西一百二十里，曰厘山，其陽多玉，其陰多蒐。有獸焉，其狀如牛。蒼身，其音如嬰兒，是食人，其名曰犀渠。滽滽之水出焉，而南流注于伊水。有獸焉，名曰𤢺，其狀如獳犬而有鱗，其毛如彘鬣。又西二百里，曰箕尾之山，多楮，多涂石，其上多?琈之玉。又西二百里，曰箕尾之山，基個多玉，其下多銅。滔雕之水出焉，而北流注于洛。其中多羬羊。有木焉，其狀如樗，其葉如桐而莢實，其名曰茇，可以毒魚。又西二百里，曰白邊之山，其上多金玉，其下多青雄黃。又西二百里，曰熊耳之山，其上多漆，其下多棕。浮濠之水出焉，而西流注于洛，其中多水玉，多人魚。有草焉，其狀如蘇而赤華，名曰葶苧，可以毒魚。又西三百里，曰牡山，其上多文石，其下多竹箭竹?，其獸多?牛、羬羊，鳥多赤鷩。又西三百五十里，曰讙舉之山。雒水出焉，而東北流注于玄扈之水，其中多腸之物。此二山者，洛間也。凡厘冊之首，自鹿蹄之山至于玄扈之山，凡九山，千六百里七十里。其神狀皆人面獸身。其祠之，毛用一白雞，祈而不糈，以采衣之。中次五經薄山之茍，曰茍床之山，無草木，多怪石。東三百里，曰首山，其陰多榖柞，其草多萊芫，其陽多?琈之玉，木多槐。其陰有谷，曰機谷，多?鳥，其狀如錄，食之已墊。</p><h2>海經·海外西經</h2><p id="d">海外自西南陬西北陬者。滅蒙鳥在結匈國北，為鳥青，赤尾。大運山高三百仞，在滅蒙鳥北。大樂之野，夏后啟于此儛九代，乘兩龍，云蓋三層。左手操翳，右手操環，佩玉璜。在大運山北。一曰大遺之野。三身國在夏后啟北，一首而三身。一臂國在其北，一臂、一目、鼻孔。有黃馬虎文，一目而一手。奇肱之國在其北。其人一臂三目，有陰有陽，乘文馬。有鳥焉，兩頭，赤黃色，在其旁。形天與帝至此爭神，帝斷其首，葬之常羊之山。乃以乳為目，以臍為口，操干戚以舞。女祭、女戚在其北，居兩水間，戚操魚?，祭操俎。?鳥、𪆻鳥，其色青黃，所經國亡。在女祭北。?鳥人面。居山上。一曰維鳥，青鳥、黃鳥所巢。丈夫國在維鳥北，其為人衣冠帶劍。女丑之尸，生而十日炙殺之。在丈夫北。以右手鄣其面。十日居之，女丑居山之山。巫咸國在女丑北，右手操青蛇，左手操赤蛇。在登葆山，群巫所從上下也。并封在巫咸東，其狀如彘，前后皆有首，黑。</p>
</body>
</html>

這代碼看似長，但是其內容都是文本巨多，基本上重點如下圖所示。

🐶1_bit：在以上代碼中我們可以看到，在a標簽的href中，咱們使用了如href="#a"類似的寫法，這就是錨點的寫法。其中 href是表示當前鏈接所指向的資源，那么“#a”就是資源地址，其中 # 是鏈接中錨點的寫法，而 a 則是當前頁面中某個元素的 id 值。我們可以從代碼中看見，當前頁面中 id 為 a 的內容則是 <h2 id="a">山經·南山經</h2> 這個元素，那么當點擊 <a href="#a">山經·南山經</a> 時將會直接跳轉到 <h2 id="a">山經·南山經</h2> 該部分內容。

👸小媛：明白了，原來 html 中也有 id 這個說法呀。

🐶1_bit：對的，咱們可以給標簽一個 id 就像起個名字一樣，單切記不要重名，否則將會出現不可預料的問題。

👸小媛：明白了，那那個p標簽是什么？

🐶1_bit：那個是段落的意思，表示 p 標簽之內的文字內容是一個段落，并且會自動與 p 標簽上下的內容會空出一些距離，這就是 p 標簽段落的功能。

👸小媛：明白了。

【前端就業課第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解