前端三剑客全景深读：HTML、CSS、JavaScript 完全手册

m0_73588438

830人浏览 · 2025-07-14 20:02:14

m0_73588438 · 2025-07-14 20:02:14 发布

先讲透三大技术，再逐行拆解百度首页仿制源码
—— 本文既是入门教科书，也是案头工具书

1. HTML：网页的骨骼

定义：HTML（HyperText Markup Language）是一套标记语言，用于描述网页的结构与语义。
核心关键词：语义化、可访问性、SEO、层级树（DOM Tree）。

1.1 最小可运行 HTML 骨架

HTML

预览

复制

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
  </head>
  <body>
    <h1>你好，HTML</h1>
    <p>这是一段<strong>强调</strong>文本。</p>
  </body>
</html>

1.2 标签、属性、元素三件套

表格

复制

名称	说明	示例
标签 (Tag)	由 `<` 和 `>` 包围的关键词	`<p>`
属性 (Attribute)	修饰标签的键值对	`<img src="a.png" alt="描述">`
元素 (Element)	标签 + 属性 + 内容	`<p class="text">内容</p>`

1.3 最常用的 12 组标签速查表

表格

复制

标签	语义	常见属性	注意点
`<div>`	无语义容器	`class`、`id`	默认块级，换行
`<span>`	无语义文本	`class`、`id`	默认行内，不换行
`<h1>~<h6>`	分级标题	无	一个页面最好只有一个 `<h1>`
`<p>`	段落	无	自动上下 margin
`<a>`	超链接	`href`、`target`	`href="#"` 会跳到页面顶部
`<img>`	图片	`src`、`alt`、`width`、`height`	自闭合，无结束标签
`<ul>` / `<ol>` / `<li>`	无序 / 有序 / 列表项	`type`、`start`	直接子级只能是 `<li>`
`<nav>`	导航区域	无	提升可访问性
`<header>` / `<footer>`	页头 / 页脚	无	可多次出现，不仅限于页面级
`<section>` / `<article>`	区块 / 文章	无	对 SEO 友好
`<form>` / `<input>` / `<label>`	表单组合	`action`、`method`、`for`	配合 `name` 才能提交数据
`<meta>`	元信息	`charset`、`name`、`content`	写在 `<head>`

1.4 HTML 语义化与可访问性

语义化 = 用正确的标签表达正确的含义
例：用 <button> 而不是 <div class="btn">，用 <nav> 而不是 <div class="nav">。
可访问性 (a11y) = 让残障用户也能顺畅浏览
例：所有图形必须有 alt；表单输入要有 <label>；颜色不能是传达信息的唯一手段。

2. CSS：网页的皮肤与妆容

定义：CSS（Cascading Style Sheets）负责样式和布局。
核心关键词：选择器、层叠、盒模型、Flexbox、Grid、动画。

2.1 语法骨架

css

复制

选择器 {
  属性: 值;
  /* 注释写法 */
}

2.2 选择器大全

表格

复制

类型	示例	描述
元素选择器	`p { }`	选所有 `<p>`
类选择器	`.menu { }`	选 `class="menu"`
ID 选择器	`#logo { }`	选 `id="logo"`（唯一）
属性选择器	`[type="text"] { }`	选 `type` 为 `text` 的元素
伪类	`a:hover { }`	鼠标悬停状态
伪元素	`p::before { }`	在 `<p>` 前插入内容
组合器	`ul > li`	直接子级选择器

2.3 盒模型（Box Model）

复制

       ┌------------------------┐
       │        Margin          │
       │  ┌------------------┐  │
       │  │     Border       │  │
       │  │  ┌------------┐  │  │
       │  │  │   Padding  │  │  │
       │  │  │  ┌------┐  │  │  │
       │  │  │  │Content  │  │  │
       │  │  │  └------┘  │  │  │
       │  │  └------------┘  │  │
       │  └------------------┘  │
       └------------------------┘

content → 实际内容
padding → 内边距（透明）
border → 边框
margin → 外边距（透明，可负值）

2.4 布局双雄：Flexbox vs Grid

表格

复制

维度	Flexbox	Grid
维度	1 维（行或列）	2 维（行 + 列）
适用	组件级	页面级
关键属性	`display:flex` + `justify-content` / `align-items`	`display:grid` + `grid-template-columns`

2.5 过渡与动画

css

复制

button {
  background: #4e6ef2;
  transition: background .3s ease;
}
button:hover {
  background: #315efb;
}

transition：两帧之间平滑过渡
@keyframes：多帧动画

3. JavaScript：网页的肌肉与神经

