**WEB前端技术开发教程：从零构建网页骨架**
HTML是Web开发的基石，掌握它是进入前端世界的必经之路。本套课程专为初学者打造，旨在帮助学习者系统性地建立HTML知识体系，从概念认知到工具使用，再到标签实战，层层递进，彻底告别“只会写标签，不懂为什么”的学习困境。
**学习门槛与前置要求**
本课程对零基础学员十分友好，无需具备任何编程背景即可上手。唯一的要求是拥有一台可正常运行的电脑，以及愿意动手实践的热情。课程默认你已具备基本的计算机操作能力，如文件浏览、软件安装等，但不会假设你了解任何开发工具或代码规范。只要你对网页背后的构建逻辑充满好奇，这里就是你的起点。
**系统化学习路径**
课程共包含11个核心章节，遵循“认知—工具—细节—样式”的科学学习顺序：
首先，在1-1至1-4讲中，你将建立宏观认知。了解前端开发的技术全景，厘清HTML的概念、作用及其版本演进历史，明白为什么HTML能跨平台运行，以及它在现代Web架构中的核心地位。
其次，1-5讲重点解决“怎么敲代码”的问题。课程直接引入IDEA这一专业集成开发环境，教你配置环境、新建项目、编写和预览网页。这一步至关重要，因为熟悉专业工具是迈向职业化开发的第一步，避免养成使用记事本写代码的不良习惯。
随后，1-6至1-9讲进入标签实战深水区。你将逐一拆解常见标签、常用HTML标签、DIV和SPAN的语义化用法，以及FONT标签的细节。这里不仅讲“怎么用”，更讲“何时用”，帮助你在构建页面结构时做出正确的语义选择。
最后，1-10和1-11讲聚焦文本样式，为后续CSS学习铺平道路。通过掌握文本修饰标签，你将学会如何控制标题层级、段落格式及文字强调，让网页内容不仅结构清晰，而且易于阅读。
**学完后的能力产出**
完成本教程后，你将能够独立编写符合W3C规范的HTML5文档，熟练运用结构化标签搭建网页骨架，并使用IDEA进行高效开发。更重要的是，你将建立起“语义化”的设计思维，懂得用正确的标签表达内容的含义，而非仅追求视觉呈现。这为你后续学习CSS样式美化、JavaScript交互逻辑以及Vue/React等现代前端框架，打下了坚实且牢固的基础。
**资料包使用建议**
配套资料包按章节顺序编排，建议结合视频课程同步观看。对于每一讲的代码示例，不要只看不练，请在IDEA中亲手敲一遍，并尝试修改标签属性观察效果变化。遇到不理解的地方，可回溯对应时长的视频片段反复琢磨，确保每个知识点都真正内化为自己的能力。
立即开启学习，用HTML点亮你的前端之路。
课程目录
1-1 [HTML超文本标记语言详解] 前端需要学习的技术 (16:32) 1-2 [HTML超文本标记语言详解] HTML的概念 (07:15) 1-3 [HTML超文本标记语言详解] HTML的作用 (06:26) 1-4 [HTML超文本标记语言详解] HTML版本 (11:46) 1-5 [HTML超文本标记语言详解] 使用IDEA开发HTML网页 (08:42) 1-6 [HTML超文本标记语言详解] 常见的标签 (21:02) 1-7 [HTML超文本标记语言详解] 常用的HTML标签 (12:46) 1-8 [HTML超文本标记语言详解] DIV和SPAN标签 (17:48) 1-9 [HTML超文本标记语言详解] font标签 (04:24) 1-10 [HTML超文本标记语言详解] 文本样式标签 (06:29) 1-11 [HTML超文本标记语言详解] HTML常见特殊符号 (16:16) 1-12 [HTML超文本标记语言详解] 列表标签-无序列表 (10:16) 1-13 [HTML超文本标记语言详解] 列表标签-有序列表 (05:42) 1-14 [HTML超文本标记语言详解] 标签转义的问题 (01:29) 1-15 [HTML超文本标记语言详解] img图片标签 (12:46) 1-16 [HTML超文本标记语言详解] 超链接标签 (12:15) 1-17 [HTML超文本标记语言详解] 单元格标签 (12:25) 1-18 [HTML超文本标记语言详解] 表格练习的需求 (07:22) 1-19 [HTML超文本标记语言详解] 表格练习 (18:11) 1-20 [HTML超文本标记语言详解] HTML简单复习 (11:46) 1-21 [HTML超文本标记语言详解] 表单标签Form (19:13) 1-22 [HTML超文本标记语言详解] 表单的Input标签 (20:26) 1-23 [HTML超文本标记语言详解] 下拉框标签 (06:26) 1-24 [HTML超文本标记语言详解] 表单多行文本框 (02:56) 1-25 [HTML超文本标记语言详解] 框架布局准备工作 (09:30) 1-26 [HTML超文本标记语言详解] 框架结构标签frameset (08:23) 1-27 [HTML超文本标记语言详解] HTML其他标签 (11:01) 1-28 [HTML超文本标记语言详解] HTML作业练习 (03:56) 2-1 [CSS层级样式表详解] CSS的概念 (08:45) 2-2 [CSS层级样式表详解] CSS的基本语法 (06:58) 2-3 [CSS层级样式表详解] 样式的位置 (11:27) 2-4 [CSS层级样式表详解] link和@import方式的区别 (03:42) 2-5 [CSS层级样式表详解] CSS基本的选择器 (12:25) 2-6 [CSS层级样式表详解] 常见的属性 (09:03) 2-7 [CSS层级样式表详解] 文字相关的属性 (14:25) 2-8 [CSS层级样式表详解] 背景相关属性 (07:25) 2-9 [CSS层级样式表详解] 外边框相关属性 (03:18) 2-10 [CSS层级样式表详解] 圆角的常用属性 (09:31) 2-11 [CSS层级样式表详解] 列表属性 (07:24) 2-12 [CSS层级样式表详解] 属性选择器 (05:42) 2-13 [CSS层级样式表详解] 伪类样式 (09:41) 2-14 [CSS层级样式表详解] 层级选择器 (02:15) 2-15 [CSS层级样式表详解] 显示属性display (20:36) 2-16 [CSS层级样式表详解] Float浮动 (07:09) 2-17 [CSS层级样式表详解] 清除浮动 (05:08) 2-18 [CSS层级样式表详解] 相对定位 (07:09) 2-19 [CSS层级样式表详解] 绝对定位 (07:42) 2-20 [CSS层级样式表详解] 定位练习 (14:35) 2-21 [CSS层级样式表详解] CSS盒子模型 (12:49) 2-22 [CSS层级样式表详解] CSS盒子模型练习 (06:48) 3-1 [JavaScript脚本语言详解] JavaScript简介 (10:49) 3-2 [JavaScript脚本语言详解] JavaScript的位置 (09:01) 3-3 [JavaScript脚本语言详解] JS的变量声明 (08:25) 3-4 [JavaScript脚本语言详解] JS练习讲解 (08:02) 3-5 [JavaScript脚本语言详解] JS的数据类型 (08:40) 3-6 [JavaScript脚本语言详解] JS的对象类型 (04:03) 3-7 [JavaScript脚本语言详解] JS中数组的声明和循环 (09:49) 3-8 [JavaScript脚本语言详解] JS中各种弹框 (13:08) 3-9 [JavaScript脚本语言详解] JS作业 (09:34) 3-10 [JavaScript脚本语言详解] JS程序DEBUG (15:23) 3-11 [JavaScript脚本语言详解] JS中测试正则表达式 (27:38) 3-12 [JavaScript脚本语言详解] JS的数字转换 (08:32) 3-13 [JavaScript脚本语言详解] JS中随机数 (21:18) 3-14 [JavaScript脚本语言详解] JS数组的各种排序 (08:29) 3-15 [JavaScript脚本语言详解] JS的练习 (06:03) 3-16 [JavaScript脚本语言详解] 正则表达式引入 (21:48) 3-17 [JavaScript脚本语言详解] 正则表达式字符串匹配 (10:54) 3-18 [JavaScript脚本语言详解] 正则表达式匹配-抽取-分割-替换 (06:53) 3-19 [JavaScript脚本语言详解] 正则表达式的作业 (07:10) 3-20 [JavaScript脚本语言详解] 解析文本文件获取对象 (42:46) 3-21 [JavaScript脚本语言详解] 获取用户数据并验证 (10:49) 3-22 [JavaScript脚本语言详解] 练习程序的问题 (37:24) 3-23 [JavaScript脚本语言详解] JS的表单验证需求 (04:26) 3-24 [JavaScript脚本语言详解] JS网页版本的注册验证 (15:10) 3-25 [JavaScript脚本语言详解] 控制台注册BUG (07:58) 3-26 [JavaScript脚本语言详解] InnerText和InnerHTML区别 (11:38) 3-27 [JavaScript脚本语言详解] 抽奖程序 (21:22) 3-28 [JavaScript脚本语言详解] 定时器小案例 (06:26) 3-29 [JavaScript脚本语言详解] 元素的动态添加和删除 (09:22) 3-30 [JavaScript脚本语言详解] 标签追加移除练习 (08:15) 3-31 [JavaScript脚本语言详解] 表格练习案例 (10:51) 3-32 [JavaScript脚本语言详解] Window对象尺寸相关的熟悉 (11:54) 3-33 [JavaScript脚本语言详解] 浏览器的信息获取 (17:19) 3-34 [JavaScript脚本语言详解] JS预留练习 (08:56) 3-35 [JavaScript脚本语言详解] 使用IO响应一个页面 (22:34) 3-36 [JavaScript脚本语言详解] 模拟Web服务器 (13:29) 3-37 [JavaScript脚本语言详解] 二级联动练习 (17:39) 3-38 [JavaScript脚本语言详解] 关键字着色 (16:35) 3-39 [JavaScript脚本语言详解] 正则表达式的问题 (15:05) 3-40 [JavaScript脚本语言详解] 敏感词过滤 (16:35) 3-41 [JavaScript脚本语言详解] 切换网页背景图 (15:01) 3-42 [JavaScript脚本语言详解] 文字输入字数限制截取 (06:22) 3-43 [JavaScript脚本语言详解] 获取焦点和失去焦点事件 (07:43) 3-44 [JavaScript脚本语言详解] 服务器响应一个HTML页面 (11:17) 3-45 [JavaScript脚本语言详解] 响应一个404页面 (05:23) 3-46 [JavaScript脚本语言详解] 模拟一个web程序 (29:09) 4-1 [Jquery封装库详解] JS常见的封装库有哪些 (31:53) 4-2 [Jquery封装库详解] Jquery简介 (10:52) 4-3 [Jquery封装库详解] Jquery的第一个程序 (14:30) 4-4 [Jquery封装库详解] onload事件和ready事件的区别 (12:29) 4-5 [Jquery封装库详解] Jquery对象和JS对象互转 (17:59) 4-6 [Jquery封装库详解] Jquery对象和JS对象互转例子 (02:28) 4-7 [Jquery封装库详解] Jquery的链式编程 (03:47) 4-8 [Jquery封装库详解] 暂停或恢复ready事件的执行 (06:02) 4-9 [Jquery封装库详解] Jquery小练习 (07:48) 4-10 [Jquery封装库详解] Jquery作业 (09:08) 4-11 [Jquery封装库详解] Jquery案例练习 (21:09) 4-12 [Jquery封装库详解] Jquery版本的开灯关灯 (05:28) 4-13 [Jquery封装库详解] Jquery选择器 (17:45) 4-14 [Jquery封装库详解] Jquery层级选择器 (21:57) 4-15 [Jquery封装库详解] Jqury案例-抽奖 (07:00) 4-16 [Jquery封装库详解] Jquery抽奖案例 (16:46) 4-17 [Jquery封装库详解] 基本过滤和内容过滤选择器 (11:29) 4-18 [Jquery封装库详解] 可见性过滤选择器 (10:00) 4-19 [Jquery封装库详解] 属性选择器 (08:49) 4-20 [Jquery封装库详解] Jquery案例练习 (04:43) 4-21 [Jquery封装库详解] 创建一个购物车页面 (09:42) 4-22 [Jquery封装库详解] 购物车案例-全选和反选 (15:57) 4-23 [Jquery封装库详解] 获取这是或者删除属性 (14:11) 4-24 [Jquery封装库详解] 下拉框是否选中Jquery设置 (06:57) 4-25 [Jquery封装库详解] Jquery样式操作 (10:51) 4-26 [Jquery封装库详解] Jquery的值的操作 (09:43) 4-27 [Jquery封装库详解] Jquery的DOM元素添加 (08:58) 4-28 [Jquery封装库详解] Jquery的DOM元素的删除 (15:38) 4-29 [Jquery封装库详解] JqueryDOM元素替换和克隆 (15:15) 4-30 [Jquery封装库详解] Jquery购物车案例练习需求 (10:46) 4-31 [Jquery封装库详解] 购物车案例-添加购物车选项 (19:30) 4-32 [Jquery封装库详解] 购物车案例-商品数量的递增递减 (15:39) 4-33 [Jquery封装库详解] 购物车案例-删除当前行 (03:47) 4-34 [Jquery封装库详解] 购物车案例-计算总金额 (16:25) 4-35 [Jquery封装库详解] 购物车案例-更新 (11:26) 4-36 [Jquery封装库详解] Jquery-案例下拉框移动 (09:31) 4-37 [Jquery封装库详解] jQuery事件和传统js事件的区别 (07:12) 4-38 [Jquery封装库详解] jQuery的事件绑定和解除 (08:56) 4-39 [Jquery封装库详解] Jquery折叠菜单的需求 (04:34) 4-40 [Jquery封装库详解] Jquery折叠菜单练习 (08:41) 4-41 [Jquery封装库详解] 事件委派的概念 (11:01) 4-42 [Jquery封装库详解] Jquery事件委派机制 (19:30) 4-43 [Jquery封装库详解] Jquery新版本事件委派机制 (07:23) 4-44 [Jquery封装库详解] Jquery事件默认事件行为和冒泡 (19:31) 4-45 [Jquery封装库详解] Jquery一次性事件和自动触发事件 (10:52) 4-46 [Jquery封装库详解] Jquery的toggle事件切换 (16:58) 4-47 [Jquery封装库详解] Jquery的hover事件切换 (03:25) 4-48 [Jquery封装库详解] mouseenter和mouseover区别 (08:00)
