整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
带有可点击区域的图像映射：
<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> 标签。
标签定义及使用说明
<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
<area> 元素始终嵌套在 <map> 标签内部。
注释： <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。
HTML 4.01 与 HTML5之间的差异
HTML5 提供了一些新属性，同时不再支持 HTML 4.01 中的某些属性。
HTML 与 XHTML 之间的差异
在 HTML 中，<area> 标签没有结束标签。
在 XHTML 中，<area> 标签必须正确地关闭。
属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定区域的替代文本。如果使用 href 属性，则该属性是必需的。 |
| coords | coordinates | 规定区域的坐标。 |
| href | URL | 规定区域的目标 URL。 |
| hreflangNew | language_code | 规定目标 URL 的语言。 |
| mediaNew | media query | 规定目标 URL 是为何种媒介/设备优化的。默认：all。 |
| nohref | value | HTML5 不支持。 规定没有相关链接的区域。 |
| relNew | alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag | 规定当前文档与目标 URL 之间的关系。 |
| shape | defaultrectcirclepoly | 规定区域的形状。 |
| target | _blank_parent_self_topframename | 规定在何处打开目标 URL。 |
| typeNew | MIME_type | 规定目标 URL 的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。 |
全局属性
<area> 标签支持 HTML 的全局属性。
事件属性
<area> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
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 时，是这样的：
本标签: 32
例:
<dl>
<dt>标题1</dt>
<dd>内容11</dd>
<dd>内容12</dd>
<dt>标题2</dt>
<dd>内容21</dd>
<dd>内容22</dd>
</dl>
target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);
rel="...",发送链接的类型;
rev="...",保存链接的类型;
accesskey="...",指定该元素的热键;
shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);
coord="...",使用像素或者长度百分比来定义形状的尺寸;
tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).
action="...",接收数据的服务器的URL;
method="...",HTTP的方法(get,,post),其中get是被反对使用的;
enctype="...",指定MIME(Internet媒体类型);
onsubmit="...",当提交表单时发生的内部事件;
noreset="...",在重新设置表单时发生的内部事件;
target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);
type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一个单选钮设置为选中的状态;
disabled="...",把控件的状态设置为不能使用;
readonly="...",只对输入密码的文本框使用;
size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;
src="...",一个图像控件的URL;
maxlength="...",指定可以输入的最多的字符数目;
alt="...",另外一种文本描述;
usemap="...",到客户端图形镜像的URL;
align="...",被反对.控制对齐方式(left,,center,,right,,justify);
tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;
onfocus="...",当元素获得焦点时发生的事件;
onblur="...",当元素失去焦点时发生的事件;
onselect="...",当元素被选中时发生的事件;
onchang="...",当元素状态被改变时发生的事件;
accept="...",允许上载的文件类型.
scr="...",定义在帧中显示的内容的来源;
frameborder="...",定义帧之间的边界(0或1);
align="...",被反对,控制对齐方式(left,,center,,right,,justify);
height="...",帧的高度,width="..."帧的宽度;
*请认真填写需求信息，我们会在24小时内与您取得联系。
