上一节:
下一节:

  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>
上一节:
下一节: