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]]