前端面试笔试题刷题（1）

爱被打了一巴掌 2022-10-07 01:57 687阅读 0赞

## 前端面试刷题 ##

又到了一年一度跑路季。话不多说，赶紧刷起来。

### 一、题目 ###

1、在HTML 音频/视频DOM中，\_\_\_设置或返回音频/视频播放的默认速度？

A、currentTime B、duration C、defaultPlaybackRate D、playbackRate

2、哪个元素表示预格式化文本?

A、`<main>` B、`<dir>` C、`<dd>` D、`<pre>`

3、以下哪个标签用于表示HTML5中不同类型输出的结果

A、output B、placeholder C、autofocus D、required

4、下列哪项定义了作品的标题

A、`<cite>` B、`<hr>` C、`<a>` D、`<address>`

5、在 HTML5 中，哪个方法用于获得用户的当前位置？

A、getPosition() B、getCurrentPosition() C、getUserPosition()

6、HTML5 中不再支持下面哪个元素？

A、`<cite>` B、`<acronym>` C、`<abbr>` D、`<base>`

7、在 HTML5 中，哪个元素用于组合标题元素？

A、`<group>` B、`<header>` C、`<headings>` D、`<hgroup>`

8、哪个 HTML5 内建对象用于在画布上绘制？

9、在 HTML5 中，contextmenu 和 spellcheck 是:\_\_\_\_\_\_\_?

10、新的 HTML5 全局属性，”contenteditable” 用于：？

11、哪个 HTML5 元素用于显示已知范围内的标量测量？

A、`<gauge>` B、`<range>` C、`<measure>` D、`<meter>`

12、哪种输入类型用于定义周和年控件（无时区）？

13、哪种输入类型定义滑块控件？

14、Canvas 能够使用\_\_\_绘制 2D 图形？

15、DHTML是 ？

1、HTML 2、javascript 3、HTML Dom 4、CSS

16、下面哪个元素被称为媒体元素的子元素？

A、`<area>` B、`<img>` C、`<map>` D、`<track>`

17、关于 article 元素，下列哪个选项是不正确的？

A、文本或嵌入内容

B、开始和结束标记都是必需的

C、可以用来提供作者信息

D、contenteditable 属性不能与 article 元素一起使用

18、哪个元素表示标记或突出显示的文本以供参考？

A、highlight B、mark C、strong D、blink

19、哪个元素表示用于生成公钥-私钥对的控件？

A、ins B、keygen C、key D、command

20、如果在 HTML 文档的开始部分没有使用 doctype 怎么办？

A、浏怪异模式，浏览器使用自己的怪异模式解析渲染页面。

B、浏览器在标准模式下解析渲染页面。

C、浏览器停止工作

D、浏览器显示页面后崩溃

21、以下哪个是在 HTML5 之前已经引入的特性？

A、canvas/svg B、video C、地理定位 D、frames

22、哪个元素不定义属性的宽度？

A、`<input>` B、`<object>` C、`<embed>` D、`<textarea>`

23、为同一个文件添加多种文件格式的原因是什么 ？

A、提供后备支援 B、解决媒体支持问题 C、提供备份支持并解决媒体支持问题

### 二、解答 ###

#### 1、C ####

考察HTML5 Audio/Video 的属性：

*  currentTime 当前播放位置（以秒计）；
 *  duration 当前音频/视频的长度（以秒计）；
 *  defaultPlaybackRate 默认播放速度；
 *  PlaybackRate 当前播放速度。

#### 2、D ####

*  main 标签规定文档的主要内容；
 *  dir 定义目录列表；
 *  dd 为定义列表中项目的描述；
 *  pre 可定义预格式化的文本。
 *  补充：定义列表 dl 标签定义了定义列表（definition list），其内又包含了 dt（定义列表中的项目）和dd（描述列表中的项目）。

![在这里插入图片描述][20210615172148594.png]

#### 3、A ####

*  output： 标签定义不同类型的输出，比如脚本的输出。
 *  placeholder：该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
 *  autofocus：当页面加载时 input 元素应该自动获得焦点。
 *  required：如果使用该属性，则字段是必填（或必选）的。

#### 4、A ####

*  `<address>` 标签定义文档或文章的作者/拥有者的联系信息。
 *  `<hr>` 标签在 HTML 页面中创建一条水平线。
 *  `<a>` 标签定义超链接，用于从一张页面链接到另一张页面。
 *  `<cite>` 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

#### 5、B ####

H5使用 getCurrentPosition() 方法来获得用户的位置 但是由于隐私设置你是没法在浏览器里直接测试的

#### 6、B ####

1.  `<cite>`:用来定义作品的标题；
2.  `<abbr>`:用来指示标签简写；
3.  `<base>`:为页面上的所有的相对链接规定默认URL或者默认目标；
4.  `<arconym>`已经抛弃。

**废除的元素**

1、能用css代替的元素  
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。

2、不再使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。

3、只有部分浏览器支持的元素

applet、bgsound、blink、marquee等标签。

#### 7、D ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]

#### 8、getContext ####

getContext用于在画布上绘制

#### 9、HTML 属性 ####

spellcheck 属性规定是否对元素内容进行拼写检查。

contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。

oncontextmenu 事件在元素中**用户右击鼠标时触发**并**打开上下文菜单。**

注意：所有浏览器都支持 oncontextmenu 事件， [contextmenu][] 元素只有 Firefox 浏览器支持

spellcheck 属性规定是否对元素进行拼写和语法检查。（不是很明白怎么进行检查的）

可以对以下内容进行拼写检查：

