html css 前端基础 学习方法及经验分享

前言：

　　入园第一天，想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端，但是不知道从哪儿开始，依旧有些迷茫的新手朋友们。当然，适合每个人的学习方式不同，以下所讲的仅供参考。

　　一、关于基础语法

　　对于基础语法，此处不做讲解，有需要的同学可以在w3cschool、w3school、慕课网等等进行学习。如果是刚开始接触前端，不建议通过书籍进行学习，第一是因为书籍里面有的知识可能过于陈旧，已经在新版本中被废弃，第二是因为书籍里面知识体系十分全面，很多知识可能比较难理解，且平时做项目会很少用到，如果从头到尾把一本书啃完，需要消耗的时间成本会很大，关于前端，知识的更新迭代很快，因此，快速学习是一项首要需要培养的能力。

　　现在，html5和css3早已经很火，但是，刚开始一定是要先学习html4.0版本和css2.0版本，此时，关于在新版本中废弃的标签和语法就不要去使用了，等基础OK了，再学习html5和css3时，主要学习新增的部分，即关注差异即可。

　　二、关于编辑器

　　编辑器是为了提高开发效率的，用着习惯即可，当然，dreamweaver就不推荐使用了，初学者可以使用一些比较小巧的编辑器，Notepad++，EditPlus，sublime，HBulider等都是不错的选择。Webstorm  应该是目前最优秀的一款编译器，也是使用人数最多的，当然体积也比较庞大，适合后期开始做项目的时候使用。

　　HBulider是不支持插件安装的，所有的功能都是集成好了的，它的代码提示功能很完善，对于前期的学习使用完全是够用的。sublime 是需要自己安装插件的，网上也有很多教程，此处不再赘述，需要说明的是，大家在下载编辑器的时候，一定要去官网下载，不要直接用别人已经安装好插件的编辑器，虽然说编辑器只是作为工具，不应该花费比研究代码更多的时间去研究一款工具，关于安装插件，网上很多教程都解释地很清晰，但是，当你自己去做的时候，很可能会遇到各种各样的问题，所以有些坑必须要自己踩过，你才能有更深刻的认知。

　　三、关于代码规范

　　代码写得好不好，最终的结果实现仅仅是一小部分，编程过程中的代码的规范性及语义化尤为重要，如果自己写的代码第二天自己就看不懂写的是什么了，那么对于需求更改和代码维护将是一个灾难，同时，由于代码结构不清晰，编码不规范，也很容易导致错误，而且又不容易查找。所以，从一开始就应该养成良好的编码习惯，注重细节，一定可以帮助你在学习编程的路上更加顺畅。

　　在编码的过程中，应当尽量遵循xhtml的规范，它是一个标准更严格的html版本。

　　四、关于练习

　　基础语法学习过后，就可以按照自己想实现的页面动手制作了，只有多练习，才能踩更多的坑，然后通过查阅资料解决问题，才能对所学的进一步地理解，从而更加地融汇贯通。当然，善于总结也是很重要的。

　　如果暂时没有找到合适的页面进行练习，可以先模仿一些大的网站的其中一小模块，通过F12，可以打开控制台，查看到网页的源码，当然，也可以下载一些psd设计稿，进行页面还原。

　　五、关于切图

　　切图主要涉及到Photoshop的切片工具，画切片，然后存储为web所用格式即可。其他的细节，在使用过程中逐步学习即可。

　　六、关于基础阶段需要掌握的知识点

　　任何一门技术不是要等到你全部弄懂原理，完全精通了，才可以去做项目，都是需要在有一定的基础上，然后多做项目练习，逐步去深入的，所以，特别是知识储备阶段，一定是快速过基础，然后不断在项目练习中积累经验。

　　下面简单列一下基础阶段需要掌握的知识模块，以便于有一个整体的把握：

1. 　　文件编码
2. 　　路径
3. 标签
4. 　　属性
5. 　　选择器、伪类选择器
6. 　　CSS样式
7. 　　盒模型
8. 　　margin塌陷
9. 　　块元素、行内元素、行内块及相互之间的转换
10. 　　浮动、清除浮动
11. 　　定位：相对定位、绝对定位、固定定位、定位层级
12. 　　表单控件
13. 　　单元格
14. 　　CSS Hack处理　　

结语：

　　 吾生也有涯，而知也无涯，以热爱和敬畏的态度，不断地扩展知识的深度和广度，并在工作和生活中进行实践运用，大抵是幸福的一种诠释，你看世界，世界看你的！