HTML作为一门标记语言，可以说是前端中最简单的部分。按照我的理解，HTML的作用就是用来表示一个网页由哪些元素组成，每一个标签都会在网页中渲染出对应的元素。当然，还可以引入CSS和JS文件。

 

　　HTML的学习我觉得把W3School的HTML教程过一遍就可以了。把每个标签都过一遍，了解一下有哪些属性，试试教程里的实例就差不多了。这样的方式虽然了解的比较粗浅，但是等用到的时候再查也不迟。毕竟就算你全部记下来了，长时间不用还是会忘。

 

　　还有一点要注意的是代码风格，虽说HTML解释器的容错性很好，但还是建议按照严谨的风格来写，可以避免很多不必要的错误。

 

　　HTML作为网页的骨架，决定了有哪些元素。那么CSS就是网页的血肉，决定了这些元素以什么样的形式展现。 基础的部分有选择器和样式优先级

 

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

 

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

 

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

 

　　盒模型：想了解元素的大小，就一定要知道盒模型，知道一个盒子由哪些部分组成。这里需要注意的一点是box-sizing属性，一定要弄明白不同盒模型下元素大小的计算方法。元素类型：元素分为块级（block-level）和行内（inline）两种，要清楚两者的区别，例如行内元素不可以直接去设置宽和高等等。

 

　　总是用绝对定位实现布局绝对不是一个好主意，所以要好好学习一下布局的知识。我认为需要掌握的内容有：

 

　　栅格布局flexbox布局利用媒体查询实现的响应式布局position属性：static，relative，absolute和fixed四个值的区别，有没有脱离文档流，定位的基准是什么。float属性：浮动的规则以及如何清除浮动。如何居中：居中的方法说到底就那几个，多练几次就会了。这里推荐一篇文章Centering in CSS: A Complete Guide和一个工具，可以对照着学习。

 

　　下面把目光转向元素内部的样式，这部分建议找一本系统介绍的书来看，当时我看的是大漠老师的《图解CSS3：核心技术与案例实战》，这部分主要还是要多练习，熟能生巧。

 

　　CSS的预处理方案有不少，诸如LESS,SASS,Stylus,PostCSS等等。可以选择自己喜欢的方案。我个人用的是SASS，其中的变量，mixin，嵌套写法啊可以大大提升CSS的开发效率和可维护性。所以强烈推荐使用CSS预处理器。可以看看这个教程来学习，还是比较容易的。

 

　　想让网页在不同浏览器下实现同样的展示效果是一个历史性的难题，需要很多实践和经验的积累，建议还是多练吧。

 

　　HTML和CSS入门相对容易，过一遍就能写静态页面了。这时候可以从网上下一些PSD自己对照着切，至少要把常用的内容能够熟练使用。如果对浏览器工作原理感兴趣的话，可以看看这篇文章浏览器的工作原理：新式网络浏览器幕后揭秘。

 

　　最好，想说一下自认为很重要的一条感悟：遇到问题就回归基础。 学习的过程中难免遇到看不懂或者弄不明白的地方，这时候就去找相应的基础文档来看，例如CSS权威指南。我相信你遇到的CSS问题在上面都能找到答案，而且还可以把原理搞清楚，这样再遇到同样问题的时候就不会懵逼了，这就是突破了一个瓶颈。学习就是一个不断遇到问题，不断突破瓶颈的过程，打牢了基础才能事半功倍。