【HTML+CSS+JS】前端入门第一周：从标签到九宫格，我把踩过的坑全记下来了

【HTML+CSS+JS】前端入门第一周：从标签到九宫格，我把踩过的坑全记下来了

前言

这周正式开始学前端，四天时间（10.19 — 10.22）从"网页是什么"一路敲到了能做一个小案例：朋友圈九宫格、10 秒倒计时、还有一个"不愿意"按钮的整蛊小程序。

刚开始我以为前端就是背标签，敲完这一周才发现：标签只是骨架，CSS 才是衣服，JS 才是让它动起来的那口气。这篇博客把这一周的学习路线、核心代码和踩过的坑完整整理一遍，既是复盘，也希望能帮到同样刚入门的同学。

先放一张这一周的知识地图：

HTML（骨架） → CSS（样式） → JavaScript（行为）
标签/表单 选择器/盒模型 变量/函数/DOM
表格/视频 flex / grid 定时器/事件

文章目录

• 一、HTML：网页的骨架
  • 1 文档基本结构
  • 2 文本类标签
  • 3 图片标签与路径
  • 4 表格标签
  • 5 表单标签
  • 6 视频标签
• 二、CSS：网页的衣服
  • 1 三种引入方式
  • 2 三种基础选择器
  • 3 颜色的三种表示
  • 4 盒子模型与 div / span
  • 5 flex 与 grid 布局
• 三、JavaScript：网页的动作
  • 1 变量与数据类型
  • 2 运算符与分支
  • 3 函数
  • 4 循环
  • 5 DOM：获取元素与修改内容
  • 6 定时器
• 四、三个练手小案例
• 五、踩坑记录（这一周最值钱的部分）
• 六、一周总结与下周计划

一、HTML：网页的骨架

HTML 全称 HyperText Markup Language，超文本标记语言。它不负责好看，只负责告诉浏览器"这块内容是什么"——这是标题、这是段落、这是图片、这是表格。

1 文档基本结构

任何一个页面，骨架都是固定的：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

几个必须记住的点：

• <!DOCTYPE html>：声明这是 HTML5 文档，必须写在第一行；
• <head>：给浏览器看的信息（编码、视口、标题、引入的 CSS），不显示在页面上；
• <body>：给用户看的内容，都写在这里；
• charset="UTF-8"：不加这句，中文大概率变乱码；
• viewport：移动端适配的第一行代码，width=device-width 一个字母都不能错。

注意： 我一开始把 width=device-width 手滑写成了 width=f，电脑上看着没事，一到手机上页面就缩放错乱。这种"看起来像废话"的配置，往往是出问题最多的地方。

2 文本类标签

① 标题标签 h1 ~ h6

<h1>一级标题</h1>
<h2>二级标题</h2>

h1 一个页面只建议出现一次（SEO 和语义化的要求），h2 可以多次使用，用来分小节。

② 段落与换行

<p>这是一个段落，段落之间会自动换行并留出间距。</p>
<p>这是第二个段落。</p>

第一行<br>第二行
<hr> <!– 分割线 –>

<br> 和 <hr> 都是单标签（自闭合标签），不需要 </br>。

③ 文本修饰

<b>加粗</b>
<i>斜体</i>
<strong>强调（语义更重）</strong>
<span>行内容器，用来给一小段文字单独加样式</span>

④ 超链接

<a href="https://www.baidu.com" target="_blank">点我跳转百度</a>

• href：跳转地址；
• target="_blank"：在新标签页打开。

⑤ 标签的嵌套

标签可以一层套一层，但必须先开后关、不能交叉：

<!– 正确 –>
<p>今天学了 <b>HTML</b> 和 <i>CSS</i></p>

<!– 错误：交叉嵌套 –>
<p>今天学了 <b>HTML</p></b>

3 图片标签与路径

<img src="1.jpg" alt="图片加载失败时的提示文字" width="300" height="200">

三个属性各有分工：

相对路径 vs 绝对路径：

<!– 相对路径：以当前 html 文件为参照 –>
<img src="1.jpg"> <!– 同目录 –>
<img src="images/1.jpg"> <!– 子目录 –>
<img src="../1.jpg"> <!– 上一级目录 –>

