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>srcmini Times</h1>
</div>

<div id="menu">
<ul>
<li>Tutorials</li>
<li>Technology</li>
<li>Blog</li>
</ul>
</div>

<div id="content">
<h2>Tutorials Section</h2>
<div class="article">
<h2>Tutorial1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>Tutorial2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>

<div id="footer">
<p>� 2018 srcmini Times. All rights reserved.</p>
</div>

</body>
</html>

立即测试

将HTML4文档类型更改为HTML5文档类型

HTML4 Doctype语法：

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

HTML5 Doctype语法：

<!DOCTYPE html>

例：

<!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>srcmini Times</h1>
</div>

<div id="menu">
<ul>
<li>Tutorials</li>
<li>Technology</li>
<li>Blog</li>
</ul>
</div>
<div id="content">
<h2>Tutorials Section</h2>
<div class="article">
<h2>Tutorial1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>Tutorial2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id="footer">
<p>� 2018 srcmini Times. All rights reserved.</p>
</div>

</body>
</html>

例：

将HTML4文档类型更改为HTML5文档类型

例：

猜你喜欢