全部放在一起
現在我們全部使用新標記重寫前面的示例頁面。
- <!DOCTYPE Html>
- <Html>
- <head>
- ...stuff...
- </head>
- <body>
- <header>
- <h1>My Site</h1>
- </header>
- <nav>
- <ul>
- <li>Home</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
- </nav>
- <section>
- <h1>My Article</h1>
- <article>
- <p>...</p>
- </article>
- </section>
- <footer>
- <p>...</p>
- </footer>
- </body>
- </Html>
是不是更干淨，更易於理解呢？我們可以把<h1>My Article</h1>打包到header標記中。另外請注意，我們可以在article元素下再增加一個footer元素，用來容納如翻頁導航，相關文章或其它內容。
新標記的樣式
在大多數浏覽器中，你只需要如往常一樣對元素使用樣式，但是請一定要對每個元素加上display:block;規則，隨著時間的推移，浏覽器對Html 5新元素的支持越來越標准後，就可以不使用了。
下面我們隊header應用一些樣式：
- header {
- display: block;
- font-size: 36px;
- font-weight: bold;
- }
記住，你現在仍然可以在這些元素上添加class和ID屬性，因此，如果你想對導航小節單獨使用一個樣式，你可以向下面這樣增加一個class或ID屬性：
- <nav class="main-menu">
然後再應用一個樣式：
- nav.main-menu {
- font-size: 18px;
- }
與舊浏覽器的兼容
這些樣式都不能在IE 6下使用，如果你堅持要保持與舊浏覽器兼容，也是有補救辦法的，IE 6可以解析這些標記，但不能應用樣式，解決辦法就是使用JavaScript，使用createElement方法就可以讓IE支持HTML 5標記的樣式了，你可以在Html 5文件的頭部包括這段代碼，也可以保存到一個獨立文件中，然後進行引用。
- <script>
- document.createElement('header');
- document.createElement('nav');
- document.createElement('section');
- document.createElement('article');
- document.createElement('aside');
- document.createElement('footer');
- </script>
你可能要問，為什麼沒有給這段腳本指定MIME類型呢？在HTML 5中無需指定了，在Html 5中，所有的腳本都假設是type="text/Javascript"，因此不必再多此一舉了。
雖然IE的問題得到了解決，但據我所知，Firefox 2中的Gecko渲染引擎仍然存在一個bug，解決辦法有兩個，但這兩個辦法都不是很理想，更多信息請看這裡http://Html5doctor.com/how-to-get-Html5-working-in-IE-and-Firefox-2/。考慮到Firefox 2的使用人數已經很少，你可以完全忽視這個bug。
現在你已經可以使用Html 5了，但應該使用嗎？
答案很簡單：是的！
但這也要根據網站的性質做出調整，例如，假設你要重構CNN主頁，那可能不太現實，最好還是等浏覽器的支持更好一些再說，但如果你是在翻新你的博客系統，那麼你可以一試，如果你使用的WordPress，目前已經出現了一些插件可以幫助你，這裡就有一個Html 5的WordPress主題。
你也可以去Html 5畫廊（http://Html5gallery.com/）瞧瞧，因為它全部是用HTML 5構建的，可以看看其源碼，加深對Html 5標記的理解。還可以繼續關注51CTO.com的Html 5專題，我們會持續更新關於Html 5的技術應用和資訊報道。
如果你還有點猶豫不決，那你去看看Google的主頁，已經是Html 5了，保險一點的話，你可以使用JavaScript聲明這些新標記進行使用。HTML 5的標記遠不止這些，希望本文能消除你的疑慮，大膽使用Html 5，只有使用的人多了，這個規范才能真正見效。
【責任編輯：red7 TEL：（010）68476606】