黑马程序员技术交流社区

标题: 学习体会 [打印本页]

---

作者: 李斌_    时间: 2019-7-19 23:26
标题: 学习体会


     进入黑马前端班近一个月了，在这里主要想分享自己以一个零基础学员的角度来学习web前端开发的感受。

大学毕业已经两年了，学的是矿物类专业，毕业后从事的是冶金行业，可以说和计算机基本不搭边了。从一无所知的小白到现在也完成了京东详情页的一个小项目。学习过程中除了偶尔遇到困难，总体还算顺利。

第一周，初识html和ps。

学习HTML，主要是定义网页的内容。刚刚接触的我，觉得挺懵，不懂这些标签啊，格式啊，语法之类的有什么用，需要怎么去灵活的运用，随着学习的发展，慢慢的从死背，尝试着去理解，也就发现了其中的乐趣。前端真的要背诵记忆的地方很多,很多接触HTML的人都说HTML很简单，当然这种简单是针对web后端和Java而言的。
  就我目前对HTML的理解来看，HTML就像是一幅画板。里面涉及的基本格式就像是各色颜料，而其余各种元素就是要描绘出的形态。想象一下如果你能灵活的运用这些元素，那么你就能随心所欲的设计出独具个人特色的网页。所有需要获取相关内容的人都需要浏览你的网页，想想就觉得满满成就感。所以这么意义非凡的一件事，希望真正想学的人不要因为太多东西要背要记忆而放弃。我们可能要敲上成千上万行的代码，但是如果内心足够喜欢，相信这也是一件非常快乐的事。

作为一个前端工程师，我们所要掌握的知识是全面的，因此，第一个月中我们也学习了UI中PS绘图制作基础，这对于一个前端来说也是非常重要的，在今后的工作中，我们可能会面对各种各样的问题，如果掌握部分PS尤其是切图技术，在和UI的接触中可以减少很多不必要的繁琐工作。

第二周，HTML加深及css的认识。

html基本结构 熟练并能记住。

标签的使用 网页的基本标签已熟练并记住。

选择器的使用及组合 组合选择器掌握的不是很好，符号和对应的功能容易混淆。

图片、文本、视频、超链接的插入也已熟练并且几种方法都能掌握。

css盒子模型的构成和搭建。 基本熟练。实际操作有难度。

元素位置的占用方式有四种

float （浮动） 可用作导航的排列

relative (相对定位)在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素设置为position：relative；同时指定相对位移(利用top,bottom,left,right)。

有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

absolute(绝对定位)如果你想在一个页面中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。如果没有父元素，位置是相对于body来进行的。绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。

fixed（静止） 一般可用于右下侧小广告或者弹出界面或者其他。

前端学习中较为简单但又非常复杂的课程，说简单是因为学习它并不需要太多推理论证和逻辑思维，说它非常复杂则是更多的侧重在它的“杂”上，因为太多的格式和套路需要我们注意。以下谨列出本人在CSS学习中总结归归纳的一些要点，内容浅显，无非是让初学则减少一些不必要的失误。

     1.非零值要指明单位，而0不需要单位：

在用CSS指定字体、边距或大小时，必须指明所用的单位，而0零就是零，不管是 px还是em还是其他单位，它不需要单位。例如： margin: 0 20px 0 1em;

     2.如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性。

浮动对象始终是块，如果不是，请将他设置为显示块。浮动似易实难，而且不总是让人出错，如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请先给浮动对象设置宽度，再考虑将要移动到的位置是否有其他元素独占一行给站住了，如果被站住，就给那个位置的块也设置宽度，留出充分的位置和距离才能顺利浮动。如果还是有问题，这时候，考虑使用clear：清除上面的浮动对下面元素的影响。经过这几步排查，浮动其实也很简单。

    3.合理使用padding 、margin和border

合理使用padding和margin是CSS网页设计中网页格式布局的重要一环，margin多用于上下段落和部分的间距，而padding多用于段落和块内部元素位置的分配和安排。而运用border则是设置块或段落边框、下划线、左右分割线的必备手段。

   4.在global.css中提前设置网页的边框、有序和无序列表的格式、a元素的下划线和颜色设置。

在CSS中，提前设置一些基本元素的格式很有必要，可以大大减少工作精力和时间的浪费。比如列表前面的圆点和数字、a元素的下划线和淡蓝色的颜色在我们网页中几乎用不到他们原来的格式。提前将他们设置好，后面直接应用，无需每次设置，但是如果想改变原有设置，其实也很简单，只需要在正常编写中设置当次格式就好，因为当次设置总是覆盖原有设置。

总结：两星期过去了，但是自己制作网页的能力还是十分有限，网页的很多功能并没有实现，页面给人的感觉也不是十分舒适美观。有时候太过于心急，希望接下来的这一星期也能有所进步，上课认真听讲，不会的问题要及时去解决。重点：做事情一定要认真对待，善始善终。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2