HTML5与CSS3对网页设计制作工作的好处.doc

HTML5和CSS3热潮正横扫网络，从事互联网行业，特别是前端工作者，大家或多或少都有了解、学习和使用，HTML5和CSS3包含丰富的技术内容，在每周的技术分享交流会中，页面构建工程师@Sunshine珍兒同学，从三个特别的角度出发，配合丰富的实例，概括了HTML5与CSS3对页面工作带来的息息相关的变化和精彩。
一、我们担心苦恼的那么事儿

1.1对于页面构建者来说：
表现层会遇到一些难题，欣赏绚丽的UI设计稿的同时，也在苦恼怎样用现用的技术力量去实现圆角，阴影，高光，渐变，透明等各种表现效果。为了精准UI还原度，我们会不惜花费更多字节数切大图或者添加一些多余的空标签。
结构层同样也会遇到麻烦。首先看页面首行代码doctype，包含了，冗长而复杂，从事多年开发的你能记住这段话吗？
接着看满屏几乎都是毫无语义的div标签，为了实现复杂的设计效果，我们不得不使用多个层级嵌套，造成代码冗余。
再看看页面中一些交互动画效果，基本都是JS和flash开发人员所实现，页面构建在现有技术上只能有心而无力。

1.2对于js开发人员来说：
一个简单的交互效果，一个又一个表单验证，需要使用一大段JS代码去实现，为了兼容各个浏览器，不得不多写数行代码。
1.3对于flash开发人员来说：
Flash开发人员担心的是用户没有安装必要的插件，担心插件被禁用或者屏蔽，像现在apple的ipad就已经不支持flash插件了。
以上的担心与苦恼你曾有过吗？如果有，别怕，HTML5和CSS3来了，已经来了！
二、我们开心盼来的那么事儿

HTML5和CSS3的到来，让我们网页开发者可以做的更多，更好！
CSS3带来了圆角，半透明，阴影，渐变，多背景图等新的特征，轻松实现了设计稿中常见的图层样式，用简洁的代码替代图片，代替了多余的空标签。CSS3带来的媒体查询可以为不同的显示设备定义相匹配的样式，灵活实现了智能的流体布局，CSS3还为我们带来了强大的选择器以及变形动画。下面让我们一起来看看实际工作中的具体应用吧~

（实例一）
类似实例一的设计稿，我们常见的做法是在无序列表li里为不同小图标识写上不同的class类名，或者单独为每个小图标写上空标签定义样式，这样带来的问题之一是html结构不干净简洁，二是使后续的开发工程师多了一层判断。
而利用CSS3强大的选择器就能轻松解决这个问题，E［foo^=”bar”］表示的是选择匹配E的元素，且该元素定义了foo属性，foo属性值包含前缀为bar的子字符串。
以下是片段代码。

CSS3包含了很多新的属性特征，动画效果尤为受大家喜爱。实例二是为这次分享做的一个学习转动盘。用JS和CSS3去控制转盘的指针转动效果。

（实例二）
该实例重点在于animation-play-state属性，paused表示的是暂停。
Animation属性包含了动画名称Animation-name，动画时间Animation-duration，动画播放方式Animation-timing-function，动画开始播放时间Animation-delay，动画播放次数Animation-iteration-count，动画播放方向Animation-direction等等，实例详细代码请见PPT。
领阅了CSS3带来的价值，那么HTML5给我们带来了哪些盼来的事儿呢？
HTML5的口号是简单至上，尽可能地简化：简化了doctype，如；简化了字符集声明；新增了更多语义化标记header、footer、section、article、aside、nav；新增了很多标识元素如canvas、audio、video，配合简单而又强大的HTML5API，让浏览器发挥它原生的能力，来替代复杂的javascript代码。

（实例三）
实例三是用canvas画的一个weibologo图标。这里用到了两个知识重点：
其一，context.lineCap=［value］，线帽风格有三种：对接（butt）默认值，圆形（round）方形（square）；
其二，arc（x，y，radius，startAngle，endAngle，anticlockwise），x，y指定绘制的圆弧的圆心下xy轴坐标，radius是圆的半径，startAngle和endAngle指定了起始弧和结束弧，anticlockwise指定是否使用逆时针方向绘图，逆时针方向（TRUE），顺时针方向（FALSE）。

（实例四）
实例四是用audio标签做的一个音乐播放器，用HTML5API提供的属性去控制该控件的播放play()，暂停pause()，进度条，当前时间currentTime，音量volume，歌曲选择且封面和曲名相应变化等效果。
介绍audio标签常用的几个可脚本控制的特性