用语义化html结构（如、分类）+ 简单响应式css实现可维护书签页，避免js动态加载导致file://协议下失效，统一用favicon api图标，强制https链接并注释用途，提升点击热区与死链检查。
怎么用 HTML 做一个可维护的书签收藏页
纯 HTML 实现书签页不难，难点在「改起来不痛苦」——比如新增链接要改几处？分类要不要重写结构？图标怎么统一管理？答案是：用语义化结构 + 简单 CSS 控制布局，避免嵌套过深或硬编码样式。
核心思路是把每个书签当作一个 <article></article> 或 <li>，标题、链接、分类、备注都用标准标签包裹，后续加 JS 搜索或按标签筛选才有基础。
- 用
<h2></h2>做分类标题（如「前端工具」），别用<div class="title"> <li>每个书签用 <code><article></article>包裹，内部用<a href="..."></a>+<p></p>描述，方便未来加target="_blank"或rel="noopener" - 图标优先用 favicon API（
https://www.google.com/s2/favicons?sz=32&domain_url=xxx），别手动存一堆.ico文件 - 本地双击打开 → 必须用内联 HTML，别依赖外部数据源
- 如果已有 JSON 列表，可用简单脚本预编译成 HTML（比如用 Node.js 的
fs.readFileSync+ 字符串模板），而不是运行时 fetch -
<a></a>标签里加上rel="noopener"和target="_blank"是基本安全习惯，防止 opener 泄露 - 给
<a></a>设display: block+padding: 12px 16px，增大点击热区 - 用
@media (min-width: 768px)触发多列，配合column-count: 2或display: grid，别用浮动 - 图标用
<img>时加loading="lazy"，避免滚动前就加载所有 favicon - 避免在
<a></a>里嵌套<div> —— 有些老安卓浏览器对 inline 元素里套块级元素解析异常<h3>容易被忽略的细节：链接有效性与更新成本</h3> <p>书签页最大的失效风险不是样式崩，而是链接 404。人工检查效率低，但可以靠极简方式降低维护压力：</p> <ul> <li>所有链接用完整协议（<code>https://开头），别写//example.com—— 本地文件里会变成file:///example.com直接挂掉 - 在链接后加注释说明用途，比如
<!-- API 文档，v2.3 -->，半年后回来一眼知道这链接还值不值得留 - 定期用命令行检查死链：
linkchecker index.html（需安装linkchecker），比肉眼扫快得多 - 别把书签页当成临时收藏夹——真正常用的 20 个链接，比堆 200 个“可能有用”的链接实用得多
为什么直接写 <a></a> 链接比用 JS 渲染更稳妥
很多人想用 JSON + JS 动态生成书签列表，结果本地双击打开 HTML 时因浏览器禁用 file:// 下的 AJAX 报错：Failed to load resource: net::ERR_FILE_NOT_FOUND。纯静态 HTML 没这问题，开箱即用。
真要动态加载，得部署到本地服务器（如 Python 的 python -m http.server），否则连 fetch('./bookmarks.json') 都失败。
如何让书签页在手机和电脑上都好点
不用框架，只靠几行 CSS 就能响应式排列：小屏竖排，大屏两列或三列。关键不是“多好看”，而是“点不歪”——触摸目标太小，手指容易误触隔壁链接。
