HTML5 - 语法

HTML5 - 语法与结构

HTML5 语法旨在提供灵活性和与现有 Web 内容的兼容性，同时与 XHTML 等旧版更严格的版本相比，也简化了一些方面。

虽然 HTML5 允许某些简写方式（例如省略某些属性的引号或不关闭某些标签），但强烈建议遵循一致、清晰的语法（例如小写标签、加引号的属性），以提高可读性、可维护性以及与各种工具的兼容性。

DOCTYPE

每个 HTML5 文档都必须以文档类型声明 (Document Type Declaration) 开头，即 DOCTYPE。在 HTML5 中，此声明大大简化：

<!DOCTYPE html>

此 DOCTYPE 告诉浏览器以“标准模式”（‘standards mode’）渲染页面，确保跨不同浏览器的一致行为。它不区分大小写，但 <!DOCTYPE html> 是约定俗成的形式。与旧版 HTML 不同，它不引用特定的 DTD (Document Type Definition)。

字符编码

指定字符编码对于浏览器正确解析页面上的文本内容至关重要。HTML5 使用带有 charset 属性的 <meta> 标签简化了这一点，该标签应尽可能早地放置在 <head> 部分中：

<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <!-- Other head elements -->
</head>

UTF-8 是 universally recommended character encoding for web content as it supports virtually all characters and symbols from all languages。

Section titled “ 标签”

在 HTML5 中，JavaScript <script> 标签的 type 属性（type="text/javascript"）不再需要。JavaScript 是 Web 的默认脚本语言。

<!-- Linking external script -->
<script src="scripts/main.js"></script>

<!-- Inline script -->
<script>
  console.log('Hello from inline script!');
</script>

考虑为外部脚本使用 defer 属性（与 HTML 同时下载脚本，HTML 解析后执行）或 async 属性（异步下载和执行脚本）来优化页面加载。

HTML 元素

HTML 元素是网页的基本组成部分，使用标签进行标记。

标签 (Tags): 由尖括号 (< >) 包围。大多数元素都有一个开始标签（例如，<p>）和一个结束标签（例如，</p>）。
内容 (Content): 开始标签和结束标签之间的信息。
空元素 (Void Elements): 有些元素是“空的”或“无效的”，意味着它们不能有内容，并且只包含一个开始标签。示例包括 <br>、<hr>、<img>、<input>、<link>、<meta>。在 HTML5 语法中，它们不需要使用 / 显式关闭（例如，<br> 是有效的），尽管 self-closing（<br />）也允许用于兼容性。
大小写不敏感 (Case Insensitivity): 标签名不区分大小写（<P> 与 <p> 相同），但小写是标准约定。
嵌套 (Nesting): 元素可以嵌套在其他元素中，形成文档结构（DOM 树）。嵌套必须正确进行（例如，<p><em>Text</em></p> 是正确的，<p><em>Text</p></em> 是错误的）。

HTML 属性

属性为元素提供附加信息或配置。它们出现在开始标签中。

名称-值对 (Name-Value Pairs): 大多数属性由一个名称和一个值组成，两者用 = 分隔（例如，id="main-nav"，href="index.html"）。
属性值引用 (Quoting Values): 属性值通常应使用双引号 (") 或单引号 (') 括起来。HTML5 允许对简单的、无空格的值省略引号，但建议使用引号以提高清晰度和健壮性。
布尔属性 (Boolean Attributes): 某些属性是布尔属性；它们的存在意味着 true，不存在意味着 false。示例包括 required、checked、disabled、readonly、controls。它们可以仅写属性名（例如，<input required>）或使用空值（<input required="">）或将属性名作为值（<input required="required">）。第一种形式最常见。
大小写不敏感 (Case Insensitivity): 属性名不区分大小写，但小写是约定俗成的。

<!-- Example with various attributes -->
<a id="homeLink" class="nav-link active" href="/index.html" title="Go to Homepage">Home</a>

<input type="checkbox" name="subscribe" value="yes" checked>

<img src="images/logo.png" alt="Company Logo" width="150">

基本的 HTML5 文档结构

典型的 HTML5 文档遵循此基本结构，通常包含语义化元素以更好地组织内容：

<!DOCTYPE html>
<html lang="en"> <!-- Specify document language -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design meta tag -->
    <title>My Semantic HTML5 Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header> <!-- Page or section header -->
        <h1>Website Title</h1>
        <nav> <!-- Navigation links -->
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main> <!-- Main content of the page -->
        <article> <!-- Self-contained content (e.g., blog post) -->
            <h2>Article Title</h2>
            <p>This is the main content of the article...</p>
            <section> <!-- Thematic section within the article -->
                <h3>Subsection Title</h3>
                <p>Details within the subsection...</p>
            </section>
        </article>

        <aside> <!-- Sidebar content (related but separate) -->
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </main>

    <footer> <!-- Page or section footer -->
        <p>&copy; 2024 Your Website Name. All rights reserved.</p>
    </footer>

    <script src="script.js"></script> <!-- Scripts often placed before closing </body> -->
</body>
</html>

使用语义化元素如 <header>、<nav>、<main>、<article>、<section>、<aside> 和 <footer> 使文档结构对浏览器（尤其是辅助技术）和开发者都更有意义。