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、扩展性、代码量以及代码可读性,尽可能寻找最佳解决办法。主动思考很重要~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对【微信公众号:web前端开发大全】的支持。关注公众号在对话框发送 0 即可免费领取响应式网址开发视频教程。