图片元素
2019-11-02 本文已影响0人
WhiteStruggle
图片元素
source元素：
空元素；
使用方式是将src放入其中
<source src="">
img
image缩写，空元素
src（source）属性：
绝对路径与相对路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 相对路径获取图片 -->
<img src="./picture/Game2.bmp" alt="这是一个剑士的图片">
<!-- 绝对路径获取图片 -->
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg">
</body>
</html>
alt属性：
当图片失效，会显示一段文字
与a元素连用
和map元素
map ：地图
name
mapz的子元素——
area：
shape（形状） 坐标 （coords） 链接地址（href） 跳转地址（target）
圆形——circle 坐标（圆心坐标，和半径）
矩形——rect
坐标（左上角坐标，右下角坐标
多边形——poly 坐标（依次表示每个点坐标——顺时针）
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"target="_blank">
<img usemap="#星球" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3345330057,2782768822&fm=26&gp=0.jpg" alt="这是一张太阳系图片">
</a>
<map name="星球">
<area shape="circle" coords="121,156,20" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
<area shape="rect" coords="155,110,200,136" href="https://baike.baidu.com/item/%E5%9C%9F%E6%98%9F/136354?fr=aladdin" >
</map>
</body>
</html>
衡量坐标时，为了避免衡量误差，需要使用专业的测量工具
ps、pxcook
和figure元素
指代，定义，通常用于把图片，图片标题，描述包裹起来
更加符合语义化，使计算机可以理解网页的内容
子元素：figcaption ——子代东西的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<figure>
<a target = "_blank"href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B7%E7%BE%B0&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111">
<img title = "这是美丽的风景"src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=123807196,3598291508&fm=26&gp=0.jpg">
</a>
<figcaption>
<a target = "_blank"href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B7%E7%BE%B0&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111">
<h2 title="这是美丽的风景">
风景
</h2>
</a>
</figcaption>
<p>
自然风景图片天空图片蓝天白云图片阳光图片日出图片晚霞图片夕阳图片落日图片星空图片夜空图片土地图片戈壁图片沙漠图片峡谷图片山脉图片山川图片山林图片森林图片树林图片草原
</p>
</figure>
</body>
</html>
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白
-
设置父元素font-size大小为0
-
将图片设置为块盒（block）
