HTML5 转换(升级)


从HTML4升级到HTML5

本章讲的是关于如何将HTML4 转换(升级)到 HTML5

本章演示如何将HTML4页面转换(升级)为HTML5页面,而不会破坏原来内容或结构。

您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 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="zh">
<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>UIHTML BLOG</h1>
</div>

<div id="menu">
  <ul>
    <li>新闻</li>
    <li>关于</li>
   <li>联系</li>
  </ul>
</div>

<div id="content">
 <h2>新闻 Section</h2>
  <div class="article">
    <h2>新闻 Article</h2>
   <p>新手教程(www.uihtml.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.</p>
  </div>
  <div class="article">
    <h2>新闻 Article</h2>
   <p>新手教程(www.uihtml.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.</p>
  </div>
</div>

<div id="footer">
 <p>Copyright © 2018-2019 新手教程 uihtml.com All Rights Reserved.</p>
</div>

</body>
</html>
运行 »

更改为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>

更改为HTML5字符编码

更改字符编码信息:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

到HTML5的字符编码:

实例

<meta charset="utf-8">

添加HTML5Shiv

所有现代浏览器都支持新的HTML5语义元素。此外,您可以"教"旧版浏览器来处理"未知"(新)HTML元素。

但是,IE8及更早版本,不允许使用未知元素的样式。因此,HTML5Shiv是一种JavaScript解决方法,可以在版本9之前的Internet Explorer版本中启用HTML5元素的样式。

添加HTML5Shiv:

实例

<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<![endif]-->

HTML5浏览器支持 中阅读有关HTML5Shiv的更多信息


更改为HTML5语义元素

现有的CSS包含用于样式化元素的id和类:

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;
}

替换为HTML5语义元素的相同CSS样式:

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}

最后,将元素更改为HTML5语义元素:

实例

<body>

<header>
<h1>UIHTML BLOG</h1>
</header>

<nav>
<ul>
<li>新闻</li>
<li>关于</li>
<li>联系</li>
</ul>
</nav>

<section>
<h2>新闻 Section</h2>
<article>
<h2>新闻 Article</h2>
<p>新手教程(www.uihtml.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.</p>
</article>
<article>
<h2>新闻 Article</h2>
<p>新手教程(www.uihtml.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.</p>
</article>
</section>

<footer>
<p>Copyright © 2018-2019 新手教程 uihtml.com All Rights Reserved.</p>
</footer>

</body>
运行 »