HTML5拾遗

coredump · 发表于 19-10-2011 16:43:46

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？FreeOZ用户注册

x

因为工作需要，准备用一个月时间把HTML5涉及的方方面面都再详细地学习一遍。准备每天写一点学习笔记，涉及HTML5各个标准的功能概述，各平台支持情况，外加搜集整理一些针对该功能的demo。
HTML5 Rocks！

[ 本帖最后由 coredump 于 19-10-2011 17:07 编辑 ]

coredump · 发表于 19-10-2011 17:05:47

提起HTML5一般都会随便说出来一些特性：比如<canvas>, <audio> <video>等标签， offline storage, websocket等API，不过HTML5做为一个完整的标准来说，到底它的全集都包含哪些呢？哪些又是不属于HTML5的一部分的呢？

新标记
1. <nav>, <footer>
2. <audio>,<video>
3. 取消<font>, <center>等标记，完全使用CSS
4. Web form 2.0 相关的标记

新的API
1. Canvas
包含Canvas标签和2D/3D context API， Canvas 3D又叫WebGL
2. 客户端离线数据库
包括SqlDatabase和IndexDb两种借口
3. Drag/Drop
4. 跨文档通讯
5. 微格式
6. Websocket
7. File API
8. Web Worker
9. GeoLocation
10. Web Notifications
11. Offline Web applications
参考：
1. http://dev.w3.org/html5/spec/Overview.html
2. http://www.apple.com/hotnews/thoughts-on-flash/ Jobs对HTML5和Flash的很有名的一份比较文章，这篇文章直接让HTML5进入普通媒体的视野
3. http://en.wikipedia.org/wiki/HTML5
4. 各个浏览器对HTML5支持情况的比较：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
http://platform.html5.org 这个页面是个从宏观上概览HTML5功能的好页面，把所有HTML5涉及的功能分成了12个大类69个具体标准或独立功能，罗列在下面，以后每天学习整理就按照这个顺序按图索冀就行了，从这个页面我们也能够看出来HTML5已经真正具备了一个完整的”平台“的性质了，所以完全可以以Web platform来称之，而不再仅仅是处理HTML页面的一个toolkit了。
1. Core platform
2. Graphics and typography
3. Media
4. Platform interaction, events, messaging
5. Storage and file-system interaction
6. Real-time communication
7. HTML bonus features
8. Performance optimization and analysis
9. Other core-platform bonus features
10. Security and privacy
11. Foundations
12. Various other

[ 本帖最后由 coredump 于 19-10-2011 17:19 编辑 ]

woodheadz · 发表于 19-10-2011 19:05:34

搬个板凳听讲座

ubuntuhk · 发表于 20-10-2011 22:14:09

我也要学习HTML5了，最近开始做的项目要用到，临时抱佛脚。

mason00 · 发表于 20-10-2011 22:29:16

看过一些，似乎挺多新功能浏览器都支持的不完整，因为我主要是IE的用户，又用不上IE9。离线存储应该没有支持吧？

coredump · 发表于 23-10-2011 23:38:39

完整的HTML5规范是涵盖了所有原HTML4的内容的, 所以, 如果是对HTML4已经非常熟悉的人来说, 不容易快速了解和掌握HTML5到底有哪些地方和HTML4不一样. 而HTML5与HTML4之区别正是解答这一问题的绝佳文档. 下面就简述一二:

HTML4成为W3C推荐标准是1997年, 与之相配套的还有用于XML序列化的XHTML 1和DOM2 API等标准. 而HTML5将为这些定义一个整体的统一标准, 包括:
1. 可以以HTML语法和XML语法编写的HTML5语言规范
2. 为促进各种实现间的互操作性定义详细的处理模型
3. 增加/改进的HTML标记
4. 为新兴的WEB应用而特别定义的标记和API等

关于向后兼容性

HTML5提供向后兼容, 虽然有些标记在HTML5时代对编写者来说建议不用, 但是对于浏览器来说, 所有的HTML4标记都必须支持, 所以, 没有什么标记真正的被HTML5标识为过时.

关于HTML5何时完工

在HTML5刚刚喧闹起来时, 有一个新闻特别引人注目,就是W3C的官员表示HTML5要到202x年才能正式完成... … 其实事情的来源是这样滴: HTML5规范对”完成”有一个比较苛刻的定义:规范中的任何一个功能都必须由两个完全独立的参考实现. 这个要求粗看一下,其实不高, 不过呢, 如果有一个众所周知的最好实现摆在那里的话, 恐怕很少有人会为了实现而实现, 单独另写一套前途未卜的东西. 一个比较典型的API就是关于SqlDatabase的, 现在应该来说所有能叫得上名字的实现HTML5的浏览器,都不约而同地选择了sqlite, 那么即使做得再好,如果到2020年前还是只有一个sqlite版的Web SqlDatabase实现, 那么从HTML5的定义上来说就是还未完成的.....这就有点搞了, 或许应该鼓励Oracle写个Oracle的Web SqlDatabase

