前端新手必看：HTML/CSS/JS 核心知识点一文搞懂！
本文适合刚入门前端的同学，也适合想系统梳理基础知识的开发者。
内容涵盖：<!DOCTYPE>的作用、JS/CSS 最佳引入顺序、背景图控制、响应式单位rem/vh、null与undefined区别等高频考点。
在学习前端的过程中，你是否曾困惑：
- 为什么 HTML 第一行要写
<!DOCTYPE html>？ - CSS 和 JS 到底该放
<head>还是<body>？ - 背景图怎么让它只显示一次、还放在底部？
- 移动端布局为什么不用
px？ null和undefined到底有啥区别？
别急！今天这篇笔记，用最直白的语言 + 可运行代码，帮你一次性理清这些前端基础核心概念。
一、HTML：从 <!DOCTYPE html> 开始
✅ 它到底是什么？
<!DOCTYPE html>
这是 HTML5 的文档类型声明，不是标签，也不是注释。
🎯 作用只有一个：
告诉浏览器：“请用标准模式解析这个页面！”
如果没有它，浏览器可能进入 “怪异模式（Quirks Mode）” ，导致同样的 CSS 在不同浏览器表现不一致。
📌 记住：它必须是 HTML 文件的第一行！
二、CSS 和 JS 该放哪儿？最佳实践来了！
很多初学者把所有资源都塞进 <head>，但这样会拖慢页面渲染！
🔍 浏览器加载流程：
- 解析 HTML → 构建 DOM
- 遇到
<link>→ 下载 CSS（不阻塞 HTML 解析） - 遇到
<script>→ 暂停 HTML 解析，先执行 JS！
⚠️ 这就是为什么 JS 放顶部会导致“白屏”！
✅ 推荐结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我的页面</title>
<!-- CSS 放这里 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">Hello World</div>
<!-- JS 放 body 最后 -->
<script src="app.js"></script>
</body>
</html>
✅ 好处：
- 先展示内容，再加载交互逻辑（用户体验更好）
- 避免 JS 阻塞首屏渲染
三、CSS 背景图：精准控制位置与重复
当你用 background-image 时，两个属性决定最终效果：
1. background-position：图片“放哪儿”？
.hero {
background-image: url('logo.png');
background-position: bottom center; /* 底部居中 */
}
- 水平值：
left/center/right/50% - 垂直值：
top/center/bottom/30%
👉 就像贴海报：你想把它贴在墙的哪个位置？
2. background-repeat：要不要“重复贴”？
| 值 | 效果 |
|---|---|
repeat | 默认，横纵都重复（贴满墙） |
no-repeat | 只贴一张（最常用！） |
repeat-x | 只横向重复 |
repeat-y | 只纵向重复 |
.logo-bg {
background-image: url('icon.png');
background-repeat: no-repeat;
}
✅ 组合使用示例：
.banner {
height: 400px;
background-image: url('bg.jpg');
background-position: top center;
background-repeat: no-repeat;
background-size: cover; /* 关键：铺满不拉伸 */
}
💡
background-size: cover会让图片保持比例、填满容器、多余裁剪，非常适合全屏背景！
四、移动端布局：为什么不用 px？用 rem 和 vh！
❌ px 的问题：
- 在 iPhone SE 上字太小，在 iPad 上又太大
- 无法自适应不同屏幕
✅ 解决方案：相对单位
1. vh —— 视口高度单位
- 1vh = 屏幕高度的 1%
- 100vh = 整个屏幕高度
.full-screen {
height: 100vh; /* 占满全屏 */
}
📱 适合：登录页、Hero 区域、垂直居中布局
2. rem —— 根字体单位
- 1rem =
<html>的font-size - 默认 1rem = 16px，但我们可以重置：
html {
font-size: 10px; /* 方便计算：1rem = 10px */
}
.container {
width: 30rem; /* = 300px */
padding: 2rem; /* = 20px */
}
✅ 优势：
- 所有尺寸按比例缩放
- 一套代码适配多端
🔄 口诀： “vh 控高度，rem 控尺寸；不用 px，拥抱弹性”
五、JavaScript：null vs undefined，别再混淆了！
这是面试高频题！它们语义完全不同：
undefined | null | |
|---|---|---|
| 含义 | “没给值” | “给了一个空值” |
| 谁赋值？ | JS 引擎自动赋予 | 程序员主动赋值 |
| 场景 | - 声明未赋值 - 函数无返回值 | 主动清空变量：user = null |
typeof | "undefined" | "object"（历史 bug） |
✅ 正确判断方式：
let a;
console.log(a === undefined); // true
let b = 'hello';
b = null;
console.log(b === null); // true
🚫 不要用
==！虽然null == undefined为true，但语义不同，绝不混用。
📌 一句话总结：
undefined是“忘了给”，null是“故意设为空”。
✅ 总结：前端基础口诀
- HTML：
<!DOCTYPE html>开头，JS 放底部 - CSS 背景：
position决定位置，repeat: no-repeat防止重复 - 响应式：
vh控高度，rem控尺寸 - JS：
undefined是没给，null是给了空
🚀 动手练习建议
- 创建一个全屏背景页，使用
background-size: cover+position: center - 用
rem重构一个按钮组件，测试在不同html { font-size }下的表现 - 写一个函数，判断参数是
null还是undefined
