第五部分 Web图像

第23章 Web图像基础

1. 图像来源

通过扫描、拍摄、绘制，以及使用库存照片和剪贴画，或雇人创建

1.1. 创建自己的图像

1.1.1 照片

创建高分辨率版本的图像并根据需要保存较小的副本始终是一个好主意

1.1.2 电子绘图

对于徽标和插画，建议从矢量画图程序开始，如Adobe Illustrator、CorelDraw、Sketch，然后根据需要保存成适合Web的副本

1.1.3 扫描

扫描提示：

• 将尺寸调小更容易保持图像质量。
• 以灰度（8位）模式扫描黑白图像，而不是黑白（1位或位图）模式。
• 如果要扫描已经打印的图像，需要消除打印过程中产生的点图案。最好的方法是对图像进行轻微的模糊处理，将图像的尺寸调整得稍微小一些，然后使用锐化滤镜

1.1.4 库存照片和插画

总体分为两大类

• 版权受控类：必须获得许可
  • gettyimages.com
• 免版税类：一次付费无限次使用，但不能控制别人使用。
  • gettyimages.com
  • istockphoto.com

1.1.5 创作共用

有许多图像资源是基于创作共用许可协议发布的。

• www.flickr.com/creativecom…
• unsplash.com 高质量的免费图像
• commons.wikimedia.org/wiki/Main_P… 社区贡献的，可以免费使用

1.1.6 剪贴画

• www.clipart.com 收取会员费
• www.1clipart.com 无装饰的免费剪贴画网站
• thenounproject.com 单一颜色的经典图标
• www.iconfinder.com 免费全彩色图标

1.1.7 雇佣设计师

2. 格式简介

在Web领域

• 位图可以被保存为下列格式：JPEG、PNG、GIF、WebP，它们的后缀分别是：.jpg(或不太常见的.jpeg)、.png、.gif、.webp
• 矢量格式的SVG，后缀是：.svg

2.1. “上镜”的JPEG

联合图像专家组（Joint Photographic Experts Group）。

• 如果图像是照片或包含柔和、平滑的颜色转换，那么JPEG是最佳格式。
• JPEG压缩方案喜欢渐变色和混合色，但在平面颜色或硬边上效果不是太好。

2.1.1 24位真彩色图像

RGB颜色空间也称为真彩色空间，三个颜色通道中的每个通道都定义了8位信息，因此称为24位颜色。JPEG能够显示RGB颜色空间中的上百万种颜色，因此成为照片的理想选择。

2.1.2 有损压缩

一旦图像质量在JPEG压缩中丢失，就再也无法恢复。图像损失是累积的，最好保留原始图像，并根据需要导出副本。但大多数图像的大多数压缩级别的损失是不易察觉的。

2.1.3 JPEG的广阔世界

几个新的JPEG标准（JPEG 2000、JPEG XR、JPEG-LS、JPEG XS等），旨在跟上从数码相机到医学成像等所有领域不断变化的图像需求。较新的格式包括无损压缩、在RGB颜色通道中存储16位信息的能力、CMYK颜色模型以及更容易编码和解码的轻量级实现等。

2.1.4 渐进式JPEG图像

用一系列的路径显示，从低分辨率的版本开始，每个路径都更清晰。在一些图像程序中，可以指定用于填充到最终图像中路径的个数。

• 好处：浏览者可以在完全下载之前熟悉图像，这样改进通常可以稍微减小文件尺寸
• 缺点：占用更多的处理能力，可能会给低端移动设备带来问题。
• 最佳实践：使所有JPEG都是渐进式的，不仅因为文件会更小，而且因为它们在页面上显示的更快，从而提高了性能

2.2. 令人惊异的PNG

便携式网络图形（Portable Network Graphics），是为了代替TIFF用于在线目的的。TIFF是为图像存储和打印而设计的。

• PNG可以用于保存许多图像类型，但是出于Web生产的目的，只需要在8位（PNG-8）和24位（PNG-24）之间进行选择。
  • 8位索引颜色
  • 24位和48位RGB颜色
  • 16位灰度
• PNG提供了一系列功能：
  • 多路径渐进式显示
  • 嵌入式gamma（亮度）调整信息
  • 用于图像的嵌入文本

2.2.1 灰度PNG

PNG支持16位灰度图像，使黑白照片和插图能够存储非常细微的细节，尽管它们不适合在Web上使用。在计算机显示器上，这种灰度级的精细度会丢失。

2.2.2 PNG-8

适用于具有平面颜色的图像，如徽标、线条图和图标。也可以保存照片或纹理图像，但不会被有效地保存，从而导致文件较大。PNG-8的两个关键特性：

• 使用索引颜色模型
  • 最多包含256种颜色。较低的位深度导致较少的颜色，也减少了文件大小
  • 索引颜色意味着图像中的颜色集存储在一个颜色表中。图像中每个像素都包含对颜色表中某个位置的数字引用。
  • 大多数源图像都是以RGB格式开始的，需要将它们转换为索引颜色，才能保存为PNG-8或GIF。图像中的颜色会减少到256色或更少，这个过程称为量化。
• 支持透明
  • 可以使部分PNG-8图像完全透明。尽管所有位图图形本质上都是矩形，但透明度会产生一种图像形状更有趣的错觉。最常用的PNG-8透明类型中是二元透明，要么完全透明，要么完全不透明
  • PNG-8还能够在索引颜色映射中存储多个级别的透明度，允许柔和的边和阴影与背景混合。

2.2.3 PNG-24

• PNG还可以保存位真彩色图像，每个通道由8位或16位信息定义，分别生成24位或48位RGB图像。
• 48位的图像虽然非常适合存储高质量的原始图像，但由于文件大小的限制，对Web来说毫无用处，甚至24位的图像也可能不是最佳选择。
• 与JPEG一样，PNG-24也适用于需要最大色彩范围的摄影图像。
• 两个关键特征：
  • 无损压缩
    • 一个24位的PNG几乎总是比同一图像的有损JPEG大得多。因此，JPEG是Web上照片的最佳选择
  • 可以包含多个级别的透明度
    • alpha透明度 有时会看到带有alpha透明度的PNG-24被称为32位PNG，因为有4个通道。通过在第4个通道中存储8位透明信息来实现
• 额外的特征：
  • gamma修正
    • gamma指显示器的亮度设置。可以使用有关其创建环境的gamma设置的信息来标记PNG。
  • 嵌入颜色的配置文件信息
    • 存储创建它的系统的ICC颜色的配置文件信息
  • 动画PNG
    • APNG，是PNG的一个扩展，增加了动画帧的能力，除了8位动画外，还支持带alpha透明度的24位动画图像
  • 嵌入文本
    • PNG图像还能存储字符串。
  • 渐进式显示（交错）
    • 为编码交错显示，以7个路径的系列显示图像，从水平和垂直两个方向填充图像，交错会增加文件大小，通常是不必要的

2.3. “老爷爷级”的GIF

图形交换格式（Graphic Interchange Format），是Web浏览器支持的第一个图像格式。作为唯一一种得到良好支持的能够实现动画的Web图像格式，GIF仍然有一席之地。然而对于静态图像，GIF已经输给了PNG格式。

2.3.1 8位索引颜色

GIF也是一种8位索引颜色格式，可以试试更低的位深度保存GIF，从而减少颜色和文件大小

2.3.2 GIF压缩

