整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html5和css3的常用参考网

html5和css3的常用参考网

我们使用HTML5, CSS3,甚至Bootstrap设计网站的时候,有些方面是必须考虑的,比如字体大小,标题大小,行间距,每行字数,字体,颜色,背景图片和文字的搭配,图标,留白和布局......所有的这些,都不是随随便便的,讲究一定的原则。而这些原则通常我们为参考一些网站。下面就列举这些网站。

HTML5和CSS3常用参考网站?

浏览器渲染符合HTML5标准:http://necolas.github.io/normalize.css/

Google字体:ttps://www.google.com/fonts

栅格:http://www.responsivegridsystem.com/

扁平颜色:http://flatuicolors.com/

选择颜色值:http://www.0to255.com/

icon图标:http://ionicons.com/

css: https://css-tricks.com/

js的CDN:http://www.jsdelivr.com/

一个CSS属性在各个浏览器的兼容性: http://caniuse.com/

创建favicon: http://realfavicongenerator.net/

压缩图片尺寸:http://optimizilla.com/

CSS文件最小化:www.minifycss.com

JS文件最小化:hTp://www.minifyjavascript.com/

检测html代码:http://validator.w3.org/

文/丁向明

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com

端在开发过程中,是需要一些规范的,有了规范文档能够使我们的开发流程更加规范化;提高团队的协作能力、代码的复用率;写出质量更高的代码;同时也可以方便我们后期的维护。

文件规范:

根据项目名称创建项目文件夹,将css文件夹、images文件夹、js文件夹、psd文件夹、*.html文件放在工程目录中。

HTML文件以英文命名,首页名称必须为index.html作为入口文件。

css文件以英文命名,后缀为.css。通用的css文件包括base.css/reset.css和public.css,里面包含css reset、公用的css间距、css文字样式等,首页为index.css,其他页面依据实际的模块进行命名。

JavaScript文件以英文命名,后缀为.js。通用的js文件common.js和base.js,其他页面依据实际的模块进行命名。

图片文件命名尽量与模块样式名称保持关联,常用图片格式jpg、gif、png等

HTML规范:

文档类型声明统一为html5的文档声明;编码方式统一为utf-8 。

书写时根据页面结构,利用IDE实现层次分明的缩进;所有代码需要遵循HTML标准,建议书写标签名、属性名时使用小写字母;属性值必须用双引号包围;并考虑向后扩展性。

使用语义化标签,便于开发者阅读和写出更优雅的代码,便于浏览器、搜索引擎解析,便于团队开发和维护,有利于SEO。如:标题用h1-h6,段落用p标签。特殊符号尽可能使用代码来替代。

合理规划元素嵌套层级,不合理的嵌套会影响页面性能

HTML中图片的使用:

1 )img标签中添加alt=”替换文本”,以便图片丢失时,用户可以根据替换文本了解页面内容

2)运用css sprites技术,集中小的背景图或图标, 减小页面http请求,sprite按模块制作,方便后期修改或多人协作开发

CSS规范:

统一编码规则为utf-8。

书写代码前需要做如下考虑:

1)确定版心,如果超过1200需要与设计师沟通确认;

2)规划样式,提高样式的重复使用率;

3)样式重置;

4)提前沟通页面中模棱两可的需求和交互,方便后续布局;

5)布局时考虑后续交互效果处理的便利性,必要时预留出后续交互中会用到的样式。

书写代码时,添加注释,保持代码缩进格式;当属性值为0时,可以省略后面的单位;建议每个语句结束后添加分号;注意兼容问题。

选择器命名要遵循命名规范:

1) 由字母开头,小写英文、数字和 _ 来组合命名 或者 首字母大写,驼峰式命名

2) 命名要语义化,,简明化。尽量做到见名知意

css属性书写顺序。建议遵循: 布局定位属性–>自身属性–>文本属性–>其他属性. 也可根据自身习惯书写, 但尽量保证同类属性写在一起

1) 布局定位属性:display 、float、position以及相应的 top、right、bottom、left属性等

2) 自身属性:width、height、background、padding、border、margin等

3) 文本属性:color、font、text-decoration、text-align、vertical-align等

JavaScript规范:

文件编码统一为UTF-8。

书写过程中每行代码结束需要添加分号;变量名命名,需要符合命名规范,建议使用驼峰式命名方式;书写时需要在文件中添加适当注释。

所有功能均根据项目实际需求原生开发,避免冗余;如果需要引入第三方库,需要与团队其他开发人员沟通,讨论决定。

后期优化过程中,非注释类中文字符必须转换成Unicode编码使用,避免出现乱码。

注意事项:

页面中的文本内容。一般能用文字的都用文字保证静态页面的可编辑性,专题中的特殊字体一般要切图,但具体情况与需求沟通。

PC端页面需要兼容到IE8以下时,布局中如果用到HTML5标签,注意处理兼容或避免使用。

页面布局时能用正常文档流布局的不使用定位布局;尽可能不使用表格布局,但页面设计中以表格形式展示的内容模块也要尽量使用表格布局

页面中添加链接的部分,通常页面中需要添加链接的部分,PC端要设置在新窗口打开属性target=”_blank”

体、颜色、间距、尺寸如果把握?

一般专业的设计师做图的时候会非常注意这些,他们会有自己的一套设计风格,尽管是在单个页面下,每个地方的字体、颜色、间距、尺寸都不是随意设定的,这些在你开发的时候应该能感受的到,这时要想高度还原其实并不是难事。

如果你遇到一个不怎样的设计师,那么最好的办法就是早点和她沟通,因为她们不懂技术,最终做的图可能不怎么规范,可能会导致切图不好切(无论是你切还是她切),导出2倍图发现有问题(可能会有毛边或者全部给的都是错图),整体风格不统一(包括颜色、间距、尺寸),这些都会对你的开发带来很大的困扰。

浏览器兼容、如何兼顾低版本浏览器但是不丢失过多效果:

不知道你所说的不丢失过多效果是指什么,如果是想在一些过时浏览器下显示现代浏览器的一些圆角,CSS3动画之类的,那么真的完全没有必要,但要保证基本的页面布局不要乱套除了IE8以下的应该不是问题。

js css img 的框架结构:

这个你应该指的是开发的时候吧,其实这个和团队有很大的关系,只要共同约束好就好了,如果是你一个人开发的话最好保证每个项目都是一样的结构,不要这个项目的结构是(js,css,img),另外一个又是(scripts,styles,images)。

普通Web开发的话可以参考: h5bp/html5-boilerplate · GitHub yeoman/generator-webapp · GitHub yeoman/generator-gulp-webapp · GitHub

js css命名如何规范统一:

总的原则是:样式和行为的命名要区分开来,具体还是要团队制定一个规范。 给两个参考: CSS Guidelines (2.1.3) airbnb/javascript · GitHub

今天就先分享到这里了,有不明白的地方可以私信给我留言。