這些常用的HTML標簽，你還不知道嗎？

著互聯(lián)網(wǎng)的不斷發(fā)展與前端開發(fā)技術(shù)的不斷進步，越來越多的人想在前端開發(fā)市場中分一杯羹，而HTML語言憑著它簡單易懂的特性成為了不少計算機萌新的入門語言。那么什么是HTML呢？

什么是HTML

HTML，即超文本標記語言，是一種標識性的語言。它包括一系列標簽，通過這些標簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

使用HTML語言，將所需要表達的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現(xiàn)在所見到的網(wǎng)頁。而HTML標簽是HTML語言中最基本的單位，是HTML最重要的組成部分。

什么是HTML標簽

HTML標簽是由一對尖括號括起來的關(guān)鍵詞，像<html>、<body>等。
HTML標簽通常是成對出現(xiàn)的，第一個標簽是開始標簽，第二個標簽是結(jié)束標簽。
標簽不區(qū)分大小寫，最好用小寫。
標簽可以嵌套，但是不可以交叉嵌套，如<a><b></a></b>。
有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉合標簽.如<br/> <hr/> <img />等。

標簽分類

標簽一般分為兩種：

1. 塊級標簽

占一整行的標簽。如<h>、<p>、<div>、<form>等

2. 行內(nèi)標簽

可以多個標簽共同占用一行的標簽。比如：<span>,<a>,<input>,<img>,<label>等

3. 塊級標簽特點

總是在新行上開始
寬度缺省是它的容器的100%，除非設(shè)定一個寬度
它可以容納內(nèi)聯(lián)元素和其他塊元素

4. 行內(nèi)標簽特點

和其他元素都在一行上
寬度就是它的文字或圖片的寬度，不可改變
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

HTML特殊字符

平時寫代碼很少用到HTML的特殊字符，最常用的可能是（空格）了，但有時在移動端為了節(jié)省時間，可能會用這些字符實現(xiàn)某種特殊效果。

使用方法：

這些字符屬于unicode字符集，所以，你的文檔需要聲明為UTF-8；
編號用在HTML中時，需要在前面加上&#符號；
用于CSS文件中，但是需要用反斜杠\轉(zhuǎn)義；
用于JavaScript，和CSS用法一樣，不過要用\u來轉(zhuǎn)義。

常用HTML特殊字符

HTML基本標簽簡介

<!DOCTYPE html>標簽

作用：聲明文檔的解析類型(document .compatMode)，避免瀏覽器的怪異模式。

瀏覽器有怪異模式（BackCompat）和標準模式（CSS1Compat）兩種模式，那么何為怪異模式和標準模式呢？

BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。

CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,，如果是這樣的話那就很麻煩了-------瀏覽器按照自己的方式解析渲染頁面，即在不同的瀏覽器顯示不同的樣式。

但是如果你的頁面添加了<!DOCTYPE html>，那么就等同于開啟了標準模式，瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的作用。

<meta>標簽

http-equiv屬性

顧名思義，相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值。

頁面編碼：

頁面刷新和跳轉(zhuǎn)

解決IE瀏覽器兼容性問題

name屬性

name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。

供搜索引擎使用（關(guān)鍵詞）

網(wǎng)站信息描述

<title>標簽

title標簽寫網(wǎng)站頭部信息，即網(wǎng)頁標簽的名稱：

<title>開云見日</title>

<link>標簽

link標簽有兩個作用：

1.設(shè)置標簽頁圖標：

2.外聯(lián)CSS文件：

<style>標簽

用于存放或編寫css文件：

<style type="text/css"></style>

<script>標簽

1.引進文件

<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>

2.寫js代碼

<script type="text/javascript">...</script>

常用標簽

<hn>：n的取值范圍是1~6; 從大到小. 用來表示標題.
<p>：段落標簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.
<b> <strong>：加粗標簽.
<strike>：為文字加上一條中線.
<em>：文字變成斜體.
<sup>和<sub>：上角標和下角表.
<br>：換行.
<hr>：水平線
<div>：白板，本身沒有特性，塊級標簽。
<span>：白板，本身沒有特性，行內(nèi)標簽。

