HTML5 迁移

从 HTML4 迁移至 HTML5

本章讲解如何从一张典型的 HTML4 页面迁移至典型的 HTML5。

本章演示如何把一张已有的 HTML4 页面转换为 HTML5 页面，在不破坏如何原始内容和结构的情况下。

注释：您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。

典型的 HTML4 典型的 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

典型的 HTML4 页面

实例

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  6. <title>HTML4</title>
  7. <style>
  8.   body {font-family:Verdana,sans-serif;font-size:0.8em;}
  9.   div#header,div#footer,div#content,div#post 
  10.   {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  11.   div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  12.   div#content {background-color:#ddd;}
  13.   div#menu ul {margin:0;padding:0;}
  14.   div#menu ul li {display:inline; margin:5px;}
  15. </style>
  16. </head>
  17. <body>
  18.  
  19. <div id="header">
  20.   <h1>Monday Times</h1>
  21. </div>
  22.  
  23. <div id="menu">
  24.   <ul>
  25.     <li>News</li>
  26.     <li>Sports</li>
  27.     <li>Weather</li>
  28.   </ul>
  29. </div>
  30.  
  31. <div id="content">
  32. <h2>News Section</h2>
  33.  
  34. <div id="post">
  35.   <h2>News Article</h2>
  36.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  37.   lurum hurum turum.</p>
  38.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  39.   lurum hurum turum.</p>
  40. </div>
  41.  
  42. <div id="post">
  43.   <h2>News Article</h2>
  44.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  45.   lurum hurum turum.</p>
  46.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  47.   lurum hurum turum.</p>
  48. </div>
  49.  
  50. </div>
  51.  
  52. <div id="footer">
  53.   <p>&copy; 2014 Monday Times. All rights reserved.</p>
  54. </div>
  55.  
  56. </body>
  57. </html>

更改为 HTML5 Doctype

修改文档类型，从 HTML4 doctype：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2. "http://www.w3.org/TR/html4/loose.dtd">

修改为 HTML5 doctype：

  1. <!DOCTYPE html>

更改为 HTML5 编码

修改编码信息，从 HTML4：

  1. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

改为 HTML5：

  1. <meta charset="utf-8">

添加 shiv

所有现代浏览器都支持 HTML5 语义元素。

此外，您可以“教授”老式浏览器如何处理“未知元素”。

为 Internet Explorer 支持而添加的 shiv：

  1. <!--[if lt IE 9]>
  2.   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  3. <![endif]-->

注释：请在 HTML5 浏览器支持中阅读更多有关 shiv 的知识。

为 HTML5 语义元素添加 CSS

请看已有的 CSS 样式：

  1. div#header,div#footer,div#content,div#post {
  2.     border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
  3. }
  4. div#header,div#footer {
  5.     color:white;background-color:#444;margin-bottom:5px;
  6. }
  7. div#content {
  8.     background-color:#ddd;
  9. }
  10. div#menu ul {
  11.     margin:0;padding:0;
  12. }
  13. div#menu ul li {
  14.     display:inline; margin:5px;
  15. }
  16. Duplicate with equal CSS styles for HTML5 semantic elements:
  17.  
  18. header,footer,section,article {
  19.     border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
  20. }
  21. header,footer {
  22.     color:white;background-color:#444;margin-bottom:5px;
  23. }
  24. section {
  25.     background-color:#ddd;
  26. }
  27. nav ul  {
  28.     margin:0;padding:0;
  29. }
  30. nav ul li {
  31.     display:inline; margin:5px;
  32. }

更改为 HTML5 <header> 和 <footer>

把 id="header" 和 id="footer" 的 <div> 元素：

  1. <div id="header">
  2.   <h1>Monday Times</h1>
  3. </div>
  4. .
  5. .
  6. .
  7. <div id="footer">
  8.   <p>&copy; 2014 yousite. All rights reserved.</p>
  9. </div>

修改为 HTML5 语义元素 <header> 和 <footer>：

  1. <header>
  2.   <h1>Monday Times</h1>
  3. </header>
  4. .
  5. .
  6. .
  7. <footer>
  8.   <p>漏 2014 yousite. All rights reserved.</p>
  9. </footer>

更改为 HTML5 <nav>

把 id="menu" 的 <div> 元素：

  1. <div id="menu">
  2.   <ul>
  3.     <li>News</li>
  4.     <li>Sports</a></li>
  5.     <li>Weather</li>
  6.   </ul>
  7. </div>

修改为 HTML5 语义元素 <nav>：

  1. <nav>
  2.   <ul>
  3.     <li>News</li>
  4.     <li>Sports</a></li>
  5.     <li>Weather</li>
  6.   </ul>
  7. </nav>

更改为 HTML5 <section>

把 id="content" 的 the <div> 元素：

  1. <div id="content">
  2. .
  3. .
  4. .
  5. </div>

修改为 HTML5 语义元素 <section>：

  1. <section>
  2. .
  3. .
  4. .
  5. </section>

更改为 HTML5 <article>

把 class="post" 的所有 <div> 元素：

  1. <div class="post">
  2.   <h2>News Article</h2>
  3.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  4.   lurum hurum turum.</p>
  5. </div>

修改为 HTML5 语义元素 <article>：

  1. <article>
  2.   <h2>News Article</h2>
  3.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  4.   lurum hurum turum.</p>
  5. </article>

