前端面试题（部分）

web前端阶段测试试题（html js css）

非原创，本文纯属copy

一、单选题（共30题，每题1分）

1. 新窗口打开网页，用到以下哪个值（     ）

A.  _self B.  _blank C.  _top D.  _parent

参考答案：B

详解：a标签的target属性

_self

在页面本身的框架中打开新网页（默认值）

_blank

新开一个窗口打开网页（常用）

_top

在页面自身框架中打开网页

_parent

在页面父集合框架中打开页面

 

 

2. 下面有关html5标签说法错误的有？ （     ）

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

B.  <section> 标签定义文章，比如一个外部新闻提供者的一篇文章，或者来自blog的文本

C.  <menu> 标签定义菜单列表。当希望列出表单控件时使用该标签

D.  <command> 标签定义命令按钮，比如单选按钮、复选框或按钮

参考答案：B

详解： section、article、div

section：定义有意义的块，将相关的内容集中到一起的标签。可以在article中嵌套，表示段落。section中嵌套，表示块中分内容

article：定义文章，可以表示文章内容，或者是一篇完整的评论等。可以在section中嵌套，表示有多篇文章或者评论。也可以与article嵌套，嵌套表示文章中的评论

div：div表示的就是一个没意义的容器。没有特殊意义的模块。

 

menu和command都是HTML5的新增标签，但是浏览器支持度不够，使用不广泛

 

3. 以下不是JavaScript中的数据类型的是（     ）

A.  object B.  undefined C.  boolean D.  int

参考答案：D

详解： object（对象类型）、undefined（未定义类型）、null（空）、boolean（布尔类型）、number（数值类型---浮点数、整数）、String（字符串类型）

 

4. 元素的alt和title有什么异同，选出正确的说法？ （     ）

A.  不同的浏览器，表现一样

B.  alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

C.  alt和title同时设置的时候，title作为图片的替代文字出现，alt是图片的解释文字

D.  以上说法都不正确

参考答案：B

详解：低版本的浏览器中，alt能够悬停显示。但是不符合alt作为替代文字的身份。

升级之后，就不再显示。只能是图片不能正确显示时，作为替代文字显示。

 

5. 下面这个JS程序的输出是什么： （     ）

 

function Foo(){

  var i = 0;

  return function(){

     console.log(i++); }}

var f1 = Foo(),f2=Foo();

f1();

f1();

f2();

A.  0 1 0 B.  0 1 2 C.  0 0 0 D.  0 0 2

参考答案：A

详解：在函数中去定义了另一个函数。在通过其他的函数来调用其中的变量。形成了一个闭包。闭包会常驻内存。f1、f2同时定义执行，所以是平等地位。他们都拥有自己的内存空间。

 

6. 选择器#box p，下列说法中正确的是  (     )

A.  选择的是class为box的元素的所有直接子元素p

B.  选择的是id为box的元素的所有后代元素p

C.  选择的是class为box的元素的第一个子元素p

D.  选择的是id为box的元素的第一个后代元素p

参考答案：B

详解：A  .box>p（直接子元素，就是亲儿子）

      B  #box p（所有的后代元素）

      C  .box p:first-child  nth-child(1)

      D  #box p:first-type

 

7. 已知var num = 10；下面哪个是将num转换为布尔型的语法 （     ）

A.  !!num;    B.  ||num    C.  boolean(num)    D.  number（num）

参考答案：A

详解： A 给num取非再取非，因为是弱类型，直接强制转换了类型，所以变成了boolean类型。

C Boolean(num)  JavaScript中，大小写是区分的

 

弱类型不是说大小写不区分，而是类型能够自行强转，所有类型都使用var来定义

 

8. 以下选项中，选择器的优先级正确的是（     ）

A.  行内样式>！important>id选择器>类选择器>通配符>继承

B.  行内样式>id 选择器>类选择器>标签选择器>继承>通配符

C.  ！important > 行内样式 > id选择器>类选择器>标签选择器>通配符>继承

D.  行内样式>id 选择器>类选择器>通配符>标签选择器>继承

参考答案：C

详解： 1. !important可以将样式提到最优先

       ①直接写在某一个样式的后面，再加上分号。不能写在分号的后面

       ②不能直接写在选择器后面提升选择器的优先级。

       2.行内样式大于其他的样式

       3.选择中这个元素的时候，计算权重：id  class  标签

       4.通配符也有权重，但是权重为0

       5.有权重大于没有权重。所以继承的没有权重，就是最低的。

       6.在权重一样的时候，谁写在后面，就会层叠掉前面的样式。

       7.当都是继承来的时候，谁描述的最近，就会层叠掉其他的样式。

 

