概要

本文主要总结小编4个月以来入门学习HTML开发的过程总结和心得体会，希望对想入行的小伙伴们有少少帮助。部分体会带有较重的个人感情色彩，毕竟是写主观内容，望读者平视之。

从开始学习到发布第一个H5项目

小编入行iOS开发2年有余，整个过程下来，对学习软件编程的套路有了深刻的理解和感受，为验证这一学习方法的可行性，小编决定拿一门开发语言来实践检验。鉴于行情里h5正是开始发热阶段，开发难度低些，所以就选它了，即使对前端开发者来说，学了后端开发会更完美。
H5主要指移动端的网页开发，和web前端还是有些区别的，但是开发中也适配PC(个人电脑person computer)端

开写前调研

每次做重大决定前，都会对所选方向的可能困难、麻烦进行评估，并大概想想如何处理相关困难，这样能更好做到持久作战，不容易放弃。
所以我先对HTML5各方面作个了解，比如原始定义、行情、技术难度、市场动态、最麻烦或者最难点、要学什么、学习资源等。并把重要信息记录下来，一开始就记录到一个归类里，后面再添加和修改。
能搜索到这篇博客，说明你已经有这个意识了。

获取学习资源

从获取学习资源开始，你就正式开始进入学习阶段了。这个阶段，你应该搜索到很多提高路径和学习资源了。
首先肯定是HTML、CSS、JavaScript语法学习。W3C标准、H5中国、H5 JS API、菜鸟教程等。
想要系统地学习相关知识，通过书籍是很好的方法。HTML5+CSS3+JavaScript网页设计案例课堂、HTML5移动Web开发实战、JavaScript高级程序设计。
观看教学视频能快速学习新技术。它不像看书需要良好的状态，也不像技术文档那么多文字图片，通过讲师的语言就能很快很明白的让你批量学到技术点。即使毫无基础，第一次看视频收获也很大。
小编首先过了一遍HTML，CSS，JavaScript的基础视频。后面快要做项目了，才看项目实战视频。在视频里有很多技术和开发技巧是其他资源学不到的。

开始写代码

主动敲代码是最关键的一步。只有真正去调试代码，才能理解和记忆各个代码的效果、细节和区别。

安装IDE

工具的重要性就不多说了，没有哪个正常人会徒手砍大树，所以会安装、使用和设置IDE（集成开发环境，Integrated Development Environment）是程序员的必备技能之一。以下介绍几个主流HTML编辑器：
Sublime Text
Dreamwave
Webstorm
当然，意识好的话，你也许会先去百度百科之类的网页了解它们，或者搜索“好用的HTML编辑器”，查阅了足够资料再下手。
破解相关的就不再多说了，Windows和Mac OS都已有教程，按照文档说明操作就可以。开发之路很多实现都要根据文档来解决的，这是迟早要精通的技能。

按照书本敲代码

书本会从基础慢慢介绍各种标签，按照上面的内容调试出基本的效果。当然，书上的内容那么少，不可能局限于里面的知识，书，应该被当成为引导。
所以，你得要各个细节都自己查阅资料，详细学习那些知识点。
一开始，遇到doctype,html,head,body等，都去百度或者谷歌搜索相关的技术博客，遇到什么其他新内容也去调研。这样的话，往往查一个小知识却会花费很多时间，阅读大量的文档。这个过程的沉淀是非常重要的，你不但可以详细了解这个模块的技术，还能学到相关的其他要点。
像常见属性值的各种效果，很多技术博客都是图文说明，看了之后方便理解和记忆，自己调试也很快得到效果。
整个过程就是学习HTML标签的设置，CSS的布局控制和JavaScript的交互和数据处理。

编码规范

不管哪门开发语言，都有编码规范。所以养成良好的习惯是必要的，特别是开始的时候就注意着方面，否则以后要改掉坏习惯就难多了。
开始写的时候，你就应该经常去查看相关的编码规范。说是相关的，因为HTML，CSS和JavaScript的编码规范是不一样的。即使发布前要压缩代码，但是压缩前的代码还是要根据规范来写，免得坑了日后的自己或者别人。

调试代码

写代码的过程也会包含调试代码的操作，小模块很快写完来调试，但是内容多的时候，往往是写一个效果或者改动一处代码会马上查看结果，特别是要适配那么多的浏览器、版本和设备尺寸。

PC端

直接用浏览器打开html文件或者保存代码后刷新已打开的html网页。

移动端

调试移动端的网页，分为模拟器调试和真机调试。

模拟器

模拟器调试途径比较多，小编在这里大概罗列一下：各浏览器查看元素里选移动设备、安卓模拟器、iOS模拟器等。小编觉得用模拟器软件的时候电脑太卡了，所以选择浏览器带的模拟器，谷歌浏览器的模拟器设计得比较方便操作，界面好，所以小编主要用它调试。打开方法：右键网页->检查->Toggle device mode。
断点调试JavaScript代码：浏览器窗口拉开足够宽（一般的电脑最大化就可以），找到Toggel device mode右边的第三个Sources，选择左边第一个小窗口的一个网页文件，中间是代码窗口，再过来就是debugger窗口。代码窗口里，左边一列是行数，点击那些数字会添加或者取消断点。

真机调试

