HTML（XHTML）基础知识（三）——【image】

最新推荐文章于 2024-03-06 22:10:55 发布

连坡路2号

最新推荐文章于 2024-03-06 22:10:55 发布

阅读量424

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/shilx205/article/details/80943430

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<img>

img 元素用于载入图片，该元素为空元素，用 /> 闭合。

必需属性：src，图片的来源 URL；alt，图片不能加载时的替代性文本。

可选属性：width，图片宽度；height，图片高度；ismap，声明图像要被用于服务端图像映射；usemap，用于确定所使用的客户端图像映射，是一个 URL；longdesc，指定有关图像的详细说明的文档 URL。float；margin；padding...

标准属性：class、dir、id、lang、style、title、xml:lang

===================================================================

背景图像

body {
  background-image: url(/images/background.gif);
  background-repeat: repeat-x;
  /* repeat-y、no-repeat */
  background-position: right bottom;
  /* 可以是具体的坐标值 */
}

===================================================================

图像映射

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>My first web page</title>
    <style type="text/css">
        img { border-style: none }
    </style>
  </head>
  <body>
    <p>
        <map id="image_map" name="image_map">
            <area shape="rect" href="square.html" coords="20,27 97,76" alt="Order Square Pizza" />
            <area shape="circle" href="circle.html" coords="167,51 35" alt="Order Round Pizza" />
        </map>
        <img usemap="#image_map" src="imagemap.gif" alt="Choose square or round pizza!" />
    </p>
  </body>
<html>

<map>

map 元素用于定义一个图像映射，该元素只能包含 area 元素。

必须属性：id

可选属性：name

标准属性：class、dir、id、lang、style、title、xml:lang

事件属性：onblur、onclick、ondblclick、onfocus、onkeydown、onkeypress、onkeyup、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup

<area>

area 元素用于定义一个区域，该元素为空元素，用 /> 闭合。

必需属性：alt，图片不能加载时的替代性文本。

可选属性：shape，区域的形状，circle（circ）、poly、rect；coords，指定映射中可点击区域的坐标；href，指定区域的超链接；nohref，声明从图像映射中排除，取值为nohref。

标准属性：accesskey、class、dir、id、lang、style、tabindex、title、xml:lang

事件属性：onblur、onclick、ondblclick、onfocus、onkeydown、onkeypress、onkeyup、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup

连坡路2号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（XHTML）基础知识（三）——【image】

&lt;img&gt; img 元素用于载入图片，该元素为空元素，用 /&gt; 闭合。必需属性：src，图片的来源 URL；alt，图片不能加载时的替代性文本。可选属性：width，图片宽度；height，图片高度；ismap，声明图像要被用于服务端图像映射；usemap，用于确定所使用的客户端图像映射，是一个 URL；longdesc，指定有关图像的详细说明的文档 URL...
复制链接

扫一扫