Html5 图片智能标注图片标签html

转载

信息流星 2023-08-02 10:31:18

文章标签 Html5 图片智能标注 html HTML 百度 文章分类 HTML5 移动开发

文章目录

HTML img标签属性

src
alt
width & height
align

img 标签实例

设置图片链接
创建图像映射

HTML img标签属性

<img>图片标签的属性，有src，alt，width，height，其中源属性src需要注意。

src

源属性src的值是图像的URL地址。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>html结构</title>
    </head>
    <body>
    	<p>图片所在文件夹与html文件在相同目录下</p>
    	<img src="image/窗边少女.jpg" alt="" width="200" height="100" />
    	<p>图片与HTML文件在相同目录下</p>
    	<img src="bd_logo1.png" width="200" height="100" />
    	<p>图片与HTML文件所在文件夹在相同目录下</p>
    	<img src="./image/海边女孩.jpg" width="200" height="100" />
    	<p>图片所在文件夹image2与HTML文件所在文件夹html在相同目录下</p>
    	<img src="../image2/海边女孩.jpg" width="200" height="100" />
    	<p>图片在“HTML文件的上一层目录的上一层目录”，即海边女孩图片与“html文件夹的上层目录”在相同目录。需要用绝对路径，空格可以选择用%20代替</p>
    	<img src="D:\Sublime Text%203\海边女孩2.jpg" width="200" height="100" />
    	<p>网络上的图片要用图片文件绝对路径</p>
    	<img src="http://img.netbian.com/file/2019/1116/68c2563e6ab7521b6615de5bef4d287e.jpg" width="200" height="100"/>
    </body>
</html>

呈现效果为：

Html5 图片智能标注图片标签html_百度

alt

alt属性用来为图像定义一串预备的可替换的文件，也就是如果图片显示不出来，就显示alt的值。

width & height

指定图片显示的高度与宽度。

align

HTML4,已经放弃了align的属性，HTML5已经不支持该属性，可以使用CSS代替

使用CSS“float”属性，即用style来设置，类似于设置"background-color:yellow"，图片会以当前文本行为顶部，来放置图片，如果位置相互冲突，<img>标签在后的将会让开位置给在前的。

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
    </head>
    <body>
        <p>
            <img src="image/bd_logo1.png" alt="百度1" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
        </p>
        <hr>
        <p>
            <img src="image/bd_logo1.png" alt="百度2" style="float: right;" width="80" height="40"> 一个带图片的段落，图片浮动在这个文本的右边。
        </p>
        <hr>
        <p>
            <img src="image/海边女孩.jpg" alt="不显示" style="float: right;" width="150" height="80"> 一个带图片的段落，图片浮动在这个文本的右边。
        </p>
        <hr>
        <p>
            <img src="image/海边女孩.jpg" alt="百度2" style="float: right;" width="200" height="100"> 一个带图片的段落，图片浮动在这个文本的右边。
        </p>
    </body>
</html>

运行效果：

Html5 图片智能标注图片标签html_Html5 图片智能标注_02

img 标签实例

设置图片链接

链接的位置如果是其他网站链接则需要加http或https，如果链接URL是本地路径则可按照上面图片源地址来规定。

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
    </head>
    <body>
        <a href="https://www.baidu.com/">
            <img border="10" src="image/bd_logo1.png" alt="百度" width="200" height="100"/>
        </a>
        <a href="test.html">
            <img src="image/bd_logo1.png" alt="百度" width="200" height="100"/>
        </a>
    </body>
</html>

创建图像映射

创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
    </head>
    <body>
        <img src="image/bd_logo1.png"alt="百度" width="200" height="100" usemap="#baidumap" />
        <map name="baidumap">
           <area shape="rect" coords="0,0,50,100" href="https://www.baidu.com" alt="" target="" rel="" media="" type="">
           <area shape="rect" coords="50,0,100,100" href="" alt="blog" target="" rel="" media="" type="">
        </map>
    </body>
</html>

<map>定义图像地图
<area>定义图像地图中的可点击区域
属性shape是点击区域的形状，
属性coords指的是链接区域在图中所在的位置，以像素为单位。

shape取值	coords描述	代码
rect	矩形：（左上角顶点坐标为（x1,y1）,右下角顶点坐标为(x2,y2)	<area shape=“rect” coords=“x1,y1,x2,y2” href=url>
circle	圆形：(圆心坐标为(X1,y1)，半径为r)	<area shape=“circle” coords=“x1,y1,r” href=url>
poly	多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)	<area shape=“poly” coords=“x1,y1,x2,y2 …” href=url>