HTML 基础语法

HTML5是现代网页开发的核心技术之一，它在保留与 HTML4 和 XHTML1 兼容性的同时，带来了更多的灵活性和新特性。通过本篇文章，你将掌握 HTML5 的基本语法结构，为后续的网页开发打下坚实的基础。

HTML5 的语法灵活性

HTML5 的语法比以往的版本更加灵活，不再严格要求像 XHTML 那样必须使用小写标签名、引用属性值、为属性提供值以及关闭空元素。以下是 HTML5 支持的语法特性：

标签大小写不敏感：你可以使用大写、小写或混合大小写的标签名，虽然通常推荐使用小写。
属性引用可选：属性值可以不加引号，例如 <input type=text>。
属性值可选：某些属性可以省略值，例如 <input checked>。
空元素关闭可选：像 <br> 这样的空元素可以不写成 <br />。

这种灵活性使得 HTML5 的代码更加简洁，但建议在实际开发中保持一致性，以提高代码的可读性。

DOCTYPE 声明

在 HTML5 中，DOCTYPE 声明变得非常简单，不再需要引用复杂的 DTD（文档类型定义）。你只需要在文档开头写：

<!DOCTYPE html>

这个声明是大小写不敏感的，但它告诉浏览器这是一个HTML5文档，确保浏览器以标准模式渲染页面。

字符编码

HTML5 推荐使用 UTF-8 编码，它支持全球所有的字符。设置字符编码的语法也非常简单：

<meta charset="UTF-8">

同样，这个标签是大小写不敏感的，但它必须放在文档的 <head> 部分，最好尽早出现，以确保页面内容正确显示。

script 标签

在 HTML5 中，引入 JavaScript 脚本变得更加简洁。你不再需要指定 type="text/javascript"，因为这是默认值。直接使用：

<script src="scriptfile.js"></script>

这种简化减少了冗余代码，使 HTML 文档更加清晰。

link 标签

引入 CSS 样式表的 <link> 标签在 HTML5 中也得到了简化。你只需要保留必要的属性：

<link rel="stylesheet" href="stylefile.css">

type="text/css" 属性可以省略，因为CSS是默认的样式表语言。

HTML5 元素

HTML5 中的元素由开始标签 <tag> 和结束标签 </tag> 组成。元素的内容位于这两个标签之间。例如：

<p>这是一个段落。</p>

有些元素是空元素（void elements），它们不能包含内容，例如 <br>、<hr>、<link> 和 <meta> 等。

HTML5的标签名是大小写不敏感的，但为了保持一致性，推荐统一使用小写。

HTML5 属性

元素可以通过属性来设置各种属性值。属性包含名称和值，例如：

<div class="example">这是一个带有class属性的div元素。</div>

属性只能出现在开始标签中，不能出现在结束标签中。属性名和属性值也是大小写不敏感的，但通常推荐使用小写。

HTML5 文档结构

HTML5 引入了一些新的语义化标签，帮助你更好地组织文档结构：

<section>：表示文档中的一个通用部分，常与标题元素一起使用。
<article>：表示独立的内容块，如博客文章或新闻报道。
<aside>：表示与页面其他内容关系不大的侧边栏内容。
<header>：表示文档或部分的页眉。
<footer>：表示文档或部分的页脚，通常包含版权信息。
<nav>：表示导航链接部分。
<dialog>：表示对话内容。
<figure>：表示带标题的嵌入内容，如图片或视频。

一个典型的 HTML5 文档结构如下：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>页面标题</title>
   </head>
   <body>
      <header>页面页眉</header>
      <nav>导航链接</nav>
      <article>
         <section>
            文章内容
         </section>
      </article>
      <aside>侧边栏内容</aside>
      <footer>页脚内容</footer>
   </body>
</html>

小结

通过本文，你了解了 HTML5 的基础语法，包括其灵活性、简化的 DOCTYPE 声明、字符编码设置、script 和 link 标签的简化用法，以及新的语义化标签。HTML5 的这些特性不仅使代码更加简洁，还提高了网页的可维护性和可读性。掌握这些基础语法是成为一名合格前端开发者的第一步。接下来，你可以尝试创建一个简单的 HTML5 页面，将所学知识付诸实践。记住，实践是巩固知识的最佳方式！

HTML5 的语法灵活性​

DOCTYPE 声明​

字符编码​

script 标签​

link 标签​

HTML5 元素​

HTML5 属性​

HTML5 文档结构​

小结​