关于网页，
一些慢慢积累的经验。

先把页面结构写清楚，再考虑样式

做一个简单网页时，可以先忽略颜色和装饰，想清楚读者会按什么顺序阅读：先知道这是什么页面，再看到主要内容，最后找到补充说明。结构清楚之后，样式更容易保持一致。

给内容一个合适的位置

header 放站点名称和导航，main 放页面的主要内容，独立的笔记可以使用 article，页尾说明放在 footer。这些标签表达的是内容的用途，不只是外观。

<header>站点名称与导航</header>
<main>
  <article>
    <h1>这篇笔记的标题</h1>
    <p>从一段清楚的介绍开始。</p>
  </article>
</main>
<footer>页面的补充说明</footer>

标题也要有顺序：页面主标题使用 h1，下面的主要章节使用 h2，章节内部的小标题再使用 h3。不必为了字号大小跳过标题层级，字号交给 CSS 处理。

让小屏幕也能好好阅读

响应式布局可以从几个小问题入手：文字会不会太挤，代码会不会撑开页面，链接是否容易点击。先把这些基础处理好，比一开始就设置很多屏幕尺寸更有用。

留白和宽度一起控制

正文容器既要有最大宽度，也要在两侧留出空白。在窄屏幕上，侧边目录可以自然移到正文上方，让读者沿着一个方向阅读。

.page {
  width: min(960px, calc(100% - 40px));
  margin-inline: auto;
}

pre {
  overflow-x: auto;
}

代码块允许在自身内部横向滚动，能避免整页被长代码撑宽。正文适当增加行高，段落之间保留间距，也能让长一点的文章读起来更轻松。

检查时多走一步

• 把窗口逐渐缩窄，观察内容是否被挤出屏幕。
• 用键盘依次访问链接，确认焦点能被看见。
• 放大文字后再读一遍，看看标题、正文和导航是否仍然清楚。

公开的练习，用简单的示例数据

分享代码或整理学习笔记时，示例只需要说明问题。演示列表布局可以用虚构的标题，练习数字格式可以用几组自定数值，没有必要复制日常使用的完整资料。

从需要说明的内容倒推数据

假设要练习一张学习进度表，保留编号、主题和进度就够了。下面是完全虚构的演示记录：

{
  "id": "sample-001",
  "topic": "CSS 基础练习",
  "progress": 60
}

整理公开笔记时，可以再检查一遍代码、图片和文字：账号口令、访问密钥、真实联系方式，以及没有必要公开的原始记录，都不应出现在示例里。截图中没有显示的内容，也可能藏在文件名或复制出来的链接中。

用少量数据验证边界

除了常见值，还可以准备空内容、很长的标题和数值为零的记录。少量有代表性的例子，往往比很多重复数据更容易帮助发现排版问题。