9. “相对定位”是相对何者定位？  （     ）

A.  离自己最近的已经定位了的祖先盒子 B.  自己原来的位置

C.  浏览器窗口的左上角 D.  页面版心

参考答案：B

详解： 相对定位：相对自己原来的位置定位。不脱标。原来的位置还是占据着的。

                  做微调使用，或者元素的参照盒子

绝对定位：①如果父级元素不存在定位，则参照页面原点进行定位

          ②如果父级元素存在定位，则参照最近定位的父级元素进行定位。

          压盖效果。“子绝父相”

固定定位：参照窗口进行定位，且占据后，不再随滚动条移动

         锚点导航，小广告

 

10. 下面符合一个有效的javascript变量定义规则的是？ （     ）

A.   _$te$t2 B.   with C.   a  bc D.   2a

参考答案：A

详解： 1.不能以数字开头，只能使用字母开头，或者是_与$(后两种不推荐开头使用)

       2.不能包含其他的特殊符号，空格也是一种符号

       3.不能使用预留的关键字

 

11. 下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？（     ）

A.  声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档

B.  在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

C.  DOCTYPE不存在或格式不正确会导致文档以标准模式呈现

D.  浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法

参考答案：C

详解： 如果不存在或者错误则以混杂模式兼容显示

 

12. 下述有关border:none以及border:0的区别，描述错误的是？ （     ）

A.  border:none表示边框样式无 B.  border:0表示边框宽度为0

C.  当定义了border:none，即隐藏了边框的显示，实际就是边框宽度为0

D.  当定义边框时，仅设置边框宽度不可以达到显示的效果

参考答案：C

详解： 

 

13. 以下哪一项不是CSS3中新增的伪类选择器（     ）

A.  :first-of-type B.  :only-child C. :enabled D. :first-child

参考答案：D

详解： CSS2中的伪类选择器

:link

a:link

选择所有未被访问的链接。

:visited

a:visited

选择所有已被访问的链接。

:active

a:active

选择活动链接。

:hover

a:hover

选择鼠标指针位于其上的链接。

:focus

input:focus

选择获得焦点的 input 元素。

:first-letter

p:first-letter

选择每个 <p> 元素的首字母。

:first-line

p:first-line

选择每个 <p> 元素的首行。

:first-child

p:first-child

选择属于父元素的第一个子元素的每个 <p> 元素。

:before

p:before

在每个 <p> 元素的内容之前插入内容。

:after

p:after

在每个 <p> 元素的内容之后插入内容。

:lang(language)

p:lang(it)

选择带有以 "it" 开头的lang 属性值的每个<p> 元素。

 

 

14. 下面哪段代码可以显示一个输入框，并且默认输入框上的文字是”admin” （     ）

A.  <input type=”text” /> B.  <input type=”text” name=”admin” />

C.  <input type=”text” value=”admin” /> D.  <input type=”text” id=”admin” />

参考答案：C

详解：

 

15. 一个盒模型，它有如下属性。那么，它真实占有的宽度是多少？（     ）

width:200px;

height:200px;

border:1px solid red;

padding:10px 20px;

A.  200px; B.  202px; C.  222px; D.  242px;

参考答案：D

详解：width + padding（左+右）+ border(左+右)

 

16. 以下哪个标签在页面上没有语义的  （     ）

A.  p            B.  h C.  input        D.  span

参考答案：D

详解：p—段落

h---头部

input---输入框

span---行内元素中的div

 

17. 在 HTML5 中，哪个方法用于获得用户的当前位置？ （     ）

A.  getPosition() B.  getCurrentPosition()

C.  getUserPosition() D.  getLocation()

参考答案：B

详解： 

 

18. 以下不属于CSS3中弹性容器属性的是（     ）

A.  flex-wrap B. align-items   C.  flex-basis D.  justify-content

参考答案：C

详解： A 是否换行

B 侧轴上的排列方式

C 子元素在主轴占据的空间方式（相应的子元素如何分配主轴的剩余空间）

D 主轴上的排列方式

 

19. 下面对象中不属于BOM的是：（     ）

A.  window B.  document C.  screen D.  RegExp（history）

