前端规范和浏览器兼容性

一、前端规范

很多时候我们在写页面的时候都会遇到这样一个问题：不知道给类取什么名？当代码量很多的时候，就算取了，我们想找到它也很难。所以说，前端也需要有代码规范，这样对后期的修改和维护都起到很大的作用。
前端分为三大类：
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标签：用于定义文件头信息，告诉浏览器需要干一些什么事情

• 网页字符集：设置浏览器解释页面的字符内容
  格式：
• 自动跳转：设置网页过多久跳转到指定页面
  格式：<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
• keyword：设置搜索关键字内容，格式：<meta name="keywords" content="关键字内容"/>
• description：设置描述关键内容，格式：<meta name="description" content="进行一些表述" />
• author：设置网页作者，格式：<meta name="author" content="作者信息"/>

二、浏览器兼容性

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