17

从 HTML4 迁移至 HTML5

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

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

典型的 HTML4 页面

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

更改为 HTML5 Doctype

修改文档类型，从 HTML4 doctype：

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

修改为 HTML5 doctype：

<!DOCTYPE html>

添加 shiv

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

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

为 Internet Explorer 支持而添加的 shiv：

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

为 HTML5 语义元素添加 CSS

请看已有的 CSS 样式：

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