在網(wǎng)頁開發(fā)中，我們需要掌握的常用HTML標(biāo)簽有哪些？

果想開發(fā)一個網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標(biāo)簽。

這個標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個標(biāo)簽的內(nèi)部。

<html>

</html>

三、雙標(biāo)簽和單標(biāo)簽。

在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個的，如：<hr>橫線標(biāo)簽。

四、head頭部標(biāo)簽。

head頭部有以下幾種常用標(biāo)簽：

meta：主要提供有關(guān)頁面的元信息。

link：用來定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。

title：頁面標(biāo)題的標(biāo)簽。

script：用來調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。

五、body主體標(biāo)簽。

1、塊級標(biāo)簽。

塊級標(biāo)簽的特性是：獨自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(shè)置寬與高時，默認(rèn)繼承父標(biāo)簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽與塊級標(biāo)簽不同，它不能獨自占有一行，會與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級標(biāo)簽。

內(nèi)聯(lián)塊級標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級標(biāo)簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標(biāo)簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級標(biāo)簽有：img、input、textarea。

4、區(qū)域標(biāo)簽。

所謂區(qū)域標(biāo)簽，就是主要用來劃分布局頁面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨立內(nèi)容）。

5、表單標(biāo)簽。

這個表單標(biāo)簽我們也是會經(jīng)常用到的，如：登錄網(wǎng)站的時候、提交數(shù)據(jù)的時候。如下圖的評論表單：

?表單常用的標(biāo)簽有：form、input、select、option、textarea 。

以上就是我們開發(fā)網(wǎng)頁時，會常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。

、abbr

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

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

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

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

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

展示的效果如下：

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

二、mark

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

<mark>高亮文本</mark>

效果如下：

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

三、sup、sub

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

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

效果如下：

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

四、figure

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

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

效果如下：

那要是圖片掛了呢？

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

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

當(dāng)然不止能包裹 img 標(biāo)簽，其它任何都是可以的。

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

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

五、progress

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

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

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

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

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

六、area

