HTML区域媒体属性用于指定目标URL优化的媒体或设备。
此属性指定样式用于特定设备,例如印刷媒体或语音。该属性可以接受多个值。仅当href属性存在时使用。此属性纯粹是建议性的。
用法:
<area media="value">
可能的操作符:
值 | 描述 |
---|---|
and | AND运算符 |
not | 非运算符 |
, | 或运算符 |
设备:
值 | 描述 |
---|---|
all | 适用于所有设备 |
aural | 语音合成器 |
braille | 盲文反馈设备 |
handheld | 手持设备(小屏幕,带宽有限) |
projection | Projectors |
打印预览模式/打印页面 | |
screen | 电脑屏幕 |
tty | 使用固定间距字符网格的电传打字机和类似媒体 |
tv | 低分辨率或滚动能力有限的设备,例如电视。 |
值:
值 | 描述 |
---|---|
width | 目标显示区域的宽度。 |
height | 目标显示区域的高度 |
device-width | 目标显示或纸张的宽度。 |
device-height | 目标显示或纸张的高度。 |
orientation | 目标显示或纸张的方向。 |
aspect-ratio | 目标显示区域的宽高比。 |
device-aspect-ratio | 目标显示器/纸张的Device-width /device-height比。 |
color | 目标显示的每种颜色的位数。 |
color-index | 目标显示器可以处理的颜色数。 |
monochrome | 单色帧缓冲区中每个像素的位数。 |
resolution | 目标显示屏/纸张的像素密度(dpi或dpcm)。 |
scan | 电视显示器的扫描方法。 |
grid | 如果输出设备是网格或位图。 |
注意:可以使用前缀“ min-”和“ max-”。
例:
<!DOCTYPE html>
<html>
<head>
<title>
HTML area rel Attribute
</title>
</head>
<body style="text-align:center;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
alt=""
width="300"
height="119"
class="aligncenter"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59, 31, 28, 83, 91, 83"
href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
alt="Triangle"
rel="alternate"
media="screen and (min-color-index:256)">
<area shape="circle"
coords="155, 56, 26"
href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
alt="Circle"
rel="alternate">
<area shape="rect"
coords="224, 30, 276, 82"
href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
alt="Square"
rel="alternate">
</map>
</body>
</html>
输出:
支持的浏览器:下面列出了HTML区域媒体属性支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- 苹果Safari
- Opera
相关用法
- HTML <a> media属性用法及代码示例
- HTML media属性用法及代码示例
- HTML <style> media属性用法及代码示例
- HTML <source> media属性用法及代码示例
- HTML <link> media属性用法及代码示例
- HTML <bdo> dir属性用法及代码示例
- HTML value属性用法及代码示例
- HTML <a> rel属性用法及代码示例
- HTML max属性用法及代码示例
- HTML <img> src属性用法及代码示例
- HTML name属性用法及代码示例
- HTML src属性用法及代码示例
- HTML alt属性用法及代码示例
- HTML <li> value属性用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | <area> media Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。