落地页必须添加<meta name="viewport">且置于<head>靠前位置，标准写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">；<img>标签须设有效alt描述而非空值或泛称；链接跳转优先用<a>而非<button>；字体推荐系统字体栈，慎用@font-face，若使用需配font-display: swap。

落地页必须用 <meta name="viewport"> 否则手机端直接废

不加这行，iOS 和安卓 WebView 都会默认按 980px 宽度渲染，文字小得看不清，按钮点不准。很多人测试时只在桌面浏览器调样式，上线才发现移动端完全不可用。

• 必须放在 <head> 里，且越靠前越好（最好在 <title> 后）
• 标准写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0">
• 别写成 user-scalable=no —— 屏幕阅读器和视力障碍用户需要缩放，很多应用商店审核会拒

img 标签没加 alt 会影响 SEO 和可访问性

搜索引擎抓取单品页时，<img> 的 alt 是重要文本信号；屏幕阅读器也全靠它描述图片内容。留空或写“图片”“产品图”等于没写。

• 真实场景下，alt 要描述画面核心信息，比如：alt="深灰色羊毛混纺针织开衫，圆领，落肩袖，模特侧身站立"
• 纯装饰图用 alt=""（空字符串），不是删掉属性，也不是写 alt="spacer"
• 如果用了 srcset 或 picture，每个 img 仍需独立 alt，不能复用

按钮跳转用 <a> 还是 <button>？看行为本质

落地页里“立即购买”“查看详情”这类链接，绝大多数该用 <a href="..."></a>，而不是包裹 href 的 <button>。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• <a> 天然支持右键新标签页、复制链接、书签保存，用户习惯已固化
• <button onclick="location.href=..."> 会破坏这些能力，且 JS 失效时按钮变死链
• 只有真正需要执行 JS 逻辑（如弹窗表单、埋点上报后跳转）才用 <button>，且必须手动加 role="link" 和键盘 Enter 支持

字体加载慢？优先用系统字体栈，慎用 @font-face

单品页加载速度直接影响转化率。实测：一个未优化的自定义字体（尤其 WOFF2 > 100KB）会让首屏时间多拖 300–800ms，且在弱网下极易 FOIT（Flash of Invisible Text）。

立即学习“前端免费学习笔记（深入）”；

• 标题可用 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
• 中文正文强烈建议不用 Web Font，系统字体（如 iOS 的 Helvetica Neue、Android 的 Roboto）渲染更稳、更省资源
• 真要用自定义字体，务必加 font-display: swap;，避免文字长时间空白

落地页不是炫技场，HTML 结构干净、语义正确、加载可控，比任何 CSS 动效都更影响最终下单率。最常被忽略的是 alt 和 viewport —— 它们不显眼，但一漏就让整页失效。