HTML元素——img(图片引用)

1.使用元素——img

书写格式:

<img src="" alt="" title=""/>

(1)src属性:图片链接
(2)alt属性:图片无法显示时的替代文字,文字通常是图片的描述,收缩引擎收缩时会识别内容。 
(3)title属性:鼠标悬停于图片时显示的说明文字。

2.整图超链接

书写格式:

<a href=""> <img src="" alt="" title=""/></a>

在超链接a标签内嵌套图片引用img标签即可,在页面上点击图片即可a标签超链接内容。

3.同一图片不同位置创建超链接

书写格式:

<img usename="" src="" alt="" title=""/>
<map name(或id)="" >
    <area shape="" coords="" href="" alt="">
</map>

(1)使用标签map的name及id属性与引用的图片usename属性创建联系。
(2)map标签内嵌套area标签,area标签属性shape属性值用于设置连接点击区域形状(rectangle:矩形,ciule:圆形,poly:多边形);area标签属性coords属性值用于指定可点击区域的位置(矩形:对角线两个极点坐标;圆形:圆心坐标,半径;多边形:顺时针依次每个点的坐标);属性href属性值是指定点击区域时连接到的地址。 
(3)生成网页后点击图片上的制定区域就可以访问对应的超链接。

4.标签figure和figcaption

书写格式:

<figure>
    <img src="" alt="" title="">
<figcaption>图片关键字或说明</figcaption>
</figure>

这两个标签是父子级标签,成对出现,figure是父级,figcaption是子标签,用于实现图片加文字的效果。

猜你喜欢

转载自www.cnblogs.com/xhh776554/p/8909294.html