Web前端编码规范和浏览器兼容

总的来说，Web前端的书写由浏览器进行编译展示成我们看到的各种各样的界面，其中涉及到许许多多的小的东西。

     1:命名规范

        Web前端的各种各样的操作是分的非常细的，每一个我们看到的区域都是由很多可能说细小但不能省略的部分组成，比如说一个div。其中就包含着他的诸多属性，样式调节，根据不同的动态效果而需要写一个专门的javascript代码，其中就涉及许多的东西。可以说我们用很多的积木搭建成一个漂亮的房子。

       正是因为前端的编译分的非常的细，所以说掌握的东西是非常多的，分支非常多，所以在我们书写的过程中，命名规范就变得非常的重要了，当我们要修改时，或者与他人合作时需要了解代码格式的时候，一个正确的命名就显得格外的重要了

     编程规范的作用  ：    提高代码的可读性       降低代码错误率      提高代码的整合效率和重用性     为后期的维护提供更高的遍历

编程规范:一般来说，命名都是以头尾两部分命名，中间以下划线 （_）连接，头尾部分都是用英文和数字来书写，

对于一个目标来讲：不同的文件、文件下的不同标签都有其不同的选择格式，

常见文件的命名：

常见的有aboutus，index（home），detail，list，intruduct......

aboutus.html：关于我们页面(cop_aboutus)

index.html：网站首页(home)

intruduct.html：公司介绍(cop_intruduct)

newsdetail.html：新闻详情页面(news_detail)

     newslist.html：新闻列表页面(news_list)

   productdetail.html：产品详情页面(proc_detail)

productllist.html：产品列表页面(proc_list)

图片的命名：

遵循首尾命名方式：头表示图片的类别，也就是图片表示的性质，尾部一般就是当该图片类型的图片较多时，复用该类型的图片。

放在页面首部的广告、装饰图等长方形大图取名： banner

标志性图片 取名 ： log

有链接的图片 取名 ： button

没有链接的标题图片取名： title

装饰用的照片取名： pic

在页面上连续出现、性质相同的栏目图片取名： menu

HTML中类和id的命名：

对id和class的命名可以是中文拼音也可以是英文意思。一般来说使用英文来命名，英文较长的可以使用简写来表示，总之一句话，简单易懂。

一个较大的区域命名（如div）使用它的英文来命名，之后的子标签可以在上一个标签命名后面加一个尾部来命名，用下划线连接。

对html中标签的选择，传统的选择有三种方式：标签、类（class）、id选择器。标签和class选择器通常在css中使用，但我现在使用的，见过的，css中都是使用类选择器的。id选择器一般使用在javascript中。

之后的一些衍生的选择器，都是在这三个的基础上衍生出来的，

后选择器-------用空格隔开，表示前面一个选择的(标签、类)的子代的所有符合条件的标签。

交集选择器------中间不留缝隙，就什么都不用。如P.span表示P标签和类名为span都满足的标签。

合（并集选择器）------用，（逗号）隔开，表示前后的所有标签都符合我以下的命令。说白了就是将几个具有相同属性的标签写在一个地方。

2：兼容及兼容性测试

兼容性是指硬件之间、软件之间或是软硬件组合系统之间的相互协调工作的程度。如CPU、主板、显示卡等，如果在工作时能够相互配合、稳定地工作，就说它们之间的兼容性比较好，反之就是兼容性不好。浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，是所设计的网页和浏览器的兼容性

 需要测试的兼容浏览器

IE 浏览器： 6 以前版本、 7 、 8 、 9 、 10 、 11- 内核Trident

Edge 浏览器（ Edge ） - 内核EdgeHTML（全新内核）

谷歌浏览器（ Chrome ） - 内核webkit

火狐浏览器（ Firefox ） - 内核Gecko

苹果浏览器（ Safari ） - 内核 Webkit

谷歌、火狐、IE三大浏览器可以说是浏览器的鼻祖，使用者也非常的多，其他的浏览器大多都是运用这三大浏览器的内核，

所以说我们测试基本就测试着三大浏览器。IE包括现存的6以后的所有版本

兼容测试的必要：

搞前端开发我们写出来的东西是看得见的东西，客户所需要的东西都是我们按照一定的格式书写出来的，我们要满足大部分客户的需求，就要涉及到几乎所有生活中存在的浏览器，展示出来的东西就是我们与客户的交流，兼容总的来说就是保证实用。。可以用