zoukankan      html  css  js  c++  java
  • HTML 图像<img>

    定义和用法:

    img元素向网页中嵌入一副图像。

    请注意:从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

    属性:

    <img>标签有两个必需的属性:src属性(规定显示图像的URL)和alt属性(规定图像的替代文本)

    可选的属性:

    height:定义图像的高度。

    定义图像的宽度。

    ismap:将图像定义为服务器端图像映射。

    longdesc:指向包含长的图像描述文档的URL。

    usemap:将图像定义为客户端的图像映射。

    图片链接样式
    IE默认为紫色2px的边框线
    FF默认为蓝色2px的边框线
    要清除图片链接样式,一般可以设置
    img {
       border:0;
    }

    text–align是针对块级元素的,让块级元素里面的内容居中。<img>是行内元素,text-align也不能够让他本身居中。text-align应该放在你想要居中的元素的父元素下才有作用。

    <img>标签居中:要在<img>标签外面加一个<div>标签。

    <div style="text-align:center;>

       <img src="#" alt="xc"/>

    </div>

    <li><img>标签之间有空隙 最终解决办法

    解决方法

    一、将图片转换为块级对象
    即,设置img为“display:block;”。在本例中添加一组CSS代码:“#sub img {display:block;}”。

    二、设置图片的垂直对齐方式
    即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。如本例中增加一组CSS代码:“#sub img {vertical-align:top;}”。

    三、设置父对象的文字大小为0px
    即,在#sub中添加一行:“font-size:0;”可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

    四、改变父对象的属性
    如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码:“88px;height:31px;overflow:hidden;”。

    五、设置图片的浮动属性
    即在本例中增加一行CSS代码:“#sub img {float:left;}”。如果要实现图文混排,这种方法是很好的选择。

    六、取消图片标签和其父对象的最后一个结束标签之间的空格。
    这个方法要强调下,在实际开发中该方法可能会出乱子,因为在写代码的时候为了让代码更体现语义和层次清晰,难免要通过IDE提供代码缩进显示,这必然会让标签和其他标签换行显示,比如说DW的“套用源格式”命令。

    原因分析

    图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

    至于这里的HTML属性align=”center”(对于图片浏览器会处理成align=”middle”),就相当于vertical-align:middle; 所以道理也是一样的,只要vertical-align不取baseline,这个空隙就消失了。

    相关信息

    IE的显示有几种模式,在html文档的开始部分声明<!DOCTYPE ….> 如果声明为strict模式,ie以w3c的方式显示文档,而w3c的标准里面<img />默认是一个inline的标签,除非自己显式的声明为block。

    那个空隙是ie针对盒模型默认的line-height和font-size。给img desplay:block;虽然能解决问题,但没从结构上来考虑.可谓治标不治本。

    HTML 与 XHTML 之间的差异

    在 HTML 中,<img> 标签没有结束标签。

    在 XHTML 中,<img> 标签必须被正确地关闭。

    在 HTML 4.01 中,不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

    在 XHTML 1.0 Strict DTD 中,不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

    例子:

    1.制作图像链接:

    <html>
    
    <body>
    <p>
    您也可以把图像作为链接来使用:
    <a href="/example/html/lastpage.html">
    <img border="0" src="/i/eg_buttonnext.gif" />
    </a>
    </p>
    
    </body>
    </html>

    2.创建图像地图:

    <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>
  • 相关阅读:
    【转载】为什么我的网站加www是打不开的呢
    【转载】IIS网站配置不带www域名直接跳转带www的域名
    【转载】IIS网站如何同时解析带www和不带www的域名
    【转载】C#中将字符串分割成字符数组
    Android面试,简要介绍一下asynctask和handler的优缺点
    Android面试题(2)
    Android面试题(1)
    Android -- 与WEB交互在同一个会话Session中通信
    25匹马的角逐
    Android -- 检测耳机插入状态
  • 原文地址:https://www.cnblogs.com/zuihongyan/p/5639982.html
Copyright © 2011-2022 走看看