area 這個標(biāo)簽也非常有意思，它的作用是為圖片提供點擊熱區(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 標(biāo)簽一起使用，每個 area 標(biāo)簽表示一個熱區(qū)，例如上面代碼中，我們定義了兩個熱區(qū)，熱區(qū)形狀都為rect（矩形），他們的熱區(qū)分別是：

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

我們都知道，默認(rèn)的坐標(biāo)軸是這樣的：

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

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

七、details

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

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

效果如下：

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

默認(rèn)情況下，簡要文字為 "詳情"，想要修改這個文字，要搭配 summary 標(biāo)簽來使用。

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

就搞定了！

八、dialog

瀏覽器自帶彈窗方法 alert、confirm、prompt，樣式固定且每個瀏覽器不同，同時還會阻塞頁面運行，除了這個還提供了一個 dialog 標(biāo)簽，它的使用方式有點類似于現(xiàn)在各大組件庫的 Modal 組件了，瀏覽器還為該標(biāo)簽提供了原生的 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 是用于給輸入框提供可選值的一個列表標(biāo)簽，類似咱們常用的 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 框默認(rèn)樣式那么丑，啥時候改改。

十、fieldset

fieldset 標(biāo)簽是用于分組管理 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

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

一般我們不需要特地去使用，大多都是在打包過程中自動插入到 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 時，是這樣的：

家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標(biāo)簽（組件），通過這些標(biāo)簽避免你在項目中集成復(fù)雜第三方組件，比如日歷組件、顏色選擇、進度條等...，簡單的標(biāo)簽就能很方便的調(diào)用系統(tǒng)組件。

一、顏色選擇組件（Color Picker）

在項目中，你可能希望通過調(diào)色板組件動態(tài)調(diào)整顏色，這時你可以使用 <input type="color"> 就可以輕松調(diào)用一個調(diào)色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標(biāo)簽（Blockquote）

在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進行強調(diào)，這時你可以使用<blockquote> 標(biāo)簽來強調(diào)你用的內(nèi)容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個音頻播放器是一個費時費力又有挑戰(zhàn)性的工作，但是你現(xiàn)在可以使用<audio>標(biāo)簽就能很輕松的調(diào)用。系統(tǒng)的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調(diào)用系統(tǒng)的音頻組件，我們還可以使用<video> 標(biāo)簽調(diào)用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點擊標(biāo)題展開對應(yīng)的信息內(nèi)容，這時 <details> 標(biāo)簽就派上用場了，示例效果如下所示：

gif

項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復(fù)雜的樣式和交互需求，使用<input type="date"> 這個標(biāo)簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個比較常見的組件，主要應(yīng)用在數(shù)值范圍的篩選上，方便用戶進行選擇，這時我們可以使用 <input type="range"> ，我們可以設(shè)置最小值、最大值以及當(dāng)前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內(nèi)容編輯（Content Editor）

為了讓內(nèi)容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標(biāo)簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當(dāng)前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標(biāo)簽（Picture Tag）

有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標(biāo)簽的話，你需要做的工作就會許多，但是使用<picture> 標(biāo)簽就能很輕松的完成在不同分辨率下顯示不同圖片的設(shè)置，調(diào)整瀏覽器的大小，就會根據(jù)窗口的大小顯示不同大小的圖片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、進度條（Progress Bar）

進度條組件也是個很常見的組件，你可以使用<progress> 標(biāo)簽就能輕松完成相關(guān)外觀的設(shè)置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結(jié)合輸入，能很方便的定位到下拉組件的內(nèi)容，這時候你可以使用 <datalist> 標(biāo)簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對頁面某部分進行詳細介紹時，你可能需要鼠標(biāo)經(jīng)過此區(qū)域顯示詳細的提示框效果，這時我們可以使用 title 屬性就能輕松實現(xiàn)，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結(jié)束語

今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標(biāo)簽（組件），感謝你的閱讀。

參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

在線咨詢

上一篇：如何在GitHub上開源一套受歡迎的組態(tài)軟件
下一篇：HTML 文本格式化

您的項目需求

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

整合營銷服務(wù)商

在網(wǎng)頁開發(fā)中，我們需要掌握的常用HTML標(biāo)簽有哪些？

一、文檔類型聲明。

二、html主標(biāo)簽。

三、雙標(biāo)簽和單標(biāo)簽。

四、head頭部標(biāo)簽。

五、body主體標(biāo)簽。

、abbr

二、mark

三、sup、sub

四、figure

五、progress

六、area

七、details

八、dialog

九、datalist

十、fieldset

十一、noscript

一、顏色選擇組件（Color Picker）

二、引用標(biāo)簽（Blockquote）

三、音頻播放器（Audio Player）

四、視頻播放器（Video Player）

五、折疊組件（Accordion）

六、日期選擇（Date Picker）

七、滑塊組件（Slider）

八、內(nèi)容編輯（Content Editor）

九、圖片標(biāo)簽（Picture Tag）

十一、下拉組件（Dropdown）

十二、提示框（Tooltip）

結(jié)束語

您的項目需求

在網(wǎng)頁開發(fā)中，我們需要掌握的常用HTML標(biāo)簽有哪些？

一、文檔類型聲明。

二、html主標(biāo)簽。

三、雙標(biāo)簽和單標(biāo)簽。

四、head頭部標(biāo)簽。

五、body主體標(biāo)簽。

、abbr

三、sup、sub

八、dialog

九、datalist

十、fieldset

二、引用標(biāo)簽（Blockquote）

三、音頻播放器（Audio Player）

四、視頻播放器（Video Player）

五、折疊組件（Accordion）

七、滑塊組件（Slider）

十一、下拉組件（Dropdown）

十二、提示框（Tooltip）