HTML 基础语法
本章将介绍 HTML 的基本语法，包括文档结构、标签使用和属性设置。
HTML 文档结构
基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
逐行解释
<!DOCTYPE html>
这行声明告诉浏览器这是一个 HTML5 文档。HTML5 是当前的 HTML 标准。
<html lang="zh-CN">
根元素，lang 属性指定页面语言，有助于搜索引擎和屏幕阅读器。
<head>
头部区域，包含页面的元数据，不会直接显示在页面中。
<meta charset="UTF-8">
指定字符编码，UTF-8 包含世界上大多数语言的字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置视口，确保页面在移动设备上正确显示。
<title>页面标题</title>
浏览器标签页显示的标题，也是搜索引擎显示的标题。
<body>
页面主体，包含所有可见内容。
标签语法
双标签
大多数 HTML 标签是双标签，需要成对使用：
<标签名>内容</标签名>
<p>这是一个段落</p>
<h1>这是一级标题</h1>
<div>这是一个容器</div>
单标签（自闭合标签）
有些标签没有结束标签，称为自闭合标签：
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<img> <!-- 图片 -->
<input> <!-- 输入框 -->
<meta> <!-- 元数据 -->
<link> <!-- 外部资源 -->
提示
在 XHTML 和一些严格模式下，自闭合标签需要使用斜杠：<br />、<img />
标签嵌套
标签可以嵌套，但必须正确闭合：
<!-- 正确嵌套 -->
<div>
<p>段落内容</p>
</div>
<!-- 错误嵌套 -->
<div>
<p>段落内容</div> <!-- p 标签没有正确闭合 -->
</div>
嵌套层级
<article>
<h2>文章标题</h2>
<p>
这是一段文字，包含
<strong>加粗</strong>和
<em>斜体</em>文本
</p>
</article>
HTML 属性
基本语法
属性提供元素的额外信息，放在开始标签中：
<标签名 属性名="属性值">内容</标签名>
常用属性
id 属性
唯一标识一个元素：
<header id="main-header">
网站导航
</header>
class 属性
为元素指定类别，可重复：
<p class="intro">介绍段落</p>
<p class="intro">另一个介绍段落</p>
style 属性
内联样式（不推荐，优先使用外部 CSS）：
<p style="color: blue; font-size: 16px;">
蓝色文字
</p>
title 属性
提供元素的描述信息，鼠标悬停时显示：
<p title="这是提示信息">
鼠标悬停在这里查看提示
</p>
全局属性
所有 HTML 元素都可以使用的属性：
| 属性 | 说明 |
|---|---|
id | 元素唯一标识 |
class | 元素类别 |
style | 内联样式 |
title | 元素描述 |
dir | 文本方向（ltr/rtl） |
lang | 语言代码 |
hidden | 隐藏元素 |
布尔属性
有些属性只需要存在就表示为真，不需要值：
<!-- disabled 属性存在就表示禁用 -->
<input type="text" disabled>
<!-- checked 属性存在就表示选中 -->
<input type="checkbox" checked>
<!-- readonly 属性存在就表示只读 -->
<input type="text" readonly>
HTML 注释
注释不会显示在页面中，用于代码说明：
<!-- 这是单行注释 -->
<!--
这是多行注释
可以写很多行
说明代码的功能
-->
注释的用途
- 代码说明：解释代码功能
- 临时禁用：注释掉不需要的代码
- 团队协作：帮助其他人理解代码
特殊字符
HTML 中有些字符有特殊含义，需要使用实体表示：
| 字符 | 实体 | 说明 |
|---|---|---|
< | < | 小于号 |
> | > | 大于号 |
& | & | 和号 |
" | " | 双引号 |
' | ' | 单引号 |
| 空格 | | 不换行空格 |
示例
<p>5 < 10</p>
<p>Tom & Jerry</p>
<p>多个 空 格</p>
大小写不敏感
HTML 标签和属性名不区分大小写：
<DIV>等于<div>
<P>等于<p>
<INPUT TYPE="text">等于<input type="text">
推荐
虽然 HTML 不区分大小写，但推荐使用小写，保持代码一致性。
最佳实践
1. 使用语义化标签
<!-- 不推荐 -->
<div class="header">网站导航</div>
<!-- 推荐 -->
<header>网站导航</header>
2. 正确闭合标签
<!-- 不推荐 -->
<p>段落一
<p>段落二
<!-- 推荐 -->
<p>段落一</p>
<p>段落二</p>
3. 使用双引号
<!-- 不推荐 -->
<div class=container>
<!-- 推荐 -->
<div class="container">
4. 声明文档类型
<!-- 不推荐：不声明 DOCTYPE -->
<!-- 推荐：声明 HTML5 -->
<!DOCTYPE html>
完整的 HTML 模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="页面描述，用于搜索引擎">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<a href="/">首页</a>
<a href="/about">关于我们</a>
</nav>
</header>
<main>
<h1>欢迎访问</h1>
<p>网页内容...</p>
</main>
<footer>
<p>© 2024 公司名称</p>
</footer>
</body>
</html>
小结
本章我们学习了：
- HTML 文档的基本结构
- 双标签和单标签的使用
- 标签的嵌套规则
- HTML 属性的语法和常见属性
- HTML 注释的写法
- HTML 特殊字符的转义
- HTML 编码的最佳实践
练习
- 创建一个基本的 HTML 页面，包含标题、段落和链接
- 为元素添加 id 和 class 属性
- 使用注释为代码添加说明
- 在页面中正确显示特殊字符（如
<>和&） - 使用浏览器开发者工具查看页面结构