参考答案：B、D

详解：document 属于DOM内容

 

20. 下面哪些操作内容可以在html中被识别：（     ）

A. 一个空格  B. 一个换行 C.一个缩进  D. 以上都不可以

参考答案：A

详解： 多个空格、换行、缩进都会被识别为一个空格。而一个空格也能够被识别成一个空格。

 

21. 下列js代码运行结果是什么？ （     ）

 var a = 123;

 var b = “123”;

 alert(a+b);

A.  123123 B.  246 C.  a+b D.  没有正确结果

参考答案：A

详解：字符串类型，此处是做一个字符串的拼接。如果符号在字符串运算中存在，就按照字符串的规定来，如果不存在，就按照数值规定

 

22. 下面有关CSS sprites说法错误的是？ （     ）

A. 允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

B. 利用“background-image”,“background-repeat”,“background-position”组合进行背景定位

C.  CSS Sprites虽然增加了总的图片的字节，但是很好地减少网页的http请求，从而大大的提高页面的性能

D.  CSS Sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

参考答案：C

详解： 

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

2.优点

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

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

 

 

23.下列不属于HTML5新元素的是（     ）

A.  header B.  content C.  section D.  nav

参考答案：B

详解：:after 与 :before 伪类的内容属性

 

24. 以下不是canvas的方法的是：（     ）

A.  fillRoundRect() B.  fill() C.  getContext() D.  strokeRect()

参考答案：A

详解： 在canvas中，图形中，只提供了画矩形的方法，其他的需要使用路径来完成。

 

25. 下面哪一项不是meta标签的作用 （     ）

A. 描述页面的内容 B. 提高页面关键字的权重

C. 页面使用的编码 D. 管理页面上所有的标签

参考答案：D

详解：A description

B keywords

C charset

 

26. 在CSS3中当元素从一种样式变换为另一种样式时为元素添加效果的属性是（     ）

A.  transition B.  transform C.  animation D.  translate

参考答案：A

详解： transition 过渡

transform 变换

animation 动画

translate 平移

 

27. 在CSS3中，以下哪个是IE浏览器的私有属性前缀（     ）

A.  –webkit B.  –trident C.  –ie D.  –ms

参考答案：D

详解：trident 是IE内核

-webkit-

-moz-

-o-

-ms-

 

28. 以下不是HTML5中input新类型的（     ）

A.  file B.  email C.  range D.  list

参考答案：D

详解：file 文件类型

email 邮件类型

range 拖动条

list 是input标签新增的list属性，可以与datalist结合成为一个 可填写可选择的下拉选项框

 

29. 以下关于HTML5说法不正确的是  （     ）

A.  HTML5标准还在制定中 B.  HTML5兼容以前HTML4

C.  <canvas>标签替代Flash D.  简化的语法

参考答案：A

详解：HTML5已经定稿

 

30. 要创建css3动画，需要运用以下哪项规则 （     ）

A.  animation B.  keyframes C.  flash D.  transition

参考答案：B

详解： animation 调用动画属性   transition过渡效果

@keyframes 动画名{每个阶段属性的动作变化}

 

二、填空题（共15题，每空1分）

1.请列举四个background的等价“小属性”：background-color、              、

            、                   

参考答案：background-color、 background-image、 background-repeat、background-attachment、background-position

详解：background-attachment:fixed|scroll;   背景图片是否随滚动条一起滚动

 

2.如何将表格元素的边框去掉？通过设置                         

参考答案： border：none

详解：

 

3.Js中可以对一个小数进行向上取整的方法是                          

参考答案：Math.ceil(n)

详解：Math.ceil(n)  天花板，向上     Math.floor(n)   地板，向下取整   Math.round(n)四舍五入

 

4.js将a、b数组进行合并的方法是：                           

参考答案：a.concat(b)

详解：concat方法，多个数组合并为一个数组

  join方法，将数组中的元素合并成一个字符串

 

5.在背景属性中,让背景图片固定显示如何设置：                                

参考答案：background-attachment:fixed

详解： 

 

6.CSS中，清除浏览器所有标签默认边距是                           。

参考答案：*{padding:0;margin:0;}

详解： 通配符

 

7.padding：10px 20px 30px 40px的设置的顺序是：    、     、    、      

参考答案：上、右、下、左

详解： 从12点钟开始，顺时针方向赋值

 

8.a标签中伪类的正确排序是           、            、           、              。

