素材巴巴 > 程序开发 >

前端规范和浏览器兼容性

程序开发 2023-09-06 13:04:31

一、前端规范

很多时候我们在写页面的时候都会遇到这样一个问题:不知道给类取什么名?当代码量很多的时候,就算取了,我们想找到它也很难。所以说,前端也需要有代码规范,这样对后期的修改和维护都起到很大的作用。
前端分为三大类:
1、HTML
2、CSS
3、JavaScript
下面我们就来介绍这三个的规范。

HTML
1、命名规范:统一用小写的字母、数字和下划线的组合(不得包含空格和特殊字符)。
2、页面文件名命名规范:首页统一取名为index;尽量使用英文单词,单词过长的时候可以使用拼音简写,但一定不能英文和拼音混合使用。
3、图片命名规范:
①放在页面首部的广告、装饰图等长方形大图取名:banner
②标志性图片取名:log
③有链接的图片取名:button
④没有链接的标题图片取名:title
⑤装饰用的照片取名:pic
⑥在页面上连续出现、性质相同的栏目图片取名:menu
4、整个大布局框架命名:header、footer、nav、article、left、right
其他的组件命名由英文单词和数字组合使用,尽量避免使用中文命名
避免重复命名规则:从属命名写法

CSS
class和id的命名规范:
1、页面结构:
这里写图片描述

2、导航结构
这里写图片描述

3、功能结构
这里写图片描述

JS
1、自定义js文件模块:模块.描述.js格式,如:check.js、login.js、 regist.js、pop.js
2、公用文件模块:commom.js或者basic.js
3、外部资源模块:Jquery.min.js、Jquery.js

在正式写代码之前,我们应该把文件目录的框架建立好;
1、js:存放编写的js文件
2、css:存放编写的css文件
3、image:存放需要使用的图片文件
4、flash:存放需要使用的flash文件
5、media:存放需要使用的多媒体文件,包括视频和音频
6、library:存放一些库文件,包括js库和css库

头部标签里面有一些很重要的标签,如:、
title:网页的标题内容,格式:标题内容
meta标签:用于定义文件头信息,告诉浏览器需要干一些什么事情

二、浏览器兼容性

常用浏览器内核:
IE浏览器:6以前版本、7、8、9、10、11-内核Trident
Edge浏览器(Edge)-内核EdgeHTML(全新内核)
谷歌浏览器(Chrome)-内核webkit
火狐浏览器(Firefox)-内核Gecko
苹果浏览器(Safari)-内核Webkit


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。