开发步骤

初入这行的时候很多人仅仅以为H5开发只是做些页面而已，而实际上要将工作做得尽善尽美，这些要点是需要牢牢记住的。

1 书写基本的需求分析报告

1.1 哪些“任务”是基于需求分析报告的？

1.1.1 reset文件的基本调整

1.1.2 标签的基本选用

1.1.3 典型的布局选用和基本的布局操作

1.1.4 切图工作

1.2 因此我们能够想到，在进行需求分析的时候

1.2.1 美工图大小和具体内容区域大小的区别（提示：一定要考虑内容区域外的样式如何处理）

1.2.2 会不会有fixed定位

1.2.3 有没有返回顶部的功能需求

1.2.4 哪些地方需要注意超出隐藏

1.2.5 哪些地方需要内容撑开高度

1.2.6 哪些地方需要有链接跳转

1.2.7 hover（提示：有些美工图会提供三态，初始、移入和按下）效果是什么样子

1.2.8 哪些地方需要加鼠标的小手状态

1.2.9 哪些有JS特效，需要考虑效果~

1.2.10 基本字体字号、颜色和背景颜色的选用

1.2.11 分清楚背景图和数据图

1.2.12 公共模块拆分出来

1.2.13 哪些地方是需要提交数据的 form

2 基本的前期准备

2.1 文件夹结构搭建

2.2 准备reset重置文件以及基本的几个JS文件，根据情况引入

2.3 合理修改reset文件[基于网站分析结果] 需要修改的内容如下：

2.3.1 基本的背景颜色和文字颜色

2.3.2 a标签的两种状态

2.3.3 基本的字体大小和样式设置

2.3.4 删除掉没有使用到的样式设置

2.3.5 保证after伪元素清浮动的方法在reset当中

3 移动端与PC端的特殊性

3.1 移动端

3.1.1 全新的选择器以及大部分的CSS3属性都得到了很好的支持

3.1.2 视口的设置

3.1.3 基本rem的处理

3.1.4 user-select；tap-highlight-color；-webkit-transform-style等样式的处理

3.1.5 需要额外注意“指触区”

3.1.6 模拟测试之外，需要进行真机调试

3.1.7 320屏幕像素下，字体大小最小为12px

3.1.8 a标签的title和img标签的title可以删除 嵌套原则可以适当的调整

3.1.9 最大最小宽的考虑

3.1.10 针对背景图进行background-size的处理

欢迎沟通交流~HTML5学堂

3.2 PC端

3.2.1 使用新标签后，对新标签的兼容处理

3.2.2 需要测试各个浏览器（HTML5学堂提示：保证在IE6~7的低端浏览器中，布局与功能正常）

3.2.3 对于子代选择器、CSS3新增选择器等能否使用取决于具体开发兼容要求

3.2.4 IE下的测试，需要启动服务器，即在wamp下运行

4 整体开发的基本顺序提醒

4.1 注意模块的最小宽度或者最大宽度

4.2 先完成一级布局与二级布局

4.3 针对公共模块进行开发

4.4 制作具体的模块

5 具体开发规范

5.1 文件名禁止使用中文命名

5.2 编写代码的时候，需要合理的缩进（不要出现空格与Tab格混用）与注释

5.3 遵循基本的嵌套规则

5.4 不要忘记a标签的href和title、img标签的alt、title、src，a标签的target（从何处打开链接）

5.5 CSS后代选择器，尽量不要超过3层，不要超过4层

5.6 类名采用单词（语义）命名，多个单词采用中划线连接

5.7 不设置不必要的属性和属性值，如针对占满父级整行的块元素设置width:100%

5.8 CSS样式按照顺序书写：显示属性——>自身属性——>文本——>其他——>CSS3属性

5.9 HTML与CSS中的引号需要保持一致，禁止出现单引号与双引号混用

5.10 类名和id名通常不重复的

5.11 每段语句结束后的分号（英文）必不可少

6 开发细节

6.1 注意保持盒模型大小的一致性（如：增加左右padding，原有width需要变小）

6.2 及时清除浮动，并采用合理的清除方式

6.3 针对定位元素，处理z-index值

6.4 数据图需要限制宽高

6.5 背景图需要进行合并

6.6 对于需要超出隐藏的需求，单行文本隐藏或显示为省略号（……），比如在模块标题需要进行设置，多行文本如果显示区域高度固定，需要设置超出隐藏。

6.7 img标签需要浮动或设置display:block，以防止img元素下的3像素空隙

6.8 a标签的指触区需要注意

6.9 合理使用群组和后代选择器

7 最后不可缺少的相关工作

7.1 CSS压缩

7.2 JS压缩

7.3 图片压缩

7.4 ico文件的制作

7.5 404页面

8 other but so important

最后：书写代码的时候，需要综合考虑SEO、扩展性、代码量以及代码可读性，尽可能寻找最佳解决办法。