HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

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>JavaTpoint 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 JavaTpoint Times. All rights reserved.</p>  
</div>  
  
</body>  
</html>

将 HTML4 Doctype 更改为 HTML5 Doctype

HTML4 文档类型语法：

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

HTML5 文档类型语法：

<!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>JavaTpoint 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 JavaTpoint Times. All rights reserved.</p>  
</div>  
  
</body>  
</html>


上一主题 HTML5 语义 下一主题 没有了
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具