8年前端带你HTML+CSS入门到实战（附视频+源码）
Posted 经海路大白狗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了8年前端带你HTML+CSS入门到实战（附视频+源码）相关的知识，希望对你有一定的参考价值。
本文主要是解决：
☆ 想要自学前端开发，
☆ 但又不太想看博客文章，
☆ 觉得自学有点吃力，有点不知道学习步骤的同学
目录
一、html
学习前端第一步是HTML,HTML是前端世界里的最基础也是最重要的部分之一。因为前端做的95%的工作几乎都是获取HTML元素，操作HTML元素，可以说服务端即便本事通天，手触海底，很多时候做的工作也是为我们前端HTML元素在做准备工作。
所以HTML看看有哪些标签，看完了就直接跳过去，开始CSS的学习，还不可取的。
1、需要了解熟练的标签
例如：
当要布局一个区域的时候，首先想到div标签；
当要布局一个列表的时候，可以想到ul li标签，也可以想到利用多个块元素去罗列，也可以想到采用多个行内的span元素通过转为行内元素去布局罗列；
当需要跳转的时候立刻要想到a标签，并且直接添加上href目标属性；
当需要布局一个图片的时候，是否可以直接想到img标签，并且可以明白src属性里的路径怎么样是绝对路径或者相对路径的使用，./ 和 ../ 路径查找的使用规则；
需要明白table这个标签是布局表格的，但哪些情况可以用table，哪些情况就必须用div和其他一些元素代替；
需要显示一个按钮的时候，什么时候采用button元素，什么时候写一个input type="submit"的元素；
输入框，密码框，单选框，复选框，富文本 这些是否可以灵活运用，并且什么时候需要套到form元素里，什么时候可以不套进去
哪些元素是单标签，哪些元素是双标签，必须写结束标签的；
2、不太常用的标签
例如：
iframe标签哪些时候用，他都有哪些属性；
dt dl 这些标签既然不常用，那么哪些场景可以用一下，或者一直不用也可以？
doctype是不是一个标签元素，这个声明的含义是什么；
h1到h6标签用于哪些场景，是不是不用也可以，哪些场景就用起来比较合适
等等等等吧，都是需要学习的
3、怎么算是HTML学好了，可以继续学CSS了
其实HTML标签非常多，即便高手也不可能每个都记到脑子里，非常清除他的底层意蕴。所以你需要做到的就是，看见一个区域，很快知道该用哪个元素去布局，哪里该用大的块元素，哪里是最终的那个行内元素，哪里需要把块元素转换一下，让他横着拍起来，哪里需要把行内元素转成块元素，用去嵌套其他元素。
有了这个思路，再加以练习，很快就可以开始下一步了。
4、那么还有不常用不熟练的怎么办？
你需要尽量把每个元素都练一遍，大致看看他的作用，自己做到有印象，可能平时想不起来，但别人提起来，或者做到某个布局的时候，可以联想到有这么个元素，但由于用不用两可，就不去用。
再有不熟练的怎么办，去查
5、看视频学什么？
看视频主要是解决入门的问题，不知道学习步骤的问题。即便是念了几万元的培训班下来，也是口诀666，实战就挠头。
所以，看视频还要看教你学习思路的视频，遇到不明白的，不熟悉的应该怎么去查，怎么去学习。
还要培养自己举一反三的能力，因为课上不可能把所有的知识点，练习都过一遍，而且更重要的是，参加工作了步入职场，能不能做到举一反三，比别人都一种思路，决定着你这个人是否是一个有灵性的人。
其实做开发，我们不需要多高的智商，只要入门了，然后肯下功夫就可以啦。（当然，找到了一个能让你入门的指引很重要）
二、CSS部分
很多人的对css的总结还停留在css是化妆师，可以让页面变得更漂亮上，其实不止于此，css还可以针对同类型的HTML元素，书写一个样式类就控制其样式显示，起到一个总控的作用；同时css也越来越强大，做出各种流畅的动画，同时启用GPU硬件加速的优秀特性，可以说如果某一天页面里没有js了，只用css控制HTML了我也相信。
1、怎么算入门了
当你需要布局一个区域的时候，你可以快速知道用什么HTML元素，不管是块元素，或者行内元素，可以通过块与行内的转换快速布局出来；
当你需要把一个元素定位到自己需要的位置的时候，想怎么定位怎么定位，想让他在哪里在哪里；
当你需要不管是float将两个块元素横向排列起来，还是通过display flex布局，还是转为行内元素，可以随心所欲，怎么做也可以的时候，
当你需要做一个按钮，不管是用span a div button 都得心应手的时候，
当需要鼠标上移变色，鼠标上移有个小过渡动画的时候，你可以快速写出来，就已经入门了
2、仍然会有不熟练的，甚至没有做过的
当你上一步可以看视频做到举一反三，并且很熟练的时候，其实已经可以面对日常的开发工作了。再遇见不熟练的，就去查，去别的网站爬，怎么爬，我视频里有，不要一说到爬虫就感觉好高端，我们前端只要你想获取到的，只要他们敢暴露出来的，我们一样可以快速爬过来。我的视频里应该有对应的部分。
谁都会有不熟练的，但不熟练并不是借口，你需要的是述职，通过练习熟知，即便不熟练，当你打开百度那一刻，可能很快你就能找到他了。
3、视频中还有实战项目哦
我自己想了一个项目，并且做出了具体的静态页面，供大家HTML + CSS实战练习。分为首页，列表页，详情页，个人中心等页面，还有登录，注册弹框等页面的练习。
其实一个网站如果想做成熟了，大概会有百八十个页面吧，但我这些都是主干页面，意思就是不管一个网站做多大，都只是这个主干的业务扩展，技术点上来说，80%还是这些技术点的复制粘贴，
后续还有很多知识点，我会利用休息时间慢慢补充的，有需要的也可以给我提建议！
三、视频和实战源码已上传
其实看视频只是一个入门，不会让你精通的，
精通还是要不断的练习；
参加工作，有了自己的理解，再不断实战中总结的东西，再将总结辅助工作实战，这样得出的才是开发真理所在；
当然这还不算精通，怎么算精通呢，其实日常工作中，大家80 90 % 的工作都是哪些东西，一旦碰见10%了，其实大部分人都觉得吃力，那么就是谁遇到了，谁做出来了而已。真正的精通场景是什么呢？面试，简历上写了精通，面试答题666，这就精通了。然后入职以后继续做日常工作。
名人名言咋说的来着：面试造火箭，工作拧螺丝。
同时高能预警：未来你的服务端同学可能会用node java python mysql 等语言，前端初学者不建议去过早触碰这些东西，等你有了一定的经验基础，如果还有时间，会有机会的。甚至最近特别火的chatgpt，感兴趣可以了解一下，但是不至于过多的花费时间。
最后：我所希望解决的问题并不大，只是想让初学者入门顺带实战，找到学习的一个路线，帮你给家里节省点培训费用，而已。
后续还有很多知识点，我会利用休息时间慢慢补充的，有需要的也可以给我提建议！
以上是关于8年前端带你HTML+CSS入门到实战（附视频+源码）的主要内容，如果未能解决你的问题，请参考以下文章
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css附视频+源码
数据库DBA养成计划！MySQL从入门到精通视频教程（附实战项目）
R语言实战应用精讲50篇（二十八）-大量代码示例带你从基础到高级（附R语言代码）