Skip to content

Commit 76987d5

Browse files
webzhaowebzhao
committed
update html5 content
1 parent ca7a37d commit 76987d5

14 files changed

+318
-71
lines changed

‎content/html5/getting-started.md

+39-21
Original file line numberDiff line numberDiff line change
@@ -12,37 +12,55 @@
1212
* 现在负责360商业产品前端团队
1313

1414
<p style="font-size:120%;margin-top:0.5em">
15-
<a href="https://github.com/webzhao" target="_blank" title="Github"><i class="fa fa-github"></i></a>&nbsp;
16-
<a href="http://www.flickr.com/photos/53827079@N06/" target="_blank" title="Flickr"><i class="fa-flickr"></i></a>&nbsp;
17-
<a href="https://twitter.com/webzhao" target="_blank" title="Twitter"><i class="fa-twitter"></i></a>&nbsp;
18-
<a href="http://cn.linkedin.com/pub/wenbo-zhao/29/7b1/514" target="_blank" title="Linkedin"><i class="fa-linkedin"></i></a>&nbsp;
15+
<a href="https://github.com/webzhao" title="Github"><i class="fa fa-github"></i></a>&nbsp;
16+
<a href="http://www.flickr.com/photos/53827079@N06/" title="Flickr"><i class="fa-flickr"></i></a>&nbsp;
17+
<a href="https://twitter.com/webzhao" title="Twitter"><i class="fa-twitter"></i></a>&nbsp;
18+
<a href="http://cn.linkedin.com/pub/wenbo-zhao/29/7b1/514" title="Linkedin"><i class="fa-linkedin"></i></a>&nbsp;
1919
</p>
2020

2121
---
2222

2323
### 课程安排
2424

2525
* HTML5特性篇
26-
* HTML5概述
27-
* 离线存储
28-
* Canvas画布
29-
* Geolocation
30-
* 视频和音频
31-
* Web Form 2.0
32-
* Web Font
33-
* File API
34-
* WebSocket
35-
* CSS3新特性
36-
* 动画效果
37-
* 实例和答疑
38-
* 项目讲解
39-
* 综合答疑
26+
* 实例和答疑篇
4027

4128
---
4229

43-
### 注意事项
30+
### HTML5 特性
31+
32+
| | | | |
33+
|----------|---------|------------|-------------|
34+
| HTML5概述 | 离线存储 | Canvas画布 | Geolocation |
35+
| 视频和音频 | Web Form 2 | Web Font | File API |
36+
| WebSocket | CSS3新特性 | 动画效果 |
37+
38+
<style>
39+
.reveal table {margin: 0 auto}
40+
.reveal table td {padding: 0.5em 1em}
41+
</style>
42+
43+
---
44+
45+
### 实例和答疑篇
46+
47+
* NodeJS介绍
48+
* AngularJS
49+
* MEANS项目实例
50+
51+
---
52+
53+
### 准备工作
4454

4555
* 练习环境
46-
* Chrome浏览器
47-
* Atom或Sublime Text编辑器
56+
* [Chrome](http://www.google.com/chrome/)或[Firefox](https://www.mozilla.org/)浏览器
57+
* [Atom](https://atom.io/)或[Sublime Text](http://www.sublimetext.com/)编辑器
4858
* 在线提交
59+
* 地址：http://jsbin.com
60+
* //TODO
61+
62+
---
63+
64+
@state: green
65+
66+
<p style="font-size:6em"><i class="fa fa-comments"></i></p>

‎content/html5/html5-overview.md

+95-26
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,11 @@
44

55
### HTML5的兴起
66

7-
* XHTML
7+
* XHTML2 vs. HTML5
88
* 移动Web
99

1010
---
1111

12-
### HTML4 vs. XHTML
13-
14-
```markup
15-
<div CLASS=test>This is a <br> test.</div>
16-
<script type="text/javascript">
17-
alert(1);
18-
</script>
19-
```
20-
```markup
21-
<div class="test">This is a <br/> test.</div>
22-
<script type="text/javascript">
23-
<![CDATA[
24-
alert(1);
25-
]]>
26-
</script>
27-
```
28-
29-
---
30-
3112
### HTML 5 设计思想
3213

3314
* 兼容已有内容
@@ -39,17 +20,105 @@
3920

4021
---
4122

42-
### HTML 5 标签
43-
### &nbsp;
23+
### HTML5 有哪些东西？
24+
25+
<style>
26+
.reveal table.html5 {
27+
margin: 0 auto;
28+
}
29+
.html5 img {
30+
width: 3em;
31+
}
32+
table.html5 td {
33+
text-align: center;
34+
padding: 1em;
35+
}
36+
</style>
37+
<table class="html5">
38+
<tr>
39+
<td><img src="img/html5/semantics.svg?1"><br>语义化标签</td>
40+
<td><img src="img/html5/integration.svg?1"><br>性能和集成</td>
41+
<td><img src="img/html5/connectivity.svg?1"><br>连通性</td>
42+
<td><img src="img/html5/offline.svg?1"><br>离线与存储</td>
43+
</tr>
44+
<tr>
45+
<td><img src="img/html5/device.svg?1"><br>设备访问</td>
46+
<td><img src="img/html5/multimedia.svg?1"><br>多媒体</td>
47+
<td><img src="img/html5/css3.svg?1"><br>CSS3样式</td>
48+
<td><img src="img/html5/3d.svg?1"><br>图形与3D效果</td>
49+
</tr>
50+
</table>
51+
52+
---
53+
54+
### [语义化](/demos/html5/semantics.html)
55+
56+
* 结构
57+
* section、article、nav、header、footer、aside、main
58+
* 媒体
59+
* video、audio
60+
* 表单
61+
* 新增表单验证和表单类型
62+
* 其它
63+
* figure、data、time、progress
64+
65+
---
66+
67+
### 性能 & 集成
68+
69+
* [Web Workers](http://html5demos.com/worker)
70+
* [拖放](http://html5demos.com/dnd-upload)
71+
* XMLHttpRequest Level 2
72+
* [History API](http://html5demos.com/history/second)
73+
* requestAnimationFrame
74+
* [全屏 API](http://davidwalsh.name/demo/fullscreen.php)
75+
76+
---
77+
78+
### 连通性
79+
80+
* Web Sockets
81+
* [WebRTC](http://www.clicktorelease.com/code/optical-flow-webrtc/)
82+
83+
---
84+
85+
### 设备访问
86+
87+
* 使用地理位置定位
88+
* 检测设备方向
89+
90+
---
91+
92+
### 离线 & 存储
93+
94+
* 离线资源：应用程序缓存
95+
* 在线和离线事件
96+
* localStorage
97+
* IndexedDB
98+
* 文件API
99+
100+
---
101+
102+
### CSS3样式
103+
104+
* 更灵活的布局方式
105+
* 动画效果
106+
* 阴影、圆角、边框等
107+
108+
---
109+
110+
### 多媒体
44111

45-
<object data="/img/essentials/content-model.svg" height="360" width="1000"></object>
112+
* 视频
113+
* 音频
46114

47115
---
48116

49-
### 语义化
117+
### 图形与3D效果
50118

51-
* HTML中的元素、属性及属性值都拥有某些含义
52-
* 开发者应该遵循*语义*来编写HTML
119+
* Canvas绘图
120+
* SVG矢量图
121+
* WebGL
53122

54123
---
55124
### 兼容性

0 commit comments

Comments
 (0)