本章演示如何把一张已有的 HTML4 页面转换为 HTML5 页面，在不破坏如何原始内容和结构的情况下。
注释：您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd html lang= en head meta http-equiv= Content-Type content= text/html;charset=utf-8 title HTML4 /title style body {font-family:Verdana,sans-serif;font-size:0.8em;} div#header,div#footer,div#content,div#post {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;} div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;} div#content {background-color:#ddd;} div#menu ul {margin:0;padding:0;} div#menu ul li {display:inline; margin:5px;} /style /head body div id= header h1 Monday Times /h1 /div div id= menu li News /li li Sports /li li Weather /li /ul /div div id= content h2 News Section /h2 div id= post h2 News Article /h2 p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p /div div id= post h2 News Article /h2 p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p /div /div div id= footer p copy; 2014 Monday Times. All rights reserved. /p /div /body /html 亲自试一试
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
修改为 HTML5 doctype：
!DOCTYPE html
亲自试一试
!--[if lt IE 9] script src= http://html5shiv.googlecode.com/svn/trunk/html5.js /script ![endif]-- 亲自试一试
注释：请在 HTML5 浏览器支持中阅读更多有关 shiv 的知识。
div#header,div#footer,div#content,div#post { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;div#header,div#footer { color:white;background-color:#444;margin-bottom:5px;div#content { background-color:#ddd;div#menu ul { margin:0;padding:0;div#menu ul li { display:inline; margin:5px;Duplicate with equal CSS styles for HTML5 semantic elements:header,footer,section,article { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;header,footer { color:white;background-color:#444;margin-bottom:5px;section { background-color:#ddd;nav ul { margin:0;padding:0;nav ul li { display:inline; margin:5px;亲自试一试
h2 News Article /h2 p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p /article 亲自试一试
删除这些“不再需要的”样式：
div#header,div#footer,div#content,div#post { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;div#header,div#footer { color:white;background-color:#444;margin-bottom:5px;div#content { background-color:#ddd;div#menu ul { margin:0;padding:0;div#menu ul li { display:inline; margin:5px;亲自试一试
h2 News Article /h2 p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p /div div id= post h2 News Article /h2 p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p p Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. /p /div /section footer p copy; 2014 Monday Times. All rights reserved. /p /footer /body /html 亲自试一试
h2 London /h2 p London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants. /p /article article h2 Paris /h2 p Paris is the capital and most populous city of France. /p /article article h2 Tokyo /h2 p Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world. /p /article /article 亲自试一试
article 中的 div ： article h2 Famous Cities /h2 div >亲自试一试
article 中的 section 中的 div ： article section h2 Famous Cities /h2 div >亲自试一试
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
