**【零基础入门学习Python web前端开发视频教程（三）】导读：HTML基础构建与实战演练**
在Web开发的宏大叙事中，HTML（超文本标记语言）无疑是那座奠基之石。对于渴望踏入前端领域却毫无基础的学员而言，本系列课程（三）并非泛泛而谈的符号罗列，而是一场从“认知结构”到“精雕细琢”的系统性进阶之旅。本期内容聚焦于HTML核心标签的实战应用，旨在帮助学习者打破“懂原理却写不出页面”的困境，亲手搭建出第一个具有视觉雏形且交互逻辑清晰的网页雏形。
课程伊始，我们将回归本源，深入解析HTML的主体结构标签。这不仅是代码编写的起手式，更是理解文档对象模型（DOM）树状结构的钥匙。通过剖析`<html>`、`<head>`、`<body>`等核心标签的层级关系，学员将建立起严谨的文档规范意识，明白为何一个标准的网页必须拥有清晰的“骨架”。与此同时，音频时长也暗示了讲解的深度，确保每一位初学者都能扎实掌握代码的标准写法，避免后续学习中因基础不牢而产生的认知偏差。
随后，课程进入最接地气的文本与媒体处理环节。从基础的标题、段落、强调标签，到图片标签`<img>`的路径管理，内容层层递进。特别是关于“相对路径”与“绝对路径”的讲解，直击初学者最容易踩坑的痛点——为何本地图片无法显示？文件移动后链接为何失效？通过实例演示，我们将彻底厘清路径背后的逻辑。紧接着，超链接`<a>`与锚点（Anchor）的学习，让静态页面具备了跳转能力，这是构建多页面网站或长页面导航的基础。课程特意安排了“锚点使用实例”，通过实操强化对页面内部定位的理解，让学习者体会到“点击即达”背后的技术实现。
值得注意的是，本集课程并未止步于语法灌输，而是引入了极具代表性的综合实战案例。通过复刻“李清照歌词”页面与“聚美优品”早期界面，学员将在真实场景中综合运用列表、注释、框架`<frameset>`等技术。这不仅是对前序知识点的全面复习，更是培养“组件化思维”的关键一步。在练习聚美优品页面时，学员将直面复杂布局的挑战，学习如何拆分页面模块，如何利用列表构建内容层级，以及如何通过注释提升代码的可读性与可维护性。
对于立志成为全栈工程师的Python学习者来说，前端技能的补齐至关重要。HTML作为Web的基石，其重要性不言而喻。本套教程以简洁明快的节奏、详实的案例演示，为零基础学员搭建了一座平滑的上手桥梁。无论你是希望独立完成个人博客，还是为后续的CSS美化与JavaScript交互打下坚实基础，本期内容都将是不可或缺的一环。建议学员在学习过程中，务必动手敲代码，而非仅仅被动观看，因为只有指尖的律动，才能将知识转化为真正的技能。
课程目录
1-1 [HTML] html入门简介 (22:04) 1-2 [HTML] html主体结构标签 (19:35) 1-3 [HTML] html文本标签的使用-1 (20:10) 1-4 [HTML] html文本标签的使用-2 (19:01) 1-5 [HTML] html图片标签img的使用与路径的讲解 (21:20) 1-6 [HTML] html很路径与超链接A的使用 (19:52) 1-7 [HTML] html超链接和锚点的使用实例 (19:02) 1-8 [HTML] html锚点使用实例与列表的使用 (19:35) 1-9 [HTML] html列表与实例和HTML注释的使用 (19:31) 1-10 [HTML] HTML练习实例(李清照歌词和聚美优品页面练习) (22:47) 1-11 [HTML] html聚美优品实例与分帧框架frameset使用 (18:44) 1-12 [HTML] html搭建后台分帧框架和表格table (19:44) 1-13 [HTML] table表格使用 (19:01) 1-14 [HTML] 细线表格与表格实例 (20:44) 1-15 [HTML] html表格table实例与form表单初体验 (20:58) 1-16 [HTML] form表单input标签的使用 (19:44) 1-17 [HTML] form表单input标签的使用和html5新属性 (20:01) 1-18 [HTML] 下拉列表select与textarea多行文本域的使用 (18:55) 1-19 [HTML] form表单中h5标签的使用 (19:48) 1-20 [HTML] head头部设置常用标签 (17:48) 1-21 [HTML] 视频音频标签使用 (18:52) 2-1 [css] css初认识 (19:56) 2-2 [css] css样式在HTML中如何使用 (20:37) 2-3 [css] 选择器的使用和优先级(html,class,id) (20:26) 2-4 [css] 其它选择器的使用(组合,包含,通配符)与选择器优先级 (20:04) 2-5 [css] 伪类选择符,关系选择器与属性选择器的使用 (19:47) 2-6 [css] 属性选择器与结构性伪类选择器的使用 (19:35) 2-7 [css] 结构性伪类选择器(after,before,type和chi (20:41) 2-8 [css] 结构性伪类选择器与状态伪类选择器的使用 (19:58) 2-9 [css] 状态伪类选择器与颜色color的使用 (22:02) 2-10 [css] font字体属性与文本属性的使用 (19:09) 2-11 [css] 文本属性的使用 (19:52) 2-12 [css] css实现文字超出显示省略号与边框属性border的使用 (20:06) 2-13 [css] background背景属性(一) (20:05) 2-14 [css] background背景属性(二) (21:30) 2-15 [css] background背景属性(三) (20:13) 2-16 [css] 内部白(padding)与外补白(padding)的使用 (20:31) 2-17 [css] 内部白(padding)与外补白(padding)的使用 (22:15) 2-18 [css] position的定位使用(一) (20:38) 2-19 [css] position的定位使用与实例(二) (16:04) 2-20 [css] 遮罩层实现实例 (20:49) 2-21 [css] 浮动float的使用 (20:24) 2-22 [css] 清除浮动clear,visibility与overflow的 (18:50) 2-23 [css] 用户界面属性的使用 (18:32) 2-24 [css] css3属性中的table,transition与anima (19:05) 2-25 [css] transform，animation与导航条 (19:04) 2-26 [css] 导航条与商品排行样式实例 (23:09) 2-27 [css] 商品列表布局效果 (18:34) 2-28 [css] 新闻列表与页面布局的规划 (21:03) 2-29 [css] 页面布局与实现页面卧龙首页(一) (19:11) 2-30 [css] 卧龙首页完成头部导航与轮播(二) (20:06) 2-31 [css] 卧龙首页新闻资讯样式的实现(三) (19:53) 2-32 [css] 卧龙介绍与人才招聘的实现(四) (21:10) 2-33 [css] 卧龙市场人才招聘的实现(五) (18:31) 2-34 [css] 底部栏产品中心的实现(六) (19:48) 2-35 [css] 底部栏技术研发的实现(七) (19:47) 2-36 [css] 卧龙首页的完成与回顾(八) (19:48) 2-37 [css] css知识回顾(一) (19:51) 2-38 [css] css笔记回顾(二) (06:12)