<sup>和<sub>的使用

<p>這個文本包含 <sub>下標</sub>文本。</p>

<p>這個文本包含 <sup>上標</sup> 文本。</p>

<a>標簽

作超鏈接：跳轉(zhuǎn)到指定url

作錨點：條轉(zhuǎn)到指定id

<img>標簽

屬性如下：

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放

HTML還有很多標簽，像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移動應(yīng)用開發(fā)大潮下，使用web技術(shù)進行移動應(yīng)用開發(fā)正變得越來越流行，慢慢會變成以HTML為核心的技術(shù)棧配合數(shù)據(jù)庫的天下。讓我們找準時代發(fā)展方向，努力學習，成為時代的弄潮兒吧!

、abbr

abbr 全稱是 abbreviations，意思是縮寫。應(yīng)用場景也很簡單，為一些文章中的縮寫增加注釋。

以前在文章中對于縮寫的解釋經(jīng)常會這么做：

DAU（Daily Active User），日活躍用戶數(shù) ......

那我們用 abbr 標簽?zāi)兀?/span>

<abbr title="Daily Active User">
    DAU
</abbr>
<span>，日活躍用戶數(shù) ......</span>

展示的效果如下：

這個標簽就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思，這個在 markdown 里經(jīng)常會出現(xiàn)。

二、mark

<mark/> 在 markdown 中也是很常用的，用于將包裹的文本高亮展示。

<mark>高亮文本</mark>

效果如下：

如果全文統(tǒng)一高亮樣式，可以專門對 mark 標簽進行樣式重置，這樣就不用對你用的每個 div 加一個 highlight 的類名了，又不語義化，又徒增文檔大小。

三、sup、sub

<sup/>和<sub/>分別表示上標和下標，在 markdown 中出現(xiàn)得也很頻繁，比如數(shù)學公式和引用。

<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>

效果如下：

上標和下標的樣式原理也比較簡單，主要就是利用了 vertical-align 的 top 和 sub 屬性值，然后將字號縮小，不過有現(xiàn)成的標簽，干嘛不用呢？

四、figure

figure 是用于包裹其它標簽的內(nèi)容的，然后再利用另一個標簽 figcaption ，可以對包裹的內(nèi)容進行一個文本描述，例如：

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="大象">
    <figcaption>這是一張大象的照片</figcaption>
</figure>

效果如下：

那要是圖片掛了呢？

再友好點處理，我們把 img 標簽的 alt 屬性去掉。

漂亮，終于把我一直厭煩的圖裂 icon 給干掉了，樣式還巨好看。

當然不止能包裹 img 標簽，其它任何都是可以的。

嘿嘿，給大家在本文來個實戰(zhàn)，下面這個可以點擊，樣式也是利用了 figure 這個標簽。

我是figure標簽產(chǎn)生的

五、progress

說到 <progress/> 這個標簽就很有意思了，去年有段時間我做的業(yè)務(wù)里涉及到了進度條，當時是前同事做的，然后有一些性能問題，我就在研究如何優(yōu)化，減少進度條改變帶來的性能問題。

雖然最后問題是解決了，但是也有幸收到了張鑫旭大佬的評論，他告訴我 progress 這個標簽就足夠了，既有語義化，又有進度條的功能，性能還好，兼容性也很不錯。后來經(jīng)過一番嘗試，還真是，當時是我孤陋寡聞了，也安利給大家。

<!-- 進度條最大值為100，當前進度為60，即60% -->
<progress max="100" value="60"/>

瀏覽器自帶的樣式就已經(jīng)很好看了，效果如下：

業(yè)務(wù)中我們也就可以通過控制 value 屬性，來改變進度條的進度了。

六、area

