HTML5 迁移

2025 年 3 月 25 日 | 阅读 2 分钟

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 语法

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

HTML5 Doctype 语法

示例

<!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>

下一主题HTML 颜色名称

HTML5 迁移

示例

将 HTML4 Doctype 更改为 HTML5 Doctype

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML5 迁移

示例

将 HTML4 Doctype 更改为 HTML5 Doctype

示例

相关帖子

HTML 5 标签

HTML5 用户手册

HTML5 新元素

HTML5 教程

HTML 视频

HTML 事件属性

HTML5 语义化

HTML SVG

HTML 音频

HTML 谷歌地图

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器