技术新手，从何下手HTML5？

HTML与CSS的学习顺序

你曾经有没有这样的感受呢？虽然HTML5学堂中关于HTML与CSS的文章不少的，但是却不知从何下手？

这样的日子，将从今天一去不复返了~！今天，是我们HTML5学堂“进化”改版之后的第一篇HTML与CSS的文章，和我们一起，从这篇文章出发，一步步逐渐拿下“HTML与CSS”吧~！

首先，希望所有要学习HTML与CSS的小伙伴们有这样一个意识：实现一个网页的布局很简单，但是想要将写出“扩展性良好、语义性强、规范”的前端页面却没有那么简单。HTML结构的选择以及CSS样式的处理，除了要考虑基本的视觉效果与兼容之外，还需要考虑后台数据的影响，对SEO的影响，对服务器请求速度、网页加载速度的影响等等。

HTML与CSS知识的基本组成

1 浏览器的基本知识与兼容

2 布局的前期工作与实现思路

3 标签的基本知识（HTML）

4 CSS（样式）

5 工具类文件的使用

具体说说这些知识吧

1 浏览器的基本知识与兼容

1.1 发展史

1.2 内核与内核前缀

1.3 hack

1.4 兼容问题（兼容是未来前端/HTML5开发工程师的不归路）

1.5 调试方法

2 布局的前期工作与实现思路

2.1 网站制作开发流程

2.2 网页的基本组成

2.3 布局的概念与种类

3 标签的基本知识（HTML）

3.1 种类

3.2 SEO与选用

3.3 书写规范

4 样式

4.1 CSS引入方式

4.2 CSS选择器

4.3 CSS显示属性

4.4 CSS自身属性（盒模型）

4.5 CSS文本属性

4.6 代码规范

5 工具及其他相关技术

5.1 背景图合并 / CSS Sprite

5.2 PhotoShop抠图

5.3 CSS压缩（less、sass等）

特别提醒

利利在此特别提醒，千万不要按照上面的项目自上而下学习，除非你打算像利利一样，花一年多时间自学别人两个月能够学完的东西。上面罗列的项目是给大家比较直观的一个概念，而网站的开发与实现并非依照上面的这种流程和步骤。因此HTML5学堂-利利&堡堡，在此推荐大家的学习顺序是：

——> 掌握基本工具与调试方法

——> 标签学习

——> 网页一级布局

——> 具体模块布局

——> 模块内部实

——> 代码兼容。

（PS：还有一个是关于“代码优化”，这个部分建议贯穿网页布局与模块实现）

关于结构与样式，从技术层面上来说，这两者是相互独立的，但是从网页功能的实现层面上来说，却是彼此依赖并构成一个整体，因此在学习时，极其不建议分开学习，建议穿插学习，那么怎么样的穿插顺序呢？跟着我们的微信号一步一步来，肯定没有问题的~

利利强烈建议各位在学习HTML5之前，对HTML5这个技术以及整个行业有一定的了解，而不要过于盲目，因此对于不是太了解HTML5行业的朋友们，可以点击“精选文章”导航里的“初学之路”模块进行查看。

HTML5的基本编辑器与调试方法

另外，今天提一下HTML5的基本编辑器与调试方法

个人推荐使用Sublime Text的编辑器（关于该编辑器的用法、快捷键、插件安装等，可以查看我们官网[PC端]中的相关文章，在这里就不讲解了）。

另外还有一些人会对“H5 Builder”情有独钟，相比Sublime，这个软件的内存消耗量比较大，但是功能还是没有什么问题的。Dreamweaver个人不推荐，当然如果你执意要用记事本神马的，我也不拦着，因为它的确能写代码。

关于调试，其实是很重要的一个环节，毕竟我们在学习时（无论培训还是自学），都会涉及到代码错误，掌握调试的基本方法，并解决代码问题，是开发攻城狮们必备的技能，关于调试方法，后面我们会随着讲解的进行具体提到。

下周我们将继续于周一为大家分享HTML+CSS的基础知识，下期的主要内容为：网站制作流程。

对于HTML5学堂“进化”后的每次分享之后的内容，都在“新版往期”的菜单栏当中

对于想了解其他HTML与CSS技术的工程师，可以点击导航，查看我们此前书写的HTML与CSS技术文章