area 這個標簽也非常有意思，它的作用是為圖片提供點擊熱區(qū)，可以自己規(guī)定一張圖的哪些區(qū)域可點擊，且點擊后跳轉(zhuǎn)的鏈接，也可以設(shè)置成點擊下載文件，我們來舉個例子：

  <img src="example.png" width="100" height="100" alt="" usemap="#map">

  <map name="map">
    <area shape="rect" coords="0,0,100,50" alt="baidu" href="https://www.baidu.com">
    <area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">
  </map>

area 一般要搭配 map 標簽一起使用，每個 area 標簽表示一個熱區(qū)，例如上面代碼中，我們定義了兩個熱區(qū)，熱區(qū)形狀都為rect（矩形），他們的熱區(qū)分別是：

坐標 (0,0) 到坐標 (100,50) 的一個矩形
坐標 (0,50) 到坐標 (100,100) 的一個矩形

我們都知道，默認的坐標軸是這樣的：

因此，我們劃分的兩個熱區(qū)就是:

最后再來看一下我們的實際效果：

七、details

details 字面意思是 "詳情"，在 markdown 里也經(jīng)常用，用該標簽包裹了的內(nèi)容默認會被隱藏，只留下一個簡述的文字，我們點擊以后才會展示詳細的內(nèi)容。

<details>
  <p>我是一段被隱藏的內(nèi)容</p>
</details>

效果如下：

這還沒有加任何一行的 js 代碼，我們點擊后，details 標簽上會多一個 open 的屬性，被隱藏的內(nèi)容就展示出來了。

默認情況下，簡要文字為 "詳情"，想要修改這個文字，要搭配 summary 標簽來使用。

<details>
  <summary>點擊查看更多</summary>
  <p>我是一段被隱藏的內(nèi)容</p>
</details>

就搞定了！

八、dialog

瀏覽器自帶彈窗方法 alert、confirm、prompt，樣式固定且每個瀏覽器不同，同時還會阻塞頁面運行，除了這個還提供了一個 dialog 標簽，它的使用方式有點類似于現(xiàn)在各大組件庫的 Modal 組件了，瀏覽器還為該標簽提供了原生的 dom 方法：showModal、close，可以直接控制彈窗的展示和隱藏。

<dialog id="dialog">
    <input type="text">
    <button id="close">ok</button>
</dialog>
<button id="openBtn">打開彈框</button>

<script>
    const dialog = document.getElementById('dialog')
    const openBtn = document.getElementById('openBtn')
    const closeBtn = document.getElementById('close')
  
    openBtn.addEventListener('click', () => {
        // 打開彈框
        dialog.showModal()
    })
    closeBtn.addEventListener('click', () => {
        // 隱藏彈框
        dialog.close()
    })
</script>

效果如下：

細心的你有沒有發(fā)現(xiàn)，這原生的彈框還自帶背景蒙層，點擊是關(guān)閉不掉的，但起碼它不會阻塞頁面。

然后我們在彈窗展示時，也可以通過 esc 鍵來關(guān)閉彈窗。

九、datalist

datalist 是用于給輸入框提供可選值的一個列表標簽，類似咱們常用的 Select 組件。

我可以用其實現(xiàn)一個 "輸入聯(lián)想" 的功能。

<label> 輸入C開頭的英文單詞：</label>
<input list="c_words"/>

<datalist id="c_words">
  <option value="China">
  <option value="Click">
  <option value="Close">
  <option value="Const">
  <option value="Count">
</datalist>

來試一試：

剛點擊時會把所有推薦的選項都列出來，然后根據(jù)后面輸入的內(nèi)容，會過濾掉不匹配的選項，比如我輸入 cl，會過濾掉不是 cl 開頭的單詞，最后只剩下 Click 和 Close 了。

最后我發(fā)現(xiàn)，他這個下拉框有點好看啊？為啥這原生的 input 框默認樣式那么丑，啥時候改改。

十、fieldset

fieldset 標簽是用于分組管理 form 表單內(nèi)的元素的，若 fieldset 設(shè)置了 disabled 屬性，則被其包裹的所有表單元素都會被禁用置灰，且不會隨著表單一起提交上去，是的就成了擺設(shè)。

什么意思呢？看個例子：

