HTML/CSS/JS 学习笔记

前端三件套复习笔记：掌握结构、样式、行为三者的配合，能独立搭页面、接接口，并为学习 Vue 铺路。

1. HTML/CSS/JS学习

核心概念：HTML 管结构，CSS 管样式，JS 管行为；三者最终都作用于浏览器里的同一棵 DOM 树。写页面永远"先结构、后样式、再交互"。

常用内容：

• 常用标签：div/span、h1~h6、p、a、img、ul/li、input、button、form
• CSS 布局：优先用 Flex，justify-content + align-items 即可完成居中
• JS 基础：let/const 声明变量、箭头函数、querySelector 取元素、addEventListener 绑定事件

易错点：div 是块级、span 是行内，改布局先改 display；忘写 box-sizing: border-box 会让宽高越算越大；判断相等用 === 而不是 ==。

<header>站点导航</header>
<main>
  <h1>文章标题</h1>
  <a href="https://example.com" target="_blank">外链</a>
  <img src="logo.png" alt="Logo">
</main>

* { box-sizing: border-box; } /* 统一盒模型，防止宽高出错 */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  document.querySelector('.msg').textContent = '已点击';
});

2. 自己做第一个页面

做法：从静态页开始，拆成三步：① 写 HTML 骨架（用 header/main/section/footer 语义化标签）；② 写 CSS（用类名 .card 而非 id 或标签选择器，便于复用）；③ 补 JS 交互，<script> 放在 </body> 前。

易错点：link/script 路径写错导致页面无样式无交互（先看 DevTools Console 的 404）；类名拼写不一致；样式被更高优先级规则覆盖时，用 Elements 面板查看实际生效的规则。

验证：每完成一步就刷新浏览器看效果，养成用 DevTools（Elements/Console/Network）排错的习惯。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>你好，前端</h1>
    <p id="tip">点下面的按钮试试</p>
    <button id="switchBtn">切换</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

const tip = document.getElementById('tip');
const btn = document.getElementById('switchBtn');
btn.addEventListener('click', () => {
  tip.textContent = tip.textContent === '你好' ? '前端真有意思' : '你好';
});

3. 关联后端

核心概念：前端与后端通过 HTTP 接口通信，请求/响应体通常是 JSON。写法：fetch 发请求 + async/await 处理，让异步代码读起来像同步。

要点：

• 先判断 res.ok（HTTP 状态码），再 await res.json() 解析
• 提交数据用 POST，并设置 Content-Type: application/json
• 接口尽量用相对路径（/api/...），避免本地与线上地址不一致

易错点：忘记 await，拿到的只是 Promise 对象；接口报 CORS 跨域错误时，本地开发用 Vite 的 proxy 转发解决，而不是去改后端；解析 JSON 失败时先看 Network 面板里接口的真实返回。

async function getArticles() {
  const res = await fetch('/api/articles');
  if (!res.ok) {
    throw new Error(`请求失败：${res.status}`);
  }
  const list = await res.json(); // list 是 JS 对象/数组
  renderList(list);
}

const res = await fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name, password }),
});

4. 后续学习vue

核心转变：从"操作 DOM"转向"数据驱动"——页面由数据决定，数据变、页面自动更新，几乎不用再写 document.querySelector。先掌握三件事：插值 与 v-bind 输出数据、v-for 渲染列表、@click/v-model 绑定事件与表单。

易错点：用到的数据必须在 data/ref 里声明，否则不具响应式；v-for 必须带 :key，否则列表更新出错；写 Vue 时克制 DOM 操作的老习惯，先想"数据怎么变"。

复习路线：模板语法 → 组件（props/emits 通信）→ 路由（Vue Router）→ 状态管理（Pinia）。有 HTML/CSS/JS 基础，这部分上手会很快。

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <button @click="count++">点击 {{ count }} 次</button>
</template>