[HTML/HTML5]6 使用图像
6.1 将图像作为Web页面的前景元素
使用img元素，就可以在Web页面中添加图像。img是image的缩写。只需在img元素中添加src（source的缩写）属性，并为该属性设置相应的值，就可以将图像显示在Web页面上。
<img src="photo.jpg"> <!-- img是空元素，因此无对应的结束标记 -->
src属性的值应该包含文件的正确路径名和位置。
如果想使用的图像与当前HTML页面不在同一个文件夹中，那么需要告诉浏览器图像位于哪一个文件夹中。例如，如果图像位于比当前HTML页面所在目录高一级的文件夹中，则应该使用src=“../photo.jpg”，其中../告诉浏览器在查找图像文件之前，先上移一层目录。
如果想引用另一个Web站点中的图片，首先必须获得该图像所有者的许可，然后可以使用src=“www.websitename.com/images/photo.jpg”这样的方式来引用该图片，器中URL就是其它网站上图像的完整名称。
6.1.1 指定图像的高度和宽度
在Web页面中添加几张图片后，你可能会注意到在浏览器显示页面之前，页面中的图像有时会导致浏览器等待数秒的时间。这是因为浏览器不知道图像的尺寸，实际上某些浏览器在显示Web页面之前将一直等待，直到所有图像都下载完毕。
因此，通过img标记中的height和width属性，告诉浏览器图片的尺寸，就可以帮助浏览器加快显示Web页面的速度。
<img src="photo.jpg" width="391px" height="274px">
还可以使用height和width属性改变图像在页面上显示的尺寸。浏览器将根据新指定的尺寸来重新绘制该图像。W3C并不建议这样做——因为这可能会拖慢Web页面的显示速度，还可能导致图像丧失正确的长宽比。按照在Web页面中需要的尺寸来创建图像，这样做才是最好的。
6.1.2 为图像提供替换文本和标题
使用<img>标记中的alt属性，可以为图像设置一个替换文本。
alt属性的值是一段文本，它将显示在一个代替图片位置的方框之中，当浏览器无法找到该图像，或者将浏览器设置为不显示图像时，将显示该方框以代替图像。
<img src="art-turtle" height="600" width="412" alt="drawing of a turtle">
除了alt属性之外，在<img>标记中添加title属性也是一个好主意。在浏览器无法加载图像的情形时，在靠近鼠标指针的提示方框中要显示重要的信息。此外，title属性不仅可以添加到<img>标记之中，还可以添加到链接和其它页面元素之中。title属性的作为是为用户提供一个快速提示，简单地解释页面元素的内容。
6.1.3 将图像链接到Web站点上的其它内容
可以使用文本短语作为链接的标签，以便让用户单击链接。还可以使用图像作为链接的标签，它既可以带一个文本标签，也可以不带任何文本标签。
要将整幅图片作为链接，只需在<img>左右添加<a>和</a>即可。
<a href="www.baidu.com"><img src="art-turtle" height="600" width="412" alt="drawing of a turtle" title="Drawing of a turtle"></a>
6.1.4 添加图片标题
在HTML5之前，并没有一个简单的办法可以通过语义方式为实际的图像定义一个图片标题。幸运的是，在HTML5中可以使用figure元素和figcaption元素来实现。
<figure>
<img src="fabric-banner.jpg" alt="Fabric banner">
<figcaption>
Fabric banner handmade by the women of Nueva Imagen
</figcaption>
</figure>
除了图像之外，还可以使用figure和figcaption元素为其它元素定义关联的标题。假如创建了一个提供参考信息表，并想将其放在一个较大的文本块中。可以将该表或其它图表放在一个figure元素中，然后该figure元素添加一个figcaption元素以定义一个解释该图表的标题。
6.2 为前景图片定义样式
6.2.1 图像边框
在新的HTML规范中，W3C取消了img中的border属性，建议使用样式表来调整边框的显示，样式表对边框提供了更多的控制能力。
与边框有关的样式表属性：
- border-style：用于设置边框的线条风格，默认值为none（无边框），所以没有指定border-style值时，边框不显示。
- border-width：控制边框的宽度，既可以单独设置边框的每一条边的宽度（border-left-width、border-right-width等），也可以一次设置四条边的宽度（border-width）。
- border-color：可以指定1~4个值，用于控制边框的颜色。当指定两个值时，第一个值上下，第二值左右；当指定三个值时，第一个值上，第二个值左右，第三个值下；当指定四个值时，上下左右。
- border-radius：可以指定1~4个值，用于控制边框4个角的圆角效果。要为图像的边框创建圆角效果，只需将border-radius属性设置为一个大于0的值即可。
样式表为设置边框的各个属性提供了强大的功能，既可以将边框的4条边作为一个整体进行设置，也可以分别对每一条边进行设置。要单独设置某一条边，只需简单地在边框属性中添加该边的名称即可（top、right、bottom或者left）。
.headsot{
border-style:double;
border-left-style:none;
border-right-style:none;
border-width:10px;
border-left-width:0px;
border-right-width:0px;
border-color:#c00;
}
6.2.2 浮动
当在一个文本块中添加图像时，有时希望改变图像的对齐方式，使图像不再简单地显示在文本的上面或下面，而是浮动在文本流之中。即采用CSS的float属性，并将其值设置为left或right即可。
（1）浮动文本中的图片
float属性的作用是告诉浏览器，将被浮动元素放在最靠近的指定浏览器边缘的位置，然后浮动其余的页面内容。换句话说，内容将自动地沿着设置了左浮动（left-floated）图片的右侧进行流动，或者沿着设置了右浮动（right-floated）图片的左侧进行流动。float属性可能的取值包括：left、right和none。
<img src="photo.jpg" style="float:left;">
（2）清除浮动
有时会遇到这种情况，即实际上需要停止或清除浮动。假如想将较长的文本拆分为两个段落，然后只让第一个段落包围着图像。第二个段落仍然占据整个页面的宽度。要实现这种布局，必须在第二个段落中使用clear属性来“清除浮动”。clear属性可能的取值为：left、right、both和none。
<p style="clear:left;">Remaining paragraph of text.</p>
（3）浮动图片组
假如页面中包含很多图像，如果所有图像都具有相同尺寸，那么使用float属性可以很容易地让浏览器自动将这些图像显示在页面同一行上（in line）。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
figure{
float: left;
}
figure figcaption{
text-align: center;
font-family: '微软雅黑';
}
</style>
</head>
<body>
<figure>
<img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">
<figcaption>金木</figcaption>
</figure>
<figure>
<img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">
<figcaption>金木</figcaption>
</figure>
<figure>
<img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">
<figcaption>金木</figcaption>
</figure>
</body>
</html>
6.2.3 内边距和外边距
还可以将padding属性和margin属性应用于图像，以定义围绕着图像内边距和外边距，可以声明一条边、两条边和三条边或四条边的边距。
<img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="margin: 100px;">
<img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="padding: 100px;">
6.2.4 居中
使元素左外边距和右外边距完全相等就可以实现居中的效果，前提必须是告诉浏览器将图像作为一个块级元素处理。在CSS中，块级元素将自动填充整个可用空间。因此，如果将图像设置为一个块级元素，则它的外边距将自动扩展，直到遇到浏览器窗口的边缘。
img.centered{display:block; margin-left:auto; margin-right:auto;}
6.3 将图像作为Web页面的背景元素
在Web页面中图像还有另一个角色，即作为Web页面的背景图片。即在body元素的样式声明中，添加background-image属性：
body{background-image:url("piture.jpg");}
在样式表中背景属性有一个巨大的好处，即可以将背景图像应用于所有的页面元素，从段落、列表到表格中的单元格，都可以采用与定义body元素背景相同的办法进行定义。
p{background-image:url("piture.jpg");}
通过在页面样式表中添加background-attachment属性，可以强制背景图像保持静止。
当把background-attachment属性的值设置为fixed时，背景图像将保持固定状态。
当把background-attachment属性的值设置为scroll时，背景图像将随着页面的滚动而滚动。
与之类似，还可以使用background-repeat属性，告诉浏览器是否重复显示背景图像。background-repeat属性可能的取值为：
- repeat：背景图像在水平和垂直两个方向上都重复显示；
- repeat-x：背景图像仅在水平方向上重复显示；
- repeat-y：背景图像仅在垂直方向上重复显示；
- no-repeat：背景图像不重复显示。
body{
background-image: url("f://img/test2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
[HTML/HTML5]6 使用图像的更多相关文章
- 三天学会HTML5——SVG和Canvas的使用
在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...
- 网站开发中很实用的 HTML5 & jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(3)
第11章 用CSS 进行布局 网站设计主要有两大类型:固定宽度和响应式. 对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度.顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(2)
第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block) ...
- HTML5和CSS3基础教程(第8版）-读书笔记
第1章 网页的构造块 一个网页主要包括以下三个部分: n 文本内容(text content):在页面上让访问者了解页面内容的纯文字. n 对其他文件的引用(referen ...
- HTML5性能优化
HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5 ...
- [转] 《高性能HTML5》读后整理的Web性能优化内容
读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...
- 使用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...
- HTML5 Canvas | w3cschool菜鸟教程
HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...
随机推荐
- Html5的表单
跨浏览器 https://github.com/westonruter/webforms2 https://github.com/Modernizr/Modernizr http://www.blog ...
- 坑爹的 SONY AS100V GPS
事情是这样的,为了记录自己的生活,也是出于对视频编辑的兴趣,买了一台 SONY 的 AS100V 运动摄像机. 公司到货,回家路上拍了一段,回家兴冲冲的连上电脑,想看看 GPS 数据,发现是 SONY ...
- Linux_scp
scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
- JDStatusBarNotification和一些宏定义
// // AddTopicViewController.m // vMeet2 // // Created by 张源海 on 16/6/30. // Copyright © 2016年 h ...
- presto的动态化应用(一):presto节点的横向扩展与伸缩
一.presto动态化概述 近年来,基于hadoop的sql框架层出不穷,presto也是其中的一员.从2012年发展至今,依然保持年轻的活力(版本迭代依然很快),presto的相关介绍,我们就不赘述 ...
- jQuery Mobile应用之火车票查询
效果图: 在CMD中输入如下代码 corsproxy (前提是有node.js环境,并先安装corsproxy) html: <!DOCTYPE html> <html> &l ...
- 写入文件（txt格式）
#region 写入文件 /// <summary> /// 写入文件 /// </summary> /// <param ...
- vue transition
Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...
- python中文乱码问题
在学习python的时候,当我要print中文的时候,会出现以下提示: py = '你好,世界!'print py File "n2.py", line 1 SyntaxError ...
- 关于sql中join
对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...