<form action="/example">
  <fieldset disabled>
    <legend>被禁用區(qū)域</legend>
    <label>ID：</label>
    <input type="text" name="id" value="1">
    <label>郵箱：</label>
    <input type="text" name="email" value="1234567@163.com">
  </fieldset>
  <label>名字：</label>
  <input type="text" name="name">
  <button type="submit">提交</button>
</form>

這里我們把 ID 和郵箱的表單包裹了起來，且設(shè)置了 disabled，只開放了一個 name 的輸入控件，此時界面如下：

可以看到除了 name 輸入框，其它的兩個輸入框都被禁用了，此時點提交會是什么樣子呢？

嗯，只提交了 name 字段。

十一、noscript

這個標簽是在瀏覽器不支持或禁用了 javascript 時才展示的，大多用于對 js 強依賴的應(yīng)用，比如現(xiàn)在大部分的 SPA 頁面，一旦不支持 javascript，頁面基本上什么內(nèi)容都沒了，此時可以靠這個標簽做友好提示。

一般我們不需要特地去使用，大多都是在打包過程中自動插入到 html 靜態(tài)文件里去的，例如：

// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '點擊出彈窗'
root.appendChild(button)

<!-- index.html -->
<script defer src="./init.js"></script>

<noscript>
  不好意思，你的瀏覽器不支持或禁用了 JavaScript，請更換瀏覽器或啟用 JavaScript
</noscript>

<div id="root"></div>

未禁用 javascript 時，頁面是這樣的：

禁用了 javascript 時，是這樣的：

.標簽語義化

提到標簽，很多剛?cè)腴T前端開發(fā)的人，肯定都會很納悶，這么多HTML標簽我如何記住呢？我又應(yīng)該根據(jù)什么依據(jù)去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學習Web頁面開發(fā)的過程中，然后不斷的積累，不斷的總結(jié)，發(fā)現(xiàn)要想記住HTML標簽以及怎樣更好的去使用這些標簽，需要做到以下三點：

第一點：不要死記硬背，沒意義，只需要記住常用的哪幾個足矣。

第二點：根據(jù)內(nèi)容選擇使用HTML標簽，什么意思呢？見下文分解。

第三點：遵循W3C的規(guī)范。

首先，第一點咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標簽了，而且在開發(fā)頁面的過程中，你們會發(fā)現(xiàn)，咱們最常用的也就是那么幾個而已。

其次，第二點根據(jù)內(nèi)容選擇使用HTML標簽，這一點非常關(guān)鍵，因為你掌握了這一點，你能很好地去使用HTML標簽，并且能讓頁面變得很優(yōu)質(zhì)，這也會提高你網(wǎng)頁被搜索引擎收錄。

最后，也就是第三點，這一點自然不用懷疑，如果要想讓頁面更好的在不同的瀏覽器中呈現(xiàn)出一致的效果，那么必須遵循W3C的規(guī)范。

說了這么多，只是一些學習需要注意的問題，下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。

我們在使用標簽的過程中，大家會發(fā)現(xiàn)類似的標簽，比如標題標簽（h1-h6）、p（段落標簽）、a（超鏈接標簽）以及圖片標簽（img）等，通過這些標簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些標簽該怎么，用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來，移動Web都是通過H5去開發(fā)頁面，而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。

那么什么是標簽語義化呢？所謂的標簽語義化，指的就是標簽所代表的含義。咱們可以通過標簽的含義，正確地去使用它。

標簽語義化的作用：

通過使用語義化標簽，更能精準地將其把內(nèi)容呈現(xiàn)出來。
通過使用語義化標簽，讓頁面結(jié)構(gòu)更加的清晰，方便代碼的閱讀和維護。
能讓瀏覽器或網(wǎng)絡(luò)爬蟲更好地解析，從而更好地分析和抓取網(wǎng)頁中的內(nèi)容。
使用語義化標簽還能讓搜索引擎得到更好的優(yōu)化。

如下圖所示，通過使用語義化標簽和沒使用任何標簽，就能直觀感受到語義化標簽的好處。

