跨越门槛：从环境配置到语义化思维
前端开发并非单纯敲击键盘，而是构建严谨的逻辑与结构。许多零基础学员在初期最容易放弃的原因，不是代码太难，而是对开发环境陌生以及缺乏正确的文档编写习惯。这门课程首要解决的问题，就是填补“知道语法却写不出标准页面”的能力缺口。课程开篇并未直接进入标签讲解，而是花费大量篇幅夯实工具基础，特别是 Sublime Text 编辑器与 Vim 键位、Emmet 插件的深度结合。这看似繁琐，实则是为了打破初学者对图形界面和自动补全的依赖，强制建立肌肉记忆，从而在未来的高速编码中保持流畅。HTML5 部分则重点纠正以往零散的标签认知，引入语义化概念，让学习者明白为何 header、nav 等标签比通用的 div 更优，这是从“能写”到“写好”的关键转折。
学习路径与针对性补强建议
建议采用线性递进的学习顺序。第一阶段必须死磕 Sublime 的配置与 Vim 操作，不要指望边查文档边练，要通过重复训练形成本能，这部分若跳过，后续效率将大打折扣。第二阶段进入 HTML5 核心，重点攻克文本格式、图片链接及多媒体标签。对于已经了解基础语法的学员，无需逐帧观看，可直接定位至 HTML5 新增语义标签和属性规范章节进行查漏补缺，验证自己是否忽略了无障碍访问（alt 属性等）等细节。配套练习是学习的重中之重，每节课后务必脱离视频，独立从零搭建一个包含导航栏、侧边栏和正文区域的静态网页结构，而非直接复制粘贴源码。只有通过亲手输入每一个标签，才能真正内化结构逻辑。
学完成果与资料高效利用
完成本课程后，你将具备独立完成复杂静态网页结构搭建的能力。你不仅能准确运用 HTML5 语义标签优化代码可读性，还能熟练驾驭开发工具提升编写效率，为后续 CSS3 样式设计和 JavaScript 交互开发扫清障碍。你将能够回答“如何构建符合 SEO 规范的页面”、“如何利用 Emmet 加速布局”等专业问题。在资料使用上，建议采用“预习-实操-复盘”模式：先阅读课件理解概念，再打开编辑器对照练习，最后对比讲师提供的标准代码，检查自身在标签嵌套、属性书写上的细微差距。不要仅仅把资料包当作参考，而应将其作为检验自己代码规范性的标尺，通过反复修正错误来巩固知识点，确保每一行代码都经得起推敲。
课程目录
1-1 [开班典礼] WEB前端线上开班典礼 (01:18:39) 2-1 [Sublime网站开发编辑器] Sublime软件安装 (41:05) 2-2 [Sublime网站开发编辑器] Sublime下vim编辑器启用 (50:30) 2-3 [Sublime网站开发编辑器] Sublime快捷键使用 (46:37) 2-4 [Sublime网站开发编辑器] Sublime下emmet插件使用 (55:34) 3-1 [HTML5页面标签] HTML5作用与使用 (38:45) 3-2 [HTML5页面标签] HTML5标签基础 (55:58) 3-3 [HTML5页面标签] HTML5格式标签 (45:28) 3-4 [HTML5页面标签] HTML5文本标签 (50:46) 3-5 [HTML5页面标签] HTML5图片标签 (24:48) 3-6 [HTML5页面标签] HTML5中图片热点 (24:01) 3-7 [HTML5页面标签] HTML5中表格标签 (49:01) 3-8 [HTML5页面标签] HTML5超链接使用 (26:13) 3-9 [HTML5页面标签] HTML5中表标签 (23:53) 3-10 [HTML5页面标签] HTML5中表单元素和iframe框架 (35:54) 3-11 [HTML5页面标签] HTML5中frame框架使用 (23:45) 3-12 [HTML5页面标签] HTML5新增标签 (41:06) 3-13 [HTML5页面标签] HTML5与DOM结合 (44:58) 4-1 [CSS3样式设计] CSS3写法和优先级 (53:29) 4-2 [CSS3样式设计] CSS3强大选择器 (51:29) 4-3 [CSS3样式设计] CSS3背景样式 (01:05:02) 4-4 [CSS3样式设计] CSS3边框与鼠标样式 (40:35) 4-5 [CSS3样式设计] CSS3表格样式 (45:50) 4-6 [CSS3样式设计] CSS3边框和列表样式 (56:12) 4-7 [CSS3样式设计] CSS3浮动样式 (51:12) 4-8 [CSS3样式设计] CSS3项目实例 (52:17) 4-9 [CSS3样式设计] CSS3定位样式 (48:13) 4-10 [CSS3样式设计] CSS3圆角样式 (45:56) 4-11 [CSS3样式设计] CSS3新增边框和背景样式 (54:08) 4-12 [CSS3样式设计] CSS3新增文本和字体样式 (52:54) 4-13 [CSS3样式设计] CSS3列和轮廓样式 (56:23) 5-1 [JavaScript变量类型和语法] Javascript标签和位置 (44:48) 5-2 [JavaScript变量类型和语法] Javascript变量类型 (54:08) 5-3 [JavaScript变量类型和语法] Javascript数组、对象和变量检测 (46:50) 5-4 [JavaScript变量类型和语法] Javascript**全局方法和变量转换 (52:42) 5-5 [JavaScript变量类型和语法] Javascript运算符 (51:29) 5-6 [JavaScript变量类型和语法] Javascript分支判断 (54:21) 5-7 [JavaScript变量类型和语法] Javascript循环控制 (46:52) 6-1 [JavaScript内置对象] Javascript消息框 (44:15) 6-2 [JavaScript内置对象] Javascript秒表特效 (51:45) 6-3 [JavaScript内置对象] Javascript定时器 (59:20) 6-4 [JavaScript内置对象] Javascript字符串函数 (38:05) 6-5 [JavaScript内置对象] Javascript正则表达式 (52:10) 6-6 [JavaScript内置对象] Javascript正则函数 (49:31) 6-7 [JavaScript内置对象] Javascript数组函数 (53:16) 6-8 [JavaScript内置对象] Javascript事件对象 (48:54) 6-9 [JavaScript内置对象] Javascript键盘事件和特效 (49:09) 6-10 [JavaScript内置对象] Javascript表单事件 (05:14) 6-11 [JavaScript内置对象] Javascript表单特效 (41:56) 6-12 [JavaScript内置对象] Javascript窗口事件 (55:12) 6-13 [JavaScript内置对象] Javascript浏览器类型和滚动特效 (54:00) 7-1 [JavaScript BOM浏览器对象和DOM文档对象] Javascript浏览器对象和窗口对象 (53:49) 7-2 [JavaScript BOM浏览器对象和DOM文档对象] Javascript框架内特效 (55:49) 7-3 [JavaScript BOM浏览器对象和DOM文档对象] Javascript地址栏对象 (07:49) 7-4 [JavaScript BOM浏览器对象和DOM文档对象] Javascript DOM对象和获取方法 (37:40) 7-5 [JavaScript BOM浏览器对象和DOM文档对象] Javascript操作非标准属性和对象集合 (37:49) 8-1 [Javascript DOM对象和Ajax技术] Javascript单选多选和全不选特效 (54:26) 8-2 [Javascript DOM对象和Ajax技术] Javascript Ajax无刷新技术 (01:05:57) 9-1 [jQuery前端框架] jQuery类型转换和this使用 (54:11) 9-2 [jQuery前端框架] jQuery核心函数 (52:57) 9-3 [jQuery前端框架] jQuery标签页特效 (52:38) 9-4 [jQuery前端框架] jQuery基础选择器 (46:37) 9-5 [jQuery前端框架] jQuery筛选、过滤和查找选择器 (49:07) 9-6 [jQuery前端框架] jQuery文档处理和克隆操作 (46:02) 9-7 [jQuery前端框架] jQuery CSS操作 (53:01) 9-8 [jQuery前端框架] jQuery实现左侧导航实例 (58:17) 9-9 [jQuery前端框架] jQuery事件操作 (58:54) 9-10 [jQuery前端框架] jQuery事件委派和绑定 (42:10) 9-11 [jQuery前端框架] jQuery效果特效 (47:20) 9-12 [jQuery前端框架] jQuery Ajax极速操作 (01:06:32) 9-13 [jQuery前端框架] jQuery工具操作 (53:10) 9-14 [jQuery前端框架] jQuery表单验证实例 (58:39) 9-15 [jQuery前端框架] jQuery高级表单验证实例 (07:24) 9-16 [jQuery前端框架] jQuery城市级联特效 (53:44) 9-17 [jQuery前端框架] jQuery幻灯片特效 (54:03) 10-1 [BootStrap框架] Bootstrap安装与使用 (15:19) 10-2 [BootStrap框架] Bootstrap快速入门 (30:40) 10-3 [BootStrap框架] Bootstrap栅格与排版 (53:52) 10-4 [BootStrap框架] Bootstrap表格和表格样式 (49:25) 10-5 [BootStrap框架] Bootstrap表单和响应式图片 (48:14) 10-6 [BootStrap框架] Bootstrap下拉菜单 (48:20) 10-7 [BootStrap框架] Bootstrap标签页实现 (48:05) 10-8 [BootStrap框架] Bootstrap导航和导航条 (49:42) 10-9 [BootStrap框架] Bootstrap分页、标签与徽章 (42:39) 10-10 [BootStrap框架] Bootstrap列表样式 (50:09) 10-11 [BootStrap框架] Bootstrap模态框特效 (36:45) 10-12 [BootStrap框架] Bootstrap模态框和下拉菜单 (44:15) 10-13 [BootStrap框架] Bootstrap工具提示和弹出框 (50:24) 11-1 [响应式网站设计与布局] Bootstrap幻灯片插件 (53:11) 11-2 [响应式网站设计与布局] Bootstrap滚动监听 (39:21) 11-3 [响应式网站设计与布局] Jquery Media媒体查询 (58:25) 11-4 [响应式网站设计与布局] 媒体查询外部引入 (33:30) 11-5 [响应式网站设计与布局] Bootstrap移动端项目开发 (52:22) 11-6 [响应式网站设计与布局] 响应式项目完整设计与开发 (22:14) 12-1 [Node.js前端框架] Nodejs安装与使用 (24:34) 12-2 [Node.js前端框架] NodeJS REPL和Sublime开发环境 (41:58) 12-3 [Node.js前端框架] NPM模块库、WEB应用和回调函数 (36:53) 12-4 [Node.js前端框架] Event事件、模块、函数和路由 (01:09:55) 12-5 [Node.js前端框架] NodeJS全局对象 (25:18) 12-6 [Node.js前端框架] NodeJS文件系统、GET请求和工具模块 (01:01:39) 12-7 [Node.js前端框架] JS Ajax、PHP和Mysql完整项目 (49:51) 12-8 [Node.js前端框架] JS Jsonp、PHP、NodeJS和Mysql综合项目 (33:23) 13-1 [AngularJS前端框架] angularjs作用和实例 (52:37) 13-2 [AngularJS前端框架] angularjs表达式 (42:40) 13-3 [AngularJS前端框架] angularjs模型、作用域和控制器 (50:44) 13-4 [AngularJS前端框架] angularjs过滤器、Http通讯和事件模块 (45:21) 13-5 [AngularJS前端框架] angularjs表单验证和文件包含 (55:10) 13-6 [AngularJS前端框架] angularjs路由和综合项目 (39:00) 14-1 [PC网站前端开发] 酒仙网目录分析与前端台结构 (01:04:40) 14-2 [PC网站前端开发] 酒仙网后台开发 (35:19) 14-3 [PC网站前端开发] 酒仙网首页顶部导航 (46:59) 14-4 [PC网站前端开发] 酒仙网首页Banner设计 (44:49) 14-5 [PC网站前端开发] 酒仙网首页菜单与幻灯片设计 (34:40) 14-6 [PC网站前端开发] 酒仙网左侧导航实现(第1部分) (57:24) 14-7 [PC网站前端开发] 酒仙网左侧导航实现(第2部分) (31:08) 14-8 [PC网站前端开发] 酒仙网首页标签页实现 (01:02:14) 14-9 [PC网站前端开发] 酒仙网右侧标签页实现 (48:56) 14-10 [PC网站前端开发] 酒仙网右侧幻灯片实现 (34:35) 14-11 [PC网站前端开发] 酒仙网中部优惠推荐幻灯实现 (01:08:16) 14-12 [PC网站前端开发] 酒仙网葡萄酒馆楼层设计 (58:16) 14-13 [PC网站前端开发] 酒仙网葡萄酒馆楼层右侧设计 (55:43) 14-14 [PC网站前端开发] 酒仙网下部官方推荐滑条实现 (01:21:07) 14-15 [PC网站前端开发] 酒仙网下部官方推荐产品滑动实现 (42:18) 14-16 [PC网站前端开发] 酒仙网左侧滚动监听特效(第1部分) (01:10:01) 14-17 [PC网站前端开发] 酒仙网左侧滚动监听特效(第2部分) (36:50) 14-18 [PC网站前端开发] 酒仙网右侧导航实现(第1部分) (01:02:53) 14-19 [PC网站前端开发] 酒仙网右侧导航实现(第2部分) (46:19)