无损的，尽管在将RGB图像转换给索引颜色时会丢失一些图像信息。它使用一种利用数据重复的压缩方案。当遇到一串相同颜色的像素时，将它们压缩成一个数据描述，这就是大面积的平色图像比纹理图像更容易压缩的原因。PNG使用类似的颜色压缩方案。

2.3.3 透明度

GIF图像使用二元透明度

2.3.4 交错

交错使GIF以一系列的路径显示。图像在浏览器窗口中完全呈现之前，每个路径都比前一个路径更清晰。

2.3.5 动画

显示简单动画的能力，动画GIF包含许多动画帧，它们都是单独的图像，所有的帧以及描述它们应该如何播放的设置都存储在一个单独的GIF文件中。

2.4. 高性能的WebP

谷歌开源的WebP格式，几乎拥有在JPEG、PNG和GIF格式中看到的所有特征，其尺寸通常要小25～35%。是开源WebM视频格式的“姊妹项目”

2.4.1 无损或有损压缩

WebP可以保存为有损格式或无损格式。有损压缩方案使用了与VP8视频编解码器相同的编码。

2.4.2 alpha透明度

alpha通道用于多级别的透明度。可用于无损图像压缩，也可用于特殊的有损压缩。是唯一一种可以将有损的RGB通道与无损的alpha通道相结合的格式，结果是文件比相同图像的PNG-24小60～70%

2.4.3 动画

2.4.4 元数据

与PNG一样，WebP容器可以在其代码中存储元数据

2.4.5 颜色配置文件

还可以嵌入颜色配置文件（ICC）信息

2.4.6 支持

只是得到较少量的浏览器支持。可以为能够处理它的浏览器提供最好的体验，并为其他浏览器提供次优的体验。

• 可以使用Modernizr来检测WebP的有损、无损、alpha通道和动画变体。
• 还可以使用picture元素将.webp图像传递给可以使用它的浏览器，并使用JPEG作为一个备份
• 后端解决方案：当服务器检测到浏览器支持WebP图像（基于accept encoding header）时，让服务器发出调用并传递WebP图像。

2.4.7 创建WebP文件

已经可以在Sketch、Pixelmator等中制作WebP文件。还可以使用cwebp命令行工具将PNG和JPEG图像转换为WebP格式。dwebp命令将WebP转换为PNG。

2.5. 总结

制作高质量的Web图形以保持质量并快速下载的第一步是选择正确的格式：

如果你的图像	使用	因为
是平色绘画	PNG-8、GIF	GIF和PNG在压缩平色方面出色
是照片或包含渐变颜色	JPEG	JPEG压缩在混色图像上工作良好，由于有损，它可以得到比PNG-24图像更小的文件尺寸
由平色和照片结合而成	PNG-8、GIF	在保存和压缩平色区域方面，索引颜色格式最好。减少为一个调色板导致在照片区域显示的像素化（仿色），通常没什么问题
需要透明度	PNG-8、GIF	GIF和PNG都允许开/关图像透明度
需要多级别透明度	PNG-8、PNG-24	只有PNG支持多级别透明度，alpha的PNG-24文件要大得多，但更容易找到工具来创建它们。WebP也支持alpha，一旦得到更好的支持，它可能是更好的选择
需要动画	GIF	GIF是唯一支持包含动画帧的格式。将来，APNG和WebP可能是更好的选择

• 用于插图和平色的图标，SVG是首选，SVG还可以使图像拥有更小的文件大小，这些图像包含平色和小面积的位图图像、渐变或阴影等效果。

3. 图像尺寸和分辨率

3.1. 图像分辨率

3.1.1 DPI与PPI的对比

• 数字图像的分辨率是以每英寸像素（ppi）为单位进行计量的。
• 打印机和打印页面是用每英寸点数（dpi）来计量的。每英寸的墨点越多图像越清晰。印刷世界中，常见的图像分辨率是300ppi和600ppi
• 然而，在Web上，“英寸”的概念是不相关的，因为图像的最终显示大小取决于显示图像的屏幕的分辨率
• Web图像是以像素为单位来计量的，创建它们的分辨率（ppi）并不重要

3.2. 屏幕分辨率

屏幕分辨率是像素密度的度量。屏幕显示器是由像素组成的，也可以用每英寸像素（ppi）来计量，通常被称为屏幕的像素密度。

3.2.1 高密度显示器

在相同的物理空间中，当显示器是普通显示器的2倍像素时，不设置图像尺寸时，图像在高密度显示器中的尺寸会是普通显示器中的一半。当设置图像显示相同尺寸时，图像会变模糊。希望在2倍大显示器上显示更清晰的原本布局的图像，则需要以2倍于布局大小来创建图像。

3.3. 参考像素：PT和DP

高分辨率设备使用一种称为参考像素的测量方法，其可用于布局。它们使我们能够指定像素大小，而不会受到像素密度的影响。

• 苹果公司称其为参考像素点（PT）。标准1倍屏幕上的1个点等于1个设备像素；2倍屏幕上，1个点等于4个设备像素；3倍屏幕上，1个点等于9个设备像素。
• 安卓将其称为设备独立像素（Device-independent Pixel，DiP或DP）
• 在160ppi的情况下，它们总是等于1个像素
• 在设计用于原生智能手机应用程序的图形时，可能会更多地使用PT和DP这两个术语
• 对于Web，用像素和相关的CSS单位进行布局设计就足够了。

4. 图像资产策略

为一个网站创建图形时，应该优先考虑以下事项：

• 使图像的文件大小尽可能小
• 减少发送到服务器的HTTP请求的数量
• 不下载比小屏幕设备所需的更多的图像数据
• 为高密度显示器提供高质量的图像

4.1. 制作图像选择流程

4.1.1 确定是否真的需要一个图像

4.1.2 看看是否可以用CSS完成

这样可以避免调用服务器，可以用CSS绘制小图形，用来代替图标可能会很有用。一些示例：

• codepen.io/mikemang/pe…
• codepen.io/sashatran/p…
• css-tricks.com/the-shapes-…
• codepen.io/collection/…

4.1.3 可以是SVG吗

徽标、图标或其他插图，可以在矢量绘图工具中创建它，并保存为SVG，这样可以提供小的文件大小和分辨率独立的好处。将SVG代码与svg元素放在内联里，可以省略一些HTTP请求。如果只需要静态插图，那么将SVG嵌入带有img元素的文档中是非常好的选择

4.1.4 最佳的位图格式是什么

图像格式对文件大小有很大影响。

4.1.5 布局需要自适应图像吗

• 如果只需要一种尺寸，以最合适的文件格式保存或导出图像就可以了，优化图像，使其尽可能小
• 如果需要多种尺寸来自适应布局。则要用到自适应图像，根据用户的观看环境提供图像。包括防止小屏幕上的浏览器下载超过它们需要的图像数据，提供足够大的图像使其在高密度显示器上看起来更清晰。还可以根据内容提供图像的替代版本（“艺术指导”），或者利用较新的格式，如WebP。

4.1.6 网站有很多图像吗

• 有大量图像时，让服务器来做自动化的图像处理任务。许多工具和服务可以让服务器动态地创建适当的图像版本。上传所需的最高质量和最大尺寸的图像，让服务器处理其余部分。有些服务有大小调整、智能裁剪图像、添加特殊效果、动态转换图像等能力
• 图像数量合理，手工制作图像并上传至服务器

5. favicon

favicon并不是必须的，但可以帮助用户在一长串标签或书签栏中识别和查找你的网站，对细节的关注可以强化你的品牌

5.1. 老式浏览器Favicon

对于桌面浏览器，标准的favicon过程：

