P89LPC920/921/922嵌入式开发：模拟比较器、看门狗与IAP-Lite实战指南
2026/6/25 22:21:13
1.DOCTYPE
告诉浏览器当前 HTML 文档遵循哪个版本的 HTML 规范，让浏览器按对应标准解析页面，避免进入"怪异模式"。
写法：<!DOCTYPE html>
2.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>：指定解析规范<html lang="zh-CN">：告诉搜索引擎和屏幕阅读器页面语言<head>：存放元信息（字符编码、视口设置、标题、引入 CSS/JS）<body>：页面可见内容区
3.HTML 语义化，有什么好处
语义化就是用有明确含义的标签描述内容，比如用<nav>表示导航，而不是<div class="nav">。
好处：
好维护：代码结构一目了然，团队协作效率高
助 SEO：搜索引擎能识别重点内容（
<article>、<h1>等），提升排名无障碍：屏幕阅读器能读出标签含义，方便视障用户
代码简洁：少写冗余的 class 命名
4.语义化标签
| 标签 | 用途 |
|---|---|
<header> | 页面或区块的头部 |
<nav> | 导航区域 |
<main> | 页面核心内容区（全页面只能有一个） |
<article> | 独立完整的内容（博客、新闻） |
<section> | 逻辑分区（文章章节、商品分区） |
<aside> | 侧边辅助内容 |
<footer> | 页面或区块的底部 |
<figure>+<figcaption> | 图片/图表及其说明 |
5.<section>和<div>有什么区别？
<section>表示有主题的逻辑分区，通常应该带有标题（<h2>-<h6>）；而<div>是无语义的通用容器，仅用于布局或样式分组。