HTML08.图片元素

图片元素

img元素

单词缩写：image缩写，空元素

• src属性：source表示资源，用于指定图像文件的路径和文件名，他是img标签的必须属性。

1. 站外属性：就直接右键保存图片地址然后复制到

2. 站内属性：直接./然后通过提示输入图片地址

• alt属性：当图片资源失效时，将使用该属性的文字替代图片<img src="" alt="这是一张太阳系的图片">

 

属性	属性值	描述
src	URL	图像的路径
alt	文本	图片不能正常显示，就显示文字
title	文本	鼠标放到图片上，显示文字
width	像素	写了这个就不用写height，会等比例放大或缩小
height	像素	写了这个就不用写width，会等比例放大或缩小
border(了解)	数字	设置图像边框的宽度

<img src=" " alt=" " title="" width/height="数字" border="数字" />

 

注：

1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3. 采取 键值对 的格式 key="value" 的格式

 

和a元素联用

<a target="_blank" href="某地址">
        <img src="./+某" alt="这是一张太阳系的图片">
</a>

和map元素

map：地图（图片里的某些地方可以点开进入另一个页面）  <img usemap="#solarMap" src="" alt="">

<map name="solarMap">
​
</map>

map的子元素：area 与a元素联用  <img usemap="#solarMap" src="" alt="">

<map name="solarMap">
    <area shape="circle" coords="x,y,r" href="网页地址" target="_blank">
</map>

shape属性：形状 circle圆，rect长方形，poly多边形

coords属性： 圆：长（x值）、宽（y值）、半径 长方形：左上角的值，右下角的值 多边形：依次描述每个点的坐标

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：

ps、pxcook、cutpro

和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来（表示文字说的是图片的信息）

figure的子元素：figcaption（指图片的文字信息里的标题元素）