1. 将图标保存为ICO格式并命名为favicon.ico
2. 将该文件放到网站的根目录中，浏览器知道在那里查找它

5.1.1 favicon.ico文件

• 应该以16✖️16像素创建，32✖️32像素版本用于2倍显示屏。
• 只需要一个favicon.ico文件，因为ICO格式能够在一个文件中存储多个图像
• 但大多数图形工具都无法将图像保存为ICO格式，有几个免费的在线拖放ICO转换器。
  • icoconverter.com
  • convertico.com
  • Kodlian的Icon Slate（www.kodlian.com/apps/icon-s…） （Mac电脑在应用商店下载，5美元）

5.2. 完整的favicon集

• 创建一个完整的favicon集来在其他设备上表示你的站点。可以将这些图标保存为旧的PNG格式，甚至包括透明区域。
• PNG格式必须使用link元素将它们链接到文件中，例如：可用于为Retina屏幕的iPhone添加一个触摸图标

5.3. 最流行的标准图标大小

5.4. 创建图标的工具

• Favicon.io 使用网站名字的首字母创建图标
• www.favicomatic.com 只需要上传一个面积大于300px的PNG，剩下的工作由工具完成

第24章 图像资产制作

1. 将图像保存为Web格式

1.1. 保存方式

1.1.1 Export As

Photoshop的Export As对话框中，需要选择Convert to sRGB，这是Web使用的颜色编码，因为Adobe有自己的扩展版本RGB颜色空间

1.1.2 Save As

会错过压缩

1.2. 在RGB模式下工作

无论文件的最终格式如何，都应该始终在RGB模式下进行图像编辑工作，非彩色图像，grayscale就可以。

• JPEG和PNG-24文件直接压缩RGB彩色图像
• 如果将文件保存为GIF或PNG-8格式，则必须手动将RGB图像转换为索引颜色模式

2. 使用透明度

2.1. 二元透明度

2.1.1 二元透明度的工作机制

GIF和PNG-8图像的像素颜色都存储在索引颜色表中，透明度也被简单地当作一种独立的颜色。

2.1.2 避免光晕

• 二元透明度的潜在危险：使用二元透明度时，图像周围的软边会有一圈像素，其与图像后面的颜色不匹配，这种边通常被称为光晕。
• 消除锯齿边：一种应用于位图图形圆形边的轻微模糊，以使颜色之间的过渡更平滑
• 预防诀窍：将原始图像中的半透明像素与尽可能接近页面背景的颜色混合。许多工具在保存和导出时都提供了选择混合颜色的方法（也称为“哑光颜色”）

2.2. alpha透明度

2.2.1 alpha透明度的工作机制

RGB图像（如JPEG和PNG-24）在各个通道中存储了颜色，PNG-24文件添加了另一个通道，alpha通道，用来存储透明度信息。alpha中黑色是透明的，白色不透明，灰色是中间值，可以看作盖在图像上的毯子，告诉下面的每个像素它的透明度

2.2.2 PNG-8的alpha透明度

尽管被称为PNG-8+alpha或alpha调色板PNG，但它并不是在单独的alpha通道覆盖层中存储透明度信息。

• 图像的调色板也有与其相关的alpha信息，但其不是具有完整alpha掩码的调色板图像。也就是每个像素对应于调色板中带有红、绿、蓝和alpha组件的条目。如果希望所有颜色都具有4个级别的透明度，可以将可用颜色总数从256减少到64个

2.2.3 制作透明的PNG和GIF图像

• 最简单的方法：导出图像时，从一开始就保存透明区域。但通常很难在消除锯齿状边的同时与背景进行无缝融合

3. 命令行技巧

使用file命令判断PNG是8位还是24位,file filename返回filename文件的简短描述，包括尺寸、颜色信息以及是否交错

4. 自适应图像制作技巧

• 提供一组不同尺寸的图像，用于不同视窗大小的自适应布局
• 根据设备大小和方向提供具有不同特征的图像版本（艺术方向用例）
• 提供在高密度屏幕上看起来清晰的大型图像
• 提供以更小的文件尺寸存储相同图像的替换图像格式

5. 调整图像尺寸

5.1. 手动调整尺寸

5.2. 根据文件大小生成图像

自适应图像断点生成器：responsivebreakpoints.com

5.3. 艺术指导的图像

自适应图像断点生成器也有工具来自动化艺术指导，这些工具包括了边缘检测、人脸检测和视觉唯一性等来确定图像的最重要部分。

5.4. 用于高密度显示器的图像

需要创建足够大的图像以覆盖设备像素的最高密度

• 图像大小调整服务：tinyurl.com/pmpbyzj

6. 图像优化

让图像文件尽可能小，这对快速加载网站至关重要，优化方法分为两大类：

• 在设计和导出过程中所做的手工和有意的努力
• 导出后的压缩工具，通常是通过丢弃未使用的数据

6.1. 一般优化准则

无论图像或文件类型如何，都有一些限制文件大小的基本策略要记住：

6.1.1 从高质量的原图开始

在此基础上可以制作不同大小和压缩设置的副本，但要保证原始文件的安全

6.1.2 限制尺寸

不要把图像做得比需要的大

6.1.3 再利用和再循环

只创建一个图像文件，在需要的地方重复地指向该文件，这允许浏览器利用缓存的图像，避免额外的下载

6.1.4 使用适当的工具

6.1.5 通过优化器运行图像

6.2. 优化JPEG

减小JPEG文件大小的一般策略：

6.2.1 积极压缩

• 质量设置，允许设置压缩率，低质量意味着较高的压缩和较小的文件。
• 一般来说，在中等（50～70）甚至低（30～40）的质量设置下，图像都可以保持良好的效果。

6.2.2 如果有的话选择优化

优化后的文件比标准JPEG文件稍微小一些，且颜色保真度更好，因此，如果图像软件提供了优化选项，那么应该选择它

6.2.3 柔化图像（模糊/平滑）

• 因为软图像的压缩比锐图像小，所以可以尝试对图像应用轻微的高斯模糊，使JPEG压缩有一些值得考虑的地方。
• 即使对整个图像进行难以察觉的模糊处理，也可以降低文件大小
• 也可以选择在保留感兴趣的区域的同时，对图像中不太重要的区域应用更积极的模糊效果。

6.2.4 避免硬边和尖锐的细部

• JPEG压缩平滑、混合颜色的区域比具有高对比度、硬边和锐利细部的区域更有效。
• 在创建图像时，如果照片有很多硬边，考虑是否可以将它们软化或删除
• 还可以看看PNG-8是否可以以较小的尺寸提供类似的图像质量

6.3. 优化PNG-24

PNG-24是一种无损格式，在优化方面，无法对这些图像做太多的处理，最好的办法是：

6.3.1 避免将适合JPEG格式的图片存储为PNG-24

同样的图像以有损的JPEG格式保存会更小些

6.3.2 通过优化实用程序运行它们

去除无用的元数据但保持图像

6.3.3 将它们转换为具有多级别透明度的PNG-8

6.4. 替代PNG-24

PNG-24图像文件很大，不使用PNG-24的情况下实现多级别透明度的选项：

6.4.1 将它们转换为具有多级别透明度的PNG-8

• ImageAlpha（pngmini.com） Mac专用程序
• TinyPNG（tinypng.com）
• PunyPNG Pro（punypng.com）
• 所有这些工具都使用了pngquant压缩库（pngquant.org）将颜色数量从24位减到8位，同时将透明度级别分配给索引颜色图中的小格子

