HTML+CSS

锚标记新功能：

我们一般使用锚标记将短语（甚至一个单词）配置成一个链接。HTML5为锚标记提供了新功能，即block anchor，它能将一个或多个元素（包括作为块显示的，比如div，h1或者段落）配置成链接。
PS：这个我在百度和谷歌都搜不到，好奇怪。。。

新的结构性元素：

• 元素：作用是包含网页文档或文档区域的标题。header元素以

  标记开始，以

  结束。header元素为块级元素，通常包括一个或多个标题。
• 元素：作用是建立一个导航链接区域。nav也是块级元素，以

  标记开始，以

  结束。

• footer元素：作用是为网页或网页区域创建页脚。footer也是块级元素，以
  标记开始，以
  结束。

CSS语法校验：

CSS编码要小心，一些常见的错误会造成浏览器无法向网页正确应用CSS，根据一下几点检查代码：
1.冒号(;)和分号(;)用在正确的地方，它们很容易混淆 （属性: 值;）
2.属性与值之间用冒号连接，而不是等号=
3.每个选择符的样式规则都是再一对{}之间
4.如果部分CSS能正常工作，而部分不能，就从头检查CSS，一般是没有正常工作的规则上方的那个规则存在错误。
5.使用W3C CSS校验服务网页，上传“.css文件” 或 输入CSS代码 Check

创建一个收藏图标：

其效果是再地址栏或书签栏/收藏列表中显示图标
方法：在head内使用标记将网页与收藏图标关联

关于图片：

图片文件类型

| 图片类型 | 扩展名 | 压缩 | 透明 | 动画 | 颜色 |
|-|
| GIF | .gif | 无损 | 支持 | 不支持 | 256色 |
| JPEG | .jpg或.jpeg | 有损 | 不支持 | 不支持 | 1000万以上 |
| PNG | .png | 无损 | 支持 | 不支持 | 1000万以上 |

• GIF图：“可交换图形文件格式（Graphic Interchange Format，GIF）最适合存储纯色和简单几何形状（比如美工图案）。GIF文件最大颜色数为256色。GIF保存时使用无损压缩。也就是说，在浏览器渲染时，图片将包含与原始图片一样多的像素，不会丢失任何细节。动画GIF包含多张图片（或者称为帧），每张图片会有少许差别。这些帧在屏幕上按顺序显示的时候，图片中的内容就会动起来。GIF图使用的GIF89A格式支持透明功能，这样就能透过图片的“透明”区域看见底下的网页背景。
• JPEG图片：“联合照片专家组”（Joint Photographic Express Group，JPEG）格式最适合存储照片。和GIF图相反，JPEG图片可以包含1670万种颜色。但是，JPEG图片不能设置透明，而且不支持动画。JPEG图片以有损压缩方式保存。这意味着原图中某些像素在压缩后会丢失或被删除。浏览器渲染压缩图片时，显示的是与原图相似并非完全一致的图片，虽然这种差别通常很难发现。
  一个方便的联机照片编辑器：Pixlr
• PNG图片：PNG（读作“ping”）是指“可移植网络图形”（Portable Network Graphic，PNG）。它结合GIF和JPEG图片的优势，是GIF格式很好的代替品。PNG图片支持数百万种颜色和多个透明级别，并使用无损压缩。
• 新的WebP图片格式：谷歌新的WebP图像格式提供了增强的压缩比和更小的文件尺寸，但目前还没有准备好在商业网站使用。WebP（读作“weppy”）目前只有谷歌的Chrome浏览器支持。参见这里

图像映射：

（image map，是指为图片配置多个可点击或可选择的区域，它们链接到其他网页或网站。这些可点击的区域称为“热点”，支持三种形状：矩形、圆形和多边形。配置图像映射要用到image、map以及一个或多个area元素。）

• map元素：map元素是容量标记，指图像映射的开始与结束。在

• area元素：area元素定义可点击区域的坐标和边界，这是一个void标记，可使用href，alt，title，shape和coords属性。其中，href属性指点击模拟区域后显示的网页。alt属性为屏幕朗读程序提供文本说明。title属性指定鼠标停在区域上方时显示的提示信息。coords属性指可点击区域的坐标。下表为shape属性值对应的坐标格式。

  
  
  
• 探讨矩形图像映射：
  
  
  
  【一些免费的联机图像映射生成器】