必须用HTML单独写隐私政策页。需满足GDPR、CCPA及《个人信息保护法》要求：纯静态、可直链访问、语义化结构（main/section/h2/dfn）、内联资源、禁用JS依赖、支持无障碍与SEO。
隐私政策页面要不要用 HTML 单独写？
要。不是“可选”，而是必须——privacy.html 或 /legal/privacy 这类独立静态页，是 GDPR、CCPA 和国内《个人信息保护法》明确要求的落地载体。用 JavaScript 动态渲染、或藏在 Modal 里点开才显示，都不算合规意义上的“可访问、可存档、可被爬虫索引”的隐私政策。
关键判断点就一个：用户能否在不执行任何 JS、不登录、不点击二级菜单的前提下，直接通过 URL 访问并打印该页面。做不到，就先别调样式，先把结构补全。
HTML 结构怎么写才符合法律和 SEO 双重要求？
核心是语义化 + 显式层级 + 机器可读锚点。别套 Bootstrap 卡片或 Vue 组件壳子，从原生 HTML5 标签起步：
- 根容器用
<main>，别用 <div id="content">
- 每条政策主题用
<section> 包裹，加 id（如 id="data-collection"），方便外部链接精准跳转
- 小标题统一用
<h2>（不是 <h3> 或 <span class="title">），确保屏幕阅读器和搜索引擎能识别主干结构
- 涉及法律术语的地方（如“匿名化处理”“单独同意”），用
<dfn> 包裹，并配 title 属性解释，比如 <dfn title="指无法识别特定自然人且不能复原的处理方式">匿名化处理</dfn>
<main>，别用 <div id="content">
<section> 包裹，加 id（如 id="data-collection"），方便外部链接精准跳转<h2>（不是 <h3> 或 <span class="title">），确保屏幕阅读器和搜索引擎能识别主干结构<dfn> 包裹，并配 title 属性解释，比如 <dfn title="指无法识别特定自然人且不能复原的处理方式">匿名化处理</dfn>
别省略 <meta name="robots" content="index, follow"> —— 很多团队误加 noindex，结果监管检查时发现页面根本没被收录，反而构成“未公开告知”风险。
用户拒绝 Cookie 后，隐私政策页还能加载吗？
能，而且必须能。这是硬性前提。
- 整个页面 HTML 必须纯静态，不依赖任何第三方脚本（包括 Google Analytics、Hotjar、甚至自家的埋点 SDK）
- 所有 CSS 写在
<style> 标签内或内联 style 属性里，禁用外部 <link rel="stylesheet">（避免被 Consent Manager 拦截）
- 图片用
<img src="data:image/svg+xml;base64,..."> 内联或绝对路径，禁用相对路径下未声明 CORS 的资源
- 如果用了字体（如思源黑体），必须本地托管 +
@font-face 声明，不能调 Google Fonts
<style> 标签内或内联 style 属性里，禁用外部 <link rel="stylesheet">（避免被 Consent Manager 拦截）<img src="data:image/svg+xml;base64,..."> 内联或绝对路径，禁用相对路径下未声明 CORS 的资源@font-face 声明，不能调 Google Fonts常见翻车点：404 Not Found 的 consent.js 报错导致整页白屏；或者用户关掉 Cookie 后，fetch('/api/version') 失败连带阻塞了 DOM 渲染 —— 这些都会让监管认定“服务不可用即告知失效”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
移动端适配和可访问性最容易漏什么？
不是 flex 布局对齐，而是两个具体动作：
- 给所有
<a href="#data-use"> 锚点链接加 rel="noopener"，否则 iOS Safari 在某些版本下会触发白屏（尤其从微信内嵌浏览器跳转回来时）
-
<section> 内的段落必须用 <p>，禁用 <div> 模拟段落 —— 否则 VoiceOver 会把整块文字读成一行，无法停顿，视障用户根本没法理解“我们收集哪些信息”和“我们如何共享这些信息”是两个独立条款
<a href="#data-use"> 锚点链接加 rel="noopener"，否则 iOS Safari 在某些版本下会触发白屏（尤其从微信内嵌浏览器跳转回来时）<section> 内的段落必须用 <p>，禁用 <div> 模拟段落 —— 否则 VoiceOver 会把整块文字读成一行，无法停顿，视障用户根本没法理解“我们收集哪些信息”和“我们如何共享这些信息”是两个独立条款最后提醒一句：日期字段别写“更新于 2024 年”，得是 <time datetime="2024-07-12">2024年7月12日</time>。监管系统真会扒 datetime 属性校验时效性，手写中文日期等于没写。
立即学习“前端免费学习笔记（深入）”；
