Cover of the book "HTML5: Up and Running"没错,就是那本卓越最近难得这么迅速就引进的原版书,而且,其实,就是http://diveintohtml5.org/,比起网站来说甚至还做了节略。因为我一直以来看电子书都太容易分心了,总时不时地看一眼Gmail,Google Reader什么的(万恶的Google…产品都这么强大得让我依赖…),所以至今为止,纸版书还是我唯一靠谱的选择。类似《HTML5: Up and Running》这种出版形式——虽然也不是什么新鲜的形式了——说起来还是不错的,有纸版书可以让人专心阅读,又有电子版可供阅后方便检索。话说想起公司还有Safari的账号可以利用…

言归正传,这里只打算列举一些看这本书时记录的一些自己比较在意的地方,以便以后回忆复习。

  1. X还是不X,不算什么问题。这是HTML,最明显的,AJAX的那个X还有多少地方贯彻?谁不是JSON顶替了XML呢?不过吧,我个人还是习惯XML,至少有well formed和wellness检查,一元元素的结束标记和大小写方面也更习惯XML一些。XML Schema什么的就算了,没个IDE或者支持N多模板的文本编辑器的话我还真不敢随便编辑,但是很多HTML源文件一样让人头疼…
  2. 到底是不是在用NB哄哄的XHTML呢?检查检查服务器返回的MIME吧,只有application/xhtml+xml的内容,浏览器才会严格当XHTML解析,否则即使声明了半天XHTML,浏览器还是会扔给更为宽容的HTML解析器。
  3. 政治是坨屎,但似乎又无法避免。
  4. HTML5工作组名叫WHAT WG,Web Hypertext Applications Technology Working Group。
  5. HTML5规范还不算最终定稿,规范本身对有些内容要求得也不是很严格,而且目前各浏览器的支持也是参差不齐,加上手持设备上的浏览器就更乱了。(您说啥?UC?!呃……)
  6. <!DOCTYPE html>,yay~
  7. <html lang=”xx” manifest=”yyyyyy”><meta charset=”zzzzz”>…
  8. UTF-7真悲催。
  9. 检测一些常见的HTML5特性是否支持的最简便的方法是:Modernizr。具体检测方法参加http://diveintohtml5.org/里和各种特性相关的章节,或者直接看Modernizr的代码。
  10. rel=”author”, rel=”first|prev|next|last”, rel=”nofollow”, rel=”noreferrer”, rel=”pingback”, rel=”prefetch”,
  11. 新的语义标签:section,nav,article,aside,hgroup,header,footer,time,mark。
  12. 注意文档大纲,最好把每篇文字内容比较充足的HTML5页面差不多当作一篇论文来做,文档大纲最好不要乱。语义这个事情,外加microdata,对机器的意义大过对人,但是机器是来帮忙的,所以要善待不那么“智能”的机器。最后,新加的这些语义标签对页面布局没有任何贡献,别指望用nav瞬间做个导航栏,或者用footer瞬间做个页脚。
  13. Canvas,画画靠context,目前规范里的context还是2D only,有状态,基本图形的具体绘制靠style控制——包括颜色、渐变色(linear和radical),此外还能直接贴图(同时裁剪和缩放)以及渲染文字。这个得多研究研究,琢磨琢磨。大学时那几本儿图形学的书卖废纸了没?
  14. excanvas.js拿来给IE来条件引用一下,然后就可以在IE上使用canvas的部分API了——由于IE原生支持的VML自身的限制。反正excanvas.js给IE做VML的翻译也很慢,有得选择的话还是抛弃IE吧…(强调一下——“有得选择的话”)
  15. 视频很可怕:容器有自己的格式,外加真正意义上的视频编码格式,最后是音频编码格式。浏览器表示压力很大,连video元素的canPlay(String)方法返回的都不是布尔值了,而是“probably”,“maybe”以及空字符串。
  16. 常见视频文件格式:mp4 [ H.264 (Baseline/Main/High profile) + AAC (Low/High complexity) ],ogg [ Theora + Vorbis],WebM [ VP8 (质量上类似H.264 Baseline) + Vorbis]
  17. iPhone和大部分Android手机支持mp4 [ H.264 Baseline + AAC Low Complexity ]。
  18. Flash 9以上强悍地支持H.264全部profile以及AAC全部complexity——于mp4文件格式。
  19. 视频工具:Firefogg,ffmpeg2theroa,HandBrake;WebM需要patch ffmpeg。
  20. <video preload>可以让浏览器在页面装载后就开始下载视频;<video preload=”none”>反之。
  21. 图省事还是用Video for Everybody!吧…
  22. Geolocation API严格来说是和HTML5并行的,而且早就有浏览器支持这个API。所以某些网站做些HTML4+Geolocation API的勾当然后声称自己是HTML5先行者也太扯了,还不如把导航栏从div变nav了。
  23. 图省事可以用geo.js实现跨浏览器,不过没有原生Geolocation API支持的平台上需要用户安装Google Gears,而且watchPosition() + clearWatch()就可能会没法用了。呃,又一次,有得选择的话还是抛弃IE吧…
  24. HTML5 localStorage只能存key-value pairs,而且都是按字符串存的。默认存储空间都是5MB,大部分浏览器都这么设置,用光了就没了,目前只有Opera允许用户指定存储空间的大小,其他浏览器上,准备接异常吧。
  25. Offline乍一看挺简单:<html manifest>来指定离线使用时的资源清单文件,里面包括需要缓存的资源,禁止缓存的资源(或者说只能online使用的资源),以及没有被缓存的资源在被离线请求时的替代(fallback)资源;然而实际使用过程中,受HTTP协议的影响比较大(Cache-Control啊,Expires啊什么的),很容易出现一些所谓的灵异现象或者人品问题,其实只要熟悉HTTP协议就好办——不用精通,别跟写简历时似的。
  26. 表单被极大地丰富了一笔:
    • 添加了人见人爱的placeholder属性,但是只支持纯文本,不能用HTML,好在webkit支持给placeholder加CSS;
    • autofocus属性我觉得比较无所谓;
    • email和url输入类型想必iOS用户已经第一时间实地体会到了,确实便于提供虚拟键盘的手持设备提供更方便的输入;
    • 我最喜欢的是number输入类型,原因保密,乜哈哈!
    • range输入类型很科幻,以前都要第三方js才可以的,不过对于iOS用户来说这个类型目前在Safari Mobile的实现还很渣,干脆就是一个text;
    • 时间日期输入类型一下子加进来一个家族,包括6种:date,month,week,time,datetime,datetime-local,这些更科幻,浏览器支持也更惨:目前只有Opera 9.0+支持,但我有个疑问就是week那个输入类型会不会有问题乜?就是那个一周是从周一还是周日开始的问题。
    • search输入类型,呃,目前看来似乎就是加了一个用于清除输入的内嵌于输入框的小“x”按钮,聊胜于无吧;
    • 最惨的是color类型,目前没浏览器支持;
    • 按理说加了这么些类型了,要求浏览器做表单验证了,但是目前还是只有Opera支持…所以这方面还是scripting加server端双重验证吧——不用说也知道server端验证是必做的了。
  27. Microdata对于语义web的建设意义重大,只不过现在看来应用范围还不是太广泛,毕竟都是浏览器渲染后不可见的一堆数据,不像文档里的其他文本,而且改造起来感觉也很不舒服——比如Mark的添加<span>大法……有一天机器会明白某个页面的某些乱七八糟内容到底是想说些啥的,不过是不是靠microdata就不知道了。
  28. 没有细说的:WebWorkers,<datalist>,<details>,<device>,<iframe sandbox>,<iframe srcdoc>,<meter>,<output>,<progress>,<video poster>,<span contentEditable>,跨文档消息服务(Cross-document messaging),拖拽,File API,更好的浏览器历史记录操作(History),Server-sent events,Session storage(window.sessionStorage),SVG和HTML嵌入SVG,Web Sockets,Web SQL数据库,Undo。还真多…不过好多都还是单独的规范,支持程度比HTML5规范里的内容还要更参差不齐,基本上除了可以100%确定浏览器版本的情况以外都可以视为没法用了。

总体来说,5分制的话这本书可以打个4分了,行文也比较轻快诙谐,我是抽了两个周六的大块时间每次读100页这么读完的,这本书的干货部分也正好是200页左右,没什么压力。