4. 时间轴
• 1995 Nov – HTML 2.0 由 IETF 发布
• 1997 Jan – HTML3.2 发布 , W3C
• 1997, Dec – HTML 4.
• 1999, Dec – HTML 4.01 发布 .
• 2000, Jan – XHTML 1.0
• 2001, May – XHTML 1.1
25. 语义化标签
Section :
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in
many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple
pies.</p>
</section>
</article>
Example: https://youzee.com/en/
31. 语义化标签
Figure 和 Figure 标题:
<figure>
<img src="bubbles-work.jpeg" alt="Bubbles, sitting in his
office chair, works on his latest project intently.“ />
<figcaption>Bubbles at work</figcaption>
</figure>
33. 语义化标签
Mark 用户高亮某些东西,
<p><mark>Momentum is preserved across
the wormhole. Electromagnetic radiation
can travel in both directions through a
wormhole, but matter cannot.</mark></p>
而 Strong 则是用来表示重要。
<p>When a wormhole is created, a vortex
normally forms. <strong>Warning: The
vortex caused by the wormhole opening
will annihilate anything in its
path.</strong></p>
35. 语义化标签
Itemscope 和 Itemprop :
<div itemscope>
<p>My name is <span
itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts
Water</ span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>
http://jsfiddle.net/adamlu/vKurD/
40. 设备支持
输入类型:
<input type=”email” />
tel datetime search date email range url color
不支持的浏览器默认为 text.
DEMO: http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/
44. 改善用户界面
Web Worker :
new Worker("worker.js");
无法访问 DOM 或页面,需要通过 postMessage 接口来通信
。
DEMO: http://html5demos.com/worker
45. 改善用户界面
History API :
pushState(data, title [, url]);
replaceState(data, title [, ulr]);
window.addEventListener("popstate", function(e){
e.state;
}
Example: https://github.com/adamlu/yui3-cookbook