6.4.2 将JPEG版本的图像放入SVG中，然后使用SVG裁剪或屏蔽功能来创建透明区域

6.4.3 使用CSS Masks来应用透明区域

6.4.2 使用支持alpha透明度的新图像格式，如WebP和JPEG 2000

6.5. 优化PNG-8和GIF

6.5.1 减少颜色数（位深度）

最有效的方法，也是优化过程中的第一步。颜色减少的另一个副产品是通过组合类似的相邻像素颜色来创建更多的平色区域，更平坦的颜色区域意味着更有效的压缩。

• 有很多只有5位深度32像素颜色的图像看起来很完美

6.5.2 避免或减少防色

当RGB图像中的颜色被减少为特定的调色板时，调色板中不存在的颜色将通过仿色来近似得到。

• 仿色是调色板颜色混合以模拟不可用的颜色时产生的斑点图案。
• 转换为索引颜色时，大多数图像编辑器允许指定图像是否仿色以及如何仿色

6.5.3 使用平色设计

PNG和GIF在压缩平色区域方面非常出色

6.6. 优化工具

这些工具通常是无损的，意味着它们不会改变图像的外观，通过丢弃专门用于元数据、颜色配置文件和其他冗余代码的代码块来节省文件大小

6.6.1 在线图像优化器

• Optimizilla（optimizilla.com）可以优化JPEG和PNG，允许一次压缩多达20张，免费
• Kraken.io（kraken.io/web-interfa…） 提供有损、无损、手动“专家”设置的选项，以及调整图像大小的能力
• TinyPNG（tinypng.com）可以用来压缩任何PNG或JPEG
• PunyPng（punypng.com）可以为JPEG、PNG、GIF生成最小的文件大小

6.6.2 独立的优化应用程序

• ImageOptim（imageoptim.com）Mac专用，可以优化PNG、JPEG、GIF（包括动画GIF）甚至SVG
• PNGGrauntlet（pnggauntlet.com）windows的PNG优化工具，还可以将JPEG、GIF、TIFF和BMP文件转换为PNG格式
• JPEGmini（www.jpegmini.com） 用于Mac和Windows的压缩JPEG的程序，可以免费使用200张
• Trimage（trimage.org）类似于ImageOptim，在Linux平台上使用

6.6.3 Grunt和Gulp插件

如果工作流是基于任务运行器，可以使用imagemin插件将PNG和JPEG的优化作为一项自动化任务 github.com/gruntjs/gru…

第25章 SVG

SVG（Scalable Vector Graphic，可缩放矢量图形），可以无限地调整大小而不损失质量。矢量特性使其成为图标、徽标、图表和其他线条图的不错选择。

• SVG也可能包含光栅图像内容。
• SVG对于向界面添加动画和交互性也是一个很有吸引力的选择

1. 免费资料

可以在这些网站上找到免费的SVG格式的矢量图形（或易于转换成SVG的格式）

• The Open Clip Art library（openclipart.org）
• Freepik（freepik.com）
• IcoMoon（icomoon.io）

2. SVG历史和浏览器支持

浏览器对SVG1.1的支持非常好，但并不普遍

• 现在所有浏览器都支持SVG作为独立的图像和内联代码
• 当深入属性级别和其他语法细节时，浏览器支持中还有其他不一致之处。
• SVG Tiny 1.2，是SVG1.1的子集，主要针对智能手机之前的移动设备。普通桌面浏览器或智能手机浏览器不支持它
• SVG2的目的是更好地与HTML5、CSS和WOFF集成

3. 使用XML绘图

SVG与其他格式的真正区别在于它是一种XML语言，用于描述二维图形，包括形状、路径、文本，甚至特殊的过滤效果。

3.1. XML简介（eXtensible Markup Language）

一组用于创建其他标记语言的健壮规则，是一种元语言。是在应用程序之间共享数据的强大工具，在越来越多的团建应用程序中，XML文件都是在后台工作。在Web上使用的几种XML语言如下：

• XHTML：根据更严格的XML规则重写的HTML
• RSS（Really Simple Syndication，非常简单的联合；或者RDF Site Summary，RDF站点摘要）：允许将内容作为数据共享，并使用RSS提高阅读器进行阅读
• MathML：用于描述数学符号
• SVG：图像描述语言

3.2. XML语法要求

SVG遵循更严格的XML语法：

• 元素和属性名必须小写
• 有元素必须关闭，空元素可以在右括号前添加一个斜杠
• 属性值必须用引号括起来。引号内的属性值之前或之后不应该有额外的空格（字符空格或行回车）
• 所有属性必须有明确的属性值
• 严格执行元素的适当嵌套
• 特殊字符必须始终由字符实体表示。注意，大多数HTML命名实体在XML中不能工作，改为使用数值Unicode代码点引用
• 脚本必须包含在CDATA部分中，这样它们被视为简单的文本字符，而不会被解析为XML标记

3.3. SVG元素

www.w3.org/TR/SVG11/， 只包含二维图形的元素：

• 用于绘制线条和形状的元素，包括circle、rect、ellipse、path、line、polyline、polygon
• 用于添加文本内容的text元素
• 用于组织的元素，包括用于将形状分组的g元素、用于重复使用绘图的use和symbol元素
• 用于将图像区域剪裁（clipPath）和屏蔽（mask）为有趣形状的元素
• 用于光栅效果的元素，如类似PS过滤效果的linearGradient和filter

3.4. SVG文件内容解析

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="150" height="200" viewBox="0 0 150 200">
    <defs>
        <radialGradient id="fade">
            <stop offset="0" stop-color="white"/>
            <stop offset="1" stop-color="orange"/>
        </radialGradient>
    </defs>
    <g id="greenbox">
        <rect x="25" y="25" width="100" height="100" fill="#c6de89" stroke-width="2" stroke="green"/>
        <circle cx="75" cy="75" r="40" fill="url(#fade)"/>
        <path d="M 13 100 L 60 50 L 90 90 L 140 30" stroke="black" stroke-width="2" fill="none" />
    </g>
    <text x="25" y="150" fill="#000000" font-family="Helvetica" font-size="16">A Simple SVG</text>
</svg>

• 第一行是一个XML声明，将文件标识为XML。
• 整个文档包含在svg根元素中
  • xmlns和xmlns:xlink属性声明XML名称空间，该名称空间告诉浏览器使用SVG中定义的词汇表来解释此文档。
  • xmlns:xlink属性允许在SVG文档中放置指向外部文件的链接和引用
  • 当SVG被放在HTML5文档中的内联时，就不需要xmlns和xmlns:xlink属性了
  • width和height属性建立了一个150px宽、200px高的绘图区域（视窗），px是SVG中默认度量单位。
  • viewBox属性控制图形本身的大小，并允许图形在以后更改宽度和高度时灵活缩放
• defs元素，定义了元素和效果，稍后通过它们的id值在文档中引用。defs部分中的元素被创建，但不会立即呈现。定义一次形状、绘图或效果，然后重用它，是消除SVG代码中冗余的好方法
• 组成绘图的rect、circle、path与g元素一起分组，并被命名为greenbox，使得以后在CSS或脚本中更容易访问
• stroke属性是SVG形状周围的线或边框
• rect元素创建矩形
  • x、y属性将它定位在视窗内的像素网格上
• circle元素
  • cx、cy属性定位中心，r属性设置半径
• path元素
  • d（data）属性提供了一系列x、y坐标，它们组成了路径上的点。所有路径都以M（moveto）开始，设置起始位置，L（lineto）直线到下一组坐标。坐标可以用字符空间或逗号分隔
