Claude风格HTML汇报文件
下载
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
浏览器解析html时会自动修正错误结构，导致elements面板dom与源码不一致，需以面板为准；路径、编码、属性引号等细节疏忽易引发静默失效。
浏览器 Elements 面板显示的 DOM 和你写的 HTML 对不上
这不是 bug，是浏览器在“救场”——遇到未闭合、交叉嵌套或非法结构时，它会按自己的规则重排 DOM。你写的是 <div><p>文本</p></div>
<div><p>文本</p></div>，甚至多出几个空 <p></p>。后果是 CSS 选中失效、querySelector 找不到目标、JS 操作位置偏移。
- 永远以 Elements 面板为准，不是源码视图
- 重点盯
<table>、<code><ul></ul>、<ol></ol>内部——这些标签的嵌套容错极低，一个错位就整块塌陷 - 用 VS Code 装
Auto Close Tag插件，但别全信：它不处理模板字符串里的 HTML 或条件注释 - Network 面板里点开每个请求，看 Status 是不是 200，Preview 是否有内容，Response Headers 的
Content-Type是否正确 - 图片路径别用
images/logo.png硬写，优先用相对路径并确认当前 HTML 所在层级 - 本地开发务必起服务：
npx serve或 VS Code 的Live Server，绕过file://限制 - 所有属性值统一用双引号包裹：
class="header"，不是class=header -
alt不要留空，哪怕写alt="装饰性图片"或alt=""（仅限纯装饰图） -
href和src值为空字符串时，浏览器会尝试加载当前页面或根路径，极易引发意外请求 必须是文件第一行，前面不能有任何字符（包括空格、BOM）-
<meta charset="UTF-8">必须是中第一个标签，紧随开始 - 服务端响应头
Content-Type: text/html; charset=utf-8优先级高于 HTML 内声明，Nginx/Apache/PHP 都得同步配
img、script、link 加载失败但控制台没报错
常见原因是路径拼写、大小写、协议或 MIME 类型不匹配。比如本地双击打开 HTML 文件（file:// 协议），fetch 请求会被 CORS 拦截，但控制台只显示“Network error”，不提 CORS；又或者服务器返回 text/plain 而不是 text/css，CSS 就静默失效。
alt、href、src 属性值缺失或引号不全
属性值不加引号（如 href=about.html）在简单场景下能运行，但一旦值含空格、& 或 =，就会截断或解析失败；alt 空着（<img src="x.jpg" alt="">）虽不报错，却破坏可访问性，且部分屏幕阅读器会跳过该元素。
DOCTYPE 缺失或 <meta charset> 位置靠后
没有 ，浏览器进怪异模式，盒模型、浮动、Flex 布局行为全乱；<code><meta charset="UTF-8"> 如果不在 最前面，中间夹了其他 <meta> 或 <title></title>，部分浏览器会忽略它，导致中文变方块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
