Html之图片

原创 2012年03月24日 18:25:47

1:图片的备用说明(alt属性)

      alt属性用于链接图片不存在的情况,或者一些用户为了提高浏览器速度而关闭了图片下载,alt的作用很重要,它的内容会显示在浏览器中。

       <img src="images/dog_none.png" alt="这是一只狗的图片">

 

2:使用figure和figcaption元素为图片声明标题

      figure元素和figcaption元素结合来为图片、视频、表格或者嵌入元素声明标题,

    

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>Sample</title>
<style>
figure {
    display: block;
    margin: 0 auto;
    padding:20px;
    width:200px;
    text-align:center;
    border:1px #ccc dashed;
    clear:both;
}
figcaption {
    display: block;
    clear:both;
    text-align: center;
    font-style: italic;
}
figure img {
    padding: 10px;
    margin: 0 auto;
}
</style>
</head>

<body>
<figure> 
   <img src="images/icon_ch.png" alt="Chrome logo"> 
   <figcaption> 
      <p>这是Chrome流览器的标示</p> 
   </figcaption> 
</figure>




</body>
</html>



3:客户端图像映射和服务器端图像映射

     客户端图像映射:客户端图像映射没有那么复杂,鼠标移到图片时,指针对指示读者是否可以单击此区域,图像映射存储在图片的下一层,含有引用区域的相关信息

    服务器端映射:在图像上单击鼠标后,光标的相对位置坐标会被发送到服务器,然后服务器会通过一个专用程序来确定要执行的下一个步骤





图片突出显示(jquery)

body{             background:#000;         }         body,div,ul,li,img{padding:0;margin:0;border...
  • u013267266
  • u013267266
  • 2016年04月26日 20:40
  • 268

ANDROID展示HTML图文混排--实现图片缩小并点击放大

HTML图文混排--实现图片缩小并点击放大。使用的是JS和CSS实现需要的效果。 前言 开发中遇到一个比较特殊的场景,就是需要展示一段图文混排的HTML代码片段。代码片段如下: ...
  • muyi_amen
  • muyi_amen
  • 2015年07月28日 14:22
  • 1655

css进阶

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 CSS 框模型概述 ...
  • tianwei11
  • tianwei11
  • 2014年05月02日 20:32
  • 1196

导出word的实例,包括页眉页脚还有图片

package com.lt.java; import java.awt.Color; import java.io.FileOutputStream; import com.lowagie.te...
  • u014036792
  • u014036792
  • 2014年03月11日 16:25
  • 2120

js实现HTML转换成图片

html2image
  • shengsaihong
  • shengsaihong
  • 2017年08月10日 14:31
  • 2883

在html页面中直接嵌入图片数据

在html页面中直接嵌入图片数据 一般情况,通常是在html页面中应用图片的链接,如:   但是,这样的前提是我们需要将图片先上传到指定的网站,然后获取外链。一方面略麻烦,最...
  • ghlfllz
  • ghlfllz
  • 2015年02月04日 16:52
  • 2056

html下图片居中

水平居中   垂直居中
  • fengjunoo
  • fengjunoo
  • 2016年06月11日 14:37
  • 1511

html中图片走马灯效果

var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLef...
  • hxmcnu
  • hxmcnu
  • 2015年08月11日 10:22
  • 1048

html 图片丢失

html 图片丢失 onerror
  • xinyuan_java
  • xinyuan_java
  • 2015年11月22日 17:58
  • 270

HTML_插入图片详解

HTML_插入图片详解
  • admin_maxin
  • admin_maxin
  • 2017年01月17日 16:13
  • 3387
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html之图片
举报原因:
原因补充:

(最多只允许输入30个字)