---
title: 前端基础结构与样式
tags:
  - module
  - frontend
  - html
  - css
  - joplin
type: module
source_type: reconstructed
created: 2026-04-23
updated: 2026-04-23
---

# 前端基础结构与样式

> [!abstract]
> 这一模块回答“网页到底由什么构成，以及浏览器如何把代码变成页面”。

## 模块结论

- 前端开发的基础不是某个框架，而是浏览器对结构、样式和行为的统一解析。
- [[HTML]] 负责结构，[[CSS]] 负责表现，[[JavaScript]] 负责行为，这是前端最基础的分层模型。
- 任何后续框架和组件库，本质上都建立在这三层标准之上。

## 一、浏览器如何看到页面

- 程序员编写前端代码
- 浏览器内核解析代码
- 页面元素被渲染成用户看到的结果

这意味着前端开发不是“生成图片”，而是向浏览器提供一套可解析的结构描述和行为规则。

## 二、Web 标准为什么重要

- 不同浏览器内核可能不同
- 如果没有统一标准，同一份代码可能渲染结果不一致
- Web 标准就是为了解决跨浏览器一致性问题

## 三、HTML 在解决什么问题

- 页面结构
- 内容元素
- 文档层级

### 典型元素

- 标题
- 图片
- 超链接
- 表格
- 音频视频

重点不是死记标签名，而是理解 HTML 在定义“页面骨架”。

## 四、CSS 在解决什么问题

- 外观样式
- 颜色
- 大小
- 位置
- 排版

HTML 告诉浏览器“这是什么”，CSS 告诉浏览器“它看起来怎样”。

## 五、为什么前端基础不能跳过

- 后续 Vue、ElementUI 只是更高层的组织方式
- 一旦不理解结构与样式分层，就会在组件化开发中不断回到低层补课

## 六、易错点

- 只记语法，不理解结构、表现、行为三层分工。
- 把前端基础理解成只会写静态页面。
- 学框架前不掌握 HTML/CSS，导致组件使用停留在复制粘贴层面。

## 七、复习提问

- 浏览器把前端代码变成页面时，最核心的中间环节是什么？
- HTML 与 CSS 的职责边界分别是什么？
- 为什么 Web 标准对前端开发是基础前提？

## 来源

- [[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/1.HTML-CSS.md]]

## 相关页面

- [[前端与工程化]]
- [[HTML]]
- [[CSS]]