<!– 绝对路径：从盘符或域名开始 –>
<img src="D:/images/1.jpg">
<img src="https://example.com/1.jpg">

注意： 本地开发优先用相对路径。我一开始图省事写死了 D:/… 的绝对路径，换个文件夹图片就全挂了。

4 表格标签

表格由 table > tr > th/td 三层组成：tr 是一行，th 是表头单元格，td 是普通单元格。

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>

渲染出来就是一张带边框的三列表格。border="1" 是 HTML 属性写法，实际开发里更推荐用 CSS 的 border 控制。

5 表单标签

表单是用户和网页"对话"的入口，登录、搜索、注册全靠它。

<form action="https://baidu.com/s" method="get">
账号：<input type="text" name="wd" value=""><br>
密码：<input type="password" name="pwd"><br>

性别：<input type="radio" checked name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女<br>

爱好：<input type="checkbox" checked name="hobby" value="hj">喝酒
<input type="checkbox" name="hobby" value="cy">抽烟<br>

头像：<input type="file" name="img">

<select name="city">
<option selected value="cq">重庆</option>
<option value="bj">北京</option>
</select>

<input type="submit" value="搜索">
</form>

action 和 method 是表单的两个核心属性：

• action：数据提交到哪个地址；
• method：get 或 post。get 会把参数拼在 URL 上，形如 http://baidu.com/s?wd=值&pwd=值&sex=值；post 放在请求体里，适合密码等敏感数据。

常见 input 类型：

注意： radio 单选框要互斥，同组的 name 必须写成一样的；想要默认选中，加 checked。

6 视频标签

<video controls width="600">
<source src="xxx.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>

controls 会显示播放/暂停/进度条；<source> 可以写多个，浏览器会挑一个能播的格式；标签中间的文字是降级提示。

二、CSS：网页的衣服

HTML 决定"有什么"，CSS 决定"长什么样"。

1 三种引入方式

<!– ① 行内样式：写在标签的 style 属性里，优先级最高，但最难维护 –>
<p style="color: blueviolet; font-size: 20px;">重庆移通学院</p>

<!– ② 内嵌样式：写在 head 的 style 标签里，当前页面生效 –>
<style>
p { color: blueviolet; }
</style>

<!– ③ 外链样式：单独建 style.css，用 link 引入，项目开发的标准做法 –>
<link rel="stylesheet" href="style.css">

2 三种基础选择器

/* ① 标签选择器：选中页面上所有该标签 */
p {
font-size: 16px;
color: #333;
}

/* ② id 选择器：以 # 开头，一个页面里 id 必须唯一 */
#continer {
width: 300px;
height: 300px;
background-color: blueviolet;
}

/* ③ 类选择器：以 . 开头，可以被多个标签复用 */
.stx {
font-family: "微软雅黑", sans-serif;
color: blue;
font-weight: 500;
}

对应到页面上：

<p>普通段落</p>
<p class="stx">双体</p>
<h1 class="stx">软件</h1>

注意： id 是身份证，只能有一个；class 是校服，谁都能穿。实际开发中类选择器用得最多。

3 颜色的三种表示

.box1 { color: rgb(5, 5, 5); } /* ① rgb：红绿蓝，0-255 */
.box2 { color: #0458a6; } /* ② 十六进制：#RRGGBB */
.box3 { color: red; } /* ③ 颜色关键字 */
.box4 { background: rgba(190, 44, 44, 0.8); } /* 带透明度 */

配色的时候我常用浏览器的取色器（F12 → 样式面板里的色块），吸一下就能拿到十六进制值，比肉眼猜准得多。

4 盒子模型与 div / span

页面上每一个元素，都可以看成一个盒子，从里到外四层：

content（内容）
padding（内边距）
border（边框）
margin（外边距）

.box {
width: 200px;
height: 100px;
padding: 10px; /* 内容和边框之间的距离 */
border: 1px solid pink; /* 边框 */
margin: 20px auto; /* 外边距，auto 实现水平居中 */
box-sizing: border-box; /* 让宽高包含 padding 和 border */
}

两个最常用的容器：

• div：块级容器，独占一行，用来划分大区域；
• span：行内容器，不换行，用来包一小段文字单独加样式。

<div class="header">
<span class="nickname">邹理财</span>
</div>

5 flex 与 grid 布局

这周最大的收获就是搞懂了这两个布局，很多以前要算半天的效果，几行代码就出来了。

① flex：一维布局（一行或一列）

.header {
display: flex;
align-items: center; /* 垂直居中 */
gap: 12px; /* 子元素间距 */
}

② grid：二维布局（行 + 列），九宫格的正确打开方式

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三等分列 */
gap: 6px;
}

