HTML5 語意標籤理論與實戰 ( 投影片）

我喜歡將投影片作成 HTML, 主要是任何環境都可以讀取、修改, 做起來也快.. 之前都使用 S5, Google 最近公開一套可以使用 - html5slides - A Google HTML5 slide template.. Demo: html5slides Presentation (可以 左右鍵 切換下一頁, F5 Reload, F11 全螢幕).

內容大概就是 如何設計出正確語意的 HTML5 這一篇的實例版. 講解了濫用標籤的後果，還有如何實戰設計出正確語意的 HTML5. 這份 Slides 本身是使用 Google 的 html5slides. source code 放在 github 上. 但投影片本身，我還是使用 Markdown 撰寫的.

GoogleIO 2012年演講時, 使用的投影片是 HTML5 寫的, 有 Open Source 出來可以讓大家修改使用. (線上 Demo 可見: Title Goes Here Up To Two Lines). 註: 如果想要製作 + 即時預覽, 建議安裝 gem、compass 來操作修改, 會比較方便.

2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.

可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业，新标准既可能是无限财富的源泉，也可能导致企业帝国的毁灭. 尽管存在着如此多的风险，标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时，计算领域的主要争议是Unix是否是一个可行的操作系统（以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战），以及哪个视窗平台（SUN/AT&T还是IBM/DEC/HP）将成为标准.

(  程宝平 chengbp @gmail.com）. http://phonegap.com）按官方说法，是HTML5移动应用平台，它包括两部分：. 1)       应用开发框架：采用Web/HTML5技术编写应用，支持设备能力（如GPS、重力感应等）调用；支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简，Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签，根据内容和类型的不同，被分为7大类. 语义化标签可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.