03HTML5学习之视觉元素与图像

边框属性（border）用于配置某个元素的边框或边界。默认的边框宽度为0，也即不显示。我们可以在边框属性中设置边框宽度(border-width)、边框颜色(border-color)、边框样式(border-style)。此外，你还可以单独设置边框的顶边(border-top)、右边(border-right)、底边(border-bottom)、左边(border-left)。

边框样式属性

border-style属性用于设置边框线条的类型。格式化选项包括：3D inset 边框(inset)、3D outset边框(outset)、双线边框(double)、3D凹槽边框(groove)、3D垄状边框(ridge)、实线边框(solid)、虚线边框(dashed)以及点状边框(dotted)。注意，不同浏览器对这些属性值的解读可能不一样。简写法代码如下：

.dashedborder { border: 3px dashed #000033; }

内边距属性

padding属性配置了HTML元素的内容（通常为文本）与边框之间的距离。默认状态下，padding为0。如果你为某个元素设置了背景色，那么内边距与内容区域均显示为这一颜色。下表列出了本章中介绍的CSS属性。

属性名称	描述	值
background-color	设置背景图像是固定还是随着页面的其余部分滚动	fixed（固定），scroll（可滚动，默认）
background-clip	规定背景的绘制区域。	padding-box，border-box或者content-box
background-image	为元素设置背景图像	指向图像的路径URL以显示图像（可以是gif、jpg、png）；none：默认值。不显示图像背景。
background-origin	规定背景图片的定位区域。	padding-box，border-box或者content-box
background-position	设置背景图像的开始位置	两个百分比值或者像素值。第一个值是水平位置，第二个值是垂直位置，从容器元素的左上角开始。也可以用文本值：left，top，center，bottom或者right。
background-repeat	设置是否重复以及如何重复背景图像	T 文本值 repeat（默认），repeat-y（垂直方向重复），repeat-x（水平方向重复），no-repeat（不重复）。
background-size	规定背景图片的尺寸	两个百分比值、像素数值、auto、contain或者cover。第一个值指定宽度，第二个值指定高度。如果只提供第一个值，第二个值默认为auto。contain会使图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，纵横比不变。
border	简化写法，在一个声明中设置某个元素所有边框属性（border-width、border-style和border-color）	分别指定border-width、border-style和border-color的值，以空格分开。
border-bottom	简化写法，在一个声明中设置所有的下边框属性	分别指定border-width、border-style和border-color的值，以空格分开。
border-bottom-left-radius	定义边框左下角的形状。	一个数值（px或em），指定角的半径
border-bottom-right-radius	定义边框右下角的形状。	一个数值（px或em），指定角的半径
border-color	设置某个元素边框的颜色	任意有效颜色值
border-left	简化写法，在一个声明中设置所有的左边框属性	分别指定border-width、border-style和border-color的值，以空格分开。
border-radius	为某元素添加圆角边框	一至四个数值（px或em）或者百分比，用于指定各个角的半径。如果只提供单个值，那么四个角的设置相同。各个角的顺序次序依次为左上、右上、右下、左下
border-right	简化写法，在一个声明中设置所有的右边框属性	分别指定border-width、border-style和border-color的值，以空格分开。
border-style	设置四条边框的样式	文本值：double，groove，inset，none（默认），outset，ridge，solid，dashed，dotted以及hidden
border-top	简化写法，在一个声明中设置所有的上边框属性	分别指定border-width、border-style和border-color的值，以空格分开。
border-top-left-radius	定义边框左上角的形状。	一个数值（px或em），指定角的半径
border-top-right-radius	定义边框右上角的形状。	一个数值（px或em），指定角的半径
border-width	设置某元素四个边框的宽度	一个数值或百分比
box-shadow	向方框添加一个或多个阴影。	二至四个数值（px或em）以指定水平偏移、垂直偏移、模糊半径（可选）、扩展距离（可选）以及一个有效的颜色值。如果使用关键字insect，则配置一个内部阴影。
height	设置元素高度	一个像素值或百分比
linear-gradient	设置从一种颜色到另一种颜色的线性混合阴影。	用于设置渐变起始点和颜色值的语法选项众多。
max-width	设置元素的最大宽度	一个像素值或百分比
min-width	设置元素的最小宽度	一个像素值或百分比
opacity	定义元素的不透明级别	介于1（完全不透明）到0（完全透明）之间的一个数值。所有子元素都会继承该属性
padding	简化写法，在一个声明中设置所有内边距属性——元素与其边框间的空白宽度	1、单个数值（px或em）或百分比；元素所有的内边距均为该值。 2、两个数值（px或em）或百分比；第一个值设置上内边距和下内边距；第二个值设置左内边距和右内边距。 3、三个数值（px或em）或百分比；第一个值设置上内边距；第二个值设置左内边距和右内边距；第三个值设置下内边距。 4、四个数值（px或em）或百分比；依次设置上、右、下、左四个内边距值。
padding-bottom	设置元素与其底部边框之间的空白宽度	一个数值（px或em）或百分比
padding-left	设置元素与其左侧边框之间的空白宽度	一个数值（px或em）或百分比
padding-right	设置元素与其右侧边框之间的空白宽度	一个数值（px或em）或百分比
padding-top	设置元素与其顶部边框之间的空白宽度	一个数值（px或em）或百分比
radial-gradient	设置从一种颜色到另一种颜色的径向混合阴影。	用于设置渐变起始点和颜色值的语法选项众多。

2、图像类型

图像能让网页变得更光彩夺目、引人入胜。

图片互换格式（GIF）图片

GIF图片最适合保存绝大多数纯色和简单几何形状的图片，如剪贴画。GIF文件中的色彩不能超过256种。它的文件拓展名为.gif。

透明度

GIF图片使用GIF89A格式，支持图像透明度设置。在图像处理软件中，可以将图片中的某种颜色（通常是背景色）设置成透明的。网页背景颜色（或背景图）是通过图片中的透明区域显示的。

动画

动画GIF由几张或几帧图片组成。每张图片略有不同。当这些帧在屏幕上依次显示时，图片就动了起来。动画GIF可以用图像处理软件（如Adobe Fireworks）来制作。

压缩

保存GIF图片时采取的是无损压缩（Lossless compression）方式。这就意味着原始图片不会丢失任何信息，并且在浏览器中打开时，它所呈现的像素与原始图片是一样的。

优化

为了避免使网页下载速度过慢，图片文件应进行优化。图片优化指的是在权衡了图像质量和文件大小后以尽可能小的文件保证图片高质量显示的过程。GIF图片优化通常是在Adobe Photoshop、Adobe Fireworks或GIMP等图像处理软件中通过减少图片中的颜色数量来实现的。

交错

浏览器在渲染或显示网页文档时，是从顶部开始，依次、逐行进行的。就像读取文件一样，浏览器按照从上到下的顺序显示标准图片，并且只有当50%的文件被下载到服务器之后才开始显示。GIF图片文件在创建时可以配置为交错模式。交错的图片是逐渐显示的，在下载时有一种“淡入”的效果。一开始图片看上去很模糊，渐渐变得清晰锐利起来，这使得访客有种网页加载并不慢的感觉。

联合照片专家小组（JPEG）图像

“联合照片专家小组”（Joint Photographic Experts Group，JPEG）格式最适用于照片。与GIF图片不同，JPEG图片可以包含1670种颜色。不过，JPEG图片不能设置透明度，也无法实现动画效果。JPEG图片文件的扩展名为.jpg或.jpeg。

压缩

JPEG是以有损方式来压缩的。这意味着在压缩过程中，部分原始图像中的像素被丢弃了。浏览器渲染压缩图片时，显示结果只是与原图近似而非完全一致的图片。

优化

图片质量与压缩率之间往往要做出一些妥协。压缩率较小的图片质量高，但文件更大。反之压缩率较大的图片质量差，但文件相对小一些。
图片中我们肉眼可以看到的小方块，叫做“像素效果（pixelation）”，应当避免。
另一种优化网页图片的方法是显示图片的缩小版本，也就是所谓的缩略图（thumbnail）。通常缩略图被做成图片超链接，访客点击它时会显示较大的图像。

渐进式JPEG

创建JPEG图片时，可将它设置为渐进式（progressive）。渐进式JPEG类似于交错GIF，图片是逐渐显示的，在下载时也有淡入效果。

可移植网络图形格式（PNG）图像

PNG图像综合利用了GIF和JPEG图像的优点，将在未来替代GIF。PNG（读作“ping”）图片能支持数百万种颜色，支持不同的透明度，使用的是无损压缩。PNG图片也支持交错效果。以下是常见网页图像文件类型概览表：

图片类型	文件后扩展名	压缩	透明	动画	支持颜色数量	渐进式显示
GIF	.gif	无损	支持	支持	256	交错
JPEG	.jpg或.jpeg	有损	不支持	不支持	数百万	渐进
PNG	.png	无损	支持	不支持	数百万	交错

新型的WebP图像格式

WebP是google开发的一种图片格式，改进了图片有损压缩方式，但尚未用于商业网站。WebP（读作“weppy”）目前仅得到了Google Chrome浏览器的支持。

3、图像元素

图像元素用于在网页上插入图片。它是一个空元素，不需要成对的开始与结束标签。下为代码示例：

<img src="logo.gif" height="200" width="500" alt="公司名称">

src属性用于指定图片文件名。alt属性为图片提供了替代文本，通常为图片的文字说明。如果使用height和width属性设置了与图片相同或近似的尺寸，浏览器就能为图片预留大小准确的空间。下表列出了标签的属性及取值：

属性名称	取值
align	right,left（默认），top，middle，bottom；已废弃，现在用CSS float或position属性来代替
alt	对图片进行描述的文字
border	以像素为单位的图片边框粗细，border="0"表示不显示边框；已废弃，现在用CSS的border属性来代替
height	以像素为单位的图片高度
hspace	以像素为单位的图片左右两侧的空白间距；已弃用，现在用CSS的padding属性来代替
id	文本名称，由字母和数字组成，以字母开头，不能有空格；这个值在同一个网页文档内必须唯一，不能与别的id共用。
name	文本名称，由字母和数字组成，以字母开头，不能有空格；用该属性为图片命名，方便客户端脚本语言访问；已废弃，改用id属性
src	图片的URL或文件名
title	包含图片信息的文本；通常比alt文本更具描述性
vspace	以像素为单位的图片上下两边的空白间距；已废弃，现在用CSS的padding属性来代替
width	以像素为单位的图片宽度

上表中，虽然在HTML5中弃用了这些元素，但是它们在XHTML中仍然是有效的。

无障碍访问和图像

可用alt属性来提供无障碍访问。alt属性用于设置图片的描述文本，浏览器以两种方式使用这些文本。在图片下载和显示之前，浏览器会先将alt文本显示在图片区域。当访客把鼠标移动到图片区域时，某些浏览器还会将这些文本以提示工具的形式显示出来。屏幕阅读器之类的应用会大声读出alt属性中的文本。。移动设备浏览器则不显示图像，只显示alt文本。
W3C建议不要设置超过100个字符的alt文本。避免用文件名或诸如picture、image和graphic之类的单词，而应该用简短、可描述图像的语句。如果使用公司商标之类的图像，而其目的又在于显示文本，就将文本值作为alt属性值。

图像超链接

实现图像超链接功能的代码非常简单，只需要在图像元素两边加上锚标签即可。如下示例代码：

<a href="index.html"><img src="home.gif" height="19" width="85" alt="Home"></a>

图片用作超链接时，在某些浏览器中默认会在图片周围显示一圈蓝色的轮廓（边框）。如果不想要这种效果，可以在图像标签中使用border="0"这一设置。

4、HTML5视觉元素

HTML5 Figure元素

块显示figure元素容纳一个自包含的内容单位，如一张图片以及可选的figcaption元素。

HTML5 Figcaption元素

块显示figcaption元素用于设置图片的说明文字。如下是示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Tropical Island</title>
<style>
figure {
width: 640px;
border: 1px solid #000000;
padding: 5px;
}

figcaption {
text-align: center;
font-family: Papyrus, fantancy;
}
</style>
</head>
<body>
<figure>
<img src="myisland.jpg" width="640" height="480" alt="Tropical Island">
<figcaption>
Tropical Island Getaway
</figcaption>
</figure>
</body>
</html>

疑问：既然可以用div元素作为容器来配置图片，为什么还要引入这些新的HTML5元素呢？答案是后者具有语义性。

HTML5 Meter元素

度量衡（meter）元素用来在已知范围显示带数值的可视化尺度，通常为柱状图的一部分。meter元素具有若干属性，包括value（显示的数值）、min（范围内可能的最小值）、max（范围内可能的最大值）。代码示例如下：

<h1>Monthly Browser Report</h1>
<meter value="14417" min="0" max="14417">14417</meter> 14,417 Total Visits<br>
<meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox<br>
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet Explorer<br>
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome<br>
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br>
<meter value="312" min="0" max="14417">312</meter> &nbsp;&nbsp;312 Opera<br>
<meter value="200" min="0" max="14417">200</meter> &nbsp;&nbsp;200 other<br>

HTML5 Progress元素

进度（Progress）元素用于显示特定范围内带数值的进度条。progress有两个属性，即value（显示的数值）和max（范围内可能的最大值）。下面是示例代码：

<h1>Progress Report</h1>
<progress value="5" max="10">50%</progress>
Progress Toward Our Goal

5、背景图像

background-image属性

使用CSS background-image属性可以配置网页的背景图片。

同时配置背景色和背景图

我们可以同时配置背景色和背景图。背景色（特指由background-color所指定的）会先显示。当浏览器将设为背景的图片加载完毕后，该图片就成为网页背景。
同时指定背景色与背景图片，能为浏览者提供更愉悦的视觉享受。即使由于某种原因背景图片无法载入，网页背景仍然能够提供预期的背景文本对比效果。如果背景图比浏览器窗口小，而且CSS又设置成不自动平铺（图重复），在背景图没有覆盖到的地方就会显示背景色。代码示例如下：

body {
background-color: #99cccc;
background-image: url(bg.jpg);
}

浏览器显示背景图

实际上，背景图通常比常规浏览器窗口小一些。一般来说，背景图的形状不是又细又长的矩形，就是小的矩形块。

background-repeat属性

浏览器默认会重复（或者称为平铺）图片来覆盖整个网页背景。该特性同样适用于标题、段落等其他元素的背景。background-repeat的属性值包括repeat（默认）、repeat-y（纵向重复）、repeat-x（横向平铺）以及no-repeat（不重复）。

background-position属性

用这个属性可指定背景图片的起始位置，而不是默认的置顶和靠左显示。有效的属性值包括百分比、像素值、left（靠左）、top（置顶）、center（居中）、bottom（置底）、right（靠右）。第一个值指定水平起始位置，第二个值指定垂直起始位置。如果只设置了一个值，则另一个默认为center。

background-attachment属性

此属性可用来指定背景图片的位置是保持不变还是会伴随着浏览器视窗中的网页一起滚动。有效的background-attachment属性值包括fixed和scroll（默认值）两种。

6、更多有关图像的知识

图像映射

图像映射（image map）是可以作为一个或多个超链接使用的图片。图像映像中通常有多个可点击区域或可选择区域，用来链接到其它网页或网站。可选择区域被称为热点（hotspots）。用该技术可创建三种形状的可选择区域，分别为矩形、圆形和多边形。图像映射要用到图像元素、映射元素以及一个或多个区域元素。

映射元素

映射元素（map element）是一种容器标签，它指定了图像映射的开始和结束位置。name属性用于将<map>标签与对应的图像关联起来。id属性必须与name属性的取值相同。要将映射元素与图像关联起来，需要配置图像标签的usemap属性以指定究竟用哪个<map>。

区域元素

区域元素（area element）用于定义可点击区域的坐标或边界。它是一个空标签，有href、alt、title、shape和coords等属性。title属性用于配置文本，在某些浏览器中可能会呈现为鼠标悬停时出现的提示信息。coords属性指定了可点击区域的坐标位置。下表描述了指定各种形状的可点击区域所要求的坐标值。

形状	坐标	含义
矩形（rect）	“x1，y1，x2，y2”	点（x1，y1）坐标代表矩形左上角的位置，点（x2，y2）坐标代表矩形右下角的位置
圆形（circle）	“x，y，r”	点（x，y）代表圆心的位置，r代表半径
多边形（polygon）	“x1，y1，x2，y2，x3，y3”等	每一对（x，y）坐标代表一个多边形顶点的位置

示例代码如下：

<map name="boat" id="boat">
<area href="your url here" shape="rect" coords="24, 188, 339, 283" alt="your text here">
</map>
<img src="url" usemap="#boat" alt="your text here" width="416" height="350">

配置收藏图标

使用<link>标签，需要指定三个属性值：rel、href和type。rel属性的值是icon。href属性的值是图像文件名。type属性的值则描述了图像的MIME类型，默认为image/x-icon，即扩展名为.ico的文件。示例代码如下：

<link rel="icon" href="your url .ico file" type="image/x-icon">
<!-- 为了兼容，可能需要下面的标签 -->
<link rel="shortcut icon" href="your url .ico file"  type="image/x-icon">

7、图片使用原则

图像使用指导原则

使用图像能增强用户体验，提升网页吸引力。但它同时也会造成网页加载速度过慢，降低网页性能，给访问者带来不好的体验。

图片重用

一旦某张网页请求了网站的一张图片，就会被缓存在访问者硬盘的缓存中。因此建议在多个页面上重复使用通用图片，避免使用内容相同、文件不同的多个版本。

权衡图片大小和质量

多次实验，需求平衡。

考虑图片的下载时间

优化文件大小与图像的维度，兼顾网页显示效率与效果。

使用合适的分辨率

网页以72ppi（每英寸像素数，pixels per inch）或96ppi。所以应转为合适分辨率。

指定维度

指定width和height可以加快网页加载速度。

注意亮度与对比度

8、CSS3视觉效果

CSS3 background-clip属性

background-clip是CSS3中的新属性，定义了背景图像的绘制区域，有下列取值：

content-box（在内容后面绘制背景）
padding-box（在内容和内边距的后面绘制背景）
border-box（默认值，在内容、内边距和边框的后面绘制背景；类似于padding-box，只是它仍会显示在透明边框后面）

CSS3 background-origin属性

background-origin是CSS3中的新属性，它指定了背景图像的位置，有下列取值：

content-box（相对于内容区域的位置）
padding-box（默认值，相对于内边距区域的位置）
border-box（相对于边框区域的位置）

CSS3 background-size属性
CSS3中background-size属性被用来重新定义或缩放背景图像的尺寸，有效值如下：

一对百分比（宽度，高度）如果仅设置了一个值，另一个默认为auto，由浏览器确定其大小。
一对像素值（宽度，高度）如果仅设置一个值，另一个默认为auto，由浏览器确定其大小。
cover 把背景图像扩展至高度与宽度均能完全覆盖背景区域的最小尺寸，会保持图像的宽高比。
contain 把背景图像扩展至高度与宽度均能完全适应内容区域的最大尺寸，会保持图像的宽高比。

CSS3中对多张背景图像的处理

使用CSS3的background属性可配置多张背景图像。每张图像的声明由逗号分隔。你可以选择添加属性值以指定图像的位置以及图像是否重复。背景属性使用简化写法：只列出相关属性所需的值。

CSS3圆角效果

CSS3中引入了border-radius属性，可以使用这个属性来创建圆角效果。border-radius属性的有效值为一至四个数字值（以像素或em为单位）或百分比值，用于指定角的弧度半径。如果只指定了一个值，则所有角都按此配置。如果指定了四个值，则顺序为左上角、右上角、右下角、左下角。也可以用border-bottom-left-radius，border-bottom-right-radius，border-top-left-ridius以及border-top-right-radius分别指定。