HTML5 迁移

w3school 在线教程

## HTML 基础教程

- HTML 教程
- HTML 简介
- HTML 编辑器
- HTML 基础
- HTML 元素
- HTML 属性
- HTML 标题
- HTML 段落
- HTML 样式
- HTML 格式化
- HTML 引用
- HTML 计算机代码
- HTML 注释
- HTML CSS
- HTML 链接
- HTML 图像
- HTML 表格
- HTML 列表
- HTML 块
- HTML 类
- HTML 布局
- HTML 响应式设计
- HTML 框架
- HTML 内联框架
- HTML 背景
- HTML 脚本
- HTML 头部
- HTML 实体
- HTML URL
- HTML URL 编码
- HTML Web 服务器
- HTML 颜色
- HTML 颜色名
- HTML 文档类型
- HTML 速查手册

## HTML XHTML

- XHTML 简介
- XHTML 元素
- XHTML 属性

## HTML 表单

- HTML 表单
- HTML 表单元素
- HTML 输入类型
- HTML 输入属性

## HTML5

- HTML5 简介
- HTML5 支持
- HTML5 元素
- HTML5 语义
- HTML5 迁移
- HTML5 代码约定

## HTML 图形

- HTML5 画布
- HTML5 SVG
- HTML5 画布 vs SVG

## HTML 媒体

- HTML 媒体
- HTML 对象
- HTML 音频
- HTML 视频

## HTML API

- HTML5 地理定位
- HTML5 拖放
- HTML5 Web 存储
- HTML5 应用缓存
- HTML5 Web Workers
- HTML5 SSE

## 实例/测验/总结

- HTML 实例
- HTML 测验
- HTML 总结

## HTML 参考手册

- HTML 标签列表
- HTML 属性
- HTML 事件
- HTML 合法 DTD
- HTML 颜色名
- HTML 字符集
- HTML ASCII
- HTML ISO-8859-1
- HTML 符号
- HTML URL 编码
- HTML 语言代码
- HTML 消息

## HTML5

- HTML5 教程
- HTML5 参考手册

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# HTML5 迁移

- HTML5 语义
- 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 id="post"> | <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.8em;}
      div#header,div#footer,div#content,div#post
      {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
      div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
      div#content {background-color:#ddd;}
      div#menu ul {margin:0;padding:0;}
      div#menu ul li {display:inline; margin:5px;}
    </style>
    </head>
    <body>

    <div id="header">
      <h1>Monday Times</h1>
    </div>

    <div id="menu">
      <ul>
        <li>News</li>
        <li>Sports</li>
        <li>Weather</li>
      </ul>
    </div>

    <div id="content">
    <h2>News Section</h2>

    <div id="post">
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
    </div>

    <div id="post">
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
    </div>

    </div>

    <div id="footer">
      <p>&copy; 2014 Monday Times. 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 编码

修改编码信息，从 HTML4：

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

改为 HTML5：

    <meta charset="utf-8">

亲自试一试

## 添加 shiv

所有现代浏览器都支持 HTML5 语义元素。

此外，您可以“教授”老式浏览器如何处理“未知元素”。

为 Internet Explorer 支持而添加的 shiv：

    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

亲自试一试

注释：请在 HTML5 浏览器支持中阅读更多有关 shiv 的知识。

## 为 HTML5 语义元素添加 CSS

请看已有的 CSS 样式：

    div#header,div#footer,div#content,div#post {
        border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
    }
    div#header,div#footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    div#content {
        background-color:#ddd;
    }
    div#menu ul {
        margin:0;padding:0;
    }
    div#menu ul li {
        display:inline; margin:5px;
    }
    Duplicate with equal CSS styles for HTML5 semantic elements:

    header,footer,section,article {
        border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
    }
    header,footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    section {
        background-color:#ddd;
    }
    nav ul  {
        margin:0;padding:0;
    }
    nav ul li {
        display:inline; margin:5px;
    }

亲自试一试

## 更改为 HTML5 <header> 和 <footer>

