add html5 and css3

Author: webzhao

content/html5-and-css3.md

@@ -0,0 +1,120 @@
+# HTML 5 & CSS 3
+
+### 赵文博
+
+---
+
+## whoami
+
+* **赵文博**
+* 奇舞团前端工程师
+* 负责 360 商业产品前端
+<p style="font-size:120%;margin-top:0.5em">
+    <a href="https://github.com/webzhao" target="_blank" title="Github"><i class="fa fa-github"></i></a>&nbsp;
+    <a href="http://www.flickr.com/photos/53827079@N06/" target="_blank" title="Flickr"><i class="fa-flickr"></i></a>&nbsp;
+    <a href="https://twitter.com/webzhao" target="_blank" title="Twitter"><i class="fa-twitter"></i></a>&nbsp;
+    <a href="http://cn.linkedin.com/pub/wenbo-zhao/29/7b1/514" target="_blank" title="Linkedin"><i class="fa-linkedin"></i></a>&nbsp;
+</p>
+
+---
+
+### HTML 5 设计思想
+
+* 兼容已有内容
+* 避免不必要的复杂性
+* 解决现实的问题
+* 优雅降级
+* 尊重事实标准
+* 用户 》开发者 》浏览器厂商 》标准制定者 》理论完美
+
+---
+
+## HTML 5
+
+<style>
+.reveal table.html5 {
+    margin: 0 auto;
+}
+.html5 img {
+    width: 3em;
+}
+table.html5 td {
+    text-align: center;
+    padding: 1em;
+}
+</style>
+<table class="html5">
+    <tr>
+        <td><img src="img/html5/semantics.svg?1"><br>语义化标签</td>
+        <td><img src="img/html5/integration.svg?1"><br>性能和集成</td>
+        <td><img src="img/html5/connectivity.svg?1"><br>连通性</td>
+        <td><img src="img/html5/offline.svg?1"><br>离线与存储</td>
+    </tr>
+    <tr>
+        <td><img src="img/html5/device.svg?1"><br>设备访问</td>
+        <td><img src="img/html5/multimedia.svg?1"><br>多媒体</td>
+        <td><img src="img/html5/css3.svg?1"><br>CSS3样式</td>
+        <td><img src="img/html5/3d.svg?1"><br>图形与3D效果</td>
+    </tr>
+</table>
+
+---
+
+### 语义化
+
+* 结构
+    * section、article、nav、header、footer、aside、main
+* 媒体
+    * video、audio
+* 表单
+    * [新增表单验证和表单类型](http://html5doctor.com/demos/forms/forms-example.html)
+* 其它
+    * figure、figcaption、data、time、progress
+
+---
+
+
+
+---
+
+
+---
+
+# 跨页面通信
+
+
+
+---
+
+* [Web Workers](http://html5demos.com/worker)
+
+---
+
+* [拖放](http://html5demos.com/dnd-upload)
+* XMLHttpRequest Level 2
+* [History API](http://html5demos.com/history/second)
+* requestAnimationFrame
+* [全屏 API](http://davidwalsh.name/demo/fullscreen.php)
+
+
+
+---
+
+## 开始使用 HTML 5 和 CSS 3
+
+---
+
+### 兼容性
+
+* [Can I Use]()
+* [MDN]()
+
+---
+
+### 优雅降级
+
+---
+
+### polyfill
+
+

index.html

@@ -16,6 +16,12 @@ <h1>Wenbo's Slides</h1>
             </header>
             <section>
             <ul class="decks">
+                <li class="deck">
+                    <a href="slides.html?file=html5-and-css3">
+                        <h3 class="title">HTML 5 与 CSS 3</h3>
+                        <p class="subtitle">2016-01-12</p>
+                    </a>
+                </li>
                 <li class="deck">
                     <a href="slides.html?file=front-end-learning">
                         <h3 class="title">前端学习指南</h3>