HTML5 迁移 - 蝴蝶教程

从HTML4迁移到HTML5

本章完全是关于如何从HTML4 迁移到 HTML5。本章演示如何将HTML4页面转换为HTML5页面，而不会破坏原始内容或结构的任何内容。

您可以使用相同的方法从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="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>编程语言</h1>
         </div>

         <div id="menu">
           <ul>
             <li>HTML</li>
             <li>JavaScript</li>
             <li>CSS</li>
           </ul>
         </div>

         <div id="content">
           <h2>HTML Section</h2>
           <div class="article">
             <h2>HTML Article</h2>
             <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。</p>
           </div>
           <div class="article">
             <h2>HTML Article</h2>
             <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。</p>
           </div>
         </div>

         <div id="footer">
           <p>&copy; 2018版权所有.</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 Charset

HTML4的Charset

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

更改为HTML5的Charset

<meta charset="utf-8">

添加HTML5Shiv

所有现代浏览器都支持新的HTML5语义元素。此外，您可以“教”旧浏览器如何处理“未知元素”。但是，IE8及更早版本，不允许使用未知元素的样式。因此，HTML5Shiv是一种JavaScript解决方法，可以在版本9之前的Internet Explorer版本中启用HTML5元素的样式。添加HTML5Shiv：

<!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <![endif]-->

在HTML5兼容阅读有关HTML5Shiv的更多信息。

更改为HTML5语义元素

现有的CSS包含用于样式化元素的id和class：

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语义元素：

<!DOCTYPE html>
         <html lang="en">
         <head>
         <charset="utf-8">
         <title>HTML5</title>
         <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         </script>
         <![endif]-->
         <style>
         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;
         }
         </style>
         </head>
         <body>
         <header>
           <h1>编程语言</h1>
         </header>
         <nav>
           <ul>
             <li>HTML</li>
             <li>JavaScript</li>
             <li>CSS</li>
           </ul>
         </nav>

         <section>
           <h2>HTML Section</h2>
           <article>
             <h2>HTML Article</h2>
             <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。</p>
           </article>
           <article>
             <h2>HTML Article</h2>
             <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。</p>
           </article>
         </section>
         <footer>
           <p>© 2018版权所有.</p>
         </footer>
         </body>
         </html>

尝试一下

<article> <section>和<div>之间的区别

HTML5标准之间存在差异和混乱，介于<article> <section>和<div>之间。在HTML5标准中，<section>元素被定义为相关元素的块。 <article> 元素被定义为完整的，独立的相关元素块。 <div>元素被定义为子元素块。怎么解释？在上面的例子中，我们使用<section>来作为<article>的容器。但是，我们也可以用<article>作为<section>的容器。以下是一些不同的例子： article中的article

<article>

         <h2>著名的城市</h2>

         <article>
         <h2>伦敦</h2>
         <p>伦敦的介绍。</p>
         </article>

         <article>
         <h2>巴黎</h2>
         <p>巴黎的介绍。</p>
         </article>

         <article>
         <h2>东京</h2>
         <p>东京的介绍</p>
         </article>

         </article>

尝试一下

article中的div

<article>

       <h2>著名的城市</h2>

       <div class="city">
       <h2>伦敦</h2>
       <p>伦敦的介绍。</p>
       </div>

       <div class="city">
       <h2>巴黎</h2>
       <p>巴黎的介绍。</p>
       </div>

       <div class="city">
       <h2>东京</h2>
       <p>东京的介绍。</p>
       </div>

       </article>

尝试一下

article中的section中的div

<article>

         <section>
         <h2>著名的城市</h2>

         <div class="city">
         <h2>伦敦</h2>
         <p>伦敦的介绍</p>
         </div>

         <div class="city">
         <h2>巴黎</h2>
         <p>巴黎的介绍</p>
         </div>

         <div class="city">
         <h2>东京</h2>
         <p>东京的介绍</p>
         </div>
         </section>

         <section>
         <h2>著名的国家</h2>

         <div class="country">
         <h2>中国</h2>
         <p>中国的介绍。</p>
         </div>

         <div class="country">
         <h2>美国</h2>
         <p>美国的介绍。</p>
         </div>

         <div class="country">
         <h2>丹麦</h2>
         <p>丹麦的介绍。</p>
         </div>
         </section>

         </article>

尝试一下