把 id="header" 和 id="footer" 的 <div> 元素：

    <div id="header">
      <h1>Monday Times</h1>
    </div>
    .
    .
    .
    <div id="footer">
      <p>&copy; 2014 W3Schools. All rights reserved.</p>
    </div>

修改为 HTML5 语义元素 <header> 和 <footer>：

    <header>
      <h1>Monday Times</h1>
    </header>
    .
    .
    .
    <footer>
      <p>© 2014 W3Schools. All rights reserved.</p>
    </footer>

亲自试一试

## 更改为 HTML5 <nav>

把 id="menu" 的 <div> 元素：

    <div id="menu">
      <ul>
        <li>News</li>
        <li>Sports</a></li>
        <li>Weather</li>
      </ul>
    </div>

修改为 HTML5 语义元素 <nav>：

    <nav>
      <ul>
        <li>News</li>
        <li>Sports</a></li>
        <li>Weather</li>
      </ul>
    </nav>

亲自试一试

## 更改为 HTML5 <section>

把 id="content" 的 the <div> 元素：

    <div id="content">
    .
    .
    .
    </div>

修改为 HTML5 语义元素 <section>：

    <section>
    .
    .
    .
    </section>

亲自试一试

## 更改为 HTML5 <article>

把 class="post" 的所有 <div> 元素：

    <div class="post">
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
    </div>

修改为 HTML5 语义元素 <article>：

    <article>
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
    </article>

亲自试一试

删除这些“不再需要的”样式：

    div#header,div#footer,div#content,div#post {
        border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
    }
    div#header,div#footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    div#content {
        background-color:#ddd;
    }
    div#menu ul {
        margin:0;padding:0;
    }
    div#menu ul li {
        display:inline; margin:5px;
    }

亲自试一试

## 典型的 HTML5 页面

最后您可以删除 <head> 标签。HTML5 中不再需要它们：

### 实例

    <!DOCTYPE html>
    <html lang="en">
    <title>HTML5</title>
    <meta charset="utf-8">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

    <style>
    body {
        font-family:Verdana,sans-serif;font-size:0.8em;
    }
    header,footer,section,article {
        border:1px solid grey;
        margin:5px;margin-bottom:15px;padding:8px;
        background-color:white;
    }
    header,footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    section {
        background-color:#ddd;
    }
    nav ul {
        margin:0;padding:0;
    }
    nav ul li {
        display:inline; margin:5px;
    }
    </style>
    <body>

    <header>
      <h1>Monday Times</h1>
    </header>

    <nav>
      <ul>
        <li>News</li>
        <li>Sports</li>
        <li>Weather</li>
      </ul>
    </nav>

    <section>
    <h2>News Section</h2>

    <div id="post">
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
    </div>

    <div id="post">
    <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
      lurum hurum turum.</p>
    </div>

    </section>

    <footer>
      <p>&copy; 2014 Monday Times. All rights reserved.</p>
    </footer>

    </body>
    </html>

亲自试一试

## <article> <section> 与 <div> 之间的差异

在 HTML5 标准中，<article> <section> 与 <div> 之间的差异很小，令人困惑。

在 HTML5 标准中，<section> 元素被定位为相关元素的块。

<article> 元素被定义为相关元素的完整的自包含块。

<div> 元素被定义为子元素的块。

如何理解呢？

在上面的例子中，我们曾使用 <section> 作为相关 <articles> 的容器。

但是，我们也能够把 <article> 用作文章的容器。

下面是一些不同的例子：

    <article> 中的 <article>：

    <article>

    <h2>Famous Cities</h2>

    <article>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </article>

    <article>
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </article>

    <article>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </article>

    </article>

亲自试一试

    <article> 中的 <div>：

    <article>

    <h2>Famous Cities</h2>

    <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>

    </article>

亲自试一试

    <article> 中的 <section> 中的 <div>：

    <article>

    <section>
    <h2>Famous Cities</h2>

    <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>
    </section>

    <section>
    <h2>Famous Countries</h2>

    <div class="country">
    <h2>England</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="country">
    <h2>France</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="country">
    <h2>Japan</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>
    </section>

    </article>

亲自试一试

- HTML5 语义
- HTML5 代码约定