• 12. HTML图像


    一. 方法:<img />

         注意: <img />是空标签。

                  <img border="0" src="url.img" />

    二. 替换文本属性alt

        作用: 浏览器无法载入图像时, 显示替代的文本属性。

        方法: 属性alt="text"

                 <img src="url.img" alt="textvalue"/>

    三. 实例

    (1)HTML页面背景图片 <body background="i/value.img"></body>

            注意: gif 和 jpg文件均可用作HTML背景。

    (2)对其方式: <p>

                          <img src="i.img" align="bottom" />

                           </p>

            属性:align, 默认为bottom。

                               若为left,right, 则不管在文本中何位置, 都会在左边或右边。

                  

    (3)调整图像尺寸: width, height属性。

    (4)创建图像映射: 图像中的每个区域都是超链接。

            (1)<img />中需要有usemap="#value",注意以#开头。

            (2)<map></map>中的id和name属性值应与usmap的值相同(没有#)。

            (3)<map></map>中添加<area />(没有结束标签)。

                 <area />属性, 6个, alt, ,target, shape, coords,href,nohref(值, nohref)。

    <html>
    <body>

    <p>请点击图像上的星球,把它们放大。</p>

    <img
    src="/i/eg_planets.jpg"
    border="0" usemap="#planetmap"
    alt="Planets" />

    <map name="planetmap" id="planetmap">

    <area
    shape="circle"
    coords="180,139,14"
    href ="/example/html/venus.html"
    target ="_blank"
    alt="Venus" />

    <area
    shape="circle"
    coords="129,161,10"
    href ="/example/html/mercur.html"
    target ="_blank"
    alt="Mercury" />

    <area
    shape="rect"
    coords="0,0,110,260"
    href ="/example/html/sun.html"
    target ="_blank"
    alt="Sun" />

    </map>

    <p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

    </body>
    </html>

  • 相关阅读:
    750. Number Of Corner Rectangles
    [Project Euler] 3. Largest Prime factor
    [Project Euler] 2. Even Fibonacci numbers
    Jmeter学习笔记3-参数化
    SQL多表连接查询补充
    Jmeter学习笔记2-原件作用域与执行顺序
    Jmeter学习笔记1-实践介绍
    运用badboy录制jmeter脚本
    【SQL提数】左连接使用
    【功能测试技巧2】dubbo引起的数据精度的思考
  • 原文地址:https://www.cnblogs.com/gavinwu/p/3200154.html
Copyright © 2020-2023  润新知