前端入门学习之路，HTML、CSS篇介绍

　　本文不是教程，只要当做学习条记就好，盼望可以大概给各位还在学习的童鞋一些小小的帮助。 此文只是我自己的一些想法和见解，难免会有疏漏之处，欢迎各位吐槽。

 

　　前端涉及的内容浩繁，因此我会根据自身的理解将相关的一些内容整理在一起，本文会讲到HTML和CSS。

 

　　HTML作为一门标志语言，可以说是前端中最简略的一栏。根据我的理解，HTML的作用便是用来表现一个网页由哪些元素组成，每一个标签都市在网页中渲染出对应的元素。还可以引入CSS和JS文件。

 

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

 

　　另有一点要注意的是写代码的方式，虽说HTML解释器的容错性很好，但还是要建议用严谨的方式来写，可以克制许多不须要的错误。

 

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

 

　　常用的标签选择器，id选择器，类名选择器，层次选择器等不必多说，必须掌握了解。其他选择器发起都本身实践一遍，有一些理解后查起来自己内心也有数。

 

　　没什么好说的，学会怎样计算权重，可以大概利用优先级来覆盖样式就行。

 

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

 

　　盒模型：想理解元素的大小，就肯定要知道盒模型，知道一个盒子由哪些组成。这里必要过细的一点是box-sizing属性，肯定要弄明确差异盒模型下元素大小的计算要领。

 

　　元素范例：元素分为块级（block-level）和行内（inline）两种，要明白两者的区别，比方行内元素不行以直接去设置宽和高等等。

 

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

 

　　栅格布局

 

　　flexbox布局

 

　　利用媒体查问实现的相应式布局

 

　　position属性：static，relative，absolute和fixed四个值的区别点，有没有离开文档流，定位的基准是什么。

 

　　float属性：浮动的规矩以及怎样清除掉浮动。

 

　　怎样居中：居中的要领说到底就那几个，多练反复就会了。

 

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

 

　　CSS的预处理的方案有不少，例如LESS,SASS,Stylus,PostCSS等等。可以选择个人喜好的方案。我自己用的是SASS，此中的变量，mixin，嵌套写法可以大大提高CSS的开发的效率和可维护性。所以强力推荐用CSS预处理器。

 

　　想让网页在不一样的浏览器下实现同样的展示结果是一个历史性的难题，必要许多实践和经历的积累，所以还是多练吧

 

　　HTML和CSS入门相对容易，差不多过一遍就能写静态页面了。可以从网上下一些PSD自己对着照着练，至少要把常用的内容可以大概熟练。