HTML网页开发应先明确需求再编码，核心结构仅需DOCTYPE、html、head（含UTF-8声明）、body及内容；标签须语义化，路径与加载时机影响CSS/JS生效，本地测试需避免file://协议限制。
做 HTML 网页不是“从零开始写代码”，而是先明确它要解决什么问题——是展示静态信息？接表单提交？还是嵌入到某个系统里当内嵌页？没想清这点，后面所有操作都在堆废代码。
怎么快速搭出一个能打开的 .html 文件
核心就三行：声明文档类型、根元素、可见内容。别一上来就搜“响应式模板”或“CSS 框架”，那会掩盖最基础的加载逻辑。
常见错误现象：页面空白、中文乱码、样式不生效，八成是因为没加 <meta charset="UTF-8"> 或漏了 根标签。
- 新建一个纯文本文件，后缀改成
index.html - 至少写这五部分：
+ <code>+（含<meta charset="UTF-8">）++ 一行文字 - 用浏览器直接双击打开，别用 VS Code 内置预览——它可能绕过本地文件协议限制，导致后续 JS/CSS 加载失败
HTML 标签选不对，CSS 和 JS 就容易失效
比如用 <div> 包按钮，而不是 <code><button></button>；用 <span></span> 做标题，而不是 <h2></h2>。表面看都“能显示”，但实际影响语义、可访问性、甚至某些 JS 库的默认行为（如 form.addEventListener('submit', ...) 只认 <form></form> 和 <button type="submit"></button>）。
立即学习“前端免费学习笔记（深入）”；
使用场景决定标签选择：
- 要用户点一下就发请求？优先用
<button></button>，不是<div onclick="..."> <li>展示一段带层级的说明文字？用 <code><h2></h2>、<p></p>、<ul></ul>，别全塞进<div> <li>图片必须有替代文本？<code><img src="x.jpg" alt="产品特写图">，空alt=""也比不写强 - CSS 放
里，用<link rel="stylesheet" href="style.css">；路径是相对于 HTML 文件的位置，不是相对于当前编辑器目录 - JS 默认同步阻塞解析，放
底部最安全；如果必须放，加defer属性：<script src="app.js" defer></script> - 本地测试时避免用
file://协议加载外部 API 或字体，浏览器会因跨域策略报CORS错误——这时得开个本地服务，比如 Python 的python3 -m http.server
引入 CSS 和 JS 时路径和时机最容易出错
错误现象：net::ERR_FILE_NOT_FOUND、Uncaught ReferenceError: xxx is not defined。根本原因常是路径写错，或 JS 在 DOM 元素还没加载完就执行了。
参数差异和兼容性影响：
真正难的从来不是写出合法 HTML，而是判断哪些标签该由你写、哪些该交给框架/后台生成；哪些交互该用原生表单提交、哪些必须走 fetch。这些决策点藏在需求里，不在语法手册中。
