一个网页里的 HTML、CSS 和 JavaScript

HTML：把内容组织起来

HTML 用标签说明内容的结构。一篇文章通常有标题、段落、列表和链接；这些内容的先后关系应当在没有样式时也能读懂。标题应按层级组织，不应该只因为想让文字变大，就随意跳过标题级别。

例如，h1 表示页面的主要标题，p 表示段落，a 表示可以前往另一个地址的链接。把导航写成链接、把操作写成按钮，也能让键盘访问和辅助阅读工具更容易理解页面。

CSS：安排外观和布局

CSS 负责颜色、字号、间距和布局。同一份文章内容可以在宽屏上显示为多列，也可以在手机上改成一列，而不必复制两份 HTML。调整页面时，先看内容是否清楚，再决定装饰和动画是否必要。

• 正文需要足够的行高和对比度，避免浅灰文字落在过亮或过暗的背景上。
• 段落宽度不宜无限延长，长行会增加换行后寻找下一行的负担。
• 小屏幕上应优先保证文字可读和链接易点，不依赖横向滚动查看普通正文。

JavaScript：按需增加交互

JavaScript 可以响应点击、筛选内容或更新页面状态，但一篇静态笔记并不一定需要脚本。标题、正文、导航和站点说明通常都可以直接写入 HTML，让页面在脚本没有加载时仍然可读。

只有当功能确实需要交互时，再增加脚本，并考虑加载失败、输入为空以及键盘操作等情况。页面能显示出来，不等于所有操作都已经正常工作。

一次简单的检查顺序

1. 先检查正文、标题和链接是否完整。
2. 再检查手机与桌面宽度下的换行、间距和可读性。
3. 最后检查确实存在的交互，以及脚本或资源加载失败时的表现。

主题：网页基础 · 内容整理日期：2026 年 10 月 27 日