发布于 2026-07-09 # 前端 # 示例

HTML、CSS、JS：构建网页的三件套

一个网页通常由三部分配合完成：HTML 负责内容结构，CSS 负责视觉表现，JavaScript 负责交互行为。它们像一篇文章的骨架、排版和动作说明，分工清楚后页面就会更容易维护。

HTML：描述内容结构

HTML 使用标签标记标题、段落、链接、图片、列表等内容。语义化标签可以帮助浏览器、搜索引擎和辅助技术理解页面。

<article>
  <h1>我的第一篇文章</h1>
  <p>这里是文章正文。</p>
</article>

CSS：控制页面样式

CSS 决定文字大小、颜色、间距、布局和响应式效果。把样式放进独立文件，可以让多个页面共享同一套视觉规则。

.article {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.8;
}

JavaScript：添加交互行为

JavaScript 可以响应点击、输入、滚动等事件。例如下面的代码会在按钮被点击时显示一条提示。

const button = document.querySelector("button");
button.addEventListener("click", () => {
  alert("你好，JavaScript！");
});

一个简单组合

当三者组合在一起时，HTML 提供按钮，CSS 让按钮更清晰，JavaScript 让按钮产生反馈。静态页面虽然不连接后端，也可以呈现完整的阅读和浏览体验。

« 返回主页