• text元素定义文本

3.5. SVG坐标

从左上角开始，向下和向右递增，x水平，y垂直

3.6. SVG很酷的图像特性

对于添加到带有img元素的HTML页面的.svg文件，不会显示外部图像，考虑到安全性，带有img元素的SVG的所有外部文件都被阻止了。

3.6.1 嵌入式位图图像

SVG并不仅限于矢量图，也可以在其中嵌入位图图像。图像是使用image元素嵌入的 <image xlink:href="kangaroo.jpg" x="45" y="0" width="100" height="150"/>

3.6.2 剪裁和屏蔽

SVG允许有选择地显示图像的一部分，通过剪裁和屏蔽（masking）来隐藏其他部分。

• 矢量路径（clipPath元素）用于“剪裁”图像的一部分。位于剪裁路径之外的图像部分被完全隐藏。
• 屏蔽（mask元素）的工作原理类似，是一种基于像素的效果，屏蔽的不同暗度导致每个点的透明度不同，类似于alpha通道。在SVG屏蔽中，纯白色区域表示100%的不透明度。纯黑色表示0%的不透明度，介于两者之间的灰色则是指半透明度。可以使用屏蔽填充色来或多或少地显示被屏蔽的对象。当屏蔽包含渐变填充色时，效果会更有趣，甚至可以使用图像来作为屏蔽。

3.6.3 很酷的技巧

通过将JPEG嵌入SVG中，并使用剪裁路径或屏蔽使图像中的某些区域透明，可以在JPEG中模拟透明度。这样既可以利用全彩色图像的JPEG格式文件较小的优势，也可以同时获得只有在PNG-24中才有的透明度效果。缺点是会有一些浏览器支持的问题。

3.6.4 过滤器效果

SVG提供了十几种过滤器效果，可以单独使用，也可以分层使用，还可以用于各种效果的组合，比如简单的Gaussian模糊、颜色变换、马赛克图案和良好的阴影效果。

• 由filter元素定义，它包含一个或多个过滤器原语（一个可以与其他效果组合的非常特殊的效果）。过滤器被赋予一个id，然后作为使用它的元素的样式被调用。

3.6.5 再利用和再循环

可以一次定义一个形状或效果，然后在需要的地方重用它，根据需要多次重用，这通过删除冗余代码来保持文件较小，是DRY（Don't Repeat Yourself）编码的一个很好的例子。

• 在symbol中定义要重复的元素，symbol元素不被渲染，只是设置一个图形以供将来使用。<symbol id="iconA" viewBox="0 0 44 44">...</symbol>
• 当希望在页面上使用symbol时，请使用use元素调用它，将触发要呈现的symbol。<svg class="icon"><use xlink:href="#iconA"/></svg>可以在指令中包含其他属性，x、y、width、height，以及用于覆盖由symbol副本继承的样式。use元素不仅用于symbol，还可重用任何基本的SVG形状、图像或组。
• symbol和use元素是SVG Sprite背后的工具。Sprite是一种技术，可以在一个SVG中定义多个SVG绘图，可以在HTML文档中定义，也可以作为外部的.svg文件定义。在HTML文档中，use元素将特定的图标符号拖放到页面上。它是管理SVG图标的强大工具。

4. SVG作为XML的特性

SVG作为一种结构化文档语言，拥有一个DOM，其中包含与操作图形元素相关的对象、属性和方法。

4.1. 样式

可以针对SVG中的元素使用CSS更改它们的表示形式。样式以4种方式添加到SVG中：

4.1.1 表示属性

如fill、stroke-width等，表示属性总是被应用CSS规则的样式覆盖

4.1.2 内联样式

可以使用内联style属性，工作原理与HTML元素相同。

4.1.3 内部样式表

可以在svg的顶部包含一个style元素，该元素包含SVG文档中使用的所有样式

4.1.4 外部样式表

• 如果SVG是内联的，或者放在带有object或iframe元素的页面上，那么可以使用style元素中的@import规则导入外部样式表。
• 外部文件不能用于嵌入了img元素的独立SVG。
• 对于内联SVG，还可以使用link元素将样式表链接到HTML文档以设置元素的样式

5. 在网页上添加SVG：刷新程序

5.1. 作为图像

将自包含的.svg文件添加到带有img元素的页面。SVG也可用于接受图像的CSS属性，如background-image。此时不能再对SVG中的元素设置样式或编写脚本，它将不再是交互式的。也不会加载任何外部文件。

5.2. 作为嵌入对象

可以使用object元素在页面上嵌入SVG。优点：允许运行脚本和加载外部文件。也可以为不支持的浏览器提供一个备份图像

5.3. 作为内联SVG代码

整个SVG文件作为svg元素直接粘贴到HTML源代码中。优点：提供了对SVG的DOM进行样式设置和脚本编写的所有权限。缺点：SVG代码可能很长

6. SVG与canvas

• SVG图像是用结构化标记语言绘制的，而canvas是用JavaScript命令绘制的。
• 两者都可以包含实时的图像、视频、动画和动态更新。
• canvas更适合动态快速重绘（毕竟它只是像素）；
• SVG在脚本编写、动画和可访问性方面具有优势；但是，复杂的SVG文档比canvas元素需要更多的处理能力

7. 与JavaScript的交互

snapsvg.io/demos/#game SVG是可以编程的图像，可以使用JavaScript向SVG中的元素添加交互性，因为所有的元素和属性节点都可以在DOM中访问。值得注意的是，SVG也可以包含简单的a链接，这是一种基本的交互性。