注意： repeat(3, 1fr) 的意思就是"重复 3 次，每列占 1 份"，比写三个 33.33% 干净得多。

顺便记一下老师提到的几种典型网页布局，以后做项目可以照着套：

三、JavaScript：网页的动作

HTML 是骨架，CSS 是衣服，JS 才是让页面"活"起来的东西。

1 变量与数据类型

let a = 3; // 数字
let b = 3.14; // 小数
let c = "s"; // 字符串
let d; // 声明未赋值 → undefined
let e = true; // 布尔值
let arr = [a, b, c]; // 数组

console.log(a, b, c, d);
console.log(arr[0]); // 3

let 是现在的主流写法，var 有变量提升的问题，初学阶段建议直接用 let（常量用 const）。

2 运算符与分支

// 逻辑运算符：&& 与、|| 或、! 非（不是 & 和 |）
if (4 < 5 && 2 > 1) {
console.log("条件成立");
}

if (score >= 90) {
console.log("优秀");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}

注意： JS 里的"与/或"是 && 和 ||，写成一个 & 是位运算，意思完全不一样——我第一天就写错了。

3 函数

function test(a, b) {
return a + b;
}

let sum = test(2, 3);
console.log(sum); // 5

function 定义，函数名() 调用，return 返回结果。不写 return 默认返回 undefined。

4 循环

let arr = [1, 2, 3, 4, "a"];

// for…in：拿到的是下标
for (let i in arr) {
console.log(arr[i]);
}

// for…of：拿到的是值（更常用）
for (let item of arr) {
console.log(item);
}

5 DOM：获取元素与修改内容

这是 JS 真正开始"操作网页"的地方。

① 获取元素

let ele = document.getElementById("continer"); // 通过 id
let items = document.querySelectorAll(".item"); // 通过选择器，返回集合

② 修改内容：innerText 与 innerHTML

ele.innerText = "ssss"; // 只改文字
ele.innerHTML = "<a href='http://www.baidu.com'>点我</a>"; // 可以解析 HTML 标签

两者的区别一定要分清：

③ 修改样式

ele.style.height = "100px";
ele.style.backgroundColor = "red";
ele.style.position = "absolute";

④ 绑定事件

ele.addEventListener("click", function () {
alert("被点击了");
});

常见事件：click 点击、mouseover 鼠标移入、mouseout 移出、input 输入。

6 定时器

// setInterval：每隔一段时间执行一次，会一直执行
let timer = setInterval(function () {
console.log("每秒执行一次");
}, 1000);

// setTimeout：延迟一段时间后只执行一次
setTimeout(function () {
alert("时间到");
}, 500);

// 清除定时器
clearInterval(timer);

四、三个练手小案例

学完不练等于没学，这周敲了三个小案例，正好把 HTML、CSS、JS 串起来。

案例一：朋友圈九宫格

效果：头像 + 昵称 + 文字 + 3×3 图片墙，鼠标移上去图片微微放大。

核心 HTML：

<div class="moments">
<div class="header">
<div class="avatar"><img src="1.jpg" alt="头像"></div>
<div class="nickname">邹理财</div>
</div>

<div class="content-text">今日份快乐 ✨ 记录生活中的小美好～</div>

<div class="grid">
<img src="1.jpg" alt="图片1">
<img src="2.jpg" alt="图片2">
<img src="3.jpg" alt="图片3">
<!– 省略 4-9 –>
</div>

