Elements面板中灰色斜体标签是浏览器自动修复HTML语法错误后的残骸，常见于<p>内嵌<div>、漏闭合标签或语义结构混乱；需通过Edit as HTML、innerHTML比对及W3C逆向排查定位问题。
Elements面板里结构不对，先看灰色斜体节点
HTML简历代码不报错但渲染错乱，大概率是浏览器自动修复了语法错误，而修复结果和你预期不一致。Elements面板中出现<div>、<section>等标签显示为灰色斜体，就是最直接的信号——它不是“美化”，是浏览器强行闭合或拆分后留下的残骸。
常见诱因包括：
- <p>里嵌了<div>，导致<p>被提前截断
- 漏写</section>或</div>，后续所有块级元素都挂到<body>下
- 多个<h2>连续出现却没包裹在语义容器里，部分浏览器会重排DOM层级
验证方法：
- 右键父级<section> → “Edit as HTML”，删一个字符再回车：如果子树整体重排，说明原始结构已被修正
- 在Console执行document.body.innerHTML，把输出结果和源码逐行对比，重点关注多出的闭合标签或消失的包裹层
W3C验证器报错但找不到对应行？逆向查开放栈
W3C validator提示End tag for element 'section' seen, but there were open elements，别急着在报错行补</section>。这类错误90%是前面几十行某处漏闭合，导致浏览器把后续所有块级标签都当成它的子元素。
正确做法：
- 打开Elements面板，找到报错的那个<section>，看它的实际父级是谁（鼠标悬停在标签上，左侧会显示完整路径）
- 沿着父链往上点，直到看到一个明显“不该是它爹”的容器（比如<section>挂在<p>下面）
- 回到源码，从那个异常父容器开始往前查，重点盯<div>、<article>、<section>是否成对出现
顺带提醒：htmlhint必须启用tagname-lowercase和attr-value-double-quotes，否则像href=https://a.b这种缺引号的写法会被放过，而W3C验证器会直接标红
本地双击打开简历HTML，mailto/tel链接不生效？协议限制在作祟
用file://协议打开HTML简历时，mailto:和tel:链接点击无反应，不是你写错了，是浏览器同源策略拦截了这些协议。Gmail、ATS系统、PDF导出工具也依赖这些链接可识别，所以不能跳过验证。
立即学习“前端免费学习笔记（深入）”；
解决路径：
- 启一个本地HTTP服务：npx serve（需Node.js）或python3 -m http.server 8000，然后访问http://localhost:8000/resume.html
- 确保链接写全且无JS干预：<a href="mailto:x@y.z">x@y.z</a>，不要用javascript:void(0)包装，也不要CSS隐藏后再JS显示
- 测试闭环：发邮件给自己Gmail，确认链接可点击、颜色可见（Gmail会剥离
导出PDF时中文乱码、段落断裂？print媒体查询必须硬编码
Chrome“另存为PDF”用的是独立渲染引擎，不支持flex布局、rem单位不稳定、中文字体fallback常为空白方块——这不是HTML写错，是你没告诉它“怎么印”。
关键三处必须写死：
- 字体族：@media print { body { font-family: "Noto Sans CJK SC", "Source Han Sans CN", sans-serif; } }
- 布局降级：@media print section { display: block; margin-bottom: 16px; }（别信display: flex在PDF里能工作）
- 防跨页断裂：@media print section { page-break-inside: avoid; }，尤其对“工作经历”这种长模块
漏掉<meta name="viewport" content="width=device-width, initial-scale=1">也会让PDF按移动端缩放，文字糊成一团——这个meta标签不是给手机看的，是给PDF渲染引擎看的