• 如果SVG是内联的，那么HTML文档中的脚本可以访问SVG中的元素。
• 对于独立的SVG，可以使用SVG的script元素，因为它是一个XML文档，所以代码需要包装在一个XML字符数据块中（<![CDATA[]]>），因此，<、>、&符号可以被正确解析，<script><![CDATA[//script here]]></script>

8. 动画

• 在codepen.io搜获“SVG动画”
• codepen.io/chris-ganno…

8.1.制作动画的方法：SVG中的动画、CSS动画、JavaScript

8.1.1 SVG/SMIL

SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）是一种用于创建同步音频、视频和动画元素的XML语言。每个动画效果由一个元素定义，并带有用于微调的属性。尽管内置的SVG/SMIL动画元素为动画人物提供了很好的工具，但缺乏浏览器支持意味着如果动画对消息至关重要，那么它就不是一个很好的选择。

8.1.2 CSS动画

SVG元素还可以使用CSS转换和关键帧来制作动画。需要注意的是，CSS只能对CSS属性制作动画，而对属性值则不能，这可能会限制SVG的使用，因为SVG对大多数几何图形和布局都使用属性。这种技术也受到浏览器支持的限制。CSS动画适合于简单的、非关键的动画效果

• 浏览器支持注释：CSS动画在IE 9和更早的版本中不被支持，在IE 8和更早版本中也不支持SVG。IE 10和11支持CSS属性的动画，但不支持SVG特定的属性（fill、stroke等）。2017年之前发布的Edge和Firefox浏览器中，如果SVG添加了img元素，CSS动画将无法工作，旧的Chrome和Safari浏览器需要-webkit-前缀

8.1.3 JavaScript

使用JavaScript可以创建复杂的交互式动画，JavaScript有更好的浏览器支持。可以利用许多SVG动画的JavaScript库。

• Snap.svg（snapsvg.io） 开源，免费的多用途SVG构建和动画库
• SVG.js（svgjs.com） 非常轻量级的库，用于基本的SVG动画。模块化的
• Velocity（velocityjs.org） 使动画渲染非常快速，具有类似于jQuery的语法，易于使用
• Bonsai（bonsaijs.org） 健壮的SVG动画库，支持字体、音频、视频和图像

8.2. 路径动画器

有许多简单JS库可以为SVG中的行制作动画：

• Walkway（connoratherton.com/walk-way）
• LazyLinePainter（lazylinepainter.info）
• Vivus（maxwellito.github.io/vivus）

9. 数据可视化

SVG已经成为数据可视化（dataviz）领域的首选工具，因为它们可以用真实数据动态生成。

• 一个专门为“数据驱动文档”创建的JS库D3.js（d3js.org）

9.1. 用数据生成SVG的方法

用数据生成SVG的方法取决于数据的类型和使用的编程语言。

• 一种方法是使用XSLT（eXtensible Stylesheet Language Transformation，可扩展样式表语言转换）将包含数据的XML文档转换成SVG。XSLT是一种XML语言，提供结构化的指令，用于将一种XML语言转换成另一种XML语言。
• 其他选项包括JavaScript和服务器端模板语言

10. 可访问性

与位图图像格式的文本不同，SVG中的文本可以通过搜索引擎访问，并在标记正确时由屏幕阅读器读取。为了让屏幕阅读器更容易地访问SVG，可以做一些事情：

• 使用SVG title元素为svg元素本身或者其包含的任何容器（如g）或元素提供一个短名称，title元素应该是其父元素的第一个子元素
• 向svg元素及其组件添加ARIA角色，以确保屏幕阅读器正确而有效地解释它们。建议包括：
  • 将role="img"添加到svg元素中，但仅当希望将其视为单个非交互式图像时使用，子元素将不能被单独访问
  • 将aria-labelledby="title desc"添加到svg元素中，以改进对title和desc的支持
  • 如果SVG的某些部分应该是可访问的，那么不要在svg上设置角色，而是在形状和路径中添加role="presentation"，以防止屏幕阅读器宣布图形中每个形状的出现。

11. SVG工具

11.1. 矢量图工具

即使像Photoshop和GIMP这样的图像编辑器也可以导出为SVG的形状。

11.1.1 Adobe Illustrator

按月收费，Illustrator是一个矢量工具，但它本身使用PostScript，并将这些矢量转换成SVG。更好的选择是Export As，生成的SVG将经过Web优化。

11.1.2 Inkscape（inkscape.org）

一个开源的图像编辑器，专门为SVG而设计。免费。 macOS版的Inkscape运行在XQuartz上，因此Mac用户需要先下载（www.xquartz.org ）再运行。

11.2. SVG专用工具

小型SVG专用绘图工具，有许多可管理的工具和设置，可以映射到SVG功能，其中一些还允许查看和编辑底层的SVG代码。

11.2.1 Boxy（boxy-svg.com）

一款功能齐全的图形程序，价格10美元。有一个易于使用的界面和一个代码检查器

11.2.2 SVG-Edit（github.com/SVG-Edit/sv…）

可以直接在浏览器中（svg-edit.github.io/svgedit/rel… ）工作，也可以作为下载的程序工作。提供了所有基本的绘图工具、图层以及查看和编辑SVG源代码的功能。也可以导出为PNG、JPEG、BMP和WebP。免费的

11.3. 界面设计工具

用于设计Web页面和应用程序界面的工具，如Sketch、AdobeXD和Affinity Designer。都是基于矢量的。

11.4. 代码编辑器

如果需要手工编写SVG，或者需要修改已有的SVG，那么应该看看自己所选择的代码编辑器是否有SVG预览。SVG预览可用于以下编辑器：

• Atom编辑器（从GitHub上免费获取）：从atom.io/packages/sv… 获取SVG预览包
• Brackets（从Adobe免费获取）：在github.com/peterflynn/…上获取SVG扩展

12. SVG制作技巧

12.1. 文件尽可能小

与Web页面上交付的任何文件一样，希望该文件尽可能小

12.2. 标记尽可能要结构化

如果计划使用CSS对SVG进行样式设计，或使用JS对其进行操作，那么标记尽可能要结构化

12.3. 导出前的最佳实践

12.3.1 以像素为单位定义画板或图形大小

12.3.2 使用层对元素进行逻辑分组

有利于制作SVG动画或编写SVG脚本

12.3.3 给元素和层起有意义的名称

应该都是小写的且没有字符空格，所以是适合作为属性值

12.3.4 简化路径

使用工具提供的任何“简化路径”功能，还可以考虑使用减少文件中元素数量的方法

12.3.5 注意小数点

限制小数点后字符的数量

12.3.6 避免SVG中的光栅效果

当将位图图像素材引入SVG时，注意绘图程序中的某些效果常常会在没有预料到的情况下生成光栅图像区域，从而大大增加文件大小。一些过滤效果可以在有效导出后在代码中来完成

12.3.7 注意字体

一定要测试并提供备份

12.3.8 使用居中笔画

可能获得更好的结果，因为这就是SVG生来处理笔画的方式

12.4. 熟悉所选工具的特性，以便预测和纠正其缺点

12.5. 导出后优化

在使用图形工具设计和导出SVG之后，可以采取一些措施来确保它尽可能的精简和均衡。可以在不影响SVG呈现方式的情况下安全的删除冗余代码、不必要的元数据、隐藏元素和其他一些意义不大的内容。通过优化器运行SVG，可以去掉所有这些内容并缩小文件大小

12.5.1 SVGO（github.com/svg/svgo）

• 使用影响个别调整的插件，可以根据文件的最终用途来选择压缩文件的方式。
• 基于Node.js的，可以将其作为Node.js模块使用，或者将其合并到Grunt或Gulp任务中。
• 用于Illustrator（SVGNow）、Inkscape（SVGO-Inkscape）、Sketch（SVGO Compressor）的SVGO插件。还可以作为macOS文件夹操作使用，当将文件拖放到其中时，将执行优化。
• 查看SVGO运行情况最简单的方法是使用基于Web的SVGOMG工具（jakearchibald.github.io/svgomg/ ），为SVGO提供了图形用户界面。允许单独切换各种优化插件，并在实时预览中查看结果。

12.6. 文件压缩

可以使用Gzip或Brotli等工具对其进行压缩。

• Gzip是服务器上的一个实用程序。压缩后的SVG文件的大小可能仅为原始大小的16～25%，压缩后的文件使用后缀.svgz。为了将Gzip用于SCG，必须在服务器上配置它
• Brotli是Google在2015年发布的一个开源压缩算法，在压缩和性能方面与Gzip处于竞争地位。必须在服务器上配置Brotli。浏览器从2017年开始支持Brotli内容编码。github.com/google/brot…

13. 自适应SVG

• 对于位图图像，只需要将img的宽度设置为100%，高度默认为auto。浏览器会根据指定的宽度自动计算高度，根据以像素为单位的尺寸确定图像的高宽比，使得图像可以按比例缩放，而不会被拉伸或扭曲。
• 使用SVG，情况会稍微复杂一些。首先，必须给图形一个明确的高宽比。再次，必须解决设计自动计算高度的浏览器的bug

13.1. SVG缩放机制

13.1.1 视窗和视框

1. 视窗（viewport）

• 由svg元素的width和height属性定义的视窗，通过它可以看到绘图区域。
• 当SVG使用img、object或iframe嵌入时，这些元素的width和height属性设置了视窗的大小
• 视窗使用一组坐标，从左上角的0开始，向右和向下延伸。

2. 视框（viewbox）

• 绘图空间（也称为用户空间）的大小和视窗的大小是相互独立的。
• 绘图空间有自己的一组坐标，即用户坐标系统，用svg元素中的viewBox属性建立的，工作方式完全相同。这个属性在保持图形高宽比的同时，是使自适应缩放成为可能的关键。
• viewBox属性的语法：viewBox="x y width height"，x、y值决定了视窗中视框左上角的位置，width和height属性决定了其尺寸，并确定了其长宽比。值可以由空格字符分隔，也可以由逗号分隔。
• 如果viewBox被省略，默认行为是视框匹配视窗

13.1.2 preserveAspectRatio属性

svg元素中的preserveAspectRatio属性负责确保图形保持其高宽比。其在默认情况下是打开的，将其设置为none意味着你可以随意拉伸和挤压图形。preserveAspectRatio属性还接受关键字值，以确定视框在其视窗中的对齐方式。它们的工作方式非常类似于CSS属性background-image-position的百分比值。

13.2. 按比例缩放SVG的技术

13.2.1 使用img和object元素嵌入自适应SVG

• 首先，在SVG文件中，确保svg元素包含viewBox属性以建立图形的维度。如果想让图形完全填充其容器的宽度，则可以忽略svg元素的widht和height，因为它们默认为100%。
• 应用于嵌入元素（img、object）的宽度和高度决定了SVG在布局中显示的大小。默认width和height属性设置为auto，如果省略它们，将适应SVG的尺寸。如果指定width和height，那么浏览器将使用视框的高宽比来计算未指定的尺寸。
• 注意，当忽略嵌入对象的width和height时，IE会使SVG填充整个容器，而将其高度设置为150px。HTML5规范将嵌入式媒体的默认大小定义为300px宽、150px高。

13.2.2 自适应内联SVG

• 首先，如果希望宽度是容器的100%，则需要包括viewBox属性并省略svg元素上的width和height属性
• 当前的浏览器版本如预期的那样支持按比例缩放容器的SVG，但旧版本的浏览器不支持，需要使用“填充黑客”来保持内联SVG的比例。步骤如下：
  • 将svg放在容器div中
  • 将该div的height设置为0px或1px
  • 在div的顶部应用一定数量的填充，使其具有与SVG相同的高宽比
  • 使用填充将div扩展到适当的比例后，绝对定位将svg元素置于容器div的左上角

14. 自适应图标

简单的缩小SVG的问题是，小尺寸的细部可能丢失。解决这个问题的一种方法是在图像非常小的情况下提供图标或徽标的简化版本。自适应图标使用媒体查询来测试视窗大小，并在SVG中使用一些巧妙的样式来提供各种大小的合适的细部

附录

1. HTML5全局属性

可以和任何HTML元素一起使用

属性	值	描述
accesskey	单个文本字符	给链接分配访问密钥（快捷键命令），也可用于表单字段
class	文本字符串	为元素分配一个或多个分类名称，空格分隔多个类名
contenteditable	true｜false	表示用户可以编辑元素，值为空字符串则表示true，默认继承父元素
dir	ltr｜rtl｜auto	指定元素的内联文本方向，设置为auto时，使用第一个字母来确定方向
draggable	true｜false	元素在UI中是否可拖拽
hidden	HTML中只写hidden，XHTML中写hidden="hidden"	防止在用户代理中呈现元素及其子元素，任何脚本或表单控件仍将执行
id	文本字符串	为元素分配唯一的标识名称
lang	ISO语言代码	指定元素内容及其属性值的主要语言，省略，则与父元素相同
spellcheck	true｜false	指定是否检查元素的拼写和语法，省略则遵循该元素的默认行为
style	分号分隔的样式规则列表	将样式信息与元素关联
tabindex	数字	指示元素是可聚焦的，并指定其在文档的制表顺序中的位置，值-1允许从制表流中删除元素，并使它们只能通过JS进行聚焦
title	文本字符串	提供关于元素的标题或咨询信息，通常显示为工具提示，未指定则从其最近的带有标题的祖先元素继承
translate	yes｜no	指定是否对元素的属性值及其文本节点的值进行翻译，未指定则继承其父元素

2. CSS选择器第3级和第4级

第4级可能还没有被浏览器实现

选择器	选择器类型	描述
简单选择器和组合选择器
*	通用选择器	匹配任何元素
A	类型选择器	匹配元素名称
A,B	复合选择器	匹配元素A和元素B
A B	后代选择器	匹配作为元素A后代的元素B
A>B	子选择器	匹配作为元素A孩子的元素B
A+B	相邻同胞选择器	匹配紧跟着元素A的元素B，A与B有相同的父元素
A~B	一般同胞选择器	匹配以元素A为先导的元素B，A与B有相同的父元素
类和ID选择器
.classname、A.classname	类选择器	匹配所有元素或指定元素中的class属性值
#idname、A#idname	ID选择器	匹配一个元素中的id属性值
属性选择器
A[att]	简单属性选择器	匹配定义了给定的属性的元素A
A[att="val"]	精确属性值选择器	匹配指定属性赋予指定值的元素A
A[att]="val" i（第4级）	不区分大小写的属性值选择器	匹配将指定属性设置为指定值的任何元素A，即使该元素不匹配其大小写，包括在区分大小写的XML语言中
A[att]~="val"	部分属性值选择器	匹配元素A，其指定值是指定元素属性列表中的一个值
A[att]｜="val"	带连字符的前缀属性选择器	匹配元素A，其指定属性的属性值等于给定值，或以给定值开头，最常用来选择语言
A[att]^="val"	开始子串属性选择器	匹配有特定属性的任意元素A，它的值以给定字符串开始
A[att]$="val"	结束子串属性选择器	匹配有特定属性的任意元素A，它的值以给定字符串结束
A[att]*="val"	任意子串属性选择器	匹配有特定属性的任意元素A，它的值包含给定字符串
伪类选择器
:any-link（第4级）	链接伪类选择器	指定链接的样式，而不管其是否已被访问
:link	链接伪类选择器	指定尚未访问过的链接的样式
:target	目标伪类选择器	选择用作片段标识符的元素
:target-within（第4级）	通用目标伪类选择器	选择或包含用作片段标识符的元素
:visited	链接伪类选择器	指定已访问过的链接的样式
:active	用户动作伪类选择器	指定已被用户激活的元素
:hover	用户动作伪类选择器	指定鼠标指针悬于其上时元素的显示样式
:focus	用户动作伪类选择器	指定当前输入焦点所在的元素
:focus-within（第4级）	通用输入伪类选择器	选择具有用户输入焦点的任何元素或包含具有输入焦点的元素
:focus-visible（第4级）	用户动作伪类选择器	选择具有用户输入焦点的任何元素，并且用户代理已确定应该为该元素绘制焦点环或其他指示器
:drop(active)（第4级）	拖放伪类选择器	选择一个元素，该元素是要拖动项的当前放置目标
:drop(valid)（第4级）	拖放伪类选择器	选择可以接受当前正在拖动的项的元素
:drop(invalid)（第4级）	拖放伪类选择器	选择一个元素，该元素不能接收当前正在拖动的项，但可以接收其他项
:dir(ltr)（第4级）	方向性伪类	选择具有特定写入方向的元素
:lang(xx)	语言伪类选择器	选择匹配双字符语言代码的元素
:nth-child()	结构化伪类选择器	选择某个父元素的第n个元素。这个符号包含一个数值、一个字符或者关键字odd或even
:nth-last-child()	结构化伪类选择器	选择某个父元素的倒数第n个子元素
:nth-of-type()	结构化伪类选择器	选择某个类型的第n个元素
:nth-last-of-type()	结构化伪类选择器	选择某个类型的倒数第n个元素
:first-child	结构化伪类选择器	选择父元素的第一个子元素
:last-child	结构化伪类选择器	选择父元素的最后一个子元素
:only-child	结构化伪类选择器	选择父元素的唯一子元素
:first-of-type	结构化伪类选择器	选择某种类型的第一个兄弟元素
:last-of-type	结构化伪类选择器	选择某种类型的最后一个兄弟元素
:only-of-type	结构化伪类选择器	选择某种类型的唯一兄弟元素
:root	树结构伪类选择器	选择文档的根元素，在HTML中，是html元素
:empty	树结构伪类选择器	选择没有文本也没有子元素的元素
:blank	树结构伪类选择器	选择除空格之外没有内容的元素
:enabled	UI伪类选择器	选择一个有效的UI元素
:disabled	UI伪类选择器	选择一个无效的UI元素
:checked	UI伪类选择器	选择一个选定的UI元素
:read-write（第4级）	可变伪类选择器	选择用户可更改的UI元素
:read-only（第4级）	可变伪类选择器	选择用户不能更改的UI元素
:placeholder-shown（第4级）	可变伪类选择器	选择当前显示占位符文本的输入控件
:default（第4级）	默认选项伪类选择器	选择一个UI元素，它是一组相关选项中的默认值
:indeterminate（第4级）	不确定值伪类选择器	选择处于不确定状态的UI元素（既不是选中，也不是未选中）
:valid（第4级）	有效性伪类选择器	选择满足其数据有效性语义的UI元素
:invalid（第4级）	有效性伪类选择器	选择不满足其数据有效性语义的UI元素
:in-range（第4级）	范围伪类选择器	选择值在指定范围内的UI元素
:out-of-range（第4级）	范围伪类选择器	选择值不在指定范围内的UI元素
:required（第4级）	可选伪类选择器	选择需要输入的UI元素
:optional（第4级）	可选伪类选择器	选择不需要输入的UI元素
:not(A)	否定伪类选择器	选择与简单选择器A不匹配的元素，也可与复合选择器一起使用
:matches(A,B)（第4级）	匹配任何伪类选择器	选择与A或B匹配的元素
E:has(rA,rB)（第4级）	关系伪类选择器	当使用元素作为:scope元素进行计算时，如果相对选择器rA或rB中的任何一个与元素匹配，则钻则元素E
伪元素选择器
::first-letter	伪元素选择器	选择指定元素的第一个字母
::first-line	伪元素选择器	选择指定元素的第一行
::before	伪元素选择器	在指定元素的开头插入指定的文本，并对其应用样式
::after	伪元素选择器	在指定元素的结尾插入指定的文本，并对其应用样式
网格结构选择器
A｜｜B（第4级）	网格结构选择器	选择元素B，该元素表示网格/表中属于由元素A表示的列的单元格

3. 从HTML到HTML5

web-standards.org/

3.1. HTML5不仅是标记

以前的HTML版本主要关注标记要在Web页面上查看的内容的元素。HTML5是一组新方法，用于完成以前需要特殊编程或专有插件技术才能完成的任务。解决方案包括标记和脚本组件，包括用于在页面上放置音频和视频、在本地存储数据、脱机工作、利用位置信息等的API。使用HTML5处理常见任务，开发人员可以依赖于内置的浏览器功能，而不必为每个应用程序从零做起

3.2. HTML5标记组件

HTML5是基于严格HTML 4.01的。HTML5引入了许多新元素、表单输入类型和全局属性。还使HTML 4.01中许多弃用的元素和属性正式过时

3.3. XML中的HTML5

HTML5也可以根据更严格的XML语法编写。尽管不是必须的。在有些情况下，可能需要将HTML5文档用作XML以便与其他XML应用程序一起工作，这种情况下，它可以使用XML语法并随时准备开始工作。

3.4. 无DTD的DOCTYPE

• HTML文档类型声明：<!DOCTYPE html>
• 严格HTML 4.01：<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01/EN" "http://www.w3.org/TR/HTML4.01/strict.dtd">
• 对于用HTML 4.01和XHTML 1.0和1.1编写的文档，声明必须指向公有DTD（Document Type Definition，文档类型定义），DTD是一个在标记语言中用来定义所有元素和规则的文件。
• DTD是SGML的残余，已被证明在Web中不如想象的那么有帮助。所以HTML5的编写者根本没有使用它

3.5. 验证器

要检查HTML文档是否有效，请使用W3C的在线验证器validator.w3.org，在html5.validator.nu中也提供了一个特定于HTML5的验证器。验证器是检查所有文件中的标记是否正确的软件，使用DOCTYPE声明来确保文件遵守它声称遵循的规范规则

3.6. 遇到API

HTML5的创作者想要更容易的创建基于Web的应用程序，需要使用脚本和编程。出于这个原因，HTML5还定义了一些新的API，使它更容易与程序沟通与应用

• API（Application Programming Interface，应用程序编程接口）是一个文档化的命令集、数据名称等，可以让一个应用程序与另一个应用程序通信。
• HTML5中一些API有标记组件，如使用新的HTML5 video和audio元素来嵌入多媒体。其他的API可以在后台调用JS或服务器端组件，比如可以创建Web应用程序，即便在没有互联网链接的时候也可以工作（离线Web应用程序API）
• 大多数API有自己的规范，这些规范不同于HTML5标准，但一般也把它们归为网络应用程序广泛使用的HTML5。HTML5包含以下API规范：

3.6.1 媒体播放器API

用于控制嵌入网页的音频和视频播放器。使用心得video和audio元素

3.6.2 编辑API

提供一个命令集，可以用来创建基于浏览器的文本编辑器，允许用户插入和删除文本，将文本格式化为粗体、斜体或超文本。此外，一个新的contenteditable属性允许任何内容元素在页面上可编辑

3.6.3 会话历史API

用户更好地控制后退按钮，显示浏览器历史记录

3.6.4 拖放API

拖动选择的文本或文件到本地页面或另一个页面的目标区域，draggable属性表示元素可被选择和拖动

• 一些由W3C开发并有自己的标准和规范的API：

3.6.5 Canvas API

canvas元素把一个动态的、二维的绘画空间添加到一个页面上

3.6.6 服务工作者API

该规范描述了一种使Web应用程序能够离线工作的方法

3.6.7 Web存储API

允许数据可以被存储到浏览器的缓存，这样应用程序就可以使用它。传统上，已经由“cookies”完成了，但网络存储的应用程序API允许更多的数据存储。还控制了数据是否限制到一个会话（sessionStorage）或者是否基于一个域名（localStorage）

3.6.8 定位API

允许用户分享他们的地理位置，这样在网络应用中就可作用于脚本。允许应用程序提供位置感知等功能。

3.6.9 网络套接字API

创建一个“套接字”(socket)，是一个浏览器客户端和服务器之间的开放接口。使得信息在客户端和服务器之间实时流动，对于传统的HTTP请求没有时滞。可以将Web套接字看作浏览器和服务器之间正在进行的电话通话，也不是传统的浏览器/服务器一次只进行一次通信的对讲机。它对于多人游戏、聊天或不断更新的数据流是有用的。