HTML、CSS、JavaScript

前端三件套分别做什么

技术	负责什么	生活化比喻
HTML	页面结构和内容	房子的骨架与房间
CSS	颜色、布局、字体和响应式	装修与动线
JavaScript	交互、状态和请求	电路与控制系统

一个按钮通常同时需要三者：HTML 放按钮，CSS 让它看起来像按钮，JavaScript 处理点击后的动作。

HTML：先把内容说清楚

优先使用有含义的标签：header、nav、main、section、button、form 和标题层级。语义清楚有助于搜索引擎、读屏器和后续维护。

<main>
  <h1>学习中心</h1>
  <p>从基础到部署，按路线学习。</p>
  <a href="/learn/">开始学习</a>
</main>

CSS：先解决布局，再做装饰

常见布局工具：

• Flex：一维排列，例如导航和按钮组；
• Grid：二维布局，例如卡片墙和后台面板；
• max-width、margin: 0 auto：控制阅读宽度；
• 媒体查询：根据屏幕宽度调整布局；
• CSS 变量：统一颜色、间距和圆角。

.container {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
}

JavaScript：交互要有状态和反馈

点击按钮后，用户应该知道正在处理、成功了还是失败了。不要只改变颜色而不提供文字提示，也不要把异常静默吞掉。

button.addEventListener('click', async () => {
  button.disabled = true;
  try {
    await saveSettings();
    showMessage('已保存');
  } catch (error) {
    showMessage('保存失败，请稍后重试');
    console.error(error);
  } finally {
    button.disabled = false;
  }
});

让 AI 帮你写前端

不要只说“做一个漂亮页面”。告诉它用户、目标、内容、参考风格、断点、无障碍要求、不能引入的依赖，以及如何验收。

建议按顺序让 AI：

1. 解释现有 HTML/CSS/JS 的结构；
2. 先提出信息架构和布局；
3. 实现一个最小版本；
4. 在手机、平板和桌面宽度检查；
5. 修复可访问性、溢出和加载状态问题。

新手练习

做一个只有“标题、说明、输入框、按钮和结果区域”的页面：先用纯 HTML 完成，再加 CSS，最后用 JavaScript 做本地校验。每一步都能在浏览器中单独验证。

官方资料

• MDN：HTML
• MDN：CSS
• MDN：JavaScript