参考答案：link、visited、hover、active

详解： link   未点击的链接

       visited  点击后

       hover    悬停

       active    正在被点击的时候（鼠标按下去，还没放开的状态）

  速记：买了个LV包包，ha ha

 

9.下面程序：

var str = "11"+2-"1";

console.log(str);

console.log(typeof str);

执行完后str的值为           ，str的类型为              。

参考答案：111、数值类型

详解：首先做了一个字符串的链接，变成了”112” ，之后再做了数值的运算，减法运算，变成了数值的 111。当字符串的变换中有这样的计算时，就依照字符串运算，如果没有，就依照数值运算。

 

10. js中使用                 判断一个对象是否为某类对象。

参考答案：instanceof

详解：typeof  判断变量的类型 （类型名）

instanceof 判断对象是否为某类对象（布尔值）

 

11.网页制作的过程中让不同的设备，不同的尺寸拥有不同显示效果的方式叫            

参考答案：响应式布局 （多媒体查询）

详解： 

 

12.HTML5文档类型声明语句是                      

参考答案：<!doctype html>

详解：

 

13.CSS3支持                 和                  两类渐变颜色。

参考答案：线性渐变、径向渐变

详解：

 

14.HTML5通过                  标签来添加更多的音频或视频文件。

参考答案：<source>

详解： 通过source标签为某个多媒体标签来添加多类型的文件，从而实现兼容。

 

15.在CSS3中，我们用                   语句将一篇文章内容分成四栏显示在页面上。

参考答案：column-count:4

详解：多栏布局

 

三、简答题

1.请列举出清除浮动的几种方式（最少三种）

参考答案：①给父盒子加上高度

②clear：both，外墙法 与 内墙法

③overflow：hidden

④父级div定义 伪类:after 和 clear:both

⑤父盒子一起浮动

⑥overflow:auto

⑦父级div定义 display:table

详解：①给父盒子加上高度

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用

②clear：both，外墙法 与 内墙法

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

③overflow：hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

④父级div定义 伪类:after 和 clear:both

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

⑤父盒子一起浮动

原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。

⑥overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

⑦父级div定义 display:table

原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题。
建议：不推荐使用，只作了解。

 

 

2.行内元素和块级元素的具体区别是什么？两种元素如何相互转换？

参考答案：

行内元素：一行显示，不能设置宽高等盒子属性

块级元素：霸占一行，可以设置宽高等盒子属性

行转块：display:block

块转行：display:inline

详解：

 

3.请写出将数字转化为字符串的几种方法

参考答案：

①toString(radix) : 把数字转换成字符串，使用指定的基数。radix可选，为2—36之间的整数。如，当radix 为 2 时，NumberObject会被转换为二进制值表示的字符串。默认为10进制转换。

②toLocalString()：把数字转换为字符串，使用本地数字格式顺序

③toFixed(num)：把数字转换为字符串，四舍五入为指定位数。结果的小数点后有指定位数的数字。num必须，规定小数的位数。

④String(num)：使用String对象的构造方法可以将数字转换为字符串对象

详解：

 

4.请你介绍一下CSS的盒子模型并列举CSS3的新特性（至少5种）

参考答案： 

CSS3新特性：圆角、阴影、渐变颜色、2D转换、3D转换、过渡效果、动画效果、多列

详解：

 

5.如何居中一个div？如何居中一个浮动元素？

参考答案：

margin：0 auto

第一种，如果有固定的宽高。用一个和所有浮动盒子等宽的大盒子包裹起来，然后设置大盒子的margin:0 auto;就可以水平居中。需要注意大盒子的宽除了要包括里面盒子的总宽外还要包括每个盒子的外边距，内填充，边框等。还有大盒子里面所有元素浮动之后，大盒子的高度消失的问题。
    第二种，使用绝对或相对定位。还是用一个大盒子包裹起来，大盒子的position设置成absolute或者relative，然后大盒子的left为50%，margin-left设置为负的大盒子宽度的一半，这也需要知道大盒子的宽度。
    第三种，不需要设置任何宽度。所有盒子不使用浮动，而使用display:inline-block;来使盒子在一行显示，然后设置父元素的text-align:center;来使子元素居中。父元素需要占整个一行，并且每个盒子的html标签之间不能有空格或者换行，也就是必须紧挨着。这样的好处是，不用设置任何宽度，每个盒子可以自适应内容的宽度。

 

详解：