HTML、CSS 与 JavaScript 网站开发基础

文章定位：HTML、CSS、JavaScript、语义化、响应式和异步请求

核心结论

浏览器解析 HTML 建立 DOM，解析 CSS 计算布局并绘制，JavaScript 负责事件和异步交互。语义结构、键盘操作和错误反馈应先于视觉细节。

<main>
  <h1>账户设置</h1>
  <form>
    <label for="email">邮箱</label>
    <input id="email" name="email" type="email" required>
    <button type="submit">保存</button>
  </form>
</main>

布局应从内容层级出发，使用 Grid 或 Flex 建立清晰结构。移动端不仅是缩小桌面页面，还要重新检查触控目标、表单和信息密度。异步请求要处理加载、成功、失败和取消状态。

const form = document.querySelector("form")
form.addEventListener("submit", async (event) => {
  event.preventDefault()
  const response = await fetch("/api/profile", { method: "POST" })
  if (!response.ok) throw new Error("保存失败")
})

上线前检查语义、可访问性、移动端、资源缓存、CSP 和接口失败后的用户反馈。

参考资料

1 2