锚标记新功能:
我们一般使用锚标记将短语(甚至一个单词)配置成一个链接。HTML5为锚标记提供了新功能,即block anchor,它能将一个或多个元素(包括作为块显示的,比如div,h1或者段落)配置成链接。
PS:这个我在百度和谷歌都搜不到,好奇怪。。。
新的结构性元素:
- <header>元素:作用是包含网页文档或文档区域的标题。header元素以<header>标记开始,以</header>结束。header元素为块级元素,通常包括一个或多个标题。
- <nav>元素:作用是建立一个导航链接区域。nav也是块级元素,以<nav>标记开始,以</nav>结束。
- footer元素:作用是为网页或网页区域创建页脚。footer也是块级元素,以<footer>标记开始,以</footer>结束。
CSS语法校验:
CSS编码要小心,一些常见的错误会造成浏览器无法向网页正确应用CSS,根据一下几点检查代码:
1.冒号(;)和分号(;)用在正确的地方,它们很容易混淆 (属性: 值;)
2.属性与值之间用冒号连接,而不是等号=
3.每个选择符的样式规则都是再一对{}之间
4.如果部分CSS能正常工作,而部分不能,就从头检查CSS,一般是没有正常工作的规则上方的那个规则存在错误。
5.使用W3C CSS校验服务网页,上传“.css文件” 或 输入CSS代码 Check
创建一个收藏图标:
其效果是再地址栏或书签栏/收藏列表中显示图标
方法:在head内使用<link>标记将网页与收藏图标关联
关于图片:
图片文件类型
| 图片类型 | 扩展名 | 压缩 | 透明 | 动画 | 颜色 |
|-|
| 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元素是容量标记,指图像映射的开始与结束。在<map>标记中,用name属性设置图片名称。id属性的值必须与name属性相同/而用<img>标记配置图片时,要用usemap属性将图片和map元素关联。
-
area元素:area元素定义可点击区域的坐标和边界,这是一个void标记,可使用href,alt,title,shape和coords属性。其中,href属性指点击模拟区域后显示的网页。alt属性为屏幕朗读程序提供文本说明。title属性指定鼠标停在区域上方时显示的提示信息。coords属性指可点击区域的坐标。下表为shape属性值对应的坐标格式。
- 探讨矩形图像映射:
【一些免费的联机图像映射生成器】