HTML 超链接、锚和图像热区
1.a
<a>
元素用来定义超链接。
<a href="http://www.google.com">Google</a>
属性
1.href
用于指定链接到的目标URL。
属性值:url 链接到的目标
2.hreflang
用于指定目标URL的语言
属性值:langauge 目标的语言
3.media [HTML5]
用于指定目标URL的媒体类型
参考:media query
4.rel
用于指定目标文档和当前文档的关系。
5.target
参考:base-target
6.type
用于指定目标的MIME类型。
锚
锚点通常用来实现长页面内的直达或跳转,如直接跳转到文章中的某个标题。
#定义锚点
当为页面中的任意元素定义了 id
属性,它就可以作为一个锚点。
#锚点的使用方式
要跳转到页面中的某个锚点,只需要在当前页面的URL后添加 #
+ 锚点名称即可。
<h3>名为 name 的锚点</h3>
<a href="http://something.com/somepage.html#name">跳转到名为 name 的锚点</a>
注意:
在HTML之前的版本中,都使用 name
属性定义锚点,不过在HTML5中,只建议在表单元素中使用该属性。【待证实】
2.area
<area>
元素与 <map>
元素配合,用于定义图像映射区域。
图像热区 类似于包含图像的超链接,不过一幅图像可以定义多个热区,而且每个热区都可以定义位置、大小和形状。
<img src="image.png" usemap="#imagemap" />
<map name="imagemap">
<area href="http://www.google.com/" alt="Google" shap="rectangle" coords="20,20,50,50" />
</map>
属性
1.alt
用于提供替代文本。
属性值:text 替代文本
2.coords
用于规定区域的一系列坐标。
属性值:number,number... 由 ,
分隔的一系列整数
3.href
4.hreflang
5.media
6.rel
7.shape
用于定义热区的形状。
属性值:
- rectangle 矩形 (x1,y1,x2,y2)
- circle 圆 (x,y,r)
- polygon 多边形 (x1,y1,x2,y2,...,xi,yi)
注: 如果不定义 shape
和 coords
属性,热区默认为覆盖整幅图像的矩形。
8.target
9.type
3.map
与 <area>
元素配合使用,用于定义图像热区。每个 <map>
元素中可包含多个 <area>
元素。
图像热区有唯一的 name
属性,且需要在被定义的图像中通过 usemap="#map_name"
引用该值。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

上一篇: HTML 标签语义化
下一篇: HTML audio 标签
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
{{ commentTitle }}