前端技术分享-码匠 极客编程技术分享

您当前位于:项目开发经验 ——> WEB前端(HTML5)项目开发时的注意事项-自己的项目开发备忘录

WEB前端(HTML5)项目开发时的注意事项-自己的项目开发备忘录

2015/10/30 12:58:37 | 作者:HTML5学堂(码匠) | 分类:项目开发经验 | 关键词:HTML5,项目经验,开发经验,备忘录

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学堂 HTML5-6班7班答辩会

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端