普通的文本和使用語義化標簽后的效果對比圖

那么如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當我們把CSS去掉后，如果頁面中的結(jié)構(gòu)依然組織有序，并且有良好的可讀性，那么它就是非常良好的。

如何去使用這些標簽?zāi)兀渴紫雀鶕?jù)內(nèi)容確定語義化的標簽，其次再根據(jù)呈現(xiàn)需求，使用CSS樣式。因此HTML標簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標簽的語義化去記憶。如下圖所示，通過使用語義化標簽，瞬間就能把普通的文本，以更清晰的結(jié)構(gòu)呈現(xiàn)出來。

使用語義化的普通文本，變得更為結(jié)構(gòu)清晰

2.常用標簽分類匯總

通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽，這些標簽又被統(tǒng)稱為排版標簽。

在開發(fā)中，排版標簽主要是和CSS搭配使用，主要是用于顯示網(wǎng)頁的整體結(jié)構(gòu)，也是網(wǎng)頁布局中常用的標簽。下面我一一了解一下。

排版標簽：

【1】標題標簽（h1-h6）

縮寫來源：標題標簽的英文單詞是head，因此它使用它的縮寫h來表示。
語義：標題標簽主要是用于突顯標題內(nèi)容，它是h1-h6（分為1級標題、2級標題、3級標題......6級標題），級別依次遞減。級別越小，標題就會越小。
語法格式如下：

標題標簽的使用

呈現(xiàn)的效果如下：

呈現(xiàn)的效果

一句話總結(jié)：使用了標題標簽的文字會加粗，會根據(jù)級別顯示文字的大小，并且一行只能放一個標題。

【2】段落標簽（p）

縮寫來源：p標簽的英文單詞是paragraph，表示段落的意思。
語義：p標簽可以把html文檔分割為若干段落。在網(wǎng)頁中要想把文字以段落的形式呈現(xiàn)，并且有條不紊的，那么段落就是必備的標簽。
語法格式如下：

p標簽語法格式

【3】水平線標簽（hr）

縮寫來源：hr的英文單詞是horizontal，表示橫線的意思。
語義：它表示分隔線，用于將文字內(nèi)容分隔開，讓文檔結(jié)構(gòu)看起來更加清晰，層次分明。當然在網(wǎng)頁中除了使用分隔線（hr）標簽來實現(xiàn)，還可以通過圖片插入以及CSS樣式來實現(xiàn)，只不過使用hr標簽是最簡單的方式。提示：CSS樣式是頁面中的重點，此處主要是介紹HTML，因此暫不做詳細說明。
語法格式：<hr />。
標簽特點：它是一個單標簽，hr標簽?zāi)J是以水平線的樣式進行顯示。

【4】換行標簽（br）

縮寫來源：br的英文單詞是break，打斷、換行的意思。
語義：表示換行的意思。在html中，一個段落的文字會從左到右依次排列顯示，直到瀏覽器窗口的最右端，才會自動換行。如果我們在實際開發(fā)中碰到需要將文本內(nèi)容強制換行顯示的，此時就可以使用換行標簽實現(xiàn)。
語法格式：<br />。
標簽特點：它也是一個單標簽。
示例：將以下內(nèi)容通過br標簽強制換行

文本

呈現(xiàn)效果：

使用br標簽后的效果

【5】div和span標簽

縮寫來源：div的英文是division，表示分割、分區(qū)的意思。span沒有縮寫，表示跨度、跨距和范圍的意思。
語義：div和span標簽，沒有任何語言，主要是用于網(wǎng)頁布局使用。
語法格式：<div>這是一個div盒子</div> <span>這是一個span盒子</span>
div和span的區(qū)別：div標簽，主要是用于布局，在沒有使用其它干預的情況下，一行只能放一個div。而span標簽，也是用來布局，在沒有任何其它的干預的情況下，一行上可以放很多span標簽。此處的效果，大家可以根據(jù)語法，自行在實現(xiàn)查看一下對比效果。

