HTML | rel 属性

介绍

HTML的元素用于定义图像地图中的区域，并且可以通过点击该区域来触发相应的操作。其中，rel属性（relationship）用于指定区域与当前文档之间的关系。

语法

<area shape="shape" coords="coordinates" href="url" target="_blank" rel="relationship">

其中，rel属性是非强制性的。

值

rel属性的值可以是以下内容之一：

• alternate：当前区域代表一个替代版本，比如说一个语言版本。
• author：当前区域代表作者。
• bookmark：当前区域代表书签和目录。
• help：当前区域代表帮助文档。
• license：当前区域代表版权声明。
• next：当前区域代表下一个文档。
• nofollow：当前区域代表一个没有被信任的链接。
• noreferrer：当前区域代表链接不应被追踪。
• noopener：当前区域代表打开页面时不被推出当前窗口。
• prev：当前区域代表上一个文档。
• search：当前区域代表搜索文档。

示例

<img src="map.png" usemap="#map">
<map name="map">
  <area shape="rect" coords="0,0,100,100" href="page1.html" rel="next">
  <area shape="rect" coords="100,0,200,100" href="page2.html" rel="prev">
</map>

上述示例中，<img>元素代表一个图像，<map>元素定义图像地图，并设置name属性。<area>元素定义两个矩形区域并设置点击后要跳转的URL地址。其中，rel属性分别为next和prev，表示第一个区域代表下一个文档，第二个区域代表上一个文档。

注意事项

• <area>元素不能单独使用，必须要有一个对应的图像（即使用<img>元素）。
• rel属性的值应该准确反映当前区域与文档之间的关系。误用会使屏幕阅读器等辅助设备无法正确解析网站内容。
• rel属性可以与target属性一起使用，用于控制链接打开方式。如 target="_blank"表示在新的标签页中打开链接。
• 在设置rel属性时，应该将多个关系值以空格分隔开。如rel="license alternate"。
• rel属性不支持同一区域设置多个值，如rel="next prev"是错误的写法。

参考资料：MDN Web 文档