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学堂(h5course-com)

原文发表时间:2015-11-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

探究position:fixed在css动画过程中的行为~

补充: 是指transform动画 想要的效果 ? 原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, ...

2296
来自专栏王二麻子IT技术交流园地

HTML出现错位的问题

引起网页HTML显示错位的几个常见问题:          1、在HTML代码中缺失元素的开始或结束标签          2、CSS设置中对边界、填充或边框的...

2375
来自专栏小李刀刀的专栏

[译]CSS边框实现“无图化”设计

原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes...

3728
来自专栏程序你好

在网站或桌面应用使用Font Awesome图标库

2242
来自专栏腾讯大讲堂的专栏

Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

2157
来自专栏知晓程序

一个天气小程序和他们跳过的 47 个坑,你该如何避免?

1802
来自专栏java一日一条

前端高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

3273
来自专栏数据小魔方

这种自带黑科技的R包,请给我来一打

今天要介绍的这个R包,有些特别! 它即不能做可视化,也不能用来抓数据! 它的核心功能是抓拍,对,你没听错,就是抓取,和狗仔差不多! 而且专门抓拍网页,有点儿类似...

38416
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

2055
来自专栏知晓程序

开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!

之前做小程序开发时,需要实现对多行文本进行的折叠的效果(类型微信朋友圈)。主要交互有三点:

1805

扫码关注云+社区

领取腾讯云代金券