题目当然是模仿的淘宝UED的那本译作《PPK on Javasrcipt》，可惜我说不了那么深刻，只是摆出来供大家探讨。html5和css3现在是个时髦的话题，时髦到现在才写这个都有点过时了。还好爸爸总对我说这么一句话“只要是你没看过的《故事会》，1999年的也是最新的。”
闲话少说，html5新增的一些特性包括：
- 新的特殊内容元素，比如 header、section、nav、article、aside、footer
- 新的表单控件，比如 date、time、email、url、search
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
一、新增内容元素的出现，是标准向语义化跨出的一大步。以前我们有一些约定俗成的规矩(点击这里)，比如说
1 2 3 4 5 6 7 | <div id="header">页面头部</div> <div id="content"> <div id="nav">导航区域</div> <div id="main">主内容区</div> <div id="side">侧边栏</div> </div> <div id="footer">页面底部</div> |
在html4.01中div是区域划分的最好元素，不夸张的说只用一个div就可以搞定整个页面，所以市面上流行着大量div+css的书，其实div只是html中的一个元素标签，严格来说应该是(x)html+css技术。html5更加强调了标签的语义化，新增header、nav、article、section、footer等内容元素。所以上面的代码片段在html5中比较合理的写法变为：
1 2 3 4 5 6 7 | <header>页面头部</header> <section> <nav>导航区域</nav> <article>主内容区</article> <aside>侧边栏</aside> </section> <footer>页面底部</footer> |
好了，现在不用约定俗成了，现在标准规定了，每个符合标准的浏览器都会知道页面中的每一部分代表什么内容，有什么作用。代码简洁漂亮没有多余重复的div,搜索引擎可以更清楚的判断网页的哪部分内容更重要。事情变的简单，工作效率增加。
但是但是，要注意他们跟h1、P不一样，新增的内容元素不是换了名字有了自己特点的div。尝试这样定义header标签的样式：
1 | <header style="width:300px;height:200px;background:red;">页面头部</header> |
测试发现在ff、safari、opera中width和height都没有起作用，只有在chrome中才得到想象中的效果。（ie我暂时忽略了，原因不表）新增的内容元素不是div，现在就可以使用这些新内容元素，但有时候要套一个多余的div，比较：
1 2 3 | <header style="width:300px;height:200px;margin:0 auto;"> 内容 </header> |
1 2 3 | <header> <div style="width:300px;height:200px;margin:0 auto;">内容</div> </header> |
二、新的表单控件,html5新增了许多input输入类型选择：
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
详细了解，请点击这。
以前不借助javascript，实现表单验证功能是不可能的。html5新增的input类型不要javascript就能验证。email可以验证输入是不是email格式；number类型确保输入的是一个数值。这真是振奋人心的新增功能。
但是但是，现在面临最大的推广困难是各浏览器对其的支持，那是相当的不乐观。即使浏览器对标准全面支持，我觉得实际应用起来仍然不那么乐观，因为标准没有规定，当值为true时浏览器应该怎么做，当值为false时浏览器又要怎么做。比如说opera有自己的fasle效果，input底色变红并且出现输入不合法的提示。如果我们想做到各浏览器表现效果一致，恐怕需要一个像css那样的reset.css。
