错误博客( cuowu.com )发布于 2019-06-04 19:15:47

HTML图片

<img src=”” />,图像标签,img标签教程。

img标签用法

用法:<img src=”图片位置” alt=”图片说明”/> 图像src和alt为必须写的属性。

常用属性

错误君总结img属性。

1)src图像源文件

<img src=”图像文件的位置” />

例如:<img src=”images/1.jpg” />

2)alt图像提示文字

<img src=”#” alt=”提示文字内容” />

例如:<img src=”tree.jpg” alt=”这是一课树的图像” />

3)width和height图像宽和高

<img src=”#” width=”图像的宽度” height=”图像的高度” />

例如:<img src=”tree.jpg” width=”10” height=”10” />

4)border图像边框

<img src=”#” border=”图像边框宽度” />不推荐使用

CSS中,可以设置边框的颜色和样式solid,这里只能是边框粗细。

例如:<img src=”tree.jpg” border=”10” />

5)vspace图像垂直边距

<img src=”#” vspace=”垂直边距” />不推荐使用

例如:<img src=”tree.jpg” vspace=”10” />

6)hspace图像水平间距

<img src=”#” hspace=”水平间距” />不推荐使用

例如:<img src=”1.jpg” hspace=”10” />

7)align图像排列

<img src=”#” align=”对齐方式”>不推荐使用,很多浏览器支持性不好,故这里不举例说明了。

图像超链接

图像超链接一般分为两种,一种是整张图片作为超链接,另外一种是图像上的某一个区域作为超链接。

1)整张图像超链接

<a href=”#”><img src=”#” /></a>

如:<a href=”https://www.cuowu.com/ ” ><img src=”1.jpg” /></a>

2)图像某区域超链接

图像区域超链接采用的是<map></map>标签、<area />标签及usemap属性。

  • 插入图像并映射图像名 ,Usemap属性为图片命名,与后面map name相同

语法:<img src=”#” usemap=”#映射图像名称” /> 注意这里必须要加#号

  • 定义热区图像以及对应热区图像对应的链接,Map name 是前面usemap定制图像名称此处name可正常使用。Shape属性: rect(矩形) circle(圆形),Coords属性:”x1,y1,x2,y2”(矩形) “x1,y1,半径” x,y相对图像左上角(0,0)

语法:

<map name=”摄影图像名称”>

<area shape=”热区形状” coords=”热区坐标” href=”链接地址”/>

</map>

例如:

<img src=”1.jpg” alt=”1” usename=”#错误教程图片” />

<map name=”错误教程图片”>

<area shape=”rect” coorder=”100,100,200,200” href=”https://www.cuowu.com/ ” />

<area shape=”circle” coorder=”100,100,100” href=”https://www.cuowu.com/ ” />

</map>


2020年错误博客亲测项目系列

错误教程( cuowu.com )专注网推培训、SEO培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码