WEB基础之:图像标记

图像标记

1) src插入一张图像
	<img src="images/1.jpg">

2) height,width图像高度与宽度
    <img src="images/1.jpg" height="160">
    <img src="images/1.jpg" width="160">
<!--    在该语法中,图像的单位是像素,如果只设置了高度或宽度,则另一个参数会等比例变化;如果同时设置两个属性,且缩放比例不同的情况下,图像可能会变形;-->

3) border图像边框
    <img src="images/1.jpg" border="3"><br />

4) hspace,vspace图像水平与垂直间距
    <img src="images/1.jpg" height="160" hspace="20">
    <img src="images/1.jpg" height="160" vspace="20">

5) align图像相对于基准线的对齐方式
    <img src="images/1.jpg" height="160" align="top">
    <!--
        top: 顶部对齐
        middle: 中央对齐
        bottom: 底部对齐
        texttop: 图像的顶部与同行中最高文本的顶部对齐
        absmiddle: 图像的中部与同行中最大项的中部对齐
        baseline: 图像的底部与同行和文本的基线对齐
        absbottom: 图像的底部与同行中最低项的中部对齐
        left: 对齐到左边
        right: 对齐到右边
    -->

6) title图像提示文字
    <img src="images/1.jpg" height="160" title="图像提示文字"><br />
<!--    当图像下载完成,鼠标放在该图像上,会显示提示文字-->

7) alt图像的替换文字
    <img src="images/2.jpg" alt="图像没有正常显示时,在图像位置显示定义的替换文字">

8) 图像超链接
    <a href="https://baidu.com"><img src="images/1.jpg" width="160" title="图像超链接"></a>


9) usemap设置图像热区链接
    <img src="images/1.jpg" usemap="映射图像名称">
    <map name="映射图像名称">
        <area shape="热区形状" coords="热区坐标" href="链接地址">
    </map>
<!--在图像的属性中使用"usemap"添加图像要引用的映射图像的名称,
area属性:
    rect, circ, poly
coords属性
    x1,y1,x2,y2:如果 shape 属性设置为 "rect",则该值规定矩形左上角和右下角的坐标。
    x,y,radius:如果 shape 属性设置为 "circ",则该值规定圆心的坐标和半径。
    x1,y1,x2,y2,..,xn,yn:如果 shape 属性设置为 "poly",则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加最后一对坐标。
-->
    <img src="images/1.jpg" usemap="#映射图像名称">
      <map name="映射图像名称">
      	<area shape="rect" coords="0,0,110,260">Sun</a>
      </map>

posted @ 2020-11-20 06:06  f_carey  阅读(25)  评论(0编辑  收藏  举报  来源