前端一分钟笔试精选「3」 2019前端面试题及答案

1、下面关于WEB开发中，常见的技术和问题描述正确的是：(多选)

A、CSS selector中，支持按照元素的id选择，元素的名称进行选择，元素的class属性进行选择，比如 “#div .red”就是选择CSS class属性中包括red的所有的div元素

B、JSON是一种以JavaScript语法表示的数据对象格式，比如描述一个学生，包括，其中，姓名，年龄就可以这样表达 {name: "John"， age: 18}

C、HTML页面中的第一个指令： 表明这是一个符合HTML5标准的页面

D、不同的浏览器对HTML渲染的方式稍有差异，但是所有的主流浏览器都支持JavaScript语言，而且提供的JavaScript的编程环境都是一致的

E、HTML页面装载时，首先把整个HTML页面下载下来，再根据HTML中出现的顺序依次下载它引用的外部的JavaScript代码和图片资源，最后才执行页面中的JavaScript代码

F、JavaScript中的函数就是一个对象，每个函数对象都继承了JavaScript的Function类

正确答案: C

解析：

A.“#div .red”就是选择CSS class属性中包括red的所有Id为div元素

B.{"name": "John"， "age": 18},json数据中的键都需要添加""(双引号）

D.不同浏览器提供的编程环境不一致（包括html、css、js编程的不一致），所以在编程时才要使用 -ms、-webkit、-moz来实现不同浏览器的兼容性（解决css编程不一致）

E.JS文件按在HTML中引入的顺序依次载入（不是最后载入），在载入后马上执行，执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）

F.箭头函数没有super关键字，所以箭头函数没有继承任何对象，也就不可能继承Function类。

2、以下描述正确的是:(多选)

A、`inline-block` 可以设置高度,`inline` 不可以设置高度

B、`inline-block` 和 `inline` 都可以设置 `padding-left`

C、`inline-block` 可以设置 `margin-left`，inline 不可以

D、`block` 会独占一行，`inline-block` 不会

正确答案: A、B、D

解析:

行内元素不可以设置元素宽高，但是可以设置 左右padding、左右margin

img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素

3、对于以下 HTML，下列选项中哪一个 CSS 选择器效果与其他的不同:

```html
<p><span>A</span><span>B</span><span>C</span></p>
```

A、`span:first-child`

B、`span:nth-child(0)`

C、`span:nth-child(-n+1)`

D、`span:nth-last-child(3)`

正确答案: B

解析:

:nth-child(-n+4)选取小于等于4标签, nth-child最小从1开始

4、input 元素中，下列哪个类型属性定义了输入电话号码的控件？

A、mob

B、tel

C、mobile

D、telephone

正确答案: B

5、以下选项中，哪些是html5 input的新属性(多选)

A、file

B、search

C、number

D、reset

E、tel

正确答案: B、C、E

解析:

在HTML5中，为input元素新增了以下一些type属性值：

• color：用于指定颜色的控件。
• date：用于输入日期的控件（年，月，日，不包括时间）。
• month：用于输入年月的控件，不带时区。
• week：用于输入一个由星期-年组成的日期，日期不包括时区
• time：用于输入不含时区的时间控件。
• datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
• datetime-local：用于输入日期时间控件，不包含时区。
• email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
• number: 用于应该包含数值的输入域。只能输入数字
• range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
• search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
• tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
• url：用于编辑URL的字段。