先弄清值不值得学:它在解决什么具体场景

这门课讲的是网页前端的基础骨架,也就是 HTML 标签与 CSS 样式。很多上班族或转行者一上来就想学后端框架或前端组件库,但真到了实际工作里,比如要改一个活动页的排版、给内部管理系统写个静态数据展示页、或者调整某段文字的间距和颜色,绕不开的恰恰是这些最底层的网页结构。它解决的核心场景就是“从零拼出一个能在浏览器里看、且排版不乱的页面”。如果你每次看到别人发的网页源码都觉得像天书,或者改个按钮位置都要四处求人,那这门课就是帮你把这个门槛迈过去的。但如果你已经能手写常见表单并熟练用样式控制布局,这套内容对你来说就有些重复了。

适合什么基础与建议的观看顺序

资料对基础的要求几乎为零,只要你日常会用电脑装软件、能看懂基本的英文单词就能跟上。整个体系是顺着网页发展的脉络往下捋的,我建议你拿到资料后先看历史变迁那块,它不涉及敲代码,但能帮你建立“浏览器到底在解析什么”的概念。紧接着去学开发工具的安装,别小看这一步,很多新手卡在环境配不好就直接放弃了。把工具跑通后,重点放在常见标签和超链接的章节,这是构建网页骨架的关键。随后切入样式的部分,也就是怎么给文字加颜色、怎么把内容排到指定位置。不要跳着看,因为后期的图片展示等模块,都是建立在前面标签和样式相互配合的逻辑上的。

学完能独立做什么与资料配合练习的方法

完整顺下来后,你能独立做出一个结构清晰的静态网页:知道怎么用容器划分区域,怎么插入图文,怎么用超链接串联多个页面,以及怎么用样式表控制整体视觉。说白了,企业官网那种只展示信息的单页或简单的多页宣传站,你完全可以自己敲出来。至于资料怎么用,千万别把它当连续剧看。正确做法是看完一个标签或样式的讲解,立刻暂停视频,自己在编辑器里照着写一遍并刷新浏览器看效果。遇到图片相关的章节,自己找几张本地的照片替换进去试排版。这套资料里提到的每个标签,你都要在手里过一遍代码,只看不练,到了下周大概率连标签名都忘光。务实点说,前端就是个熟练工种,资料只是给你指路,代码能不能跑全看你自己在键盘上敲了多少。

课程目录

课程目录20 集
  • 1-1 [历史与变迁] 历史与变迁 (09:37).mp4
  • 2-1 [HTML和CSS基础] 第一行html (12:00).mp4
  • 2-2 [HTML和CSS基础] 开发工具的安装和使用 (16:55).mp4
  • 2-3 [HTML和CSS基础] 常见html标签1-1 (12:25).mp4
  • 2-4 [HTML和CSS基础] 常见html标签2-1 (06:29).mp4
  • 2-5 [HTML和CSS基础] html超链接1-1 (15:49).mp4
  • 2-6 [HTML和CSS基础] html超链接2-1 (09:02).mp4
  • 2-7 [HTML和CSS基础] *行css (30:52).mp4
  • 2-8 [HTML和CSS基础] css颜色 (12:13).mp4
  • 2-9 [HTML和CSS基础] html中的css (07:10).mp4
  • 3-1 [网页图片] 网页图片简介 (03:33).mp4
  • 3-2 [网页图片] 内容图片1-1 (12:28).mp4
  • 3-3 [网页图片] 内容图片2-1 (05:09).mp4
  • 3-4 [网页图片] 背景图片 (13:27).mp4
  • 4-1 [网页布局] 布局入门1-1 (16:54).mp4
  • 4-2 [网页布局] 布局入门2-1 (08:25).mp4
  • 4-3 [网页布局] 盒模式1-1 (06:39).mp4
  • 4-4 [网页布局] 盒模式2-1 (16:15).mp4
  • 4-5 [网页布局] 浮动布局 (07:43).mp4
  • 4-6 [网页布局] 定位 (06:02).mp4