整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
例
帶有可點(diǎn)擊區(qū)域的圖像映射：
<imgsrc="planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap"><mapname="planetmap"><areashape="rect"coords="0,0,82,126"alt="Sun"href="sun.htm"><areashape="circle"coords="90,58,3"alt="Mercury"href="mercur.htm"><areashape="circle"coords="124,58,8"alt="Venus"href="venus.htm"></map>
瀏覽器支持
所有主流瀏覽器都支持 <area> 標(biāo)簽。
標(biāo)簽定義及使用說明
<area> 標(biāo)簽定義圖像映射內(nèi)部的區(qū)域（圖像映射指的是帶有可點(diǎn)擊區(qū)域的圖像）。
<area> 元素始終嵌套在 <map> 標(biāo)簽內(nèi)部。
注釋： <img> 標(biāo)簽中的 usemap 屬性與 <map> 元素中的 name 相關(guān)聯(lián)，以創(chuàng)建圖像與映射之間的關(guān)系。
HTML 4.01 與 HTML5之間的差異
HTML5 提供了一些新屬性，同時(shí)不再支持 HTML 4.01 中的某些屬性。
HTML 與 XHTML 之間的差異
在 HTML 中，<area> 標(biāo)簽沒有結(jié)束標(biāo)簽。
在 XHTML 中，<area> 標(biāo)簽必須正確地關(guān)閉。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 規(guī)定區(qū)域的替代文本。如果使用 href 屬性，則該屬性是必需的。 |
| coords | coordinates | 規(guī)定區(qū)域的坐標(biāo)。 |
| href | URL | 規(guī)定區(qū)域的目標(biāo) URL。 |
| hreflangNew | language_code | 規(guī)定目標(biāo) URL 的語言。 |
| mediaNew | media query | 規(guī)定目標(biāo) URL 是為何種媒介/設(shè)備優(yōu)化的。默認(rèn)：all。 |
| nohref | value | HTML5 不支持。 規(guī)定沒有相關(guān)鏈接的區(qū)域。 |
| relNew | alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag | 規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系。 |
| shape | defaultrectcirclepoly | 規(guī)定區(qū)域的形狀。 |
| target | _blank_parent_self_topframename | 規(guī)定在何處打開目標(biāo) URL。 |
| typeNew | MIME_type | 規(guī)定目標(biāo) URL 的 MIME 類型。注：MIME = Multipurpose Internet Mail Extensions。 |
全局屬性
<area> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<area> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
abbr 全稱是 abbreviations，意思是縮寫。應(yīng)用場景也很簡單，為一些文章中的縮寫增加注釋。
以前在文章中對于縮寫的解釋經(jīng)常會(huì)這么做：
DAU（Daily Active User），日活躍用戶數(shù) ......
那我們用 abbr 標(biāo)簽?zāi)兀?/span>
<abbr title="Daily Active User">
DAU
</abbr>
<span>，日活躍用戶數(shù) ......</span>
展示的效果如下：
這個(gè)標(biāo)簽就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動(dòng)去獲取縮寫的具體意思，這個(gè)在 markdown 里經(jīng)常會(huì)出現(xiàn)。
<mark/> 在 markdown 中也是很常用的，用于將包裹的文本高亮展示。
<mark>高亮文本</mark>
效果如下：
如果全文統(tǒng)一高亮樣式，可以專門對 mark 標(biāo)簽進(jìn)行樣式重置，這樣就不用對你用的每個(gè) div 加一個(gè) highlight 的類名了，又不語義化，又徒增文檔大小。
<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 是用于包裹其它標(biāo)簽的內(nèi)容的，然后再利用另一個(gè)標(biāo)簽 figcaption ，可以對包裹的內(nèi)容進(jìn)行一個(gè)文本描述，例如：
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="大象">
<figcaption>這是一張大象的照片</figcaption>
</figure>
效果如下：
那要是圖片掛了呢？
再友好點(diǎn)處理，我們把 img 標(biāo)簽的 alt 屬性去掉。
漂亮，終于把我一直厭煩的圖裂 icon 給干掉了，樣式還巨好看。
當(dāng)然不止能包裹 img 標(biāo)簽，其它任何都是可以的。
嘿嘿，給大家在本文來個(gè)實(shí)戰(zhàn)，下面這個(gè)可以點(diǎn)擊，樣式也是利用了 figure 這個(gè)標(biāo)簽。
我是figure標(biāo)簽產(chǎn)生的
說到 <progress/> 這個(gè)標(biāo)簽就很有意思了，去年有段時(shí)間我做的業(yè)務(wù)里涉及到了進(jìn)度條，當(dāng)時(shí)是前同事做的，然后有一些性能問題，我就在研究如何優(yōu)化，減少進(jìn)度條改變帶來的性能問題。
雖然最后問題是解決了，但是也有幸收到了張鑫旭大佬的評論，他告訴我 progress 這個(gè)標(biāo)簽就足夠了，既有語義化，又有進(jìn)度條的功能，性能還好，兼容性也很不錯(cuò)。后來經(jīng)過一番嘗試，還真是，當(dāng)時(shí)是我孤陋寡聞了，也安利給大家。
<!-- 進(jìn)度條最大值為100，當(dāng)前進(jìn)度為60，即60% -->
<progress max="100" value="60"/>
瀏覽器自帶的樣式就已經(jīng)很好看了，效果如下：
業(yè)務(wù)中我們也就可以通過控制 value 屬性，來改變進(jìn)度條的進(jìn)度了。
area 這個(gè)標(biāo)簽也非常有意思，它的作用是為圖片提供點(diǎn)擊熱區(qū)，可以自己規(guī)定一張圖的哪些區(qū)域可點(diǎn)擊，且點(diǎn)擊后跳轉(zhuǎn)的鏈接，也可以設(shè)置成點(diǎn)擊下載文件，我們來舉個(gè)例子：
<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)簽一起使用，每個(gè) area 標(biāo)簽表示一個(gè)熱區(qū)，例如上面代碼中，我們定義了兩個(gè)熱區(qū)，熱區(qū)形狀都為rect（矩形），他們的熱區(qū)分別是：
我們都知道，默認(rèn)的坐標(biāo)軸是這樣的：
因此，我們劃分的兩個(gè)熱區(qū)就是:
最后再來看一下我們的實(shí)際效果：
i
details 字面意思是 "詳情"，在 markdown 里也經(jīng)常用，用該標(biāo)簽包裹了的內(nèi)容默認(rèn)會(huì)被隱藏，只留下一個(gè)簡述的文字，我們點(diǎn)擊以后才會(huì)展示詳細(xì)的內(nèi)容。
<details>
<p>我是一段被隱藏的內(nèi)容</p>
</details>
效果如下：
這還沒有加任何一行的 js 代碼，我們點(diǎn)擊后，details 標(biāo)簽上會(huì)多一個(gè) open 的屬性，被隱藏的內(nèi)容就展示出來了。
默認(rèn)情況下，簡要文字為 "詳情"，想要修改這個(gè)文字，要搭配 summary 標(biāo)簽來使用。
<details>
<summary>點(diǎn)擊查看更多</summary>
<p>我是一段被隱藏的內(nèi)容</p>
</details>
就搞定了！
瀏覽器自帶彈窗方法 alert、confirm、prompt，樣式固定且每個(gè)瀏覽器不同，同時(shí)還會(huì)阻塞頁面運(yùn)行，除了這個(gè)還提供了一個(gè) dialog 標(biāo)簽，它的使用方式有點(diǎn)類似于現(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>
效果如下：
細(xì)心的你有沒有發(fā)現(xiàn)，這原生的彈框還自帶背景蒙層，點(diǎn)擊是關(guān)閉不掉的，但起碼它不會(huì)阻塞頁面。
然后我們在彈窗展示時(shí)，也可以通過 esc 鍵來關(guān)閉彈窗。
datalist 是用于給輸入框提供可選值的一個(gè)列表標(biāo)簽，類似咱們常用的 Select 組件。
我可以用其實(shí)現(xiàn)一個(gè) "輸入聯(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>
來試一試：
剛點(diǎn)擊時(shí)會(huì)把所有推薦的選項(xiàng)都列出來，然后根據(jù)后面輸入的內(nèi)容，會(huì)過濾掉不匹配的選項(xiàng)，比如我輸入 cl，會(huì)過濾掉不是 cl 開頭的單詞，最后只剩下 Click 和 Close 了。
最后我發(fā)現(xiàn)，他這個(gè)下拉框有點(diǎn)好看?。繛樯哆@原生的 input 框默認(rèn)樣式那么丑，啥時(shí)候改改。
fieldset 標(biāo)簽是用于分組管理 form 表單內(nèi)的元素的，若 fieldset 設(shè)置了 disabled 屬性，則被其包裹的所有表單元素都會(huì)被禁用置灰，且不會(huì)隨著表單一起提交上去，是的就成了擺設(shè)。
什么意思呢？看個(gè)例子：
<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，只開放了一個(gè) name 的輸入控件，此時(shí)界面如下：
可以看到除了 name 輸入框，其它的兩個(gè)輸入框都被禁用了，此時(shí)點(diǎn)提交會(huì)是什么樣子呢？
嗯，只提交了 name 字段。
這個(gè)標(biāo)簽是在瀏覽器不支持或禁用了 javascript 時(shí)才展示的，大多用于對 js 強(qiáng)依賴的應(yīng)用，比如現(xiàn)在大部分的 SPA 頁面，一旦不支持 javascript，頁面基本上什么內(nèi)容都沒了，此時(shí)可以靠這個(gè)標(biāo)簽做友好提示。
一般我們不需要特地去使用，大多都是在打包過程中自動(dòng)插入到 html 靜態(tài)文件里去的，例如：
// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '點(diǎn)擊出彈窗'
root.appendChild(button)
<!-- index.html -->
<script defer src="./init.js"></script>
<noscript>
不好意思，你的瀏覽器不支持或禁用了 JavaScript，請更換瀏覽器或啟用 JavaScript
</noscript>
<div id="root"></div>
未禁用 javascript 時(shí)，頁面是這樣的：
禁用了 javascript 時(shí)，是這樣的：
本標(biāo)簽: 32
例:
<dl>
<dt>標(biāo)題1</dt>
<dd>內(nèi)容11</dd>
<dd>內(nèi)容12</dd>
<dt>標(biāo)題2</dt>
<dd>內(nèi)容21</dd>
<dd>內(nèi)容22</dd>
</dl>
target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);
rel="...",發(fā)送鏈接的類型;
rev="...",保存鏈接的類型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長度百分比來定義形狀的尺寸;
tabindex="...",使用定義過的tabindex元素設(shè)置在各個(gè)元素之間的焦點(diǎn)獲取順序(使用tab鍵使元素獲得焦點(diǎn)).
action="...",接收數(shù)據(jù)的服務(wù)器的URL;
method="...",HTTP的方法(get,,post),其中g(shù)et是被反對使用的;
enctype="...",指定MIME(Internet媒體類型);
onsubmit="...",當(dāng)提交表單時(shí)發(fā)生的內(nèi)部事件;
noreset="...",在重新設(shè)置表單時(shí)發(fā)生的內(nèi)部事件;
target="...",決定把內(nèi)容顯示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按鈕的狀態(tài)設(shè)置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
type="...",用于輸入控件的類型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個(gè)單選鈕設(shè)置為選中的狀態(tài);
disabled="...",把控件的狀態(tài)設(shè)置為不能使用;
readonly="...",只對輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來指定字符的數(shù)目;
src="...",一個(gè)圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數(shù)目;
alt="...",另外一種文本描述;
usemap="...",到客戶端圖形鏡像的URL;
align="...",被反對.控制對齊方式(left,,center,,right,,justify);
tabindex="...",通過定義的tabindex值確定在不同元素之間獲得焦點(diǎn)的順序;
onfocus="...",當(dāng)元素獲得焦點(diǎn)時(shí)發(fā)生的事件;
onblur="...",當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生的事件;
onselect="...",當(dāng)元素被選中時(shí)發(fā)生的事件;
onchang="...",當(dāng)元素狀態(tài)被改變時(shí)發(fā)生的事件;
accept="...",允許上載的文件類型.
scr="...",定義在幀中顯示的內(nèi)容的來源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對,控制對齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
