HTML5 迁移

迁移到现代 HTML

将旧版 HTML 更新到现代标准

本节概述了将典型的旧版 HTML 页面（如使用表示性 div 的 HTML4 或 XHTML）迁移到现代、语义化 HTML 的步骤。

目标是在不丢失原始内容的情况下，改进结构、可访问性和可维护性。

典型的旧结构（使用带 ID 的 `<div>`）	现代语义化等效元素
`<div id="header">...</div>`	`<header>...</header>`
`<div id="nav">` 或 `<div id="menu">...</div>`	`<nav>...</nav>`
`<div id="main-content">...</div>`	`<main>...</main>`
`<div class="article">` 或 `<div id="post">...</div>`	`<article>...</article>`
`<div id="sidebar">...</div>`	`<aside>...</aside>`
`<div id="content-section">...</div>`	`<section>...</section>`
`<div id="footer">...</div>`	`<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>Old Structure</title>
  <link rel="stylesheet" href="style.css"> <!-- 假设 CSS 处理布局 -->
 </head>
 <body>

  <div id="header">
   <h1>Website Title</h1>
  </div>

  <div id="menu">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>

  <div id="content">
   <h2>Main Content Area</h2>
   <div id="post-1">
    <h3>Article Title One</h3>
    <p>Some paragraph text...</p>
   </div>
   <div id="post-2">
    <h3>Article Title Two</h3>
    <p>Another paragraph text...</p>
   </div>
  </div>

  <div id="footer">
   <p>&copy; 2024 Website Name. All rights reserved.</p>
  </div>

 </body>
</html>

迁移步骤

1. 更新 Doctype：

替换旧的 doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

使用现代 HTML doctype：

<!DOCTYPE html>

2. 更新字符编码：

替换旧的 meta 标签：

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

使用 <head> 内部更简洁的现代版本：

<meta charset="UTF-8">

3. 添加 Viewport Meta 标签（响应式设计的关键）：

在 <head> 中添加此标签，以确保在移动设备上的正确缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 将布局 `div` 替换为语义化元素：

系统地将表示性 div 元素替换为其对应的语义化元素：

将 <div id="header"> 替换为 <header>。
将 <div id="menu">（或类似元素）替换为 <nav>。
用 <main> 包裹主要内容区域（不包括 header、nav、footer、aside）。
如果 <div id="content"> 代表一个专题部分，则替换为 <section>；如果它包含主要内容，则直接使用 <main>。
如果 <div id="post-1">、<div id="post-2"> 是自包含的作品，则替换为 <article>。
将 <div id="footer"> 替换为 <footer>。

5. 审查和重构 CSS：

你现有的 CSS 可能针对旧的 ID（例如，#header、#menu）。你需要更新 CSS 选择器以匹配新的语义化标签（例如，header、nav）。

示例 CSS 更新：

/* 旧 CSS */
div#header {
  background-color: #333;
  color: white;
}
div#menu ul li {
  display: inline-block;
  margin-right: 10px;
}

/* 更新后的 CSS */
header {
  background-color: #333;
  color: white;
}
nav ul li {
  display: inline-block;
  margin-right: 10px;
}
/* 根据需要添加 main、article、section、footer 的样式 */

这也是一个现代化布局技术的好机会。如果旧的 CSS 使用浮动进行布局，请考虑使用 CSS Flexbox 或 CSS Grid 重构它，以获得更健壮、更灵活的布局。

6. 移除过时实践（例如，HTML5 Shiv）：

旧的迁移指南可能会提到 ‘HTML5 Shiv’ 脚本（通常是 html5shiv.js），用于在非常旧的浏览器（如 IE 8）中启用 HTML5 元素的样式设置。对于现代 Web 开发，这不再是必需的，因为所有当前浏览器都原生支持这些元素。移除任何对 HTML5 Shiv 的引用。

示例：迁移后的 HTML 结构

这是将前面示例迁移到现代 HTML 后的结构：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Structure</title>
  <link rel="stylesheet" href="style.css"> <!-- CSS 需要更新 -->
 </head>
 <body>

  <header>
   <h1>Website Title</h1>
  </header>

  <nav>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </nav>

  <main>
   <h2>Main Content Area</h2>
   <article id="post-1"> <!-- 如果需要用于链接/JS，则保留 ID -->
    <h3>Article Title One</h3>
    <p>Some paragraph text...</p>
   </article>
   <article id="post-2">
    <h3>Article Title Two</h3>
    <p>Another paragraph text...</p>
   </article>
  </main>

  <footer>
   <p>&copy; 2024 Website Name. All rights reserved.</p>
  </footer>

 </body>
</html>

选择 `<article>`、`<section>` 和 `<div>`

理解何时使用这些元素有时会很棘手：

<article>： 用于完整、自包含的内容，这些内容可以独立存在或被联合发布（例如，博客文章、新闻报道、论坛评论、产品卡片）。article 通常应该有标题。
<section>： 用于将相关内容分组，形成页面内或 article 内的独立部分（例如，章节、选项卡式内容面板、专题信息组）。section 通常应该有标题。
<div>： 当没有其他合适的语义化元素时，用作通用容器，通常用于样式或脚本目的（例如，对元素进行分组以应用特定的 CSS 样式或行为）。它不带语义意义。

考虑文档大纲。<article> 和 <section> 有助于定义结构，而 <div> 在语义上是中性的。

示例嵌套：

<main>
  <h1>Blog</h1>
  <article>
    <h2>My First Post</h2>
    <section>
      <h3>Introduction</h3>
      <p>...</p>
    </section>
    <section>
      <h3>Main Point</h3>
      <p>...</p>
      <div style="border: 1px solid red;">只是一个用于强调的带样式的 div</div>
    </section>
    <footer> <!-- article 的页脚 -->
      <p>Posted by Author</p>
    </footer>
  </article>
  <!-- 更多 article -->
</main>