图片元素
img元素
img元素是空元素,没有结束标签。
- src属性:source
- alt属性:当该图片失效时,将使用改属性的文字代替图片
和a元素连用
a元素与img元素套用
<a href="">
<img src="">
</a>
和map元素
图片特殊位置链接
map,地图
子元素:area
- shape(形状):圆形、矩形、多边形
- 圆形circle:圆形坐标、半径
- 矩形rect:左上角、右下角坐标
- 多边形poly:各点都要描述
- coords(坐标地址):
- 衡量坐标时,为了避免衡量误差,需要使用专业的衡量工具:ps、pxcook、cutpro
- href(链接):地址
- alt(当该图片失效时,将使用改属性的文字代替图片):
- target(新窗口还是原窗口):blank、
和figure元素
指代、定义,通常用于把图片、图片标题、描述包裹起来
子元素:figcaption
<body>
<figure>
<a target="_blank" href="https://baike.sogou.com/v58907.htm?ch=frombaikevr">
<img usemap="#solarMap" src="./行星.jpg" alt="这是一张行星图片">
</a>
<figcaption>
<h2>太阳系</h2>
</figcaption>
<p>
太阳系是一个受太阳引力约束在一起的天体系统,包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质,太阳系位于距银河系中心大约2.4~2.7万光年的位置。
</p>
</figure>
<map name="solarMap">
<area shape="circle" coords="364,141,26" href="https://baike.sogou.com/v181522465.htm?fromTitle=木星&ch=frombaikevr" alt="木星信息" target="_blank">
<area shape="rect" coords="429,227,505,281" href="https://baike.sogou.com/v181522465.htm?fromTitle=木星&ch=frombaikevr" alt=" " target="_blank">
</map>
</body>