最简三段式HTML结构为<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>网页标题</title></head><body><header><h1>标题</h1></header><main><p>内容</p></main><footer><p>页脚</p></footer></body></html>。
HTML网页最简三段式结构长什么样
浏览器能正常显示、验证通过、适配现代标准的最小可行HTML结构，就是 <!DOCTYPE html> + <html> + <head> + <body> 这四层嵌套。所谓“三段式”，实际指 <head>（元信息）、<body>（内容）、<footer>（页脚）这种语义划分，但初学者常误以为 <head> 是“第一段”——它不渲染在页面上，真正可见的只有 <body> 里的内容。
下面这段代码可直接保存为 index.html 双击打开：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<header>
<h1>欢迎来到首页</h1>
</header>
<main>
<p>这里是主要内容区域。</p>
</main>
<footer>
<p>© 2024 版权所有</p>
</footer>
</body>
</html>
为什么 <meta charset="UTF-8"> 不能省略
没加这行，中文会乱码，尤其 Windows 记事本默认保存为 GBK 编码，浏览器按 UTF-8 解析就崩了。不是所有编辑器都默认 UTF-8，VS Code 默认是，但记事本、Sublime Text 新建文件时未必是。
-
<meta charset="UTF-8">必须写在<head>最前面，越靠前越好，最好紧贴<head>开始标签 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 过时写法，HTML5 只认charset属性 - 如果用了
<script>标签且含中文字符串，没设 charset 也可能报错或显示异常
<header>、<main>、<footer> 是必须的吗
不是必须的，但强烈建议用。它们是 HTML5 语义化标签，对 SEO、屏幕阅读器、后期 CSS 布局都有好处。不用也没错，写成 <div id="header"> 也能跑，但等于放弃浏览器原生语义支持。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
注意几个易错点：
-
<main>在整个文档中只能出现一次，且不能嵌套在<article>、<aside>、<header>、<footer>、<nav>里 -
<header>和<footer>可以在<article>内部再用，不限次数 - 如果只写
<body><p>hello</p></body>，完全合法，但后续加样式或 JS 时会难定位
初学者最容易漏掉的两个细节
一是 lang="zh-CN" 属性。它告诉浏览器和辅助工具当前页面语言，影响拼写检查、语音朗读节奏、字体回退逻辑。不加不会报错，但国际化场景下会出问题。
二是 <title> 标签。它不显示在页面上，但出现在浏览器标签页、收藏夹、搜索引擎结果里。很多新手删掉它，导致打开网页时标签页只显示“无标题文档”。
这两个东西都不影响页面渲染，但会影响真实使用体验——别人分享你的链接时，看到的是空 title；视障用户用读屏软件时，听到的是“未知语言文档”。这些细节不在控制台报错，却让网页“不够完整”。
