这里是 zcb 的个人学习空间。
记录编程中的理解、实践里的细节，以及每一次从不会到会。
从基础出发，把每个小问题弄清楚。
先把内容组织清楚，再考虑怎样呈现。一个简单页面，也可以是理解网页结构的起点。
HTML 描述页面的内容和结构，例如标题、段落、导航和文章。CSS 负责颜色、间距、字体与布局。先写出有意义的结构，再添加样式，通常更容易维护。
使用 header 表示页头，nav 表示导航，main 承载主要内容，article 包裹独立文章。标题按层级排列，而不是只根据字号选择标签。
<article>
<h2>我的第一篇笔记</h2>
<p>从一个小页面开始学习。</p>
</article>暂时关闭样式，确认内容仍然能按顺序阅读；缩小窗口，检查长文本是否超出页面；用键盘逐个访问链接，确认焦点可见。
转换每一项、筛选符合条件的项、汇总结果。把目的说清楚，代码的选择就简单了。
map 适合将数组中的每一项转换成新值；filter 用来保留满足条件的项；reduce 适合逐步累积一个结果，例如总和。
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8]
const even = numbers.filter(n => n % 2 === 0);
// [2, 4]
const total = numbers.reduce((sum, n) => sum + n, 0);
// 10这些方法不会自动深拷贝数组中的对象；在回调里修改对象属性，仍可能影响原对象。给 reduce 提供初始值，可以让空数组的处理更明确。
不必把所有逻辑都塞进一行。清楚的变量名和中间结果，往往比复杂的链式调用更容易理解。
让改动有迹可循，也给以后的自己留下能读懂的上下文。
通过 git status 确认文件状态，再用 git diff 阅读具体变化。暂存以后，可以用 git diff --staged 检查即将提交的内容。
git status
git diff
git add index.html style.css
git diff --staged
git commit -m "改善小屏幕上的文章排版"如果同时修改排版并修复计算逻辑，尽量拆成独立提交。提交说明写清楚具体变化，避免只写“更新”或“修改”。
密码、访问令牌和个人敏感信息不应提交到仓库。忽略规则应在添加这些文件之前设置好；已经被跟踪的文件不会因加入忽略规则而自动移除。
留白、行距和内容宽度，决定了阅读能否轻松持续。
页面容器使用最大宽度，并给左右两侧保留间距。避免对正文区域设置固定像素宽度。图片可以通过 max-width: 100% 保持在容器以内。
.page {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
img { max-width: 100%; height: auto; }检查窄屏、横屏和文字放大后的页面。导航应该能够换行；代码块可以在自身区域横向滚动；点击区域之间应有足够距离。
布局的目标是让内容始终清楚可读。断点应该根据内容何时显得拥挤来设置，而不是只记住几种设备尺寸。