HTML5项目开发备忘录

HTML5学堂：良好的项目开发，从缜密的分析与计划开始，充分的项目开发准备能够让之后的问题降低到最少，让我们的整体开发效率提升不少。精心准备了关于项目开发的相关备忘，分享给大家啦~！

刘国利 - 独行冰海：从9月份开始送5班毕业开始，到现在，应该说两个月的时间，基本就没有闲下来，十一之后也仅仅就“喘息”了一天，未来的一个月貌似也是完全无休的状态，谁让赶上六班七班毕业还有八班的课呢？于是乎，官网文章的更新就断了很久~昨天（2015.10.29）称了称体重，竟然又瘦了5斤……心塞啊……

写这篇文章，主要是两方面的原因吧，一方面是六班七班的孩纸们并没有及时总结，在当前开发当中也出现了很多不必要的问题。另一个原因则是，今天正好要给八班孩纸讲项目开发，于是喽~文章的主要内容中并没有涉及到太多的JS，原因很简单：希望六班七班孩纸能够自己思考，而同时八班孩纸在未来也是要自行补充这个开发备忘录的~好啦，不多说废话了，看内容

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

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

1.1.1 reset文件的基本调整

1.1.2 标签的基本选用

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

1.1.4 切图工作

 

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

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

1.2.2 会不会有fixed定位

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

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

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

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

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

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

HTML5学堂在此温馨提示：书写代码的时候，需要综合考虑SEO、扩展性、代码量以及代码可读性，尽可能寻找最佳解决办法。主动思考很重要~

最后想送亲爱的孩纸们~

主动思考，总结积累，是你们未来前行的利器 —— 刘国利

最后附上我们在读学员大合影~！

欢迎沟通交流~HTML5学堂