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>
    尝试一下