本篇为 HTML+CSS 课程上篇，聚焦前端基础认知、HTML 完整入门、VS Code 开发工具、文字 / 链接基础标签、CSS 三种引入方式、颜色体系与基础选择器，配套完整代码、表格汇总、实操案例，适合零基础自学、课堂复习、前端入门备考；下篇将讲解多媒体、盒子模型、Flex、表单表格与综合页面实战。
一、Web 前端基础认知
1.1 网页本质与渲染原理
- 网页由文字、图片、音频、视频、超链接等资源构成，底层是前端代码文件；
- 代码无法直接看懂，依靠浏览器内核解析渲染为可视化页面；
- 不同浏览器内核存在差异，同一代码展示效果可能不一致，开发需要兼容主流浏览器。
1.2 W3C 三大 Web 标准（网页三层架构）
W3C 万维网联盟制定统一网页规范，三层各司其职、分离解耦：| 技术 | 全称 | 核心职责 | 通俗解释 ||----|----|----||HTML | 超文本标记语言 | 结构层 | 搭建页面骨架，定义标题、文字、图片等所有页面元素 ||CSS | 层叠样式表 | 表现层 | 美化页面，控制颜色、字体、大小、间距、布局排版 ||JavaScript | 脚本语言 | 行为层 | 实现交互（点击、弹窗、数据计算、动画）|
1.3 前端学习路线总览
- 基础阶段（本篇 + 下篇）：HTML + CSS，静态网页制作
- 进阶阶段：JavaScript + Ajax + Vue3 框架
- 工程实战：ElementPlus 组件库、综合项目开发
1.4 小节小结
HTML 搭骨架、CSS 做美化、JS 做交互，三层分离是网页开发核心思想。
二、HTML 快速入门
2.1 HTML 完整定义
HTML 全称：HyperText Markup Language 超文本标记语言
- 超文本：不止纯文字，支持图片、音视频、跨页面跳转链接；
- 标记语言：由
<标签名>成对 / 自闭合标签组成，不需要编译，浏览器直接解析； - 所有标签均为 W3C 预定义，不允许自定义标签。
2.2 HTML 标准基础骨架（必背）
<!DOCTYPE html>
<html>
<!-- head：网页头部，存放给浏览器读取配置 -->
<head>
<title>网页标题</title>
</head>
<!-- body：网页主体，用户可见全部内容 -->
<body>
<h1>第一个HTML页面</h1>
<img src="img/demo.png">
</body>
</html><html>：根标签，包裹页面全部代码；<head>：存放页面标题、CSS 样式、字符编码等配置，页面不展示；<title>：浏览器标签栏标题；<body>：页面所有文字、图片、按钮等可见内容全部写在此处。
2.3 HTML 语法规范
- 标签不区分大小写，开发统一小写规范；
- 属性值单引号
' '、双引号" "都支持，推荐双引号； - 语法容错性高，但规范书写便于后期维护；
- 完整标签结构：开始标签 + 内容 + 结束标签，属性写在开始标签内。
2.4 小节小结
HTML 文件后缀为.html，固定html/head/body三层骨架，页面可见内容全部放置 body 中。
三、前端开发工具：VS Code
3.1 工具介绍
VS Code 是微软免费开源跨平台代码编辑器，支持 HTML/CSS/JS/Java/Python 几乎所有编程语言，依靠插件拓展功能，官网：Visual Studio Code - The open source AI code editor | Your home for multi-agent development
3.2 安装规范
- 安装路径不能包含中文、空格，否则会出现运行异常；
- 安装后必须安装前端配套插件（HTML 提示、CSS 补全、浏览器预览）；
- 可安装 IDEA 快捷键映射插件，统一编码操作习惯。
3.3 快速开发技巧
新建 html 文件，输入!按下 Tab 键，一键自动生成完整标准 HTML 骨架，大幅提升编码速度。
3.4 小节小结
VS Code 是前端行业主流编辑器，插件生态完善，安装路径禁止中文。
四、基础文本与超链接标签
4.1 标题标签 <h1> ~ <h6>
-
层级：h1 最大一级标题，h6 最小六级标题；
-
特性：每个标题独占一行，自带上下边距；
-
规范：一个页面仅使用 1 个 h1，用于页面主标题。
推进长江十年禁渔 谱写长江大保护新篇章
二级小标题
4.2 超链接 <a>
<a href="https://www.cctv.com/" target="_blank">央视网</a>| 属性 | 作用 |
|---|---|
| href | 跳转地址（本地文件 / 网络网址） |
| target="_self" | 默认，当前页面打开链接 |
| target="_blank" | 新标签页打开链接 |
4.3 段落标签 <p>
包裹正文文字，段落自带上下留白，页面从上到下顺序渲染，编写遵循页面从上至下布局逻辑。
4.4 文字格式化语义标签
| 标签 | 显示效果 | 特点 ||----|----|<b> / <strong>| 文字加粗 | strong 具备语义，搜索引擎更友好 |<i> / <em>| 文字倾斜 | em 强调语义 |<u> / <ins>| 下划线 | ins 强调语义 |<s> / <del>| 删除线 | del 删除语义 |
4.5 特殊字符实体
页面无法直接输出空格、小于号等符号，使用字符实体：| 实体 | 显示效果 ||----|| | 空格 ||<| 小于 <||>| 大于 >|
4.6 小节小结
h 系列做标题、a 实现跳转、p 分段，语义标签优先使用strong/em/del而非纯样式标签。
五、CSS 基础入门（上篇核心）
5.1 CSS 定义
CSS：Cascading Style Sheets 层叠样式表，专门控制页面元素外观、颜色、排版布局。
5.2 CSS 三种引入方式（开发场景区分）
1）行内样式（写在标签 style 属性）
<span style="color: gray;">2024年05月15日 20:07</span>适用：少量临时样式、JS 动态修改元素场景；缺点：代码耦合严重，不适合大页面。
2）内部样式（head 内<style>标签）
<style>
span {
color: #b2b2b2;
}
</style>适用：单页面专属样式，小型静态页面。
3）外部样式（独立.css文件，link 引入）
<link rel="stylesheet" href="css/news.css">适用：企业多页面项目，样式复用、统一维护，生产环境首选。
5.3 四种颜色表示方法
| 写法 | 示例 | 说明 ||----|----|| 英文关键字 | red、gray、black | 简单颜色直接使用 ||rgb|rgb (255,0,0)| 红绿蓝 0-255 三色混合 ||rgba|rgba (0,0,0,0.4)|rgb + 透明度 0 完全透明～1 不透明 || 十六进制 |#ff000 / 简写 #f00 | 前端最常用，简写支持两两相同值 |
基础文字样式属性：color 设置文字颜色。
5.4 基础 CSS 选择器大全
选择器作用：精准选中页面指定标签，统一设置样式。| 选择器 | 语法 | 示例 | 优先级 ||----|----|----|| 元素选择器 | 标签名 {}|h1 {color: red;}| 最低 || 类选择器 |. 类名 {}|.text-gray {color: #999;}| 中等 ||id 选择器 |#id 名 {}|#title {font-size: 24px;}| 最高 || 分组选择器 | 选择器 1, 选择器 2 {}|h1,span {line-height: 2;}| 同对应选择器 || 后代选择器 | 父 子 {}|div p {text-indent: 2em;}| 同对应选择器 || 属性选择器 | input type="text"| 匹配带指定属性标签 | 中等 |
优先级规则：id 选择器 > 类选择器 > 元素选择器。
5.5 小节小结
三种 CSS 引入方式各有适用场景；颜色四种写法熟记；三大基础选择器优先级是面试基础考点。
六、全文上篇总结
- Web 三层架构：HTML 结构、CSS 样式、JS 交互，W3C 统一规范；
- HTML 基础：标准 html/head/body 骨架、h 标题、a 链接、p 段落、文字语义标签；
- VS Code 工具：安装规范、! 一键生成骨架快捷操作；
- CSS 核心上篇内容：三种引入方式、四种颜色写法、六大基础选择器与优先级。
拓展学习建议（上篇练习）
- 手写央视新闻标题页面，练习 h1、a、span 标签 + 内部样式；
- 分别用行内 / 内部 / 外部三种 CSS 写法实现同一段文字变色，对比优缺点；
- 练习元素、类、id 选择器，测试优先级覆盖效果。
上篇入门面试高频考点
- HTML、CSS、JS 各自作用区分；
- HTML 标准骨架三大标签含义；
- CSS 三种引入方式优缺点与适用场景；
- 四种颜色表示方式；
- 基础选择器优先级顺序。