前端HTML、CSS、Javascript技术的学习总结

预计所需阅读时间：4分钟

学的是Python全栈，主要以写Python的代码为主，同时也要接触不同语言类的代码。其中也学习了前端的HTML、CSS、Javascript语言。目前还不算很好的经验，前面部分只能算是我的吐槽吧。

这几天做前端的练习作业差点做得吐出血来，至少我已经捶过桌子，经常有想砸键盘的感觉，做完最后一题，已经比较焦虑，心里骂前端技术：真是丧心病狂。学习工科知识和编程技术最强调的是反馈。在《刻意练习》中提到到3F：专注、反馈和调整。其中，反馈就是指学习、练习该知识能得到及时、准备的反馈。在我看来HTML和CSS的反馈比较差，学完或做过多作业，根本不确定哪些是有效的、哪些是最好的。因为兼容性，HTML、CSS不能像其它语言一出错就运行不了，那可以像Javascript有个后台，显示有错误和异常。例如，我写图片img标签地址时，多了个/，就找不到图片，至少在后台也输出这些异常好让学前端的人排查。

这也里也总结我查了很久才知道的错误：

在写transform, transition, animation有关动画的样式时，冒号、语句、分号之间一定要空好英文半格。

class选择器可多写，可指向同类的地方，而id选择器具有唯一性，只能指向单个地方，注意区分。

写在标签里的内联样式，注意之间的空格、分号、引号，如果没有到很熟练的地步，就写一个预览一个，因为目前还比较难判断会因为什么而没生效，习惯有自动完成的IDE也很容易忽略一些格式，而导致样式不生效。

写在内部的样式，换行写样式时，容易最后忘了加分号，也会导致样式失效。

有时，细调一些样式，不一定能肉眼看出区别和变化，可以写把样式值写大点，如果看到效就改小再微调。在浏览器开发者工具样式栏那里直接修改样式和样式值是个好方法。

制作前端网页一定要布局好，各种标签元素有些是行内排列，有些是块排列，这是用div和span先装好这些元素，定位、对齐、大小调整好，再细化各种文字、图片的排版，最后才设置动画、变形的样式。

另外说一下，XML这种存储数据的像HTML的语言，而JSON像Python的字典加列表。前者都是有对称的标签，如果是嵌套的，那更加难读。而Python通过缩进来表达嵌套的结构，总体看就像是二维的，每个缩进都是有意义。而HTML、XML都可压缩可一行文本，缩进没有很大的语法意义，其表达是线性的。Javascript好一些换行有作用，如果不换行写函数就一定要加分号。

现在幸好有jQuery、Bootstrap等工具和框架，我觉得拯救很多全栈工程师或被迫写前端网页的后端工程师，就像搭积木那样方便，能通过简单的样式类把模式调整好，不用那么费神，同时大大增加了网页的兼容性。不然，如果某人随便提了个需求或伪需求，那做辛苦在MVC框架做完种CURD，然后就要面对头痛的前端，还考考虑不同设备、不同屏幕、不同浏览器的兼容问题，那这个过程实在太痛苦了。

最后，说一下Javascript，一开始我是拒绝的，因为它没Python的一些优点，尤其是在学操作符运算和面向对象时，没有Python那种简洁、优雅的感觉，很多变化。作为，Python全栈工程师还是要将Javascript当作第二语言来学。学到JS的面向对象、BOM、DOM的时候，觉得有点。现在有点理解，刚学习Python时，把基础的数据类型作为输入，输出也是这些数据类型，操作的是控制台的输出和文件读写。而学到数据分析模块时，输入的数据文件、扩展的数据类型、Excel、JSON等种文件，输出的是各种数据类型和图表，这里操作的对象是数据文件、可读性高的图片和文件或是基础算法。那么JS输入的也是基础数据类型，没有比Python多，输出在控制台、网页、网页的部分标签上，操作的对象是浏览器的信息、网页文件和各输入到浏览器中的键盘、鼠标事件。只是目前，对BOM、DOM（包括事件）没有Python的一些对象那么熟悉。面向对象的思维还是一样的。

Jquery的代码一定要要网页尾部作为第为第一个JS文件来加载，其它很多JS插件都会依赖Jquery的代码，如果不第一个加载载，后面的JS代码很容易失效。

Javascript的有错误也很难看出来，那就多通过console.log()把过程的变量或函数打印出来，帮助判断。

走过前端的坑，可能后面还会踩一些坑的，只希望我们都不踩那么深。