共计 1409 个字符，预计需要花费 4 分钟才能阅读完成。
这是一篇没什么重点内容的学习笔记，老狗是个初学者，再加上年纪大了记忆力有些下降（绝对不是撸多了）需要记忆一些容易忘记的，自认为比较重要的内容。
以前学过一部分HTML语法，但是现在完全忘记了，连最基本的a标签都忘记了，毕竟好记性不如烂笔头。
以下内容是咱将笔记用AI进行整理过后的.
在编写 HTML 页面时，正确设置字符编码和使用语义化标签是保证页面可读性、可访问性和搜索引擎友好性的基础。本文整理了几个初学者容易忽略但非常重要的知识点，包括 UTF-8 编码的作用、
<main> 元素的用途，以及 <div> 与 <section> 的使用区别。1. 必须声明 UTF-8 字符编码
HTML 文档应始终在
<head> 中明确指定字符编码：<meta charset="UTF-8" />UTF-8 是一种支持 Unicode 标准的字符编码格式，能够正确表示包括中文在内的几乎所有语言字符。如果不声明编码，浏览器可能使用默认或错误的编码方式解析文本，导致中文或其他非 ASCII 字符显示为乱码。
该声明应尽可能靠前放置，通常紧跟在
<head> 开始标签之后。2. <main> 表示页面主内容
<main> 元素用于包裹文档中唯一的主要内容区域。这部分内容应是用户访问当前页面的核心目的所在，例如：- 博客文章正文
- 商品详情信息
- 搜索结果列表
注意事项：
- 一个页面只能包含一个
<main>元素。 - 导航栏、页眉、页脚、侧边栏、广告等内容不应包含在
<main>内。 - 使用
<main>有助于提升页面的无障碍访问能力，屏幕阅读器会将其识别为主要内容区域。
3. <div> 是无语义的通用容器
<div> 元素本身不携带任何语义信息。它仅作为一个块级容器，用于对元素进行分组，通常出于以下目的：- 应用统一的 CSS 样式
- 通过 JavaScript 对一组元素进行操作
由于
<div> 没有语义，不应将其用于表示具有特定含义的内容结构（如章节、导航、文章等）。在存在更合适的语义化标签时，应优先使用后者。4. <section> 表示有主题的内容区块
<section> 用于表示文档中一个具有独立主题的逻辑区块。典型场景包括：- 文章的各个章节
- 产品介绍的不同部分（如“规格”、“评价”）
- FAQ 分组
每个
<section> 通常应包含一个标题（如 <h2>、<h3> 等），以明确其主题。如果没有自然的标题，可能说明该内容并不适合使用 <section>。与
<div> 不同，<section> 具有明确的语义，有助于：- 改善页面结构的可读性
- 提升搜索引擎优化（SEO）效果
- 增强无障碍访问支持
5. 如何选择合适的标签？
| 使用场景 | 推荐标签 | 说明 |
|---|---|---|
| 页面核心内容（唯一） | <main> |
表示用户访问页面的主要目标内容 |
| 具有独立主题和标题的内容区块 | <section> |
用于逻辑分明的章节或模块 |
| 仅为样式或脚本分组，无特定语义 | <div> |
纯布局或功能容器 |
判断方法：
如果一段内容可以合理地加上一个标题，并且能独立表达一个完整意思，则应考虑使用
如果一段内容可以合理地加上一个标题，并且能独立表达一个完整意思，则应考虑使用
<section>；否则，使用 <div>。总结
- 始终在 HTML 文档头部声明
<meta charset="UTF-8" />。 - 使用
<main>包裹页面主内容，且仅使用一次。 - 优先使用语义化标签（如
<section>）表达内容结构，避免滥用<div>。 <div>仅用于无语义的样式或脚本分组。
遵循这些基本原则，有助于写出结构清晰、易于维护且对用户和搜索引擎友好的 HTML 代码。
正文完