*  input 元素中的文本值（非密码）
 *  `<textarea>`元素中的文本
 *  可编辑元素中的文本

#### 10、规定元素内容是否是可编辑的。 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]

#### 11、D ####

`<meter>`标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

**注释：**`<meter>` 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 标签。

a,c标签不存在

#### 12、week ####

HTML5拥有多个新的表单输入类型：

参考：https://www.runoob.com/html/html5-form-input-types.html

date 选取日、月、年 month 选取月和年 week 选取周和年 time 选取时间（小时和分钟）

#### 13、range ####

<table> 
 <thead> 
  <tr> 
   <th>button</th> 
   <th>定义可点击的按钮（大多与 JavaScript 使用来启动脚本）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>checkbox</td> 
   <td>定义复选框。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>定义拾色器。</td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>定义日期字段（带有 calendar 控件）</td> 
  </tr> 
  <tr> 
   <td>datetime</td> 
   <td>定义日期字段（带有 calendar 和 time 控件）</td> 
  </tr> 
  <tr> 
   <td>datetime-local</td> 
   <td>定义日期字段（带有 calendar 和 time 控件）</td> 
  </tr> 
  <tr> 
   <td>month</td> 
   <td>定义日期字段的月（带有 calendar 控件）</td> 
  </tr> 
  <tr> 
   <td>week</td> 
   <td>定义日期字段的周（带有 calendar 控件）</td> 
  </tr> 
  <tr> 
   <td>time</td> 
   <td>定义日期字段的时、分、秒（带有 time 控件）</td> 
  </tr> 
  <tr> 
   <td>email</td> 
   <td>定义用于 e-mail 地址的文本字段</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>定义输入字段和 “浏览…” 按钮，供文件上传</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>定义隐藏输入字段</td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td>定义图像作为提交按钮</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>定义带有 spinner 控件的数字字段</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>定义密码字段。字段中的字符会被遮蔽。</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>定义单选按钮。</td> 
  </tr> 
  <tr> 
   <td>range</td> 
   <td>定义带有 slider 控件的数字字段。</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>定义重置按钮。重置按钮会将所有表单字段重置为初始值。</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>定义用于搜索的文本字段。</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>定义提交按钮。提交按钮向服务器发送数据。</td> 
  </tr> 
  <tr> 
   <td>tel</td> 
   <td>定义用于电话号码的文本字段。</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>定义用于 URL 的文本字段。</td> 
  </tr> 
 </tbody> 
</table>

#### 14、JavaScript ####

Canvas是通过JavaScript的API进行绘图的，SVG是通过XML进行绘图的

#### 15、都是 ####

动态 HTML（DHTML）是指允许开发人员创建高度动画和交互式网站的代码标签和语法。 所以上面的技术都需要。

#### 16、D ####

新多媒体元素有： audio, video, source(定义多媒体资源) embed(定义嵌入的内容，比如插件) track(为`<audio>`,`<video>`这些元素的媒介规定外部文本轨道)

#### 17、D ####

`<article>`标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容

contenteditable，这个属性可以设置元素内容是否可以编辑，所有主流浏览器都支持

#### 18、B ####

（1）highlight jQuery中的，突出特效，通过改变背景颜色来隐藏或者显示一个元素

（2）mark h5中的标签，定义带有记号的文本，文本高亮显示

（3）strong HTML中的标签，定义重要文本，用来加粗文本

（4）blink 是js中的方法，用于显示闪动的字符串，不能用于ie，Chrome，Safari

#### 19、B ####

1.ins标签用来定义插入元素的

2.keygen 用于表单的密钥对生成器字段 新的WEB标准已经废弃

3.key 不知道是不是xml里面的key

4.用于定义用户可能调用的命令 就支持ie9

**`<keygen>`标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。**

#### 20、A ####

在 [HTML][] 中，文档类型 doctype 的声明是必要的。在所有文档的头部，你都将会看到"`<!DOCTYPE html>`" 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“[怪异模式(兼容模式)][Link 1]”的渲染模式。“`<!DOCTYPE html>`" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

https://developer.mozilla.org/zh-CN/docs/Glossary/Doctype

#### 21、D ####

h5的新增特性：

1、拖拽释放(Drap and drop) API ondrop

拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

2、自定义属性 data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、音频 ,视频(audio,video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay

5、画布 Canvas

5.1）getContext()

方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID)

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API

5.2）cxt.stroke() 如果没有这一步 线条是不会显示在画布上的

5.3）canvas 和 image 在处理图片的时候有什么区别?

image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.

6、 地理(Geolocation) API

7、 本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失

8、 sessionStorage 的数据在浏览器关闭后自动删除

9、 表单控件 calendar , date , time , email , url , search , tel , file , number

10、新的技术 webworker, websocket , Geolocation

#### 22、D ####

出题者的意思应该是说：以下元素哪一个没有width属性。这样答案就是`<textarea>`。

但是`<textarea>`可以设置cols属性来控制宽度。

#### 23、C ####

媒体支持问题:不同浏览器及版本可能对文件格式的支持不同，多放几个格式以免浏览器碰到一个文件不能支持 
    提供备份支持：如果浏览器两个格式都能支持，其中一个文件某些原因不能播放了，那还有另外一个文件可用嘛

[20210615172148594.png]: /images/20221005/695ea528d7994fcd97e9299eb83cb46d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20221005/65cb8b8bf150445c9ecfa6a7cc9db8ec.png
[contextmenu]: https://www.runoob.com/tags/att-global-contextmenu.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20221005/8b683f2560c746158b93245bbdef55ec.png
[HTML]: https://developer.mozilla.org/zh-CN/docs/Glossary/HTML
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode