HTML基礎(chǔ)標(biāo)簽
標(biāo)題 h1-6
場(chǎng)景
在新聞和文章的頁(yè)面中，都離不開(kāi)標(biāo)題，它用來(lái)突出顯示文章主題，標(biāo)題顯得尤為重要。
用法
- 標(biāo)題（Heading）是通過(guò)
<h1>→<h6>標(biāo)簽進(jìn)行定義的。 -
<h1>定義最大的標(biāo)題。<h6>定義最小的標(biāo)題。
語(yǔ)義
1~6級(jí)標(biāo)題，重要程度依次遞減。
實(shí)例
<!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>標(biāo)題標(biāo)簽</title>
</head>
<body>
<!-- ctrl + D ：先雙擊選定內(nèi)容，然后按下 ctrl + d 可以往下依次（再次按下ctrl + d）選擇相同的內(nèi)容。這樣同時(shí)修改相同的內(nèi)容就非常方便-->
<h1>1級(jí)標(biāo)題</h1>
<h1>1級(jí)標(biāo)題</h1>
<h1>1級(jí)標(biāo)題</h1>
<h2>2級(jí)標(biāo)題</h2>
<h3>3級(jí)標(biāo)題</h3>
<h4>4級(jí)標(biāo)題</h4>
<h5>5級(jí)標(biāo)題</h5>
<h6>6級(jí)標(biāo)題</h6>
</body>
</html>
效果圖
特點(diǎn)
- 文字都有加粗
- 文字都有變大，并且從h1→h6文字逐漸減小
- 瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行，獨(dú)占一行（塊級(jí)元素）
- 默認(rèn)情況下，HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行，比如段落、標(biāo)題元素前后。
重要性
- h1標(biāo)簽對(duì)于網(wǎng)頁(yè)尤為重要，搜索引擎使用標(biāo)題為我們網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引，讓用戶可以通過(guò)標(biāo)題來(lái)快速瀏覽網(wǎng)頁(yè)，所以用標(biāo)題來(lái)呈現(xiàn)文檔結(jié)構(gòu)是很重要的。開(kāi)發(fā)中有特定的使用場(chǎng)景，如：新聞的標(biāo)題、網(wǎng)頁(yè)的logo部分（在h1標(biāo)簽里面嵌套比較重要的信息，如logo圖片，標(biāo)題文字等）等，涉及到搜索引擎優(yōu)化(SEO)知識(shí)。
- 請(qǐng)確保將 HTML 標(biāo)題 標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號(hào)的文本而使用標(biāo)題，請(qǐng)使用其它標(biāo)簽或 CSS 代替。
- 應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。
搜索引擎優(yōu)化（SEO）
概念
SEO（搜索引擎優(yōu)化）是一種通過(guò)改進(jìn)網(wǎng)站結(jié)構(gòu)和內(nèi)容，從而提高網(wǎng)站在搜索引擎中排名的技術(shù)和方法。SEO 旨在優(yōu)化網(wǎng)站的排名，以便它們?cè)谒阉饕娼Y(jié)果頁(yè)面（SERP）上獲得更高的曝光度和點(diǎn)擊率，從而吸引更多的流量和潛在客戶。
目標(biāo)
SEO 的主要目標(biāo)是提高網(wǎng)站在搜索引擎的自然排名，也稱為有機(jī)排名。這與通過(guò)付費(fèi)廣告獲得的排名不同，后者被稱為付費(fèi)搜索或搜索引擎營(yíng)銷（SEM）。SEO 的主要工作包括關(guān)鍵詞研究、網(wǎng)站結(jié)構(gòu)優(yōu)化、網(wǎng)站內(nèi)容優(yōu)化、內(nèi)部鏈接、外部鏈接等。
策略
SEO 是一項(xiàng)長(zhǎng)期的工作，需要持續(xù)的努力和耐心。由于搜索引擎算法的不斷更新和變化，SEO 策略也需要不斷調(diào)整和優(yōu)化。然而，通過(guò)正確的 SEO 策略和實(shí)踐，網(wǎng)站可以獲得更好的排名和更多的有機(jī)流量，從而增加其在網(wǎng)上的曝光度和業(yè)務(wù)成功的機(jī)會(huì)。
常見(jiàn)的 SEO 概念和技術(shù)
- 關(guān)鍵詞研究：關(guān)鍵詞是用戶在搜索引擎中輸入的短語(yǔ)或單詞，因此關(guān)鍵詞研究是確定您的網(wǎng)站應(yīng)該針對(duì)哪些關(guān)鍵詞進(jìn)行優(yōu)化的過(guò)程。
- 網(wǎng)站結(jié)構(gòu)優(yōu)化：這包括通過(guò)優(yōu)化網(wǎng)站的結(jié)構(gòu)和導(dǎo)航來(lái)提高用戶體驗(yàn)和搜索引擎的可讀性。例如，為您的網(wǎng)站創(chuàng)建易于使用和導(dǎo)航的網(wǎng)站地圖。
- 網(wǎng)站內(nèi)容優(yōu)化：這是通過(guò)創(chuàng)建高質(zhì)量、有用的內(nèi)容來(lái)增加搜索引擎的可讀性和用戶體驗(yàn)。這包括優(yōu)化您的頁(yè)面標(biāo)題、元描述和內(nèi)容中的關(guān)鍵詞密度等。
- 內(nèi)部鏈接：這是通過(guò)在網(wǎng)站中鏈接到其他相關(guān)頁(yè)面來(lái)增加網(wǎng)站的內(nèi)部鏈接結(jié)構(gòu)。這可以幫助搜索引擎更好地了解您網(wǎng)站的結(jié)構(gòu)和內(nèi)容，從而提高您的排名。
- 外部鏈接：這是通過(guò)鏈接到其他網(wǎng)站來(lái)增加您網(wǎng)站的外部鏈接結(jié)構(gòu)。外部鏈接可以幫助提高您的網(wǎng)站的聲譽(yù)和權(quán)威性，從而提高您的排名。
- 移動(dòng)優(yōu)化：隨著移動(dòng)設(shè)備的流行，移動(dòng)優(yōu)化變得越來(lái)越重要。這包括優(yōu)化您的網(wǎng)站的響應(yīng)式設(shè)計(jì)和加載速度，以適應(yīng)各種設(shè)備和網(wǎng)絡(luò)條件。
總之，SEO 是一項(xiàng)復(fù)雜的工作，需要對(duì)搜索引擎的算法和用戶行為有深入的了解。通過(guò)合理的 SEO 策略和實(shí)踐，您的網(wǎng)站可以獲得更好的排名和更多的有機(jī)流量，從而增加業(yè)務(wù)成功的機(jī)會(huì)。
段落 p
場(chǎng)景
HTML 可以將文檔分割為若干段落，如在新聞和文章的頁(yè)面中，可用于分段顯示。
用法
段落（paragraph）是通過(guò) <p> 標(biāo)簽定義的。
語(yǔ)義
表示一個(gè)段落。
實(shí)例
<!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>段落</title>
</head>
<body>
<p>這是第一個(gè)段落。</p>
<p>這是第二個(gè)段落。</p>
<p>這是第三個(gè)段落。</p>
</body>
</html>
效果圖
特點(diǎn)
- 段落之間存在間隙
- 瀏覽器會(huì)自動(dòng)地在段落的前后添加空行，獨(dú)占一行（塊級(jí)元素）
不要忘記結(jié)束標(biāo)簽
前面我們提過(guò)，即使您忘記了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地顯示 HTML，如下：
<p>這是一個(gè)段落
<p>這是一個(gè)段落
以上實(shí)例在瀏覽器中也能正常顯示，因?yàn)殛P(guān)閉標(biāo)簽是可選的。
但不要依賴這種做法，忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。在未來(lái)的 HTML 版本中，不允許省略結(jié)束標(biāo)簽。
提示：通過(guò)結(jié)束標(biāo)簽來(lái)關(guān)閉 HTML 是一種經(jīng)得起未來(lái)考驗(yàn)的 HTML 編寫(xiě)方法。清楚地標(biāo)記某個(gè)元素在何處開(kāi)始，并在何處結(jié)束，不論對(duì)您還是對(duì)瀏覽器來(lái)說(shuō)，都會(huì)使代碼更容易理解。
換行 br
場(chǎng)景
讓文字強(qiáng)制換行顯示。
用法
換行（拆行）是通過(guò)單標(biāo)簽 <br > 或 <br />定義的。建議使用 <br /> 表示
語(yǔ)義
如果希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），就使用 <br />標(biāo)簽。
實(shí)例
<!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>分行</title>
</head>
<body>
<p>這個(gè)<br />段落<br />演示了分行的效果</p>
</body>
</html>
效果圖
特點(diǎn)
-
單標(biāo)簽，
<br />元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒(méi)有任何意義，因此它沒(méi)有結(jié)束標(biāo)簽。 - 讓文字強(qiáng)制換行
注意
-
使用空的段落標(biāo)記
<p></p>去插入一個(gè)空行是個(gè)壞習(xí)慣。用<br />標(biāo)簽代替它?。ǖ?font color="#FF6600">不要用<br />標(biāo)簽去創(chuàng)建列表，列表后面講解）。 - 您也許發(fā)現(xiàn)
<br>與<br />很相似。前面我們提過(guò)，在 XHTML、XML 以及未來(lái)的 HTML 版本中，不允許使用沒(méi)有結(jié)束標(biāo)簽（閉合標(biāo)簽）的 HTML 元素。即使<br>在所有瀏覽器中的顯示都沒(méi)有問(wèn)題，使用<br />也是更長(zhǎng)遠(yuǎn)的保障。
水平線 hr
場(chǎng)景
分割不同主題內(nèi)容的水平線
用法
使用<hr>或<hr />標(biāo)簽進(jìn)行表示，建議使用 <hr /> 標(biāo)簽
語(yǔ)義
主題的分割轉(zhuǎn)換
實(shí)例
<!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>水平線</title>
</head>
<body>
<h1>這是文章標(biāo)題</h1>
<hr>
<p>阿卡貝拉（意大利：Acappella )即無(wú)伴奏合唱。 <br> 其起源可追溯至中世紀(jì)的教會(huì)音樂(lè)，當(dāng)時(shí)的教會(huì)音樂(lè)只以人聲清唱，并不應(yīng)用樂(lè)器。音頻示例： 阿卡貝拉《千與千尋》阿卡貝拉（意大利：Acappella )即無(wú)伴奏合唱。其起源可追溯至中世紀(jì)的教會(huì)音樂(lè)，當(dāng)時(shí)的教會(huì)音樂(lè)只以人聲清唱，并不應(yīng)用樂(lè)器。音頻示例： 阿卡貝拉《千與千尋》阿卡貝拉（意大利：Acappella )即無(wú)伴奏合唱。其起源可追溯至中世紀(jì)的教會(huì)音樂(lè)，當(dāng)時(shí)的教會(huì)音樂(lè)只以人聲清唱，并不應(yīng)用樂(lè)器。音頻示例： 阿卡貝拉《千與千尋》阿卡貝拉（意大利：Acappella )即無(wú)伴奏合唱。其起源可追溯至中世紀(jì)的教會(huì)音樂(lè)，當(dāng)時(shí)的教會(huì)音樂(lè)只以人聲清唱，并不應(yīng)用樂(lè)器。音頻示例： 阿卡貝拉《千與千尋》阿卡貝拉（意大利：Acappella )即無(wú)伴奏合唱。其起源可追溯至中世紀(jì)的教會(huì)音樂(lè)，當(dāng)時(shí)的教會(huì)音樂(lè)只以人聲清唱，并不應(yīng)用樂(lè)器。音頻示例： 阿卡貝拉《千與千尋》阿卡貝拉（意大利：Acappella )即無(wú)伴奏合唱。其起源可追溯至中世紀(jì)的教會(huì)音樂(lè)，當(dāng)時(shí)的教會(huì)音樂(lè)只以人聲清唱，并不應(yīng)用樂(lè)器。音頻示例： 阿卡貝拉《千與千尋》</p>
<p>“翻唱”是指將已經(jīng)發(fā)表并由他人演唱的歌曲根據(jù)自己的風(fēng)格重新演唱，包括重新填詞，編曲?，F(xiàn)在已有不少明星，都在翻唱他人的歌，不斷在翻唱中突破自己，給大家?guī)?lái)不一樣的風(fēng)格。視頻示例： 有一種悲傷（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>
效果圖
特點(diǎn)
- 單標(biāo)簽
- 在頁(yè)面中顯示一條水平線
提示
使用水平線 （<hr> 標(biāo)簽) 來(lái)分隔文章中的小節(jié)是一個(gè)辦法（但并不是唯一的辦法）。
VS code自動(dòng)換行
從上面的代碼例子中我們可以看到段落的文字比較多，這時(shí)我們可以使用VS code提供的自動(dòng)換行功能。開(kāi)啟這個(gè)功能后，它會(huì)根據(jù)VS code界面窗口的大小進(jìn)行文字自動(dòng)換行展示，方便我們編輯對(duì)應(yīng)的文字，此操作不會(huì)影響頁(yè)面的展示效果。
點(diǎn)擊查看 -> 自動(dòng)換行即可，或使用快捷鍵 Alt + Z：
在最大化的VS code界面中：
下面我們均開(kāi)啟自動(dòng)換行功能，并將vs code的窗口變小，請(qǐng)注意段落中文字的顯示變化：隨著窗口的大小變化，段落里面的文字在一排展示的效果也隨之發(fā)生了變化。
預(yù)格式文本 pre
場(chǎng)景
我們無(wú)法確定 HTML 被顯示的確切效果。屏幕的大小，以及對(duì)窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。
對(duì)于 HTML，無(wú)法通過(guò)在 HTML 代碼中添加額外的空格或換行來(lái)改變輸出的效果。
當(dāng)顯示頁(yè)面時(shí)，瀏覽器會(huì)移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會(huì)被算作一個(gè)空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個(gè)空格。
實(shí)例1
<!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>預(yù)格式文本標(biāo)簽</title>
</head>
<body>
<h1>春曉</h1>
<p>春眠不覺(jué)曉，
處處聞啼鳥(niǎo)。
夜來(lái)風(fēng)雨聲，
花落知多少。</p>
<p>注意，瀏覽器忽略了源代碼中的排版（省略了多余的空格和換行）。</p>
</body>
</html>
效果圖
可以看到，源代碼中的排版被忽略了，頁(yè)面顯示并沒(méi)有按照像源代碼中段落標(biāo)簽中的間隔那樣將句子隔開(kāi)。
解決辦法
使用預(yù)格式文本標(biāo)簽<pre>
實(shí)例2
<!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>預(yù)格式文本標(biāo)簽</title>
</head>
<body>
<pre>
<P>我是嵌套在pre里面的p標(biāo)簽 看看我</P>
</pre>
<pre>
這是
預(yù)格式文本。
它保留了 空格
和換行。
</pre>
<p>pre 標(biāo)簽很適合顯示計(jì)算機(jī)代碼：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
效果圖
實(shí)例3
利用<pre>標(biāo)簽寫(xiě)一首有排版格式的古詩(shī)。
<!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>預(yù)格式文本標(biāo)簽</title>
</head>
<body>
<h1>春曉</h1>
<pre>
春眠不覺(jué)曉，
處處聞啼鳥(niǎo)。
夜來(lái)風(fēng)雨聲，
花落知多少。
</pre>
<p>
上述標(biāo)簽用的是pre，就不會(huì)忽略掉多余的空格，后續(xù)學(xué)了css，也可以用：white-space:pre;
</p>
</body>
</html>
效果圖
從以上兩個(gè)例子可以看出用pre標(biāo)簽顯示的文字樣式與P標(biāo)簽有所不同，但是會(huì)保留多余的空格字符和回車字符，后期這些樣式可以用css進(jìn)行修改，只需要知道這個(gè)標(biāo)簽可以保留文本中的多余空格即可。
文本格式化 1
場(chǎng)景
需要讓文字加粗、下劃線、傾斜、刪除線等效果。
用法
第一套標(biāo)簽：
| 標(biāo)簽 | 說(shuō)明 |
|---|---|
| b (bold) | 加粗 |
| u (underline) （不建議使用） | 下劃線 |
| i (italic) | 傾斜 |
| s (strikethrough)（不建議使用） | |
| strike (html5 中不建議使用) |
第二套標(biāo)簽：
| 標(biāo)簽 | 說(shuō)明 |
|---|---|
| strong | 定義加重語(yǔ)氣 |
| ins | 定義插入字 |
| em | 定義著重文字 |
| del |
語(yǔ)義
第二套標(biāo)簽突出重要性的強(qiáng)調(diào)語(yǔ)境中使用，兩套標(biāo)簽視覺(jué)效果都一樣! ! !
實(shí)例
<!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>文本格式化標(biāo)簽</title>
</head>
<body>
<p>
我是p標(biāo)簽里面的文字，請(qǐng)對(duì)比記憶，請(qǐng)注意我是塊級(jí)標(biāo)簽，瀏覽器會(huì)讓我獨(dú)占一行！
</p>
<!-- 請(qǐng)注意，下面這些標(biāo)簽是行內(nèi)標(biāo)簽，相鄰行內(nèi)標(biāo)簽在一行上 -->
<b>這個(gè)文本是加粗的</b><strong>這個(gè)文本是加粗的</strong> <br />
<u>這個(gè)文本具有下劃線</u>
<!-- 我在這里進(jìn)行了手動(dòng)回車，讓兩個(gè)標(biāo)簽分別兩行展示，請(qǐng)注意看瀏覽器界面，會(huì)自動(dòng)解析成一個(gè)空格 -->
<ins>這個(gè)文本具有下劃線</ins> <br />
<i>這個(gè)文本是斜體的</i>
<em>這個(gè)文本是斜體的</em> <br />
<s>這個(gè)文本具有刪除線</s>
<del>這個(gè)文本具有刪除線</del> <br />
<!-- HTML5 中不支持<strike> 標(biāo)簽;在 HTML 4 中用于定義刪除線文本。
不建議使用strike標(biāo)簽，VScode會(huì)標(biāo)紅提示!!! -->
<strike>這個(gè)文本具有刪除線</strike>
</html>
效果圖
標(biāo)簽語(yǔ)義化
實(shí)際項(xiàng)目開(kāi)發(fā)中選擇標(biāo)簽的原則：標(biāo)簽語(yǔ)義化
- 即：根據(jù)語(yǔ)義選擇對(duì)應(yīng)正確的標(biāo)簽
- 如：需要寫(xiě)標(biāo)題，就使用h系列標(biāo)簽
- 如：需要寫(xiě)段落，就使用p標(biāo)簽
好處
對(duì)人：好理解，好記憶
對(duì)機(jī)器：有利于機(jī)器解析，對(duì)搜索引擎(SEO)有幫助
推薦
strong、ins、em、del，表示的強(qiáng)調(diào)語(yǔ)義更強(qiáng)烈！
注意
- 一些老式的瀏覽器會(huì)把刪除文本和下劃線文本顯示為普通文本。
文本格式化 2
場(chǎng)景
需要定義大號(hào)、小號(hào)、上標(biāo)、下標(biāo)等樣式的文本
用法
| 標(biāo)簽 | 說(shuō)明 |
|---|---|
| big | 定義大號(hào)字 |
| small | 定義小號(hào)字 |
| sup (superscript) | 定義上標(biāo)字 |
| sub (subscript) | 定義下標(biāo)字 |
巧記
- p：圓圈在右上方，就是上標(biāo)
- b：圓圈在右下方，就是下標(biāo)
實(shí)例
<!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>Document</title>
</head>
<body>
<p>
我是p標(biāo)簽里面的文字，請(qǐng)對(duì)比記憶，請(qǐng)注意我是塊級(jí)標(biāo)簽，瀏覽器會(huì)讓我獨(dú)占一行！
</p>
<!-- 請(qǐng)注意，下面這些標(biāo)簽是行內(nèi)標(biāo)簽，相鄰行內(nèi)標(biāo)簽在一行上 -->
<!-- HTML5 中不支持<big> 標(biāo)簽;在 HTML 4 中用于定義更大的文本。 -->
<big>這個(gè)文本字體放大</big><small>這個(gè)文本是縮小的</small> <br />
<!-- 手動(dòng)換行，注意顯示區(qū)別：兩句話之間會(huì)多解析成一個(gè)空格 -->
<big>這個(gè)文本字體放大</big>
<small>這個(gè)文本是縮小的</small> <br />
這個(gè)文本包含<sub>下標(biāo)</sub> <br />
這個(gè)文本包含<sup>上標(biāo)</sup>
</body>
</html>
效果圖
計(jì)算機(jī)輸出
用法
| 標(biāo)簽 | 描述 |
|---|---|
| code | 定義計(jì)算機(jī)代碼 |
| kbd | 定義鍵盤(pán)碼 |
| samp | 定義計(jì)算機(jī)代碼樣本 |
| tt | 定義打字機(jī)代碼 |
| var | 定義變量 |
實(shí)例
<!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>計(jì)算機(jī)輸出標(biāo)簽</title>
</head>
<body>
<!-- 了解即可，用得少 -->
<code>計(jì)算機(jī)輸出</code>
<br />
<kbd>鍵盤(pán)輸入</kbd>
<br />
<tt>打字機(jī)文本</tt>
<br />
<samp>計(jì)算機(jī)代碼樣本</samp>
<br />
<var>計(jì)算機(jī)變量</var>
<br />
<p><b>注釋：</b>這些標(biāo)簽常用于顯示計(jì)算機(jī)/編程代碼。</p>
</body>
</html>
效果圖
文字和首字母縮寫(xiě) abbr
用法
| 標(biāo)簽 | 描述 |
|---|---|
| abbr | 定義縮寫(xiě) |
| acronym（HTML5 中不支持,用abbr代替） | 定義首字母縮寫(xiě) |
<abbr> 標(biāo)簽指示簡(jiǎn)稱或縮寫(xiě)，比如 “WWW” 或 “NATO”。
通過(guò)對(duì)縮寫(xiě)進(jìn)行標(biāo)記，能夠?yàn)闉g覽器、拼寫(xiě)檢查和搜索引擎提供有用的信息。
<abbr> 標(biāo)簽最初是在 HTML 4.0 中引入的，表示它所包含的文本是一個(gè)更長(zhǎng)的單詞或短語(yǔ)的縮寫(xiě)形式。
可以在 <abbr> 標(biāo)簽中使用全局的 title 屬性，這樣就能夠在鼠標(biāo)指針移動(dòng)到 <abbr> 元素上時(shí)顯示出簡(jiǎn)稱/縮寫(xiě)的完整版本。
實(shí)例
<!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>文字首字母縮寫(xiě)</title>
</head>
<body>
<!-- 鼠標(biāo)放上去觀察顯示效果，后期學(xué)習(xí)圖片img，也有類似效果 -->
<abbr title="鍵盤(pán)敲爛，月薪過(guò)萬(wàn)！">鍵盤(pán)敲爛.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>
在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至縮略詞語(yǔ)上時(shí)，title可用于展示表達(dá)的完整版本。
</p>
<p>僅對(duì)于 IE 5 中的 acronym 元素有效。</p>
<p>對(duì)于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
效果圖
鼠標(biāo)懸浮后：
文字方向 bdo
用法
| 標(biāo)簽 | 描述 |
|---|---|
| bdo | 定義文字方向，bdo 元素可覆蓋默認(rèn)的文本方向 |
屬性
dir
- rtl ：right to left ：文字 右到左 顯示
- ltr ：left to right ：文字 左到右 顯示
實(shí)例
<!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>文字方向</title>
</head>
<body>
<p>
如果您的瀏覽器支持 bi-directional override (bdo)，下一行會(huì)從右向左輸出
(rtl)；
</p>
<!-- right to left ：右到左-->
<bdo dir="rtl"> Here is some Hebrew text </bdo>
<br />
<!-- left to right ：左到右-->
<bdo dir="ltr"> Here is some Hebrew text </bdo>
</body>
</html>
效果圖
地址 address
用法
| 標(biāo)簽 | 描述 |
|---|---|
| address | 定義地址 |
-
<address>標(biāo)簽定義文檔或文章的作者/擁有者的聯(lián)系信息。 - 如果
<address>元素位于<body>元素內(nèi)，則它表示文檔聯(lián)系信息。 - 如果
<address>元素位于<article>元素內(nèi)，則它表示文章的聯(lián)系信息。 -
<address>元素中的文本通常呈現(xiàn)為斜體。大多數(shù)瀏覽器會(huì)在 address 元素前后添加折行。 -
<address>標(biāo)簽不應(yīng)該用于描述通訊地址，除非它是聯(lián)系信息的一部分。 -
<address>元素通常連同其他信息被包含在<footer>元素中。
實(shí)例
<!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>Document</title>
</head>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>
</body>
</html>
效果圖
引用 q
用法
| 標(biāo)簽 | 描述 |
|---|---|
| blockquote | 定義長(zhǎng)的引用 |
| q | 定義短的引用語(yǔ) |
| cite | 定義引用、引證定義引用 |
| dfn | 定義一個(gè)定義項(xiàng)目 |
<blockquote> 標(biāo)簽定義塊引用。
<blockquote> 與 </blockquote> 之間的所有文本都會(huì)從常規(guī)文本中分離出來(lái)，經(jīng)常會(huì)在左、右兩邊進(jìn)行縮進(jìn)（增加外邊距），而且有時(shí)會(huì)使用斜體。也就是說(shuō)，塊引用擁有它們自己的空間。
屬性：cite規(guī)定引用的來(lái)源。
<q> 標(biāo)簽定義短的引用。瀏覽器經(jīng)常在引用的內(nèi)容周圍添加引號(hào)。
<q> 標(biāo)簽在本質(zhì)上與 <blockquote> 是一樣的。不同之處在于它們的顯示和應(yīng)用。<q> 標(biāo)簽用于簡(jiǎn)短的行內(nèi)引用。如果需要從周圍內(nèi)容分離出來(lái)比較長(zhǎng)的部分（通常顯示為縮進(jìn)的塊），請(qǐng)使用 <blockquote> 標(biāo)簽。
可使用cite標(biāo)簽對(duì)參考文獻(xiàn)的引用進(jìn)行定義，比如書(shū)籍或雜志的標(biāo)題。
實(shí)例
<!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>Document</title>
</head>
<body>
<!-- 屬性：cite規(guī)定引用的來(lái)源。 -->
<blockquote cite="www.baidi.com">
這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用，這是長(zhǎng)引用。
</blockquote>
<!-- 短引用，會(huì)添加引號(hào) -->
<p>
世界自然基金會(huì)的目標(biāo)是:
<q>建設(shè)一個(gè)人與自然和諧相處的未來(lái)。</q>
我們希望他們成功。
</p>
<!-- 行標(biāo)簽 -->
<cite>
可使用該標(biāo)簽對(duì)參考文獻(xiàn)的引用進(jìn)行定義，比如書(shū)籍或雜志的標(biāo)題。
</cite>
<!-- 行標(biāo)簽 ，不會(huì)自動(dòng)成為一行-->
<dfn>
定義一個(gè)項(xiàng)目
</dfn>
</body>
</html>
效果圖
路徑
場(chǎng)景：頁(yè)面需要加載圖片、音頻或視頻等，需要先找到對(duì)應(yīng)的媒體文件
類似于：生活中兩個(gè)人，我要去找你，需要通過(guò)一定的路徑才能找到！
同理：頁(yè)面需要找到這些媒體文件，也是需要通過(guò)路徑才能找到的
分類
- 絕對(duì)路徑（了解)
- 相對(duì)路徑（常用)
絕對(duì)路徑
指目錄下的絕對(duì)位置，可直接到達(dá)目標(biāo)位置，通常從盤(pán)符開(kāi)始的路徑。
例如：
盤(pán)符開(kāi)頭：C:\Users\thanks\Desktop\code\images\dog.gif
完整的網(wǎng)絡(luò)地址： https://gitee.com/Thank-ks/general-img/raw/master/202303081658468.png（了解）
相對(duì)路徑
相對(duì)路徑：從當(dāng)前文件開(kāi)始出發(fā)找目標(biāo)文件的過(guò)程。
- 同級(jí)目錄
- 下級(jí)目錄
- 上級(jí)目錄
同級(jí)目錄
當(dāng)前文件和目標(biāo)文件在同一目錄中。
類似于：我（當(dāng)前文件）和你（目標(biāo)文件) 都在大廳（一個(gè)文件夾中)
生活中：兩個(gè)人獨(dú)處一室，我想找你，直接喊名字即可!
代碼步驟：直接寫(xiě)目標(biāo)文件的名字即可
方法一: <img src="目標(biāo)圖片.gif">
方法二: <img src="./目標(biāo)圖片.gif">
vs Code快捷操作：直接敲./后，會(huì)自動(dòng)提示同級(jí)目錄中有哪些文件，直接選擇即可！
<!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>Document</title>
</head>
<body>
<img src="cat.gif" alt="">
<!-- 手動(dòng)打下./，vscode會(huì)進(jìn)行提示顯示 -->
<img src="./cat.gif" alt="">
</body>
</html>
下級(jí)目錄
類似于：我在大廳，你累了去臥室休息了，我現(xiàn)在要找到你！
- 先知道你去了哪一個(gè)房間→房間名：臥室
- 進(jìn)入這個(gè)房間→進(jìn)入
- 此時(shí)又獨(dú)處一室→直接喊你名字
代碼步驟:
- 先知道在哪個(gè)文件夾里面→文件夾名字
- 進(jìn)入這個(gè)文件夾
- 此時(shí)看到目標(biāo)文件直接喊她→直接寫(xiě)目標(biāo)文件名字
Vs Code快捷操作：直接敲./后，會(huì)自動(dòng)提示當(dāng)前目錄下有哪些文件夾，直接一層層選擇即可!
<!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>Document</title>
</head>
<body>
<!-- 先進(jìn)入images文件夾，在找到想要的文件 -->
<img src="images/dog.gif" alt="">
<!-- 可以使用./獲得vscode的提示，./表示當(dāng)前文件目錄 -->
<img src="./images/dog.gif" alt="">
</body>
</html>
上級(jí)目錄
上級(jí)目錄:目標(biāo)文件在上級(jí)目錄中
方法：
<img src="../目標(biāo)圖片.gif">
類似于：乾坤大挪移，我在臥室，你還在大廳，我現(xiàn)在要找到你！
- 先要出臥室，來(lái)到大廳→出去
- 此時(shí)又獨(dú)處一室→直接喊你名字
實(shí)現(xiàn)步驟：
- 先出當(dāng)前文件夾，到上一級(jí)目錄→…/
- 此時(shí)看到目標(biāo)文件直接喊她→直接寫(xiě)目標(biāo)文件
vs Code快捷操作：直接敲…/后，會(huì)自動(dòng)提示上級(jí)目錄下有文件，直接選擇即可!
<!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>Document</title>
</head>
<body>
<img src="../cat.gif" alt="">
<!-- 直接敲../后，會(huì)自動(dòng)提示上級(jí)目錄下有文件，直接選擇即可! -->
<img src="../images/map.jpg" alt="">
</body>
</html>
總結(jié)
- 同級(jí)目錄：直接寫(xiě)：目標(biāo)文件名字!
- 下級(jí)目錄：直接寫(xiě)：文件夾名/目標(biāo)文件名字!
- 上級(jí)目錄:直接下: …/目標(biāo)文件名字!
vscode中的快捷操作
- 同級(jí)和下級(jí)目錄: ./之后選擇即可。 ./就是當(dāng)前路徑的意思，可寫(xiě)可不寫(xiě)！
- 上級(jí)目錄: …/之后選擇即可
- 上上級(jí)目錄: …/…/之后選擇即可 （返回上級(jí)幾個(gè)級(jí)別就用幾個(gè)…/）
圖片 img
上面在學(xué)習(xí)路徑的時(shí)候，經(jīng)常出現(xiàn)的img其實(shí)就是用于展示圖片的標(biāo)簽。
- img是一個(gè)單標(biāo)簽
- img標(biāo)簽需要展示對(duì)應(yīng)的效果，需要借助標(biāo)簽的屬性進(jìn)行設(shè)置！
- 標(biāo)簽的屬性寫(xiě)在開(kāi)始標(biāo)簽內(nèi)部
- 標(biāo)簽上可以同時(shí)存在多個(gè)屬性
- 屬性之間以空格隔開(kāi)
- 標(biāo)簽名與屬性之間必須以空格隔開(kāi)
- 屬性之間沒(méi)有順序之分
src屬性
目標(biāo)圖片的路徑，上述已做詳細(xì)介紹。
alt屬性
用于替換文本
- 當(dāng)圖片加載失敗時(shí)，才顯示alt的文本
- 當(dāng)圖片加載成功時(shí)，不會(huì)顯示alt的文本
title屬性
提示文本，當(dāng)鼠標(biāo)懸停時(shí)，才顯示的文本
主意點(diǎn)：title屬性不僅僅可以用于圖片標(biāo)簽，還可以用于其他標(biāo)簽
width和height屬性
寬度和高度（數(shù)字）
如果只設(shè)置width或height中的一個(gè)，另一個(gè)沒(méi)設(shè)置的會(huì)自動(dòng)等比例縮放（此時(shí)圖片不會(huì)變形)
如果同時(shí)設(shè)置了width和height兩個(gè)，若設(shè)置不當(dāng)此時(shí)圖片可能會(huì)變形（失真）
<!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>Document</title>
</head>
<body>
<!-- alt : 替換文本, 當(dāng)圖片不顯示的時(shí)候顯示的文字 -->
<!-- width和height屬性只需要給出一個(gè)值, 另一個(gè)等比例縮放 -- 好處就是圖片不變形 -->
<!-- 屬性可以多個(gè)，空格隔開(kāi)，無(wú)順序 -->
<!-- ./表示當(dāng)前路徑，可寫(xiě)可不寫(xiě)，直接寫(xiě)路徑就行，直接敲./后，會(huì)自動(dòng)提示 -->
<img src="./cat.gif" alt="這是一只貓" title="這是title文字, 鼠標(biāo)懸停的時(shí)候顯示，圖片變形了" width="200" height="800">
<img src="cat.gif" alt="這是一只貓" title="這是title文字, 鼠標(biāo)懸停的時(shí)候顯示，圖片沒(méi)變形" width="200" >
</body>
</html>
音頻audio
| src | 音頻的路徑 |
|---|---|
| controls | 顯示播放的控件（必要屬性） |
| autoplay | 自動(dòng)播放（部分瀏覽器不支持) |
| loop | 循環(huán)播放 |
HTML5的<audio>標(biāo)簽支持多種音頻格式，包括：
- MP3（MPEG 音頻層3），是一種廣泛使用的音頻格式，支持壓縮音頻數(shù)據(jù)以減小文件大小。
- WAV（Waveform Audio File Format），是一種無(wú)損的音頻格式，通常用于音頻錄制和編輯。
- OGG（Ogg Vorbis），是一種開(kāi)放、免費(fèi)、無(wú)損和無(wú)版權(quán)的音頻格式，使用了一種高效的壓縮算法。
- AAC（Advanced Audio Coding），是一種高級(jí)音頻編碼格式，通常用于音樂(lè)和視頻文件中。
- FLAC（Free Lossless Audio Codec），是一種無(wú)損的音頻格式，可以壓縮音頻數(shù)據(jù)而不損失任何信息。
需要注意的是，不同瀏覽器和操作系統(tǒng)的<audio>標(biāo)簽支持的音頻格式可能有所不同。因此，在實(shí)際應(yīng)用中，需要測(cè)試和確定所要支持的音頻格式。
<!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>Document</title>
</head>
<body>
<!--
src：音頻的路徑
controls：顯示播放的控件
autoplay：自動(dòng)播放（部分瀏覽器不支持)
loop：循環(huán)播放 -->
<audio src="./music.mp3" controls autoplay loop></audio>
</body>
</html>
視頻video
| src | 視頻的路徑 |
|---|---|
| controls | 顯示播放的控件（必要屬性） |
| autoplay | 自動(dòng)播放（谷歌瀏覽器中需配合muted實(shí)現(xiàn)靜音播放)) |
| loop | 循環(huán)播放 |
HTML5的<video>標(biāo)簽支持多種視頻格式，包括：
HTML5的<video>標(biāo)簽支持多種視頻格式，包括：
- MP4（MPEG-4 Part 14），是一種廣泛使用的視頻格式，支持壓縮視頻數(shù)據(jù)以減小文件大小。
- WebM，是一種開(kāi)放、免費(fèi)、無(wú)損和無(wú)版權(quán)的視頻格式，使用了一種高效的壓縮算法。
- Ogg（Ogg Theora），是一種開(kāi)放、免費(fèi)、無(wú)損和無(wú)版權(quán)的視頻格式，使用了一種高效的壓縮算法。
需要注意的是，不同瀏覽器和操作系統(tǒng)的<video>標(biāo)簽支持的視頻格式可能有所不同。因此，在實(shí)際應(yīng)用中，需要測(cè)試和確定所要支持的視頻格式。此外，還可以通過(guò)在<video>標(biāo)簽中指定多個(gè)視頻源，以兼容不同的瀏覽器和操作系統(tǒng)。例如：
<video controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
在這個(gè)例子中，<video>標(biāo)簽包含了三個(gè)<source>子元素，分別指定了MP4、WebM和Ogg格式的視頻源。如果瀏覽器支持其中任何一種格式，就會(huì)自動(dòng)播放該格式的視頻。如果瀏覽器都不支持這些格式，就會(huì)顯示后備內(nèi)容 “Your browser does not support the video tag.”。
<!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>Document</title>
</head>
<body>
<!-- 谷歌瀏覽器可以讓視頻自動(dòng)播放, 但是必須是靜音狀態(tài)muted -->
<!-- 如果不加 靜音狀態(tài)muted 不會(huì)自動(dòng)播放-->
<video src="./video.mp4" controls autoplay muted loop></video>
</body>
</html>
超鏈接a
場(chǎng)景：點(diǎn)擊之后，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面
稱呼：a標(biāo)簽、超鏈接、錨鏈接
代碼：
<a href="./目標(biāo)網(wǎng)頁(yè).html">超鏈接</a>
特點(diǎn):
- 雙標(biāo)簽，內(nèi)部可以包裹內(nèi)容
- 如果需要a標(biāo)簽點(diǎn)擊之后去指定頁(yè)面，需要設(shè)置a標(biāo)簽的href屬性
href屬性
屬性值：href
屬性值：點(diǎn)擊之后跳轉(zhuǎn)去哪一個(gè)網(wǎng)頁(yè)（目標(biāo)網(wǎng)頁(yè)的路徑)
外部鏈接：
<a href="https ://www.baidu.com/">百度一下</a>
內(nèi)部鏈接：
<a href="./目標(biāo)網(wǎng)頁(yè).html">目標(biāo)網(wǎng)頁(yè)</a>
開(kāi)發(fā)中不確定該鏈接最終跳轉(zhuǎn)位置，用空鏈接(#)占個(gè)位置
顯示特點(diǎn)
a標(biāo)簽?zāi)J(rèn)文字有下劃線
a標(biāo)簽從未點(diǎn)擊過(guò)，默認(rèn)文字顯示藍(lán)色
a標(biāo)簽點(diǎn)擊時(shí)，默認(rèn)文字顯示紅色
a標(biāo)簽點(diǎn)擊過(guò)之后，文字顯示為紫色（清除瀏覽器歷史記錄可恢復(fù)藍(lán)色)
顏色不重要，后期CSS美化?。。?/p>
target屬性
屬性名：target
屬性值：目標(biāo)網(wǎng)頁(yè)的打開(kāi)形式
| 取值 | 效果 |
|---|---|
| _self | 默認(rèn)值，在當(dāng)前窗口中跳轉(zhuǎn)（覆蓋原網(wǎng)頁(yè)) |
| _blank | 在新窗口中跳轉(zhuǎn)（保留原網(wǎng)頁(yè)) |
空鏈接
<a href="#">空鏈接</a>
- 點(diǎn)擊之后回到網(wǎng)頁(yè)頂部
- 開(kāi)發(fā)中不確定該鏈接最終跳轉(zhuǎn)位置，用空鏈接占個(gè)位置
<!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>Document</title>
</head>
<body>
<!-- href : 跳轉(zhuǎn)地址 ；_blank：新窗口打開(kāi) ， 默認(rèn)自身打開(kāi)：_self-->
<a href="https://www.baidu.com/" target="_blank" name="top1">跳轉(zhuǎn)到百度</a>
<a href="" id="top2"></a>
<br>
<a href="./01-標(biāo)題標(biāo)簽.html/">點(diǎn)我呀, 點(diǎn)了就去01-標(biāo)題標(biāo)簽</a>
<!-- 當(dāng)開(kāi)發(fā)網(wǎng)站初期, 我們還不知道跳轉(zhuǎn)地址的時(shí)候, href的值書(shū)寫(xiě)#(空鏈接) -->
<br>
<a href="#">空鏈接, 不知道跳到哪里去</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 拋錨跳轉(zhuǎn)：回到網(wǎng)頁(yè)頂部。后面用js實(shí)現(xiàn)更方便，這個(gè)還是有一定的局限性，不能返回最頂端！ -->
<a href="#top1">點(diǎn)我回到頂部</a>
<a href="#top2">我也可以回到頂部</a>
</body>
</html>
基本的注意事項(xiàng)
注釋：請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書(shū)寫(xiě)鏈接：href=“http://www.thanks.com.cn/html”，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：href=“http://www.thanks.com.cn/html/”。
提示：命名錨經(jīng)常用于在大型文檔開(kāi)始位置上創(chuàng)建目錄?？梢詾槊總€(gè)章節(jié)賦予一個(gè)命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問(wèn)百度百科，您會(huì)發(fā)現(xiàn)其中幾乎每個(gè)詞條都采用這樣的導(dǎo)航方式。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-736920.html
提示：假如瀏覽器找不到已定義的命名錨，那么就會(huì)定位到文檔的頂端。不會(huì)有錯(cuò)誤發(fā)生。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-736920.html
到了這里，關(guān)于02——HTML基礎(chǔ)標(biāo)簽學(xué)習(xí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
