PHP从入门到精通，006第二章HTML-HTML的核心标记之图
2018-11-03 本文已影响4人
极客研习社
第二章HTML
二、HTML的核心标记
（六）、图片和热点
1、图片标记
语法：<img 属性=“值” 属性=“值” 属性=“值”... />
常用属性：src：图片的地址 值：具体的路径
alt：来代替图片没有显示时的描述
width：图片的宽度，值：数字
height：图片的高度，值：数字
如果需要按照原来的比例进行缩小或放大，只设置width、height其中一个即可。
border：图片的边框， 值：数字
align：图片水平的对齐方式，值：left|center|right
如果直接给图片添加对齐，是不起作用的。
作用1：需要给图片调整位置可以放入div中，调整div的对其方式；
作用2：可以使用图片对齐进行图文混排的效果。
hspace：左右距离，值：数字
vspace：上下距离，值：数字
<div align="center"><img src="./xxx/001.jpg" alt="php从入门到精通" width="100" height="100" border="1" align="left" hspace="100" vsapace="100"/></div>
2、图片的热点
功能：在图片中添加可以点击的链接
语法：
<img src="url路径" usemap="#图片名称">
<map name="图片名称">
<area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" target="_blank">
<area shape="circle" coords="0,0,100" href="https://www.baidu.com">
<area shape="poly" coords=“0,0,10,20,40,50,10,70” href="http://www.baidu.com">
</map>
