HTML5 迁移
HTML5迁移指定如何从HTML4迁移到HTML5。让我们看一下如何将HTML4页面转换为HTML5页面而内容或结构上没有任何问题。
表格：
| 在HTML4中 |
在HTML5中 |
| <div id="header"> |
<header> |
| <div id="menu"> |
<nav> |
| <div id="content"> |
<section> |
| <div class=" article"> |
<article> |
| <div id="footer"> |
<footer> |
让我们看一个典型的HTML4页面。
示例：
<!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.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>lidihuo Times</h1>
</div>
<div id="menu">
<ul>
<li>教程</li>
<li>技术</li>
<li>博客</li>
</ul>
</div>
<div id="content">
<h2>教程部分</h2>
<div class="article">
<h2>教程1</h2>
<p>教程1教程1教程1教程1教程1教程1教程1教程1</p>
<p>教程1教程1教程1教程1教程1教程1教程1教程1</p>
</div>
<div class="article">
<h2>教程2</h2>
<p>教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2</p>
<p>教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2</p>
</div>
</div>
<div id="footer">
<p>© 2018 lidihuo Times. All rights reserved.</p>
</div>
</body>
</html>
将HTML4文档类型更改为HTML5文档类型
HTML4文档类型语法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5文档类型语法：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML5</title>
<style>
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>lidihuo Times</h1>
</div>
<div id="menu">
<ul>
<li>教程</li>
<li>技术</li>
<li>博客</li>
</ul>
</div>
<div id="content">
<h2>教程部分</h2>
<div class="article">
<h2>教程1</h2>
<p>教程1教程1教程1教程1教程1教程1教程1教程1。</p>
<p>教程1教程1教程1教程1教程1教程1教程1教程1。</p>
</div>
<div class="article">
<h2>教程2</h2>
<p>教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2</p>
<p>教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2教程2</p>
</div>
</div>
<div id="footer">
<p>© 2018 lidihuo Times. All rights reserved.</p>
</div>
</body>
</html>