<div class="time">5分钟前</div>
</div>

核心 CSS：

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
background: #f5f5f5;
padding: 20px;
font-family: "微软雅黑", sans-serif;
}

.moments {
max-width: 400px;
margin: 0 auto; /* 水平居中 */
background: #fff;
padding: 20px;
border-radius: 8px;
}

.header {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.avatar {
width: 48px;
height: 48px;
border-radius: 6px;
overflow: hidden;
margin-right: 12px;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}

.grid img {
width: 100%;
aspect-ratio: 1 / 1; /* 强制正方形 */
object-fit: cover; /* 裁剪填充，不变形 */
border-radius: 4px;
transition: transform 0.2s;
}

.grid img:hover { transform: scale(1.05); }

这里有两个关键点：

• aspect-ratio: 1 / 1 + object-fit: cover：不管原图什么比例，都裁成正方形且不变形；
• transition + :hover：鼠标移入时放大 5%，加了过渡才显得"顺滑"。

案例二：10 秒倒计时

效果：一个大数字从 10 倒数到 0，归零后高位减 1 并重新回到 10。

<div id="continer1">4</div>
<div id="continer2">10</div>

<script>
let e1 = document.getElementById("continer1");
let e2 = document.getElementById("continer2");

setInterval(function () {
e2.innerText = Number(e2.innerText) – 1;

if (Number(e2.innerText) === 0) {
e1.innerText = Number(e1.innerText) – 1;
e2.innerText = 10;
}
}, 1000);
</script>

这里必须用 Number() 转换：innerText 拿到的是字符串，字符串直接减 1 虽然 JS 会隐式转换，但一旦写成 innerText + 1 就变成字符串拼接了。养成显式转换的习惯，能少一堆莫名其妙的 bug。

案例三："不愿意"按钮（整蛊小程序）

效果：页面上问"做我女朋友吧"，"愿意"按钮正常，"不愿意"按钮鼠标一碰就跳转百度。

<h1>做我女朋友吧</h1>
<button>愿意</button>
<button id="n">不愿意</button>

<script>
let ele_n = document.getElementById("n");

ele_n.addEventListener("mouseover", function () {
ele_n.style.position = "absolute";
location.href = "https://www.baidu.com";
});
</script>

想让它"躲着鼠标跑"，把跳转换成随机定位就行：

ele_n.addEventListener("mouseover", function () {
ele_n.style.left = Math.random() * window.innerWidth + "px";
ele_n.style.top = Math.random() * window.innerHeight + "px";
});

Math.random() 返回 0~1 的小数，乘上窗口宽高就得到随机坐标。这也是我第一次直观感受到：JS 真的能改变页面。

五、踩坑记录（这一周最值钱的部分）

说实话，这一周有一半时间不是在学新知识，而是在跟自己的手滑作斗争。整理一张表，提醒自己：

血泪经验： 前端出错时第一件事永远是打开 F12 看控制台。90% 的"没反应"，控制台里都写着原因——方法名拼错、元素没取到、变量未定义。学会看报错，比多敲十遍代码有用。

六、一周总结与下周计划

本周收获

• HTML：掌握了文档结构、文本标签、图片与路径、表格、表单、视频标签，能独立写出结构完整的页面；
• CSS：理解了三种引入方式和三种选择器，搞懂了盒子模型，能用 flex 做一维布局、用 grid 做九宫格；
• JavaScript：掌握了变量、运算符、函数、分支、循环，能用 DOM 取元素、改内容、绑事件，会用定时器；
• 实战：独立完成朋友圈九宫格、倒计时、"不愿意"按钮三个小案例。

下周计划

最后

这一周最大的感受是：前端不是背出来的，是敲出来的。 看十遍教程，不如自己把 addEventListener 拼错一次——错一次，这辈子都记住了。代码跑起来的那一刻，才是真的学会了。 如果这篇笔记对你有帮助，欢迎点赞收藏；也在学前端的朋友可以评论区交流，一起进步 🚀

本文为个人学习记录，转载请注明出处。