美文网首页
前端HTML、CSS、Javascript技术的学习总结

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

作者: 清心涟漪 | 来源:发表于2020-02-20 09:11 被阅读0次

    学的是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的一些对象那么熟悉。面向对象的思维还是一样的。

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

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

    原文链接:前端HTML、CSS、Javascript技术的学习总结 - 清心涟漪

    相关文章

      网友评论

          本文标题:前端HTML、CSS、Javascript技术的学习总结

          本文链接:https://www.haomeiwen.com/subject/vdptqhtx.html