直接打开HTML文件可预览但无法调试，需用F12或右键“检查”打开开发者工具；修改DOM仅临时生效，须保存文件并刷新或使用Live Server；HTML只定义结构，样式需CSS控制。
直接打开 HTML 文件就能看到效果，但“能看”不等于“能调”——没开开发者工具，等于蒙眼修车。
怎么快速打开浏览器的开发者工具
Chrome、Edge、Firefox 都支持快捷键 F12 或 Ctrl+Shift+I（Mac 是 Cmd+Option+I）。右键网页任意空白处点“检查”，效果一样。别去菜单里翻“更多工具→开发者工具”，太慢。
常见错误现象：按了没反应 → 检查是否在网页标签页里（不是地址栏或新标签页空白页）；或者被其他软件（比如录屏、远程控制）劫持了快捷键。
- 首次打开时，默认聚焦在
Elements面板，这才是改 HTML 的主战场 -
Console面板先不用管，那是 JavaScript 报错的地方，纯 HTML 阶段基本用不到 - 关掉又重开不会丢状态，DOM 修改是实时的，但刷新页面就还原
修改 HTML 标签后为什么不生效
你在 Elements 面板里双击改了 <h1></h1> 文字，页面立刻变了——但这只是内存里的临时 DOM，没动你本地的 .html 文件。关掉标签页再重开，还是老样子。
立即学习“前端免费学习笔记（深入）”；
真正调试的第一步，是让“改完即存”。推荐两个轻量方案：
- 用 VS Code 打开文件夹，装
Live Server插件，右键 HTML 文件选“Open with Live Server”，改完保存，浏览器自动刷新 - 如果只用记事本或 Sublime，改完必须手动
Ctrl+S保存，再切到浏览器按F5—— 别跳过保存这步，90% 的“改了没变”都卡在这儿 - 注意路径问题：
<img src="logo.png" alt="零基础学HTML前端调试的第一课" >要求logo.png和 HTML 在同一目录；如果放错了，Elements面板里能看到src值，但 Network 面板会标红 404
为什么改了 <p></p> 却影响不到文字样式
HTML 只负责结构，不控制外观。你加了 <p>Hello</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11947" title="HISUI 前端框架开发指南（IRIS版）"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="HISUI 前端框架开发指南（IRIS版）" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11947" title="HISUI 前端框架开发指南（IRIS版）">HISUI 前端框架开发指南（IRIS版）</a>
<p>HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。</p>
</div>
<a href="/xiazai/skill11947" title="HISUI 前端框架开发指南（IRIS版）" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，浏览器默认给它上下边距和行高，但字体大小、颜色、对齐方式全靠 CSS。这时候去 Elements 面板右侧的 Styles 栏看，会发现只有浏览器默认样式（user agent stylesheet），没你的规则。
想立刻验证 HTML 结构是否写对，可以临时加个内联样式：
<p style="color: red; font-size: 20px;">Hello</p>
但如果长期这么干，后期维护会疯。正确做法是：在 里加 <style></style> 块，或外链一个 .css 文件。
-
<p></p>是块级元素，天生独占一行；<span></span>是行内元素，适合局部高亮，别用<p></p>包文字再强行设display: inline - 标题
<h1></h1>到<h6></h6>不要嵌套，也别为了“看起来小”就滥用<h6></h6>，语义比视觉更重要 - 所有标签闭合要配对，
<p>abc</p>对，<p>abc</p>不对——浏览器会自动补全，但补得不一定准，可能破坏后续结构
调试不是比谁改得快，而是比谁看得清：DOM 树是否如你所写、资源路径是否真实存在、修改是否真正落盘。手快不如眼准，先盯住 Elements 和文件保存状态，其他都是锦上添花。
