前端选择题+解析(每天更新)

HTML & CSS

1

HTML注释

CSS注释 / 注释内容 /

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

2

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

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

3

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

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

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

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

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

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

4

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

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

5

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

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

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

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

10

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设置透明度)

11

<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

12

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

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

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

highlight 的权重为 10

选最高权重的 C

17

  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

18

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

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

19

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

20

  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

6

一、先看题:

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

二、思路:

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

三、细节:

  1. 获取元素可以借助document.getElementById()/document.getElementsByTagName()等若干方法,也可以利用层级关系(父子关系、兄弟关系等)。而这一点题目已经直接略过了,它直接给出了该元素的引用名称inputElement
  2. 通过js来改变元素样式的两个最常见的API为:styleclassName。使用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

7

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

1
2
3
4
5
6
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

8

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

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

1
2
3
4
5
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

9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}

13

1
2
3
4
5
6
7
8
typeof Symbol()    //"symbol"
typeof Number() //"number"
typeof String() //"string"
typeof Function() //"function"
typeof Object() //"object"
typeof Boolean() //"boolean"
typeof null //"object"
typeof undefined //"undefined"

14

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

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

15

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

16

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

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

21

when the browser closes

22

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

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

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

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

23

  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中间+=为什么不能有空格?因为+=构成一个二元运算符

24

变量提升相当于

1
2
3
4
5
var a
if(! "a" in window){
a = 1;
}
alert(a);

25

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

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

null和undefined == true返回false

26

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

0%