别把网页骨架当背诵题：先认清自己的能力缺口
这套讲 HTML5 基础与 CSS 样式引入的资料，面对的往往是这种尴尬：简历上写着熟悉前端，真给一个静态页面让照着还原，却卡在表格嵌套乱套、表单控件类型分不清、框架拆分逻辑没概念、CSS 写在哪一层都弄混。它解决的不是高并发架构难题，而是“标签记不住、结构画不出、样式加不上”的底层欠账。适合基础零散、没系统敲过完整页面、或者从后端转岗过来需要补齐页面结构能力的人。如果你连块级元素和行内元素都讲不清，别硬撑着去看框架源码，先回来把这一季的骨架补扎实。它不讲花哨的工程化，只逼你把一个网页从纯文本到有结构、有样式、能提交数据的过程彻底走通。
建议先啃哪几块：别按顺序看，按缺口补
资料内容跨度大，不必从头死磕。第一要补的是表单元素实现，这是很多人假装会却一写就露馅的重灾区，各种输入控件、属性和提交逻辑必须自己敲一遍验证。第二是网页框架原理，别以为过时就不看，搞不懂框架集的拆分与页面间关系，后期碰到复杂后台布局照样懵。第三是 CSS 样式引入和文本背景边框，重点抓样式优先级和选择器怎么生效，而不是死记属性值。配套练习别只看不练：拿资料里的表单结构，自己手写一个注册页，包含文本框、单选、多选和下拉，再用内部样式表控制边框和背景。练完拿去测兼容，卡在哪就回去重看对应片段，别跳过。
学完能独立做什么：检验标准就一条
看完这套东西，别拿懂了多少标签自欺欺人，直接拿需求验证：给你一份原型图，你能独立拆出表格布局或框架结构，把表单元素准确摆进去，并用 CSS 把文本、链接、边框调到要求的样子，不靠现成组件库拼凑。能独立交付一个结构清晰、样式可控、表单能正常接收数据的静态页，这季内容才算补到位。如果连一个带校验的提交表单都写不利索，说明只是眼睛看会了手没跟上，回去把练习量加倍。查漏补缺就是这样，缺什么补什么，别假装什么都会，把基础骨架打牢，后面学动态交互和页面逻辑才不会塌。
课程目录
1-1 [网页基本标签] 网页基本标签1 (01:24:47) 1-2 [网页基本标签] 网页基本标签2-特殊符号、段落、换行、图像 (02:14:09) 1-3 [网页基本标签] 网页基本标签3-图像、水平线、有序无序列表 (36:09) 1-4 [网页基本标签] 网页基本标签4-超链、滚动标签和表格 (01:09:29) 1-5 [网页基本标签] 网页基本标签5-表格布局和表单元素 (01:39:43) 1-6 [网页基本标签] 网页基本标签6-基本表单元素实现 (02:07:49) 2-1 [网页框架] 网页框架-框架原理和实现 (04:07:44) 3-1 [CSS样式] css样式引入和实现原理 (04:52:47) 3-2 [CSS样式] css样式-文本、背景、边框等 (05:54:53) 3-3 [CSS样式] css样式-边框属性和链接属性 (06:19:06) 3-4 [CSS样式] css样式-样式表引入的三种方式 (01:13:35) 4-1 [javaScript脚本] js简介和引入 (01:57:13) 4-2 [javaScript脚本] js函数的封装和调用 (03:09:38) 4-3 [javaScript脚本] js计算器的实现 (02:36:21) 5-1 [DOM模型] dom讲解1 (31:15) 5-2 [DOM模型] dom讲解2 (31:15) 5-3 [DOM模型] dom讲解3 (46:10) 6-1 [JS+CSS动效处理] 浮动层实现原理讲解 (01:23:38) 6-2 [JS+CSS动效处理] 关闭浮动层和全选功能效果实现讲解 (01:57:45) 6-3 [JS+CSS动效处理] CSS效果实现讲解1 (03:56:29) 6-4 [JS+CSS动效处理] CSS效果实现讲解2 (04:20:50) 6-5 [JS+CSS动效处理] CSS效果实现讲解3-层的显示和隐藏 (02:57:52) 6-6 [JS+CSS动效处理] CSS效果实现讲解4-层的显示和隐藏 (27:32) 6-7 [JS+CSS动效处理] tab层的显示和隐藏 (45:45) 7-1 [表单验证] 表单验证-基本思路和string属性方法应用 (40:46) 7-2 [表单验证] 表单验证-email通过String方法进行的表单验证 (01:08:21) 7-3 [表单验证] 表单验证-复杂页面的设计实现 (01:12:02) 7-4 [表单验证] 表单验证-复杂页面的设计实现 (01:12:02) 7-5 [表单验证] 表单验证-复杂页面的验证和焦点事件应用实现 (01:07:38) 7-6 [表单验证] 注册验证-注册页面元素的实现 (46:39) 7-7 [表单验证] 注册验证-注册页面的js验证实现 (01:17:49) 7-8 [表单验证] 表单验证-图片触发验证和回车、tab事件 (48:40) 7-9 [表单验证] 表单验证-人物图片的移动实现思路 (38:11) 7-10 [表单验证] 表单验证-失去焦点事件实现思路 (15:35) 7-11 [表单验证] 表单验证-失去焦点事件实现 (01:15) 7-12 [表单验证] 表单验证-单选按钮事件切换实现 (44) 8-1 [HTML5新功能简介] html5-html简介和新功能 (44) 8-2 [HTML5新功能简介] html5-html5自定义标签的实现和新标签简述 (47:50) 9-1 [HTML5 canvas画布] html5-canvas的矩形、线段的绘制 (02:24:30) 9-2 [HTML5 canvas画布] html5-canvas的弧形和文本的绘制 (43:45) 9-3 [HTML5 canvas画布] html5-canvas的渐变 (57:23) 9-4 [HTML5 canvas画布] html5-canvas下的图片 (01:39:29) 10-1 [html5-svg简介] html5-svg简介 (57:35) 11-1 [HTML5 新增表单元素] html5-表单元素变化简介 (52:16) 11-2 [HTML5 新增表单元素] 表单元素-占位符、自动对焦、必须属性和datalist (52:16) 11-3 [HTML5 新增表单元素] html5-keygen和oninput属性 (46:14) 11-4 [HTML5 新增表单元素] html5-oninput属性提升和date类型表单 (01:18:28) 11-5 [HTML5 新增表单元素] html5-datetime，month和number (01:50:55) 11-6 [HTML5 新增表单元素] range，search、tel、time、url等 (40:04) 11-7 [HTML5 新增表单元素] html5-其他新增表单属性 (02:58:43) 12-1 [HTML5 音视频元素] html5-音视频标签 (27:32) 13-1 [HTML5 web存储] html5-web存储 (48:28) 14-1 [HTML5 地理定位] html5-地理定位 (40:45) 15-1 [HTML5应用缓存和web work实现机制] HTML5应用缓存和web worker机制 (28:38) 16-1 [HTML5 div-css布局和项目特效案例讲解] html5-div_css布局 (42:43) 16-2 [HTML5 div-css布局和项目特效案例讲解] html5-项目中特效案例说明 (42:28) 16-3 [HTML5 div-css布局和项目特效案例讲解] HTML5项目点评1-高仿vivo手机网站 (26:42) 16-4 [HTML5 div-css布局和项目特效案例讲解] HTML5项目点评2-高仿京东等网站 (43:11) 16-5 [HTML5 div-css布局和项目特效案例讲解] HTML5项目点评3-输入框图片问题 (44:51)
