HTML+CSS 前端基础（上篇）超详细整理，从入门到精通

本篇为 HTMLCSS 课程上篇聚焦前端基础认知、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 srcimg/demo.png /body /htmlhtml根标签包裹页面全部代码head存放页面标题、CSS 样式、字符编码等配置页面不展示title浏览器标签栏标题body页面所有文字、图片、按钮等可见内容全部写在此处。2.3 HTML 语法规范标签不区分大小写开发统一小写规范属性值单引号 、双引号 都支持推荐双引号语法容错性高但规范书写便于后期维护完整标签结构开始标签 内容 结束标签属性写在开始标签内。2.4 小节小结HTML 文件后缀为.html固定html/head/body三层骨架页面可见内容全部放置 body 中。三、前端开发工具VS Code3.1 工具介绍VS Code 是微软免费开源跨平台代码编辑器支持 HTML/CSS/JS/Java/Python 几乎所有编程语言依靠插件拓展功能官网Visual Studio Code - The open source AI code editor | Your home for multi-agent development3.2 安装规范安装路径不能包含中文、空格否则会出现运行异常安装后必须安装前端配套插件HTML 提示、CSS 补全、浏览器预览可安装 IDEA 快捷键映射插件统一编码操作习惯。3.3 快速开发技巧新建 html 文件输入!按下 Tab 键一键自动生成完整标准 HTML 骨架大幅提升编码速度。3.4 小节小结VS Code 是前端行业主流编辑器插件生态完善安装路径禁止中文。四、基础文本与超链接标签4.1 标题标签h1 ~ h6层级h1 最大一级标题h6 最小六级标题特性每个标题独占一行自带上下边距规范一个页面仅使用 1 个 h1用于页面主标题。h1推进长江十年禁渔 谱写长江大保护新篇章/h1 h2二级小标题/h24.2 超链接aa hrefhttps://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 定义CSSCascading Style Sheets 层叠样式表专门控制页面元素外观、颜色、排版布局。5.2 CSS 三种引入方式开发场景区分1行内样式写在标签 style 属性span stylecolor: gray;2024年05月15日 20:07/span适用少量临时样式、JS 动态修改元素场景缺点代码耦合严重不适合大页面。2内部样式head 内style标签style span { color: #b2b2b2; } /style适用单页面专属样式小型静态页面。3外部样式独立.css文件link 引入link relstylesheet hrefcss/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 [typetext]| 匹配带指定属性标签 | 中等 |优先级规则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 三种引入方式优缺点与适用场景四种颜色表示方式基础选择器优先级顺序。