首页 > 代码库 > [HTML/HTML5]6 使用图像
[HTML/HTML5]6 使用图像
6.1 将图像作为Web页面的前景元素
使用img元素，就可以在Web页面中添加图像。img是image的缩写。只需在img元素中添加src（source的缩写）属性，并为该属性设置相应的值，就可以将图像显示在Web页面上。
1 <img src="photo.jpg"> <!-- img是空元素，因此无对应的结束标记 -->
src属性的值应该包含文件的正确路径名和位置。
如果想使用的图像与当前HTML页面不在同一个文件夹中，那么需要告诉浏览器图像位于哪一个文件夹中。例如，如果图像位于比当前HTML页面所在目录高一级的文件夹中，则应该使用src=http://www.mamicode.com/“../photo.jpg”，其中../告诉浏览器在查找图像文件之前，先上移一层目录。
如果想引用另一个Web站点中的图片，首先必须获得该图像所有者的许可，然后可以使用src=http://www.mamicode.com/“www.websitename.com/images/photo.jpg”这样的方式来引用该图片，器中URL就是其它网站上图像的完整名称。
6.1.1 指定图像的高度和宽度
在Web页面中添加几张图片后，你可能会注意到在浏览器显示页面之前，页面中的图像有时会导致浏览器等待数秒的时间。这是因为浏览器不知道图像的尺寸，实际上某些浏览器在显示Web页面之前将一直等待，直到所有图像都下载完毕。
因此，通过img标记中的height和width属性，告诉浏览器图片的尺寸，就可以帮助浏览器加快显示Web页面的速度。
1 <img src="photo.jpg" width="391px" height="274px">
还可以使用height和width属性改变图像在页面上显示的尺寸。浏览器将根据新指定的尺寸来重新绘制该图像。W3C并不建议这样做——因为这可能会拖慢Web页面的显示速度，还可能导致图像丧失正确的长宽比。按照在Web页面中需要的尺寸来创建图像，这样做才是最好的。
6.1.2 为图像提供替换文本和标题
使用<img>标记中的alt属性，可以为图像设置一个替换文本。
alt属性的值是一段文本，它将显示在一个代替图片位置的方框之中，当浏览器无法找到该图像，或者将浏览器设置为不显示图像时，将显示该方框以代替图像。
1 <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>即可。
1 <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元素来实现。
1 <figure> 2 <img src="fabric-banner.jpg" alt="Fabric banner"> 3 <figcaption> 4 Fabric banner handmade by the women of Nueva Imagen 5 </figcaption> 6 </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）。
1 .headsot{ 2 border-style:double; 3 border-left-style:none; 4 border-right-style:none; 5 border-width:10px; 6 border-left-width:0px; 7 border-right-width:0px; 8 border-color:#c00; 9 }
6.2.2 浮动
当在一个文本块中添加图像时，有时希望改变图像的对齐方式，使图像不再简单地显示在文本的上面或下面，而是浮动在文本流之中。即采用CSS的float属性，并将其值设置为left或right即可。
（1）浮动文本中的图片
float属性的作用是告诉浏览器，将被浮动元素放在最靠近的指定浏览器边缘的位置，然后浮动其余的页面内容。换句话说，内容将自动地沿着设置了左浮动（left-floated）图片的右侧进行流动，或者沿着设置了右浮动（right-floated）图片的左侧进行流动。float属性可能的取值包括：left、right和none。
1 <img src="photo.jpg" style="float:left;">
（2）清除浮动
有时会遇到这种情况，即实际上需要停止或清除浮动。假如想将较长的文本拆分为两个段落，然后只让第一个段落包围着图像。第二个段落仍然占据整个页面的宽度。要实现这种布局，必须在第二个段落中使用clear属性来“清除浮动”。clear属性可能的取值为：left、right、both和none。
1 <p style="clear:left;">Remaining paragraph of text.</p>
（3）浮动图片组
假如页面中包含很多图像，如果所有图像都具有相同尺寸，那么使用float属性可以很容易地让浏览器自动将这些图像显示在页面同一行上（in line）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 figure{ 8 float: left; 9 } 10 figure figcaption{ 11 text-align: center; 12 font-family: ‘微软雅黑‘; 13 } 14 </style> 15 </head> 16 <body> 17 <figure> 18 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px"> 19 <figcaption>金木</figcaption> 20 </figure> 21 <figure> 22 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px"> 23 <figcaption>金木</figcaption> 24 </figure> 25 <figure> 26 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px"> 27 <figcaption>金木</figcaption> 28 </figure> 29 </body> 30 </html>
6.2.3 内边距和外边距
还可以将padding属性和margin属性应用于图像，以定义围绕着图像内边距和外边距，可以声明一条边、两条边和三条边或四条边的边距。
1 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="margin: 100px;">
1 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="padding: 100px;">
6.2.4 居中
使元素左外边距和右外边距完全相等就可以实现居中的效果，前提必须是告诉浏览器将图像作为一个块级元素处理。在CSS中，块级元素将自动填充整个可用空间。因此，如果将图像设置为一个块级元素，则它的外边距将自动扩展，直到遇到浏览器窗口的边缘。
1 img.centered{display:block; margin-left:auto; margin-right:auto;}
6.3 将图像作为Web页面的背景元素
在Web页面中图像还有另一个角色，即作为Web页面的背景图片。即在body元素的样式声明中，添加background-image属性：
1 body{background-image:url("piture.jpg");}
在样式表中背景属性有一个巨大的好处，即可以将背景图像应用于所有的页面元素，从段落、列表到表格中的单元格，都可以采用与定义body元素背景相同的办法进行定义。
1 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：背景图像不重复显示。
1 body{ 2 background-image: url("f://img/test2.jpg"); 3 background-repeat: no-repeat; 4 background-attachment: fixed; 5 }
[HTML/HTML5]6 使用图像