1. 字符实体
HTML 中有些字符有特殊含义（如 < >），直接写会被当成标签解析。
字符实体（Character Entities）用特殊代码来显示这些字符。
格式：&实体名; 或 &#实体编号;
演示效果：
< 小于号
> 大于号
& 和号
1<p>< 小于号</p>
2<p>> 大于号</p>
3<p>& 和号</p>
2. 常用字符实体
以下是常用的字符实体：
字符实体对照表：
| 实体 | 编号 | 显示 | 说明 |
|---|---|---|---|
| < | < | < | 小于号 |
| > | > | > | 大于号 |
| & | & | & | 和号 |
| |   | 不换行空格 | |
| " | " | " | 双引号 |
| ' | ' | ' | 单引号 |
| © | © | © | 版权符号 |
| ® | ® | ® | 注册商标 |
| ™ | ™ | ™ | 商标符号 |
| × | × | × | 乘号 |
| ÷ | ÷ | ÷ | 除号 |
使用场景：
1. 显示 HTML 代码：<div>内容</div>
2. 多个空格：第一 第二（普通空格会被合并）
3. 版权信息：© 2024 版权所有
3. SEO 基础
SEO（Search Engine Optimization）搜索引擎优化，让网页更容易被搜索引擎收录和排名。
HTML 中影响 SEO 的关键元素：
SEO 关键元素：
| 元素 | 作用 | 最佳实践 |
|---|---|---|
| title | 页面标题 | 30-60字符，包含关键词 |
| meta description | 页面描述 | 150-160字符，吸引点击 |
| meta keywords | 关键词 | 3-5个，用逗号分隔 |
| h1-h6 | 标题层级 | 一个页面只有一个 h1 |
| alt 属性 | 图片描述 | 准确描述图片内容 |
| 语义化标签 | 结构清晰 | 使用 header/nav/main 等 |
1<head>
2 <title>页面标题 - 网站名</title>
3 <meta name="description" content="页面描述，150字以内，包含关键词">
4 <meta name="keywords" content="关键词1, 关键词2, 关键词3">
5 <meta name="author" content="作者名">
6</head>
7
8<body>
9 <h1>页面主标题（唯一）</h1>
10 <h2>章节标题</h2>
11 <img src="image.jpg" alt="准确的图片描述">
12</body>
4. Open Graph
Open Graph（OG）是 Facebook 推出的协议，用于控制网页在社交媒体分享时的显示内容。
其他平台（Twitter、微信等）也支持类似协议。
常用 OG 标签：
| 标签 | 说明 | 示例值 |
|---|---|---|
| og:title | 标题 | 页面标题 |
| og:description | 描述 | 页面描述 |
| og:image | 封面图 | https://example.com/image.jpg |
| og:url | 页面 URL | https://example.com/page |
| og:type | 类型 | website、article、product |
| og:site_name | 网站名 | 我的网站 |
1<!-- Open Graph -->
2<meta property="og:title" content="页面标题">
3<meta property="og:description" content="页面描述">
4<meta property="og:image" content="https://example.com/image.jpg">
5<meta property="og:url" content="https://example.com/page">
6<meta property="og:type" content="website">
7<meta property="og:site_name" content="我的网站">
8
9<!-- Twitter Card -->
10<meta name="twitter:card" content="summary_large_image">
11<meta name="twitter:title" content="页面标题">
12<meta name="twitter:description" content="页面描述">
13<meta name="twitter:image" content="https://example.com/image.jpg">
5. link 引入 CSS
<link> 标签用于引入外部资源，最常用的是引入 CSS 样式表。
rel 定义关系，href 定义资源地址。
引入方式：
| 方式 | 代码 | 适用场景 |
|---|---|---|
| 外部样式表 | <link rel="stylesheet" href="style.css"> | 推荐，可缓存 |
| 内部样式 | <style>...</style> | 少量样式 |
| 内联样式 | <div style="..."> | 特殊覆盖 |
1<!-- 外部样式表（推荐） -->
2<link rel="stylesheet" href="style.css">
3
4<!-- 多个样式表 -->
5<link rel="stylesheet" href="reset.css">
6<link rel="stylesheet" href="main.css">
7
8<!-- 内部样式 -->
9<style>
10 body { font-family: sans-serif; }
11 .container { max-width: 1200px; }
12</style>
6. link 引入图标
<link rel="icon"> 用于设置网页图标（favicon），显示在浏览器标签页上。
图标格式：
| 格式 | 代码 | 说明 |
|---|---|---|
| ICO | <link rel="icon" href="favicon.ico"> | 传统格式，兼容性最好 |
| PNG | <link rel="icon" type="image/png" href="icon.png"> | 现代格式，支持透明 |
| SVG | <link rel="icon" type="image/svg+xml" href="icon.svg"> | 矢量格式，可缩放 |
| Apple Touch | <link rel="apple-touch-icon" href="apple-icon.png"> | iOS 设备图标 |
1<!-- 基本图标 -->
2<link rel="icon" href="favicon.ico">
3
4<!-- PNG 图标 -->
5<link rel="icon" type="image/png" sizes="32x32" href="icon-32.png">
6<link rel="icon" type="image/png" sizes="16x16" href="icon-16.png">
7
8<!-- SVG 图标 -->
9<link rel="icon" type="image/svg+xml" href="icon.svg">
10
11<!-- Apple Touch Icon -->
12<link rel="apple-touch-icon" sizes="180x180" href="apple-icon.png">
7. script 引入 JS
<script> 标签用于引入 JavaScript 代码。
src 引入外部文件，type 指定脚本类型（可省略）。
引入方式：
| 方式 | 代码 | 适用场景 |
|---|---|---|
| 外部脚本 | <script src="app.js"></script> | 推荐，可缓存 |
| 内联脚本 | <script>...</script> | 少量代码 |
1<!-- 外部脚本（推荐） -->
2<script src="app.js"></script>
3
4<!-- 内联脚本 -->
5<script>
6 console.log('Hello!');
7 document.querySelector('h1').style.color = 'red';
8</script>
9
10<!-- 指定类型（可省略） -->
11<script type="text/javascript" src="app.js"></script>
8. async/defer
async 和 defer 控制脚本的加载和执行时机：
async：异步加载，加载完立即执行（不保证顺序）。
defer：延迟执行，等 HTML 解析完再执行（保证顺序）。
三种加载方式对比：
| 方式 | 加载 | 执行 | 适用场景 |
|---|---|---|---|
| 无属性 | 同步阻塞 | 立即执行 | 需要立即执行的脚本 |
| async | 异步加载 | 加载完立即执行 | 独立脚本（如统计） |
| defer | 异步加载 | HTML解析完后执行 | 需要保证顺序的脚本 |
执行顺序图解：
无属性：HTML 解析 → 遇到 script → 停止解析 → 下载脚本 → 执行脚本 → 继续解析
async：HTML 解析 → 遇到 script → 继续解析 + 下载脚本 → 脚本下载完 → 执行脚本
defer：HTML 解析 → 遇到 script → 继续解析 + 下载脚本 → HTML 解析完 → 执行脚本
1<!-- 同步加载（阻塞） -->
2<script src="app.js"></script>
3
4<!-- 异步加载（不保证顺序） -->
5<script src="analytics.js" async></script>
6
7<!-- 延迟执行（保证顺序） -->
8<script src="app.js" defer></script>
9
10<!-- 多个 defer 脚本按顺序执行 -->
11<script src="lib.js" defer></script>
12<script src="app.js" defer></script>