5️⃣ HTML5 新属性

⚠️ 大多数浏览器不支持

<img>

• 定义图像。
• 两个必需的属性：src 和 alt。

属性名	值	说明
loading	eager：立即加载 lazy：延迟加载	指定浏览器是应立即加载图像还是延迟加载图像
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。
height	pixels	高度
width	pixels	宽度
ismap	ismap	将图像规定为服务器端图像映射。
crossorigin5️⃣	anonymous use-credentials	设置图像的跨域属性
usemap	#mapname	将图像定义为客户器端图像映射。

<img src="https://theme-plume.vuejs.press/plume.png" alt="theme-plume ICON" width="42" height="42">

<map>

• 图像映射指带有可点击区域的一幅图像
• <area> 元素永远嵌套在 <map> 元素内部

属性名	值	说明
name	mapname	必需。为 image-map 规定的名称。

<img src="https://theme-plume.vuejs.press/plume.png" width="100" height="100" alt="theme-plume ICON" usemap="#pressmap">
 
<map name="pressmap">
  <area shape="rect" coords="0,0,100,100" alt="vuepress" href="https://theme-plume.vuejs.press/" target="_blank"> 
</map>

<area>

• 定义图像映射内部的区域

属性名	值	说明
alt	text	替代文本
shape	default rect circle poly	规定区域的形状。
coords	shape="rect" x1,y1,x2,y2规定矩形左上角和右下角的坐标 shape="circ" x,y,radius 圆心的坐标和半径 shape="poly" x1,y1,x2,y2,..,xn,yn	区域的坐标
target	_blank 新窗口打开 _self 当前窗口打开 _parent 父窗口打开 _top 顶层窗口打开	规定在何处打开 action URL。
href	URL	规定区域的目标 URL。
hreflang5️⃣	language_code	规定目标 URL 的语言。
media5️⃣	media query	规定目标 URL 是为何种媒介/设备优化的。默认：all。
rel5️⃣	alternate 文档的替代版本（比如打印页、翻译或镜像）。 author 链接到文档的作者。 bookmark 用于书签的永久网址 help 链接到帮助文档 license 链接到文档的版权信息。 next 选项中的下一个文档 nofollow nofollow 是一个HTML标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接。 noreferrer 如果用户点击链接指定浏览不要发送 HTTP referer 头部信息。 prefetch 指定的目标文件应该被缓存 prev 选项中的前一个文档 search 文档链接到搜索工具 tag 当前文档的标签(关键词)	当前文档与被链接文档之间的关系
type5️⃣ MIME_type	规定目标 URL 的 MIME 类型。 注：MIME = Multipurpose Internet Mail Extensions。

<img src="https://theme-plume.vuejs.press/plume.png" width="100" height="100" alt="theme-plume ICON" usemap="#pressmap">
 
<map name="pressmap">
  <area shape="rect" coords="0,0,100,50" alt="vuepress" href="https://vuepress.vuejs.org/zh/guide/theme.html" target="_blank"> 
  <area shape="rect" coords="0,50,100,100" alt="vuepress-plume" href="https://theme-plume.vuejs.press/" target="_blank">
</map>
<h2>图标上半部和下半部打开的连接不同</h2>

<canvas> 5️⃣

• 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
• 图形容器，您必须使用脚本来绘制图形。

属性名	值	说明
height	pixels	高度
width	pixels	宽度

html

<canvas id="myCanvas"></canvas>

javascript

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

<figure> 5️⃣

• 独立的流内容（图像、图表、照片、代码等等）。

<figure>
<img src="https://theme-plume.vuejs.press/plume.png" alt="theme-plume ICON" width="42" height="42">
</figure>

<figcaption> 5️⃣

• 为 <figure> 元素定义标题。

属性名	值	说明

<figure>
<img src="https://theme-plume.vuejs.press/plume.png" alt="theme-plume ICON" width="42" height="42">
  <figcaption>vuepress-plume icon</figcaption> 
</figure>

贡献者: yulc