最后給大家來一個完美的總結(jié)：

排版標簽的匯總

難道這就完了嗎？咱們的標簽就只有這些常用的嗎？那當然不是，咱們接下來再看我們的文本格式化標簽。

文本格式化標簽

文本格式化標簽的作用：通常文本格式化標簽主要用于網(wǎng)頁中文字樣式的設(shè)置，比如字體加粗、斜體或下劃線等效果，當然后期也會通過CSS樣式來實現(xiàn)，會更加完美。

常見的文本格式化標簽如下：

文本格式化標簽

它們分別的區(qū)別：

b和strong：b標簽只是加粗，strong除了加粗，還具有強調(diào)的意思，更具語義化。
i和em：i只是讓文本顯示斜體的效果，而em在斜體的效果上加強了語義。
s和del：s只是讓文本顯示刪除線，而得了不僅顯示刪除線，還加強了語義。
u和ins：u只是添加了下劃線，而ins不僅顯示了下劃線，還加強了語義。

我么網(wǎng)頁中除了排版標簽、文本格式化標簽，當然還少不了圖片標簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。

圖片標簽（img）

縮寫來源：img的英文單詞是image，表示圖像、影像的意思。
語義：用于顯示圖片內(nèi)容。
語法格式：<img src='圖像url' />，在這個的語法中，我們發(fā)現(xiàn)img標簽使用了src屬性，這個屬性主要是用于指定圖像的文件路徑，也是img的必須屬性。
img標簽常見屬性如下所示：

img標簽屬性

標簽特點：img標簽主要是用于在網(wǎng)頁中插入圖像，它是一個單標簽。
知識點擴展：通過img標簽，我們會發(fā)現(xiàn)，html標簽除了自身外，它們還具有一些屬性，這些屬性，我們稱為標簽屬性，通過標簽屬性可以設(shè)置標簽的一些外在特性。標簽屬性的基本語法格式：<標簽名屬性1="值1" 屬性2="值2" ...>內(nèi)容 </標簽名>。

標簽屬性的特點：

一個標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
任何標簽的屬性都有默認值，省略該屬性則使用默認值。
標簽的屬性采用的是鍵值對的格式key="value"的形式。

圖片標簽屬性使用

鏈接標簽

縮寫來源：a標簽的英文單詞是anchor，表示錨、鐵錨的意思。
語義：表示超文本鏈接。
語法格式：<a href ="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>。
常見的屬性：

a標簽的常見屬性

提示：

比如添加作為外部鏈接，需要添加外部地址。
內(nèi)部鏈接，就是頁面直接內(nèi)部相互鏈接，因此只需要使用名稱即可，比如

內(nèi)部鏈接地址

如果沒有確定鏈接目標，通常使用"#"表示暫時空鏈接。
除了可以創(chuàng)建文本鏈接，還可以給網(wǎng)頁中的元素，如圖像、表格、音頻、視頻都可以添加超鏈接。

注釋標簽

注釋標簽：用于在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的文字說明，此時就需要使用注釋標簽。它是HTML中的一種特殊標簽，它不會在瀏覽器中顯示，但是會在源代碼中查看到。
語法格式：

注釋標簽

提示：注釋通常是給咱們開發(fā)者看的，程序是不會執(zhí)行這個代碼的。

好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結(jié)的內(nèi)容，能幫到正在瀏覽我這篇內(nèi)容的前端開發(fā)者，也希望你們有所收獲。如果喜歡的，可以點擊關(guān)注，會繼續(xù)給大家分享更多的內(nèi)容。

在線咨詢

上一篇：肖sir_html之基本使用（1）
下一篇：「HTML4」HTML入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

這些常用的HTML標簽，你還不知道嗎？

什么是HTML

什么是HTML標簽

標簽分類

HTML特殊字符

HTML基本標簽簡介

<sup>和<sub>的使用

、abbr

二、mark

三、sup、sub

四、figure

五、progress

六、area

七、details

八、dialog

九、datalist

十、fieldset

十一、noscript

您的項目需求