前端选择题＋解析（每天更新）.md

title	date	tags	categories
前端选择题＋解析（每天更新）	2019-05-23 04:40:39 -0700	前端	前端

HTML & CSS

HTML注释

CSS注释 /* 注释内容 */

JS注释 单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾

Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko内核，而微软的IE系列则使用的是Trident内核

另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了

利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

C:当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度

D:定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来

<audio> 标签定义声音，比如音乐或其他音频流。 A正确

<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 B错误，<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容

<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 C正确

command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键

CSS3新增属性用法整理：

1. box-shadow（阴影效果）
2. border-color（为边框设置多种颜色）
3. border-image（图片边框）
4. text-shadow（文本阴影）
5. text-overflow（文本截断）
6. word-wrap（自动换行）
7. border-radius（圆角边框）
8. opacity（透明度）
9. box-sizing（控制盒模型的组成模式）
10. resize（元素缩放）
11. outline（外边框）
12. background-size（指定背景图片尺寸）
13. background-origin（指定背景图片从哪里开始显示）
14. background-clip（指定背景图片从什么位置开始裁剪）
15. background（为一个元素指定多个背景）
16. hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17. hsla（在hsl的基础上增加透明度设置）
18. rgba（基于rgb设置颜色，a设置透明度）

<q>定义短的引用 <ins>定义被插入的文本 <menu>定义命令的列表或菜单

html5中不再支持的元素(或者说是不支持使用的): <noframes>,<frameset>,<frame>,<applet>,<acronym>,<basefont>,<dir>,<tt>,<strike>,<big>,<blink>,<s>,<font>

html5中新加的元素是:canvas,audio,video,source,embed,track,datalist,keygen,output,article,aside,bdi, command,details,dialog,summary,figure,figcaption,footer,header,mark,meter,nav,progress,ruby,rt,rp,section,time,wbr

标签的权重是1，类的权重是10 ，id的权重是100

ul#related span 的权重为 1+100+1=102

#favorite .highlight 的权重为 100+10=110

highlight 的权重为 10

选最高权重的 C

1. @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
2. @import 是css2里面的，所以古老的ie5不支持。
3. 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4. link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：

• 如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交
• 而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交

百分数和外边距:百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式发生变化，百分数也会变化

1. 常见的块级元素(自动换行， 可设置高宽 )有：div,h1-h6,p,pre,ul,ol,li,form,table,label等
2. 常见的行内元素（无法自动换行，无法设置宽高）有：a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。
3. 常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：button,input，textarea,select, img等

JS

一、先看题：

用js让一个input的背景颜色变成红色

二、思路：

获取该元素 通过该元素拥有的属性或方法来改变元素的样式

三、细节：

1. 获取元素可以借助document.getElementById()/document.getElementsByTagName()等若干方法，也可以利用层级关系（父子关系、兄弟关系等）。而这一点题目已经直接略过了，它直接给出了该元素的引用名称inputElement
2. 通过js来改变元素样式的两个最常见的API为：style、className。使用style接口一次只能改变一个样式，而使用className则可以同时改变多个样式，当然前提是已经用css定义该类名的相关样式
3. backgroundColor? background-color?

简单说一下：在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。而使用方括号表示法，"-"被理解为字符串中的内容，该字符串能被正确解析

eg:

inputElement.style.backgroundColor = 'red'; // 这是没问题的

inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...

inputElement.style["background-color"] = 'red'; // 这也是可以的

表示红色有若干种方法:

1. 颜色名：red
2. 百分数：rgb(100%, 0%, 0%)
3. 数值：rgb(255, 0, 0)
4. 十六进制：#FF0000
5. 简写的十六进制：#F00

call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组）如下代码做出解释：

    function add(c, d){
    return this.a + this.b + c + d;
    }
    var o = {a:1, b:3};
    add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
    add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。

针对NaN的特点，ECMAScript定义了isNaN（）函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN（）在接受一个值后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串“10”或Boolean值。而任何不能被转换为数值的值都会导致这个函数返回true

    isNaN(NaN); // true---------->Number(NaN)--> NaN
    isNaN("abc") // true---------->Number("abc")--> NaN
    isNaN("123") // false--------->Number("123")--> 123
    isNaN(true) // false----------->Number(true)-->1
    isNaN(false) // false---------->Number(false)-->0

    window.onload = function(){
        //首先获得下拉框的节点对象；
        var obj = document.getElementById("obj");
        //1.如何获得当前选中的值？：
        var value = obj.value;
        //2.如何获得该下拉框所有的option的节点对象
        var options = obj.options;
        //注意：得到的options是一个对象数组
        //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样：
        var value1 =options[0].value;
        //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：
        var text1 = options[0].text;
        //5.如何获得当前选中的option的索引？
        var index = obj.selectedIndex;
        //6.如何获得当前选中的option的文本内容？
        //从第2个问题，我们已经获得所有的option的对象数组options了
        //又从第5个问题，我们获取到了当前选中的option的索引值
        //所以我们只要同options[index]下标的方法得到当前选中的option了
        var selectedText =options[index].text;
    }

typeof Symbol()    //"symbol"
typeof Number()    //"number"
typeof String()    //"string"
typeof Function()    //"function"
typeof Object()    //"object"
typeof Boolean()    //"boolean"
typeof null    //"object"
typeof undefined    //"undefined"

在函数中var a=b=3 时a是局部变量，而b是全局变量

插一个题目不截图了 字符串和数字相加，结果为字符串

ECMAScript数组的大小是可以动态调整的，既可以随着数据的添加自动增长以容纳新增数据。当把一个值放在超出当前数组大小的位置上时，数组就会重新计算长度值，即长度值等于最后一项的索引加一，前面的值都自动被赋值为了undefined了

<link> 和href配合 加载css，hypertext reference超文本引用，页面加载到href时不会停下来

<script>和src配合 加载script文件，source资源，页面会停下来等待资源加载完毕（并执行完），所以一般js放在body的最下面

when the browser closes

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值
• 若 a 等于 b，则返回 0
• 若 a 大于 b，则返回一个大于 0 的值

这题就根据冒泡排序规则来，先比较第一个和第二个，然后第二个和第三个，两个比较第一个大的话就交换一下位置，其他位置不变

1. console.log(1+ "2"+"2")做加法时要注意双引号，当使用双引号时，JavaScript认为是字符串，字符串相加等于字符串合并 因此，这里相当于字符串的合并，即为122
2. console.log(1+ +"2"+"2")第一个+"2"中的加号是一元加操作符，+"2"会变成数值2，因此1+ +"2"相当于1+2=3 然后和后面的字符串“2”相合并，变成了字符串"32"
3. console.log("A"- "B"+"2")"A"-"B"的运算中，需要先把"A"和"B"用Number函数转换为数值，其结果为NaN，在剪发操作中，如果有一个是NaN，则结果是NaN，因此"A"-"B"结果为NaN。然后和"2"进行字符串合并，变成了NaN2
4. console.log("A"- "B"+2)根据上题所述，"A"-"B"结果为NaN，然后和数值2进行加法操作，在加法操作中，如果有一个操作数是NaN，则结果为NaN

为什么a += 1中间+=为什么不能有空格？因为+=构成一个二元运算符

变量提升相当于

    var a
    if(! "a" in window){
        a = 1;
    }
    alert(a);

特性	Cookie	localStorage	sessionStorage
数据的生命周期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

字符串加上数字结果为字符串

null和undefined == true返回false

switch中，对x+1,此时x为1，然后进入case 1 中，又执行++x，此时x变为2；由于case 1中没有break，然后继续执行 case 2，执行++x，所以x变成3