定义：JavaScript 让网页可交互。
核心关键词：变量、函数、事件、DOM、异步、模块化。

3.1 语言基石

表格

复制

概念	示例	说明
let / const	`const name = 'baidu';`	块级作用域，避免 `var` 提升
模板字符串	`Hello ${name}`	支持换行与插值
箭头函数	`() => {}`	词法 `this`，简洁写法
解构赋值	`const { a, b } = obj;`	快速提取属性
模块导入	`import style from './index.css';`	ES Modules

3.2 DOM 操作三步曲

选中元素

JavaScript

复制

const el = document.querySelector('.btn');

监听事件
JavaScript
复制
```
el.addEventListener('click', handler);
```

修改内容 / 样式

JavaScript

复制

el.textContent = '已登录';
el.style.backgroundColor = '#0f0';

3.3 事件流（捕获 → 目标 → 冒泡）

复制

window   document   <html>   <body>   <div>   <button>
   ↑        ↑          ↑        ↑        ↑        ↑
捕获阶段 → 目标阶段 → 冒泡阶段

event.stopPropagation() 阻止冒泡
event.preventDefault() 阻止默认行为（如 <a> 跳转）

3.4 异步编程

表格

复制

方式	示例	场景
回调	`fs.readFile(cb)`	容易回调地狱
Promise	`fetch(url).then(res => res.json())`	链式调用
async/await	`const data = await fetch(url)`	同步写法，异步执行

4. 实战：百度首页极简仿制

在掌握 HTML、CSS、JavaScript 的宏观概念后，我们用一个示例，把知识点落到指尖。

4.1 文件结构

复制

baidu-clone-demo/
├─ index.html
├─ css/index.css
└─ img/
   ├─ baidu.png
   └─ ai.png

4.2 HTML 源码 + 逐行注释

HTML

预览

复制

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 1. 字符编码 -->
    <meta charset="UTF-8">
    <!-- 2. 移动端视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿写百度首页</title>
    <!-- 3. 外链样式 -->
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!-- 4. 顶部导航 -->
    <nav class="menu">
      <ul>
        <li>新闻</li>
        <li>地图</li>
        <li>网盘</li>
        <li>
          <img src="img/ai.png" alt="AI图标" width="14" height="14">
        </li>
        <li>更多</li>
      </ul>
      <div class="btn">
        <span class="set">设置</span>
        <span class="login">登录</span>
      </div>
    </nav>

    <!-- 5. Logo 区域 -->
    <div class="imgbox">
      <img src="img/baidu.png" alt="百度logo" width="270">
    </div>

    <!-- 6. 交互脚本 -->
    <script src="js/index.js"></script>
  </body>
</html>

4.3 CSS 源码 + 逐条注释

css

复制

/* === 重置 === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === 顶部导航 === */
.menu {
  display: flex;               /* Flexbox 布局 */
  align-items: center;         /* 垂直居中 */
  justify-content: space-between;
  padding: 16px 24px;
  font-size: 13px;
}

.menu ul {
  display: flex;               /* 横向排列 li */
  list-style: none;
  gap: 22px;                   /* 间距 */
}

.menu a {
  color: #333;
  text-decoration: none;
}

.menu a:hover {
  color: #1e50a2;
}

/* === 按钮 === */
.btn .login {
  background: #4e6ef2;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn .login:hover {
  background: #315efb;
}

/* === Logo 居中 === */
.imgbox {
  text-align: center;
  margin-top: 120px;
}

5下一步学习路线

表格

复制

阶段	关键词	推荐资源
语义化 & SEO	`<nav>`、`<section>`、meta 标签	Google SEO Starter Guide
布局进阶	Grid、响应式、媒体查询	Grid Garden
性能优化	Critical CSS、懒加载、压缩	web.dev/fast
无障碍	ARIA、键盘导航	a11y-101.com
现代工具链	Vite、TypeScript、ESLint	Vite 官方文档

当你能看懂每一行代码的「为什么」时，前端的大门才算真正推开。祝你编码愉快！

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

程序员的工作台正在换代：聊聊 GPT-5.6、ChatGPT Plus/Pro 和 Codex 到底改变了什么

我觉得 ChatGPT Plus、Pro、GPT-5.6 和 Codex 带来的变化，不应该只理解成：AI 写代码更厉害了。真正的变化是，软件开发的操作界面正在改变。以前程序员直接操作文件、终端、编辑器和各种开发工具。现在中间开始多出一层 Agent。程序员告诉 Agent 目标，Agent 再去操作文件、终端和工具，最后把结果交回来。程序员 → 开发工具 → 代码程序员 → AI Agent →