小白转行web前端碎碎念

DAY ONE

-------------------------------------------------------------------------------------------------------------------------

       以前想过很多种岗位，目前做的建模类的工作，偏CAD的技术要求高一点，以及各种原因暂时在家里住。前不久因为一次偶然的机会开始看了一点HTML标签，感觉还比较容易理解和学习，刚开始做的时候，标签比较简单，多一个括号，小逗号，都能正常跑，后来经过老头严厉的检查以后，发现自己细节存在很多问题，从零基础到每天磕课上头，仍然每天会因为英文字母写错，小写符号不严谨，导致波浪线标红，报错，敲完一大段代码跑不出来，每天焦头烂额的检查问题，但是总的而言，还是苦中作乐，每天吸收一个小知识，解决一个小麻烦，成为了一种学习常态，目前上着朝九晚五的班，回来的学习时间，以及理想状态也也不稳定，但是从前期的闲散态度，到老头的加入，慢慢开始好好的敲码，期待每周检查一次，自信也开始有所提升，后面可能学的有点慢，希望自己减少焦虑，稳打稳扎的吸收好每一个知识点，因为明显能感觉到前期功课没做好，后面小问题层出不穷，耽误了很多有效时间。目前已经进入CSS背景位置的课程，虽然这段时间确实会难一点，但是，为了攻克这门语言，我一定要迎难而上！

 DAY TWO

---------------------------------------------------------------------------------------------------------------------------------

     今天风超大的，看天气预报说会下雨，但是并没有，总的来说还是很凉快啦！在家空调也不开，吹一下电扇，吃点小甜品和螺蛳粉还是很安逸了，每天吸收一点新知识，成长虽然很慢，但是每一步都很扎实！

注：苏姐牛奶甜品世家的招牌芋圆真的超棒，吃的是满地螺家的螺蛳粉

      好啦！言归正传，因为图片有时候涉及大小尺寸还有视觉效果，做其中一个index的时候，因为找不到和老师一样的对话框，自己在网上搜了一些相关的图片。找了一个好看的图片，先进行光影魔术手进行了色度抠图更改了颜色，再使用ps设置了一下图片尺寸，不然跑出来的图片会因为像素过大而影响到视觉效果。

总的而言，做出来没有什么难看的地方，还是很有成就感的，第一次尝试将文本框设置成图片大小后，将图片代入能完全覆盖，并用：hover修改经过后更改图片，因为时间缘故，自己就只修改了第一个样式有这个效果。其次比较喜欢的是border-collapse=collapse;居然能比表格版的合并单元格还要好用，没出息的爱了爱了！

现在只要时间合理，我尽量将老师讲的小知识点拓宽，加入学过的元素标签，达到一个复制的效果，虽然会比较慢，但是过程总是收获满满，昨天学会了如下：

     1.使用shift+alt+鼠标左键 垂直下拉，可以一起编辑相同的文字和其他符号元素.另外直接Ctrl+C后，Ctrl+V，也可以直接快速粘贴，提高了效率。
    2.使用小工具测量大小，外边距，取色（超级好用，省了好多事，还能避免误差），常用的主要是F1截图，测量大小，F3复制移动粘贴到练习代码界面（方便取色，测量）,Alt可以取色（或者按shift可以切换取色模式）

    3.进入浏览器，点击页面元素检查，弹出对应的页面元素，左上角有一个小箭头，点击其他元素，可以获取图片，链接，尺寸，字体（特别是做网页综合练习的时候，用的超多的！）
    4.hr水平线标签，新闻专用的横线在标题底下（做新闻页面的时候，看到老师用了一次，使用频率不高，但是可以记一下）
    5.如果想在屏幕内看到所有文本（个人习惯，不喜勿入），可以使用Alt+Z自动换行，既可以调整从记事本复制过来的文字，又可以实现在屏内查看
    6.还有因为老头的缘故，开始使用placeholder代替vaule，现在密码输入器需要文字，我也是用的这个单词，可以实现点击对话框就可以直接输入文字，对用户比较友好，相比较而言vaule还是比较僵硬，必须将原有文字删掉再进行输入。（属于表单元素的！）
    7.Ctrl+滚轮可以放大开发者工具代码大小（有时候字比较小可以轻松调节啦）
    8.一般在网页点击元素，右键单击后，左边是HTML元素结构，右边是CSS样式（有时候都是一起看，实际上还有有区别的！）
    9.尽量多学一点快捷键，比如Ctrl+N是新建（Word好像Ctrl+shift+N），Ctrl+S是保存（同时可以编辑HTML文件名）
Alt+B跳转浏览器，Ctrl+shift+l是浏览器元素检查。
    10.font复合写法，必须要有顺序，最少得有字体大小和字体类型，两个元素才能实现（因为老吃亏，现在超级注意大小写，边框，还有就是英文不能拼错了）
    11.水平居中text-align：center；
         垂直居中line height：和盒子高度一致，一般看视觉效果放在哪个位置合适，也可以进行调整。
＞盒子高度，在盒子下侧外面
＜盒子高度，在盒子偏上内面

    12.Ctrl+Y返回上一步，这个有时候会比Ctrl+Z相对友好一些，一般会返回的相对有步骤一点。
另外补充：做CAD模型的时候，学到一个快捷键，Ctrl+鼠标滑轮隐藏，Ctrl+shift+鼠标滑轮恢复
        有时候也会做一些奇怪的小尝试，比如第一个是在做盒子的时候，会把backgrond-position：center在盒子里面将文字居中，只能使用text-align：center让文字居中，但是有一个缺陷它只能水平居中，这时候padding就很香啦，适应各种环境，可以上下左右一起设置位置。
第二个就是ol li {}里面的设置下划线会影响到.nav li a{}取消下划线，因为按照权重来说，后者应该比前者大，甚至有想过继承性会为0，后来经过讨论说到是优先级的问题。

总结：抽时间学习，并有效的实践，一定会有所收获，所以事在坚持！（虽然我总是会有形形色色的问题，让检查的老头焦头烂额，超辛苦的！）
————————————————
版权声明：本文为CSDN博主「老头的伢儿」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60038162/article/details/118612839