前端入门笔记

个人学习 HTML / CSS / JavaScript 的入门练习与踩坑记录。

1. HTML 基本结构

2026-08-28 · 学习笔记

一个网页由 <head>（页面信息）和 <body>（可见内容）两部分组成。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个页面</title>
</head>
<body>
  <h1>你好，世界</h1>
  <p>这是我的第一个网页。</p>
</body>
</html>

2. CSS 选择器

2026-08-30 · 学习笔记

常用选择器有三种：标签选择器、类选择器（.class）、id 选择器（#id）。

/* 标签选择器 */
p { color: #333; }

/* 类选择器 */
.card { border-radius: 8px; }

/* id 选择器 */
#header { background: #4a6fa5; }

3. 用 Flex 做一个卡片布局

2026-09-12 · 学习笔记

Flex 布局用来横向排列卡片非常方便，gap 控制间距，flex-wrap 让内容换行。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 240px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

4. JavaScript 操作 DOM

2026-09-09 · 学习笔记

用 querySelector 选中元素，再修改它的内容或样式。

const title = document.querySelector("#title");
title.textContent = "内容被 JS 修改了";
title.style.color = "#4a6fa5";

5. 小练习：点击按钮计数

2026-09-11 · 练习源码

一个最简单的交互练习：点击按钮，数字加一。

<button id="btn">点我</button>
<span id="num">0</span>

<script>
  let count = 0;
  const btn = document.getElementById("btn");
  const num = document.getElementById("num");

  btn.addEventListener("click", () => {
    count++;
    num.textContent = count;
  });
</script>