超文本標記語言（HTML）5 第一次向 HTML 中引入新的元素。新的結構元素包括 aside、figure 和 section。新的內聯元素包括 time、meter 和 progress。新的內嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。
超文本標記語言（HTML）的開發到 1999 年 HTML 4 就停止了。萬維網聯盟（W3C）把重點轉向將 HTML 的底層語法從標準通用標記語言（SGML）改爲可擴展標記語言（XML），以及可縮放向量圖型（SVG）、XForms 和 MathML 這些全新的標記語言。瀏覽器廠商則把精力放到選項卡和富站點摘要（RSS）閱讀器這類瀏覽器特性上。Web 設計人員開始學習使用異步 JavaScript XML（Ajax），在現有的框架下通過層疊樣式表（CSS）和 JavaScript? 語言建立自己的應用程序。但是在接下來的八年中，HTML 本身沒有任何變化。
最近，它又復活了。三家重要的瀏覽器廠商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group（WhatWG）來開發傳統 HTML 的新版本。最近，W3C 也注重到了這些活動，也啓動了自己的新一代 HTML 項目，雙方的成員有很多是相同的。這兩個項目最終很可能合併。雖然很多細節還在爭論之中，但下一版本 HTML 的大體輪廓已經清楚了。
Web 開發人員從 1999 年就一直期待 HTML 的新版本（通常稱爲 HTML 5，但是也稱爲 Web Applications 1.0），現在它終於發佈了。它保持了 HTML 原來的特色：沒有名稱空間或模式。元素不必結束。瀏覽器會寬容地對待錯誤。p 仍然是 p，table 仍然是 table。
假如在 1999 年將一位 Web 開發人員冷凍起來，現在再解凍，那麼他會碰到一些新的讓人迷惑的元素。是的，他熟悉的元素（比如 div）仍然保留了；但是，HTML 現在還包含 section、header、footer 和 nav 等新元素。em、code 和 strong 仍然存在，但是增加了 meter、time 和 m。img 和 embed 仍然可用，但是還增加了 video 和 audio。但是，他仔細觀察一下就會發現，這些元素實際上沒什麼區別。其中許多元素可能在 1999 年是開發人員需要而沒有得到的。通過與他已經把握的元素進行簡單的類比，這些新元素都很輕易理解。實際上，與 Ajax 或 CSS 相比，它們非常輕易把握。
最後，當他打開 300MHz 的筆記本（運行的是 Windows 98，也是在 1999 年冷凍起來的）時，他可能對 Netscape 4 和 Windows? Internet Explorer? 5 中顯示的新頁面效果很吃驚。當然，這些老式瀏覽器不熟悉新元素，會完全忽略它們，但是頁面仍然會顯示，內容仍然是完整的。
這並不是 什麼虛構的故事。HTML 5 的設計原則就是在不支持它的瀏覽器中能夠平穩地退化。原因很簡單：我們都是這樣的 “原始人”。瀏覽器現在有選項卡、CSS 和 XmlHttpRequest，但是它們的 HTML 顯示引擎仍然停留在 1999 年的水平。除了用戶量大大增加之外，Web 其實在本質上沒什麼進步。HTML 5 考慮到了這一點。它目前爲 Web 開發人員一些真正的好處，隨着瀏覽器的緩慢升級，頁面瀏覽者會逐漸享受到這些好處。
由於缺少結構，即使是形式良好的 HTML 頁面也比較難以處理。必須分析標題的級別，才能看出各個部分的劃分方式。邊欄、頁腳、頁眉、導航條、主內容區和各篇文章都由通用的 div 元素來表示。HTML 5 添加了一些新元素，專門用來標識這些常見的結構：
· section：這可以是書中的一章或一節，實際上可以是在 HTML 4 中有自己的標題的任何東西
· header：頁面上顯示的頁眉；與 head 元素不一樣
· footer：頁腳；可以顯示電子郵件中的簽名
· nav：指向其他頁面的一組鏈接
· article：blog、雜誌、文章彙編等中的一篇文章
我們來考慮一個典型的 blog 主頁，它的頂部有頁眉，底部有頁腳，還有幾篇文章、一個導航區和一個邊欄，見代碼1 典型的 blog 頁面
| 以下是代碼片段：[www.foxitjob.com] <html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="http://www.foxitjob.com">Mokka mit Schlag</a></h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-1000572">
<h2><a href=
"/blog/birding/2012/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<div class="entry">
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
</div>
</div>
<div class="post" id="post-1000571">
<h2><a href=
"/blog/birding/2012/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<div class="entry">
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2012/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">? Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>
<div id="right" class="column">
<ul id="sidebar">
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2012/04/'>April 2012</a></li>
<li><a href='/blog/2012/03/'>March 2012</a></li>
<li><a href='/blog/2012/02/'>February 2012</a></li>
<li><a href='/blog/2012/01/'>January 2012</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2012 Foxitjob.com</p>
</div>
</div>
</body>
</html> |
即使有正確的縮進，這些嵌套的 div 仍然讓人覺得非常混亂。在 HTML 5 中，可以將這些元素替換爲語義性的元素，見代碼2 用 HTML5編寫的典型blog頁面
| 以下是代碼片段：[www.foxitjob.com] <html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>
<h1><a href="http://www.foxitjob.com">Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
"/blog/birding/2012/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15. </p>
</article>
<article>
<h2><a href=
"/blog/birding/2012/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2012/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</article>
<nav>
<a href="/blog/page/2/">? Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2012/04/'>April 2012</a></li>
<li><a href='/blog/2012/03/'>March 2012</a></li>
<li><a href='/blog/2012/02/'>February 2012</a></li>
<li><a href='/blog/2012/01/'>January 2012</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2012 Foxitjob.com</p>
</footer>
</body>
</html> |
現在不再需要 div 了。不再需要自己設置 class 屬性，從標準的元素名就可以推斷出各個部分的意義。這對於音頻瀏覽器、手機瀏覽器和其他非標準瀏覽器尤其重要。
互聯力量電子商務軟件
原文：http://www.foxitjob.com/asp-net-training/4713.html
