HTML模板应适配场景、克制表达、不抢内容风头；语义化标签提升可维护性与无障碍支持；box-sizing: border-box须全局启用；按钮悬停需真实按压反馈；视觉设计须服从用户视线路径。
没有“最美观”的HTML模板，只有适配场景、克制表达、不抢内容风头的设计。过度装饰的模板反而会拖慢加载、干扰阅读、增加维护成本。
为什么用语义化标签比堆div更省力
很多人写登录页还习惯套三层div再加class="wrapper"class="container"class="inner"——这其实是把结构责任推给了CSS，后期改布局、加无障碍支持、做SEO都得返工。
直接用header、main、form、footer这些原生标签，浏览器自动赋予语义和默认样式基线，JS也能靠document.querySelector('main')精准取到内容区，不用靠类名猜位置。
-
form元素自带提交行为和表单验证钩子（比如checkValidity()），不用自己监听input事件做空值判断 -
label绑定for属性后，点击文字就能聚焦对应input，移动端点选面积翻倍 - 屏幕阅读器能识别
nav里的链接是导航，footer里的是版权信息，不用额外加ARIA
box-sizing: border-box必须全局启用
这是所有现代CSS布局的起点。没加它，width: 300px + padding: 16px + border: 1px 就会撑成334px，Flex/Grid计算全部错位，响应式断点全乱。
立即学习“前端免费学习笔记（深入）”；
只要漏掉这一行，后面调再多gap、flex-basis都是白忙。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法：
* { box-sizing: border-box; }，放在所有CSS最前面 - 别只写
div或.container，要覆盖::before/::after伪元素（它们默认是content-box） - 某些UI库（如Bootstrap）已内置，但自定义组件仍需确认是否被覆盖
按钮悬停动效别只用transform: scale()
单纯放大按钮看着“活泼”，但实际体验很假：没有重量感、缺乏反馈层级、移动端误触率高。用户点下去需要明确的“按压”暗示，而不是“它自己飘起来了”。
真正可用的悬停组合是：background-color变深 + box-shadow加深 + transform: translateY(1px)（模拟下压）+ transition用cubic-bezier(0.25, 0.46, 0.45, 0.94)而非ease。
- 避免
scale(1.03)：放大会导致边缘像素模糊，尤其在Retina屏上明显 - 禁用
transition: all：会意外触发字体抗锯齿重绘，造成闪动 - 移动端慎用
:hover：iOS Safari对触摸设备的:hover支持不稳定，优先用:active做按下态
渐变背景和阴影不是越多越高级
一个linear-gradient(135deg, #6a11cb, #2575fc)配box-shadow: 0 8px 24px rgba(0,0,0,0.15)看起来很酷，但真放到登录页上，会抢走input框的视觉焦点，让用户第一眼找不到输入位置。
美观的本质是引导视线路径：标题 → 输入框 → 按钮 → 提示文字。任何与这条路径冲突的视觉噪音（比如背景动画、浮动光斑、多层阴影）都会延长用户完成登录的时间。
- 深色背景配浅色文字时，务必检查对比度：WCAG AA级要求至少4.5:1，可用
color-contrast工具验证 - 卡片类容器用
border-radius: 8px足够，12px以上在小屏上会吃掉太多内边距空间 - 避免在
body上直接写background-image：图片加载失败时整个页面变成纯色块，应设background-color为降级色
最常被忽略的细节是字体回退链和行高设置——font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;和line-height: 1.5这两行代码，比所有渐变和阴影加起来对可读性的提升都大。