一石激起千层浪, 此话一出,别管背景是什么, 大家那是一个议论纷纷, 玩标准的大牛们一想, 这不是个事啊, 干脆别要定义什么完成了, 也别定义版本号了, 就这么脚踩西瓜皮, 走哪算哪就好, 于是一个声明诞生了, 以后都别叫什么HTML5了, HTML5就是HTML了, 标准要与时俱进, 玩版本号这事都怪以前TOO SIMPLE, SOMETIMES NAIVE了.

HTML5语法
因为要向后兼容, 所以HTML5的语法即兼容HTML4又兼容XHTML1, 所以两种写法都行. 在此基础上HTML5规定了一些包括如何进行错误处理的解析规则.

HTML5的字符编码

基本上和HTML4差不多, 有3中设置字符编码的方式:
1. 在HTTP的头中设置Content Type
2. 在HTML文件的起始处设置Unicode的BOM标签
3. 在HTML的head中设置meta

对SVG和MathML的直接支持

在HTML5里, SVG和MathML就和普通的<h>, <p>一样和HTML语法融为一体了.

语言本身的变化
新的元素
section
article
aside
hgroup
header
footer
nav
figure
figcaption
video
audio
track
embed
mark
progress
meter
time
ruby, rt, rp
bdi
wbr
canvas
command
details
summary
datalist

keygen
output

以上有些tag的功能和用法可以一笔带过,比如section, 有些就可以长篇大论成一本书了, 比如canvas. 再次不表. 值得一提的是, input这个在HTML4中本来就常用的标签得到了极大增强, 现在input的type可以是:

原有tag的新属性
太多了.... 大部分HTML4的tag都有了更新和扩充, 捡几个比较有意思的说说:
1. draggable 和 dropzone 为dragdrop API准备的
2. spellcheck  顾名思义
3. data-*  用于用户自定义的属性, 这样可以让任何tag携带自定义信息了
4. contextmenu  为任何tag定制上下文菜单

5. contenteditable 指定tag的内容可编辑

应用编程接口
HTML5定义了很多API:
1. video, audio API
2. 用于离线web应用的API
3. 内容编辑API
4. Drag&Drop API
5. Page history API
6. 可自定义注册Web协议或媒体类型的API
等等...

对DOM的扩展
在DOM Level2的基础上, 还提供了 :

1. getElementsByClassName()
2. innerHTML
3. classList

另外, 这份文档还提供了changelog, 看看历史, 还是很有意思的, 一份规范, 是如何一步步被孕育出来的, 一目了然.

当然HTML5还有很多特别是API级别的新标准, 不过这些就和HTML4基本上没有关系了,都是全新的, 比如WebSocket, 跨文档通讯, WebStorage等等.

desert119 · 发表于 24-10-2011 15:44:14

搬个板凳来学习

coredump · 发表于 24-10-2011 16:45:00

原帖由 desert119 于 24-10-2011 15:44 发表

 登录/注册后可看大图

搬个板凳来学习

搬板凳学习的不是好童鞋，应该搬砖头，否则不够主动啊

周星星1832 · 发表于 3-11-2011 08:43:42

我还没准备好

电视机 · 发表于 8-12-2011 00:43:37

我是网络盲，请教一下楼主，HTML5跟Web2.0之间是什么关系？

电视机 · 发表于 8-12-2011 12:21:56

如果楼主能继续帮讲解一下CGI、ASP之类的用途以及跟HTML和Web2.0之间的关系就跟好了，我对这些概念很混乱。谢谢楼主

seaberlain · 发表于 8-12-2011 12:45:31

我的理解，web2.0是个概念，或者叫2.0时代（相对web1.0时代），在这个时代，browser有更多的交互行为，用户可以通过browser浏览资讯，也可以自己制造资讯与别人共享，而1.0则主要是网站后台管理人员编辑资料，然后呈现给用户浏览。

HTML5是一个技术革新，在新时代下这个新技术应运而生的，当然，HTML5跟javascript、CSS3是密切相关的。

CGI：Common Gateway Interface，是web服务器上的一个接口程序，用于处理html的交互。
ASP：这是一个运行在服务器端的脚本语言，类似的还有PHP等。

以上这些东西是给web2.0这个时代提供技术支持的。

电视机 · 发表于 8-12-2011 21:36:28

谢谢seaberlain老师解答！

老丐呢？

Melodyy · 发表于 20-4-2012 22:11:05

是时候学习HTML5了。

		自动登录	找回密码
密码			FreeOZ用户注册

FreeOZ

[新技术交流] HTML5拾遗

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

第一天：HTML5都包含哪些部分？

评分

HTML5和HTML4的不同

评分

评分