沉淀，再出发：web前端的一些认识

一、前言

作为程序员，我一直认为全栈是一种最基本的能力，没有了这种目标就会发现自己越往后面发展路就越窄，很多自己不了解的东西会阻塞自己去理解整个系统的开发过程和效率，特别是对于HTML+CSS+Javascript+Bootstrap+jQuery+ajax+VUE等系列框架和技术，如果后端的一点都不了解，或者知之甚少，造成的直接结果就是对很多问题产生了疑惑，比如模板，数据绑定等等，这样非常不利于整个系统的开发和性能的调优，因此前端加后端才是整个系统。

二、HTML和CSS

2.1.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

2.2.xhtml和html有什么区别

   HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
   最主要的不同：
     XHTML 元素必须被正确地嵌套。
     XHTML 元素必须被关闭。
     标签名必须用小写字母。
   XHTML 文档必须拥有根元素。

2.3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

    （1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
    （2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
    （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
    （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2.4.行内元素有哪些？块级元素有哪些？CSS的盒模型？

   块级元素：div p h1 h2 h3 h4 form ul
   行内元素: a b br i span input select
   Css盒模型:内容，border ,margin，padding

2.5.CSS引入的方式有哪些? link和@import的区别是?

内联内嵌外链导入

   就结论而言，强烈建议使用link标签，慎用@import方式。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
   1.从属关系区别
   @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
   2.加载顺序区别
     加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
   3.兼容性区别
     @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
   4.DOM可控性区别
     可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
   5.权重区别
     link引入的样式权重大于@import引入的样式。

2.6.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

    基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。
    优先级算法计算的问题：
    在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
    选择符Specificity值列表规则：
    1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。
        如：<div style=”color: red”>xxx</div>
       外部定义指经由<link>或<style>标签定义的规则；
    2.!important声明的Specificity值最高；
    3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
    4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
   算法：当遇到多个选择符同时出现时候
     按选择符得到的Specificity值逐位相加，
      {数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
    就得到最终计算得的specificity，
    然后在比较取舍时按照从左到右的顺序逐位比较。
    !Important 比内联优先级高

2.7.前端页面有哪三层构成，分别是什么？作用是什么？

结构层 Html 表示层 CSS 行为层 js

2.8.css的基本语句构成是？

选择器{属性1:值1;属性2:值2;……}

2.9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto)

2.10.写出几种IE6 BUG的解决方法

    1.双边距BUG float引起的使用display
    2.像素问题使用float引起的使用dislpay:inline -3px
    3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active
    4.Ie z-index问题给父级添加position:relative
    5.Png 透明使用js代码改
    6.Min-height 最小高度！Important 解决’
    7.select 在ie6下遮盖使用iframe嵌套
    8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

2.11.<img>标签上title与alt属性的区别是什么？

Alt 当图片不显示时用文字代表。
Title 为该属性提供信息

2.12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

2.13.解释css sprites，如何使用。

Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

2.14.浏览器标准模式和怪异模式之间的区别是什么？

盒子模型渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

2.15.你如何对网站的文件和资源进行优化？期待的解决方案包括：

    文件合并
    文件最小化/文件压缩
    使用CDN托管
    缓存的使用

2.16.什么是语义化的HTML？

直观的认识标签对于搜索引擎的抓取有好处

2.17.清除浮动的几种方式，各自的优缺点

       1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
    2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
    3.是用after伪元素清除浮动(用于非IE浏览器)

三、JavaScript

3.1.javascript的typeof返回哪些数据类型？

Object number function boolean undefind

3.2.例举3种强制类型转换和2种隐式类型转换？

强制（parseInt,parseFloat,number）
隐式（== – ===）

3.3.split()和join() 的区别：

前者是切割成数组的形式，后者是将数组转换成字符串

3.4.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

3.5.事件绑定和普通事件有什么区别

普通事件中的onclick是DOM0级事件只支持单个事件，会被其他onclick事件覆盖，而事件绑定中的addEventListener是DOM2级事件可以添加多个事件而不用担心被覆盖。

3.6.IE和DOM事件流的区别

    1.执行顺序不一样、
    2.参数不一样
    3.事件加不加on
    4.this指向问题

3.7.IE和标准下有哪些兼容性的写法

     Var ev = ev || window.event
     document.documentElement.clientWidth || document.body.clientWidth
   Var target = ev.srcElement||ev.target

3.8.ajax请求的时候get 和post方式的区别

   一个在url后面一个放在虚拟载体里面
   有大小限制
   安全问题
   应用不同一个是论坛等只需要请求的，一个是类似修改密码的

3.9.call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

3.10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑使用parse更靠谱

3.11.事件委托是什么

利用事件冒泡的原理，让所触发的事件的父元素代替执行！

3.12.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

3.13.如何阻止事件冒泡和默认事件

1.event.stopPropagation()方法
    w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
2.event.preventDefault()方法
    w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
    这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
3.return false ；
    这个方法比较暴力，它会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()。
   javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

3.14.添加删除替换插入到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

3.15.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数，Ajax是页面无刷新请求数据操作

3.16.javascript的本地对象，内置对象和宿主对象

   本地对象为array obj regexp等可以new实例化
   内置对象为gload Math 等不可以实例化的
   宿主为浏览器自带的document,window 等

3.17.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

3.18.”==”和“===”的不同

前者会自动转换类型
后者不会

3.19.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。