整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
近米谷愛上了整理的活，HTML標簽全稱對照，拿去?
| HTML標簽 | 英文全稱 | 中文釋義 |
| a | Anchor | 錨 |
| abbr | Abbreviation | 縮寫詞 |
| acronym | Acronym | 取首字母的縮寫詞 |
| address | Address | 地址 |
| dfn | Defines a Definition Term | 定義定義條目 |
| kbd | Keyboard | 鍵盤（文本） |
| samp | Sample | 示例（文本 |
| var | Variable | 變量（文本） |
| tt | Teletype | 打印機（文本） |
| code | Code | 源代碼（文本） |
| pre | Preformatted | 預定義格式（文本 ） |
| blockquote | Block Quotation | 區塊引用語 |
| cite | Citation | 引用 |
| q | Quotation | 引用語 |
| strong | Strong | 加重（文本） |
| em | Emphasized | 加重（文本） |
| b | Bold | 粗體（文本） |
| i | Italic | 斜體（文本） |
| big | Big | 變大（文本） |
| small | Small | 變小（文本） |
| sup | Superscripted | 上標（文本） |
| sub | Subscripted | 下標（文本） |
| bdo | Direction of Text Display | 文本顯示方向 |
| br | Break | 換行 |
| center | Centered | 居中（文本） |
| font | Font | 字體 |
| u | Underlined | 下劃線（文本） |
| s/ strike | Strikethrough | 刪除線 |
| div | Division | 分隔 |
| span | Span | 范圍 |
| ol | Ordered List | 排序列表 |
| ul | Unordered List | 不排序列表 |
| li | List Item | 列表項目 |
| dl | Definition List | 定義列表 |
| dt | Definition Term | 定義術語 |
| dd | Definition Description | 定義描述 |
| del | Deleted | 刪除（的文本） |
| ins | Inserted | 插入（的文本） |
| h1~h6 | Header 1 to Header 6 | 標題1到標題6 |
| p | Paragraph | 段落 |
| hr | Horizontal Rule | 水平尺 |
| href | hypertext reference | 超文本引用 |
| alt | alter | 替用(一般是圖片顯示不出的提示) |
| src | Source | 源文件鏈接 |
| cell | cell | 巢 |
| cellpadding | cellpadding | 巢補白 |
| cellspacing | cellspacing | 巢空間 |
| nl | navigation lists | 導航列表 |
| tr | table row | 表格中的一行 |
| th | table header cell | 表格中的表頭 |
| td | table data cell | 表格中的一個單元格 |
| iframe | Inline frame | 定義內聯框架 |
| optgroup | Option group | 定義選項組 |
個人編寫HTML使用的軟件是dreamweaver，這個軟件的話，正版是要購買的，一開始學習HTML就是用的這個軟件了，挺好用的，而且代碼提示特別方便，不用擔心太多的標簽和屬性記勞~
除了HTML基本結構的幾個標簽以外，HTML還有一些比較常用的基本標簽；
（1）文本標簽：
（2）布局標簽：
（3）多媒體標簽：
（4）超鏈接標簽：
（5）序列化標簽：
（6）表格標簽：
（7）表單標簽：
abbr 全稱是 abbreviations，意思是縮寫。應用場景也很簡單，為一些文章中的縮寫增加注釋。
以前在文章中對于縮寫的解釋經常會這么做：
DAU（Daily Active User），日活躍用戶數 ......
那我們用 abbr 標簽呢？
<abbr title="Daily Active User">
DAU
</abbr>
<span>，日活躍用戶數 ......</span>
展示的效果如下：
這個標簽就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思，這個在 markdown 里經常會出現。
<mark/> 在 markdown 中也是很常用的，用于將包裹的文本高亮展示。
<mark>高亮文本</mark>
效果如下：
如果全文統一高亮樣式，可以專門對 mark 標簽進行樣式重置，這樣就不用對你用的每個 div 加一個 highlight 的類名了，又不語義化，又徒增文檔大小。
<sup/>和<sub/>分別表示上標和下標，在 markdown 中出現得也很頻繁，比如數學公式和引用。
<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>
效果如下：
上標和下標的樣式原理也比較簡單，主要就是利用了 vertical-align 的 top 和 sub 屬性值，然后將字號縮小，不過有現成的標簽，干嘛不用呢？
figure 是用于包裹其它標簽的內容的，然后再利用另一個標簽 figcaption ，可以對包裹的內容進行一個文本描述，例如：
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="大象">
<figcaption>這是一張大象的照片</figcaption>
</figure>
效果如下：
那要是圖片掛了呢？
再友好點處理，我們把 img 標簽的 alt 屬性去掉。
漂亮，終于把我一直厭煩的圖裂 icon 給干掉了，樣式還巨好看。
當然不止能包裹 img 標簽，其它任何都是可以的。
嘿嘿，給大家在本文來個實戰，下面這個可以點擊，樣式也是利用了 figure 這個標簽。
我是figure標簽產生的
說到 <progress/> 這個標簽就很有意思了，去年有段時間我做的業務里涉及到了進度條，當時是前同事做的，然后有一些性能問題，我就在研究如何優化，減少進度條改變帶來的性能問題。
雖然最后問題是解決了，但是也有幸收到了張鑫旭大佬的評論，他告訴我 progress 這個標簽就足夠了，既有語義化，又有進度條的功能，性能還好，兼容性也很不錯。后來經過一番嘗試，還真是，當時是我孤陋寡聞了，也安利給大家。
<!-- 進度條最大值為100，當前進度為60，即60% -->
<progress max="100" value="60"/>
瀏覽器自帶的樣式就已經很好看了，效果如下：
業務中我們也就可以通過控制 value 屬性，來改變進度條的進度了。
area 這個標簽也非常有意思，它的作用是為圖片提供點擊熱區，可以自己規定一張圖的哪些區域可點擊，且點擊后跳轉的鏈接，也可以設置成點擊下載文件，我們來舉個例子：
<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 標簽表示一個熱區，例如上面代碼中，我們定義了兩個熱區，熱區形狀都為rect（矩形），他們的熱區分別是：
我們都知道，默認的坐標軸是這樣的：
因此，我們劃分的兩個熱區就是:
最后再來看一下我們的實際效果：
i
details 字面意思是 "詳情"，在 markdown 里也經常用，用該標簽包裹了的內容默認會被隱藏，只留下一個簡述的文字，我們點擊以后才會展示詳細的內容。
<details>
<p>我是一段被隱藏的內容</p>
</details>
效果如下：
這還沒有加任何一行的 js 代碼，我們點擊后，details 標簽上會多一個 open 的屬性，被隱藏的內容就展示出來了。
默認情況下，簡要文字為 "詳情"，想要修改這個文字，要搭配 summary 標簽來使用。
<details>
<summary>點擊查看更多</summary>
<p>我是一段被隱藏的內容</p>
</details>
就搞定了！
瀏覽器自帶彈窗方法 alert、confirm、prompt，樣式固定且每個瀏覽器不同，同時還會阻塞頁面運行，除了這個還提供了一個 dialog 標簽，它的使用方式有點類似于現在各大組件庫的 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>
效果如下：
細心的你有沒有發現，這原生的彈框還自帶背景蒙層，點擊是關閉不掉的，但起碼它不會阻塞頁面。
然后我們在彈窗展示時，也可以通過 esc 鍵來關閉彈窗。
datalist 是用于給輸入框提供可選值的一個列表標簽，類似咱們常用的 Select 組件。
我可以用其實現一個 "輸入聯想" 的功能。
<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>
來試一試：
剛點擊時會把所有推薦的選項都列出來，然后根據后面輸入的內容，會過濾掉不匹配的選項，比如我輸入 cl，會過濾掉不是 cl 開頭的單詞，最后只剩下 Click 和 Close 了。
最后我發現，他這個下拉框有點好看啊？為啥這原生的 input 框默認樣式那么丑，啥時候改改。
fieldset 標簽是用于分組管理 form 表單內的元素的，若 fieldset 設置了 disabled 屬性，則被其包裹的所有表單元素都會被禁用置灰，且不會隨著表單一起提交上去，是的就成了擺設。
什么意思呢？看個例子：
<form action="/example">
<fieldset disabled>
<legend>被禁用區域</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 和 郵箱 的表單包裹了起來，且設置了 disabled，只開放了一個 name 的輸入控件，此時界面如下：
可以看到除了 name 輸入框，其它的兩個輸入框都被禁用了，此時點提交會是什么樣子呢？
嗯，只提交了 name 字段。
這個標簽是在瀏覽器不支持或禁用了 javascript 時才展示的，大多用于對 js 強依賴的應用，比如現在大部分的 SPA 頁面，一旦不支持 javascript，頁面基本上什么內容都沒了，此時可以靠這個標簽做友好提示。
一般我們不需要特地去使用，大多都是在打包過程中自動插入到 html 靜態文件里去的，例如：
// 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 時，是這樣的：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
