您的位置：龙城通 > html像标签 HTML 像

html像标签 HTML 像

2023-03-22 15:00 HTML教程

html像标签 HTML 像

html像标签 HTML 像

html像标签

HTML图像

img 元素允许您将图像嵌入到HTML文档中。

它有局部属性: src，alt，height，width，usemap，ismap 。

HTML5中的border，longdesc，name，align，hspace 和 vspace 属性已过时。

要嵌入图像，您需要使用 src 和 alt 属性，如下所示。

<!DOCTYPE HTML>
<html>
<body>
  <img src="http://www.www..cn/style/download.png" 
       alt="Triathlon Image" 
       width="200" 
       height="67" />
</body>
</html>

src 属性指定图像的URL。

如果无法显示图片，则 alt 属性定义内容。

width 和 height 属性设置图像大小(以像素为单位)。


img 元素的常见用途是结合 a 元素创建基于图像的超链接。

以下代码显示了如何使用 img 和 a 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <a href="//www..cn/page.html">
       <img ismap src="http://www.www..cn/style/download.png"/>
    </a>
  </p>
</body>
</html>

如果将 ismap 属性应用于 img 元素，则可以创建服务器端图像映射，这意味着您在图像上单击的位置将附加到URL。

例如，如果您从图像的顶部点击了4个像素，从左边缘点击了10个像素，浏览器将导航到以下内容：

//www..cn/page.html?10,4

客户端图像映射

您可以创建客户端图像映射：单击图像中的不同区域会导致浏览器导航到不同的URL。

客户端图像映射的关键元素是 map 与局部属性 name 。

如果使用 id 属性，它必须具有与 name 属性相同的值。

map 元素可以有一个或多个 area 元素。

每个区域元素标记图像中可以点击的区域。

area 元素具有局部属性: alt，href，target，rel，media，hreflang，type，shape，coords 。

rel，media和hreflang属性是HTML5中的新特性。nohref属性现在已过时。

  • href - 点击区域时浏览器应加载的网址
  • alt - 替代内容。请参阅img元素上的相应属性。
  • target - 应显示网址的浏览内容。
  • rel - 描述当前文档和目标文档之间的关系。
  • media - 区域有效的介质。
  • hreflang - 目标文档的语言。
  • type - 目标文档的MIME类型。

shape 和 coords 属性一起工作。 coords 属性取决于 shape 属性的值。

  • rect
    该值表示矩形区域。
    coords属性必须由四个逗号分隔的整数组成，表示与以下内容的距离：
    • 图像左边缘到矩形左边
    • 图像顶边到矩形顶边
    • 图像左边缘到矩形右边
    • 图像顶边到矩形底边
  • circle
    该值表示圆形区域。
    coords属性必须由三个逗号分隔的整数组成，表示以下内容：
    • 从图像左边缘到圆心的距离
    • 从图像顶边缘到圆心的距离
    • 圆的半径
  • poly
    此值表示多边形。
    coords属性必须至少为六个逗号分隔的整数，每对表示多边形上的一个点。
  • default
    此值是默认区域，覆盖整个图像的其余部分。
    将此值用于shape属性时，不需要坐标值。

以下代码显示如何使用图像映射。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <img src="http://www.www..cn/style/download.png" usemap="#mymap"/>
  </p>
  <map name="mymap">
    <area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
    <area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
    <area href="c.html" shape="default" alt="test c" />
  </map>
</body>
</html>

img 元素上的 usemap 属性将map元素与图像相关联。

阅读全文
以上是龙城通为你收集整理的html像标签 HTML 像全部内容。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
全部标签 标签详情
相关文章
热门文章
推荐文章
猜您喜欢
© 2024 龙城通 longchengtong.com 版权所有 联系我们
桂ICP备12005667号-36 Powered by CMS