img标签基础知识

最新推荐文章于 2022-09-07 18:03:18 发布

论持久战-YJL

最新推荐文章于 2022-09-07 18:03:18 发布

阅读量380

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/qq_33656996/article/details/82178376

版权

Html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<!--meta标签设置-->
	<meta charset="UTF-8">  
	<title>img标签学习</title>
	<!--设置了统一的路径 head标签内，一个页面最多只能使用一个base元素，用来提供一个指定的默认目标-->
	<base href="http://www.runoob.com/images/" target="_blank"></base>
	<style type="text/css"></style>
</head>
<body>
	<!--这是一个统一设置了base路径的图片-->
	<!--这里实际的路径： http://www.runoob.com/images/logo.png-->
    <!--源属性（Src） 指 "source"。源属性的值是图像的 URL 地址-->
    <!-- Alt属性 用来为图像定义一串预备的可替换的文本-->
    <!--style中的float -->
    <!--宽：width   高：height-->
	<img src="logo.png" alt="没有图片" style="float: right">一个带图片的段落，图片浮动在这个文本的右边
    <br>
    <img src="logo.png" alt="没有图片" style="float: left">一个带图片的段落，图片浮动在这个文本的左边
    <br>

    <!--把图片设为链接-->
    <p>这是一个图片链接：
        <a href="http://www.runoob.com">
            <img src="logo.png" alt="没有图片">
        </a>
    </p>

    <br>


    <!--
    <map>定义图像地图
    <area>定义图像地图中的可点击区域

    shape指的是点击区域的形状
    coords指的应该是链接区域在图片中的坐标（像素为单位）
    矩形coords="x1,y1,x2,y2"，矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
    圆形coords="x1,y1,r"   (圆心坐标为(X1,y1)，半径为r)
    多边形 coords="x1,y1,x2,y2 ......"  (各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
    -->
    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
        <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
        <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
    </map>

	
</body>
</html>