码迷,mamicode.com
首页 > Web开发 > 详细

HTML基础复习(二)图像

时间:2017-04-11 16:40:14      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:标签   包括   像素   引用   文本   order   移植   动画   ref   

在HTML中,图像由<img>标签定义,是一个空元素

1、src属性

  源属性,即是URL地址。

2、alt属性

  替换文本属性,当图片加载失败时,浏览器将显示这个替代性的文本而不是图像。

3、height/width属性

  图像的高度/宽度,默认单位是像素

  <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

4、边框border属性

  <img border="0" src="smiley.gif" alt="学习" width="32" height="32">

5、CSS“float”属性

  <p><img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。</p>

6、定义超链接图像

  <a href="http://www.runoob.com/html/html-tutorial.html"><img src="smiley.gif" alt="学习" width="32" height="32"></a>

7、定义地图图像(客户端图像映射)----有可点击区域的图像

  (1)<img>的属性“usemap”:可以引用<map>中的id/name

  (2)标签<map>:添加属性id/name

  (3)标签<area>:永远都嵌套在map元素内

8、注意:

  在 HTML5 中, 如果 id 属性在<map> 标签中指定, 则必须同样指定 name 属性。

  在 XHTML 中,name 属性已经废弃,使用 id 属性替换它。

9、srcset属性:

  <img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w">

 

 sizes属性:(加上sizes属性,会发现,随着浏览器宽度变大,图片一直保持其初始尺寸)

  <img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w" sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">

 

10、常见的图像格式----GIF(图像交换格式)

  后缀: GIF 图像文件都用 .gif (或者 .GIF)作为文件名后缀,实际上却有两个 GIF 版本:原始的 GIF87 和 GIF89a,后者支持很多新特性,包括透明背景、交叉存储和动画等

  特性:可移植性强、无损压缩、易实现动画

  GIF 图像有三种特殊的技巧:隔行扫描(interlacing)、透明性(transparency)和动画(animation)。

11、常见的图像格式----JPEG

  后缀:通常由 .jpg (或者 .JPG)文件名来结尾

 

学习资料:《“http://www.w3school.com.cn/media/media_gif.asp”》;

《“http://www.runoob.com/html/html-images.html”》

HTML基础复习(二)图像

标签:标签   包括   像素   引用   文本   order   移植   动画   ref   

原文地址:http://www.cnblogs.com/YanRuYu-MoRuHua/p/6694010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!