必须用语义化标签（如）而非div，因其承载区域意图、支撑无障碍与SEO；布局宜用显式grid而非grid-template-areas防命名冲突；卡片内元素用flex对齐；编辑态应复用节点而非替换DOM。
个人工作台页面不是“堆完 div 再套 CSS”就能交差的地方。结构错、语义乱、响应断，后面加权限控制、嵌入数据卡片、做无障碍支持，全得返工。
为什么必须用 <nav></nav> + <main></main> + <aside></aside> 而不是一堆 <div>
<p>浏览器和读屏软件靠标签名识别区域意图：<code><nav></nav> 表示这是导航入口区，<main></main> 是当前视图核心内容，<aside></aside> 是辅助信息（如快捷操作、通知）。写成 <div class="nav">，等于把导航栏藏进黑盒——键盘 Tab 无法自动跳过它，SEO 无法提取导航权重，后期加微数据（如 <code>role="navigation"）也补不回语义损失。
-
<header></header> 只包顶部栏（Logo + 用户头像 + 消息图标），别把侧边菜单塞进去
-
<aside></aside> 放快捷入口、待办计数、系统状态，别放主功能表单
- 所有按钮（如「新建任务」「刷新看板」）必须是
<button></button>，禁用 <div onclick> 模拟
<h3>用 <code>display: grid 划分工作台四区时怎么避免命名冲突
<header></header> 只包顶部栏（Logo + 用户头像 + 消息图标），别把侧边菜单塞进去<aside></aside> 放快捷入口、待办计数、系统状态，别放主功能表单<button></button>，禁用 <div onclick> 模拟
<h3>用 <code>display: grid 划分工作台四区时怎么避免命名冲突grid-template-areas 看着直观，但一改名字就得同步修所有子元素的 grid-area，容易漏。更稳的做法是线性定义列宽行高，显式分配位置：
- PC 端：设
grid-template-columns: 240px 1fr 320px（侧边栏固定、主内容自适应、右侧面板定宽） - 移动端：用
@media (max-width: 768px)改为grid-template-rows: auto 1fr auto，再用grid-row控制各区块顺序 -
<nav></nav>设grid-row: 1; grid-column: 1 / -1，让它横跨全部列，不用起名 - Safari ≤15.4 不支持
subgrid，如果右侧面板里还要网格排布，降级用display: flex，别硬撑
<section class="card"></section> 里怎么让图标、标题、操作按钮横向对齐又不卡死
很多人用 float 或 inline-block 排卡片内元素，结果空格吃间距、换行错位、小屏溢出。Flex 是唯一靠谱解法：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 给
<section class="card"></section>设display: flex; align-items: center; gap: 0.75rem - 图标用内联
<svg></svg>（别引 Font Awesome CDN），设width: 1.25rem; height: 1.25rem; flex-shrink: 0防缩 - 标题用
<h3></h3>，加margin: 0；操作按钮用<button></button>，设margin: 0; padding: 0.25rem 0.75rem - 别给整个卡片设
white-space: nowrap，否则长任务名会撑破容器
切换「编辑态」时为什么不能删掉 DOM 再重 render
点「编辑」就 innerHTML = <input value="xxx">，表面能用，实则埋雷：焦点丢失、Tab 键链断裂、屏幕阅读器播报中断、React/Vue 组件状态不同步。
- 复用同一节点：静态文本用
<span contenteditable="true" tabindex="0">xxx</span>，而非插入新<input> - Enter 保存，ESC 取消 —— 监听
keydown事件，别只靠 blur - 禁用时不加
disabled（它会让事件失效），改用readonly+CSS: pointer-events: none; opacity: 0.7 - Safari 下
focus()可能失败，加requestAnimationFrame(() => el.focus())延迟聚焦
真正难的不是写出能显示的 HTML，而是让每个标签承担它该有的语义责任、每处布局经得起缩放和键盘导航、每次状态切换不破坏上下文。这些细节在开发时看不见，上线后才集中爆发。