windows可以通过设置iis实现局域网真机调试，而小编用的是Mac OS，故选择的是weinre工具。官网里有安装和运行流程，但是有个细节没有说明，导致小编研究了很久才使用成功，下面将补上这个细节：
运行weinre服务之前，应该把源码放到/usr/local/lib/node_modules/weinre/web下，然后再运行weinre服务，如$ weinre –boundHost 192.168.1.123 –httpPort 8888。手机浏览器打开http://192.168.1.123:8888/fileName.html ，fileName就是你要运行看效果的html源码文件。有文件夹的话，按web目录下拼接后面部分即可，如：http://192.168.1.123:8888/projects/helloworld/helloworld.html 。如想在其他app内看效果，粘贴这个链接并打开即可。

看教学视频

学完了基础，再看教学视频可以快很多，小编往往是2倍速度的播放。这个时候查漏补缺效率比较高，要是看视频而不是看书的话，经常要后退播放，或者直接看源码，而且看书要很集中注意力进行知识理解和内容关联，不适合快速阅读，所以小编选择快速看视频，读者可根据个人情况作选择。
由于看视频是短时间内灌输大量内容，过后很容易忘记，所以实践是很必要的。学基础技术的时候看基础视频，项目前后看项目视频效果更佳。
至于视频的下载资源这里就不多说了，网上很多平台有提供下载，网购也是几块钱到几十块。搜索资源是新手必练技能，自己搞定更好。

开发项目

如果按比例来算的话，之前的学习只占1/4。不做项目，之前学习的所有技术价值都将大打折扣。只有做了项目，才可以说你掌握和能应用那块知识点。
因为之前学的知识很散很基础，而产品需求往往是某方面要求做得很精细的，这样做项目的时候便会深入学习那个方向并调试各种效果再选一种方案。
下面是开发项目的过程：
小编的第一个项目的功能很简单，只是显示几张图片和几段文字的分享界面。能做得多好就看对自己的要求了。比如要适配哪些设备，哪些浏览器及其版本，横竖屏，是否引入第三方SDK(Software Development Kit，软件开发工具包)、引入前端框架、压缩代码、使用严格模式等等。
适配、手势处理、性能优化是H5开发很重要的几个工作，所以小编一入门就开始着手这几个方面。性能优化是贯穿这个开发生涯的，技术沉淀也好，做的越好，入门期能做些简单的优化已经可以了，高级的优化之后慢慢深入调试与学习。并且这个是界面，所以这次主要工作量放在适配方面。
小编适配了iPhone,Androd,iPod的横竖屏，PC端限制了最大宽度。
图片处理是每个开发语言都要花费比较多精力的内容。这次只是简单的显示本地或者线上图片，测试版显示本地图片，发布版显示线上图片。小编的项目发布是给服务端人员把html文件转换成jsp文件发布的，图片可以上次到第三方平台得到链接直接使用，也可以给服务端人员上传到公司服务器，地址服务端人员要修改。
真机调试，发布之后发现有些UI效果在手机和模拟器有出入，或者在微信，QQ，UC浏览器显示不佳，这时候，给个代码又不确定在手机能不能显示合意，总不能改一个小效果就让服务端人员发布一次，这样行不通的，觉得肯定已经有解决方案。然后小编着手真机调试，调试好了再给服务端人员发布。Mac OS下不能像Windows用iis，调查后选了weinre，不难，纯终端操作。
做完了记得来个项目总结，不然别人问你在这个项目做了什么你都答不上来。
可见，项目实战能学很多技术的。新手会遇到各种问题，不要浮躁，大家都是这样过来的，沉着冷静去寻找解决方案就可以，现在技术那么成熟，你遇到的这些小问题早被别人搞定了，你学会了就是问题终结者。

看现成源码

有很多功能别人已经写好了的，随便打开个网站看其源码就是个好方法，也不用到github是搜。当然，也有些源码被压缩了不方便看，其它很多还是能看到的。项目期遇到的问题，看大型网站的解决方案就是个不错的选择。是不是有种感觉：资源多到都不想看了。

善于总结

接下来说说真正的努力。
总结是贯穿在整个过程中的，每学一个模块或者学习一段时间，比如10分钟，都应该总结之前的内容，提炼出关键内容。
主动地问自己，刚刚学了什么？这些内容讲解了什么？属于哪个模块？包含哪些部分？各部分下又是什么内容？有什么用？怎么用？等等。
这样的总结够多之后，你将对整个开发有个明了的框架，更能理解深刻，记得久。完成一个项目，看完一本书，你都能轻松描述它们的精髓、重点、难点和注意内容。
这个总结是过程很烧脑，不仅要高度集中注意力，还要持续联想和回忆，真是个痛苦的经历，简直和小编练习CET-4作文的过程有的一拼。所以很多人不愿意进行这个过程，但是很勤奋花费很多时间，结果到达的极限却总和别人不止一个等级。
就拿解数学题来说吧，那些只看大题答案却从来不愿意动手从头写哪怕一次的同学，到考试的时候，往往写3，4步就要卡住了。经常主动动手解题的同学，看了题目，已经差不多看到最后结果了。看再多的答案，不动手写过程，这种勤奋太表面了。

结语

入门最深刻的印象就是查阅了千千万万的技术博客，看了很多天的技术文档，尤其是那些英文文档，遇到个新东西就查，想到什么相关的就查。然后就是连续地敲代码，写了大量的demo，测试一些小功能。习惯写demo的好处就不多说了，以后你就会懂了。