HTML 超链接、锚和图像热区

发布于 2023-01-23 21:56:35 字数 2183 浏览 2 评论 0

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)

注: 如果不定义 shapecoords 属性,热区默认为覆盖整幅图像的矩形。

8.target

9.type

3.map

<area> 元素配合使用,用于定义图像热区。每个 <map> 元素中可包含多个 <area> 元素。

图像热区有唯一的 name 属性,且需要在被定义的图像中通过 usemap="#map_name" 引用该值。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

上一篇:

下一篇:

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据
原文
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。