在网页中使用图像

Posted 2020-07-25

11.1 在网页上放置图像

        <!-- <img />标签的src和alt属性是Xhtml网页要求的.src属性标识图像文件,alt属性指定关于图像的描述性文本 -->
        <img src ="myimage.gif"alt = "My Image" />

View Code

11.2 用文本描述图像

        <!-- title属性对<img />标签不是必需的.title属性类似于alt属性,实际上,在两个属性都指定的情况下,
            在工具提示中title属性将覆盖alt属性-->

View Code

11.3 指定图像高度和宽度

        <!-- width 和 height指定高度 -->
        <img src = "" alt = "" width = "200" height = "100" />

View Code

11.4 对齐图像

　　11.4.1 水平对齐图像

        <!-- float:left 指定图像左对齐,float:right 指定图像右对齐 -->
        <img src = "" alt = "Tunnel View" width = "100" height = "80" style = "float: right; padding: 6px;" />

View Code

　　11.4.2 垂直对齐图像

        <!--
            vertical-align: text-top //与同一行中最高的图像或者文本的顶部对齐
            vertical-align: text-bottom //与文本的底部对齐
            vertical-align: middle //与同一行中其他内容的中心对齐
            vertical-align: baseline //与文本的基线对齐
        -->

View Code

11.5 将图像变为链接

11.6 使用背景图像

        <!--
            background-color: 指定元素的背景颜色.
            background-image: 指定作为元素背景的图像,url("xxx")
            background-repeat: 指定图像重复的方式.可以是水平或者垂直方向
                repeat,repeat-x,repeat-y,no-repeat
            background-position: 指定图像开始相对于其容器的位置
                top-left,top-center,top-right,center-left,center-center,center-right,bottom-left,bottom-center,bottom-right
            -->

View Code

11.7 使用图像映射

　　11.7.1 为什么图像映射不总是必要的?

　　11.7.2 映射图像中的区域

　　11.7.3 创建用于图像映射的HTML

        <img src = "map.png" usemap = "#countymap" style = "border: none;width: 650px;height: 509px" />
        <map name = "countymap" id = "contymap">
            <!-- shape 指明该区域为矩形,圆形还是不规则多边形
                coords给出区域的像素坐标,href指定区域链接的页面,alt让你能够提供于该区域形状相关联的一小段文字-->
            <area shape = "rect" coords = "100,136,116,152" href="http://www.whitemancounty.org/"
                  alt = "Whiteman County, WA" title = "Whiteman County WA" />
        </map>

View Code

11.8 总结

        <!--
            <img /> 将图像放在网页中
            <map>...</map> 客户端图像映射,由<img usemap="..." />引用,包含一个或多个<area />标签
            <area /> 在用户端图像映射中定义可单击的链接
            属性
            src = "地址"
            alt = "取代图像的描述"
            title = "标题"
            width = "宽度"
            height = "高度"
            style = "border-style:none"
            style = "vertical-align:alignment"
            sytle = "float:float"
            usemap = "名称"
            shape = "值"
            cords = "值"
            href = "链接URL
         -->

View Code