前端第一月学习记录

一个月的前端学习记录

这一个月我在实验室通过百度网盘和BI站的的学习，接触了HTML和CSS，都说这两个特简单，确实，相对其他编程语言入门要简单的一些，最大的优势就是一上手就可以看到真实的效果，学了新东西立马可以展现出来。但一路走来发现里面的坑也不少。新手想要少踩“坑”，下面的才是精髓。
手动分割线*****
HTML
HTML作为一门标记语言，可以说是前端中最简单的部分。按照我的理解，HTML的作用就是用来表示一个网页由哪些元素组成，每一个标签都会在网页中渲染出对应的元素。当然，还可以引入CSS和JS文件。HTML的学习我觉得把基础的HTML教程过一遍就可以了。把每个标签都过一遍，了解一下有哪些属性，试试教程里的实例就差不多了。这样的方式虽然了解的比较粗浅，但是等用到的时候再查也不迟。毕竟就算你全部记下来了，长时间不用还是会忘。

还有一点要注意的是代码风格，虽说HTML解释器的容错性很好，但还是建议按照严谨的风格来写，可以避免很多不必要的错误。
CSS
HTML作为网页的骨架，决定了有哪些元素。那么CSS就是网页的血肉，决定了这些元素以什么样的形式展现。 基础的部分有选择器和样式优先级

选择器
常用的标签选择器，id选择器，类名选择器，层次选择器等不必多说，必须掌握。其他选择器建议都自己实践一遍，有一番了解之后查起来心里也有数。

优先级
这没什么好说的，学会如何计算权重，能够利用优先级来覆盖样式就行。

接着来看元素样式，从宏观上来看，只要两个属性就可以决定元素在文档中的布局，那就大小和位置。位置决定了它出现在什么地方，而大小决定了它占据多大的面积。

大小
盒模型：想了解元素的大小，就一定要知道盒模型，知道一个盒子由哪些部分组成。这里需要注意的一点是box-sizing属性，一定要弄明白不同盒模型下元素大小的计算方法。
元素类型：元素分为块级（block-level）和行内（inline）两种，要清楚两者的区别，例如行内元素不可以直接去设置宽和高等等。
布局
总是用绝对定位实现布局绝对不是一个好主意，所以要好好学习一下布局的知识。我认为需要掌握的内容有：

栅格布局
flexbox布局
利用媒体查询实现的响应式布局
位置
position属性：static，relative，absolute和fixed四个值的区别，有没有脱离文档流，定位的基准是什么。
float属性：浮动的规则以及如何清除浮动。
如何居中：居中的方法说到底就那几个，多练几次就会了。
在BI站中看的前端工程师小夏老师的课，有讲解有代码。