删除这些“不再需要的”样式：

  1. div#header,div#footer,div#content,div#post {
  2.     border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
  3. }
  4. div#header,div#footer {
  5.     color:white;background-color:#444;margin-bottom:5px;
  6. }
  7. div#content {
  8.     background-color:#ddd;
  9. }
  10. div#menu ul {
  11.     margin:0;padding:0;
  12. }
  13. div#menu ul li {
  14.     display:inline; margin:5px;
  15. }

典型的 HTML5 页面

最后您可以删除 <head> 标签。HTML5 中不再需要它们：

实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <title>HTML5</title>
  4. <meta charset="utf-8">
  5.  
  6. <!--[if lt IE 9]>
  7. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
  8. </script>
  9. <![endif]-->
  10.  
  11. <style>
  12. body {
  13.     font-family:Verdana,sans-serif;font-size:0.8em;
  14. }
  15. header,footer,section,article {
  16.     border:1px solid grey;
  17.     margin:5px;margin-bottom:15px;padding:8px;
  18.     background-color:white;
  19. }
  20. header,footer {
  21.     color:white;background-color:#444;margin-bottom:5px;
  22. }
  23. section {
  24.     background-color:#ddd;
  25. }
  26. nav ul {
  27.     margin:0;padding:0;
  28. }
  29. nav ul li {
  30.     display:inline; margin:5px;
  31. }
  32. </style>
  33. <body>
  34.  
  35. <header>
  36.   <h1>Monday Times</h1>
  37. </header>
  38.  
  39. <nav>
  40.   <ul>
  41.     <li>News</li>
  42.     <li>Sports</li>
  43.     <li>Weather</li>
  44.   </ul>
  45. </nav>
  46.  
  47. <section>
  48. <h2>News Section</h2>
  49.  
  50. <div id="post">
  51.   <h2>News Article</h2>
  52.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  53.   lurum hurum turum.</p>
  54.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  55.   lurum hurum turum.</p>
  56.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  57.   lurum hurum turum.</p>
  58. </div>
  59.  
  60. <div id="post">
  61. <h2>News Article</h2>
  62.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  63.   lurum hurum turum.</p>
  64.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  65.   lurum hurum turum.</p>
  66.   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  67.   lurum hurum turum.</p>
  68. </div>
  69.  
  70. </section>
  71.  
  72. <footer>
  73.   <p>&copy; 2014 Monday Times. All rights reserved.</p>
  74. </footer>
  75.  
  76. </body>
  77. </html>

<article> <section> 与 <div> 之间的差异

在 HTML5 标准中，<article> <section> 与 <div> 之间的差异很小，令人困惑。

在 HTML5 标准中，<section> 元素被定位为相关元素的块。

<article> 元素被定义为相关元素的完整的自包含块。

<div> 元素被定义为子元素的块。

如何理解呢？

在上面的例子中，我们曾使用 <section> 作为相关 <articles> 的容器。

但是，我们也能够把 <article> 用作文章的容器。

下面是一些不同的例子：

  1. <article> 中的 <article>：
  2.  
  3. <article>
  4.  
  5. <h2>Famous Cities</h2>
  6.  
  7. <article>
  8. <h2>London</h2>
  9. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  10. with a metropolitan area of over 13 million inhabitants.</p>
  11. </article>
  12.  
  13. <article>
  14. <h2>Paris</h2>
  15. <p>Paris is the capital and most populous city of France.</p>
  16. </article>
  17.  
  18. <article>
  19. <h2>Tokyo</h2>
  20. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  21. and the most populous metropolitan area in the world.</p>
  22. </article>
  23.  
  24. </article>
  1. <article> 中的 <div>：
  2.  
  3. <article>
  4.  
  5. <h2>Famous Cities</h2>
  6.  
  7. <div class="city">
  8. <h2>London</h2>
  9. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  10. with a metropolitan area of over 13 million inhabitants.</p>
  11. </div>
  12.  
  13. <div class="city">
  14. <h2>Paris</h2>
  15. <p>Paris is the capital and most populous city of France.</p>
  16. </div>
  17.  
  18. <div class="city">
  19. <h2>Tokyo</h2>
  20. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  21. and the most populous metropolitan area in the world.</p>
  22. </div>
  23.  
  24. </article>
  1. <article> 中的 <section> 中的 <div>：
  2.  
  3. <article>
  4.  
  5. <section>
  6. <h2>Famous Cities</h2>
  7.  
  8. <div class="city">
  9. <h2>London</h2>
  10. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  11. with a metropolitan area of over 13 million inhabitants.</p>
  12. </div>
  13.  
  14. <div class="city">
  15. <h2>Paris</h2>
  16. <p>Paris is the capital and most populous city of France.</p>
  17. </div>
  18.  
  19. <div class="city">
  20. <h2>Tokyo</h2>
  21. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  22. and the most populous metropolitan area in the world.</p>
  23. </div>
  24. </section>
  25.  
  26. <section>
  27. <h2>Famous Countries</h2>
  28.  
  29. <div class="country">
  30. <h2>England</h2>
  31. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  32. with a metropolitan area of over 13 million inhabitants.</p>
  33. </div>
  34.  
  35. <div class="country">
  36. <h2>France</h2>
  37. <p>Paris is the capital and most populous city of France.</p>
  38. </div>
  39.  
  40. <div class="country">
  41. <h2>Japan</h2>
  42. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  43. and the most populous metropolitan area in the world.</p>
  44. </div>
  45. </section>
  46.  
  47. </article>