前端校招面试题目合集练习-1

题目来自于牛客网题库-前端校招面试题目合集。
该题库共501题
学习目标：题库501道题目学习一遍。

学习进度：

• 学习进度 10/501。

---

学习内容：

1. 浏览器页面有哪三层构成，分别是什么，作用是什么？
   构成为结构层，表示层，行为层。
   结构层是HTML实现页面结构。
   表示层是CSS实现页面表现与风格。
   行为层是JS实现客户端功能与业务逻辑。

2. HTML5的优点与缺点？
   优点： 网络标准统一。 多设备，跨平台。
   即时更新。提高可用性和改进用户的友好体验。
   可以给站点带来更多的多媒体元素 。可以很好的代替flash和silverlight。
   涉及到网站的抓取和索引的时候，对于SEO很友好。可移植性好。

   缺点：安全上存在严重的安全问题，完善性上，各浏览器支持程度不一。技术上，HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习。性能上，不同平台的引擎问题导致HTML5性能低下。兼容性上，不同浏览器兼容不一。

3. Doctype作用是什么？严格模式与混杂模式如何区分？它们有何意义？
   Doctype声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
   严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
   Doctype不存在或格式不正确会导致文档以混杂模式呈现。

4. HTML5有哪些新特性，移除了哪些元素？、
   Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。

   结构性元素主要负责web上下文结构的定义

   section：在 web 页面应用中，该元素也可以用于区域的章节描述。

   header：页面主体上的头部， header 元素往往在一对 body 元素中。

   footer：页面的底部（页脚），通常会标出网站的相关信息。

   nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

   article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

   级块性元素主要完成web页面区域的划分，确保内容的有效分割。

   aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

   figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。

   code：表示一段代码块。

   dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。

   行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。

   meter：表示特定范围内的数值，可用于工资、数量、百分比等。

   time：表示时间值。

   progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。

   video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。

   audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。

   交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。

   details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。

   datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。

   menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。

   command：用来处理命令按钮。

   图像Canvas
   多媒体video、audio
   本地存储localStorage、sessionStorage
   语义化更好的内容元素aticle、header、footer、nav、section
   表单控件date、time、canlendar、url、search
   新的技术webworker、websocket、Geolocation
   移除的元素：
   纯表现的元素u、big、center、strike、tt、font、basefont
   框架集frame、frameset、noframes

5. 你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
   IE: trident 内核

   Firefox ： gecko 内核

   Safari:webkit 内核

   Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核

   Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 )

6. 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

   声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

7. 说说你对HTML5认识?（是什么,为什么）
   HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。

   为什么：

   HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。

   HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

8. 对WEB标准以及W3C的理解与认识?

   web标准是由w3c组织和其他标准化组织制定的一系列标准的组合。 web标准的构成主要包括结构、表现和行为三方面，结构就是html文件，是基础，表现用于设置网页元素的版式、颜色、大小等外观样式，是css文件，行为指网页模型的定义及交互的编写，是JS文件。

9. HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
   (1)行内元素

   • a - 锚点

   • abbr - 缩写

   • acronym - 首字

   • b - 粗体 ( 不推荐 )

   • bdo - bidi override

   • big - 大字体

   • br - 换行

   • cite - 引用

   • code - 计算机代码 ( 在引用源码的时候需要 )

   • dfn - 定义字段

   • em - 强调

   • font - 字体设定 ( 不推荐 )

   • i - 斜体

   • img - 图片

   • input - 输入框

   • kbd - 定义键盘文本

   • label - 表格标签

   • q - 短引用

   • s - 中划线 ( 不推荐 )

   • samp - 定义范例计算机代码

   • select - 项目选择

   • small - 小字体文本

   • span - 常用内联容器，定义文本内区块

   • strike - 中划线

   • strong - 粗体强调

   • sub - 下标

   • sup - 上标

   • textarea - 多行文本输入框

   • tt - 电传文本

   • u - 下划线

   • var - 定义变量

   (2)块元素 (block element)

   • address - 地址

   • blockquote - 块引用

   • center - 居中对齐块

   • dir - 目录列表

   • div - 常用块级容易，也是 css layout 的主要标签

   • dl - 定义列表

   • fieldset - form控制组

   • form - 交互表单

   • h1 - 大标题

   • h2 - 副标题

   • h3 - 3级标题

   • h4 - 4级标题

   • h5 - 5级标题

   • h6 - 6级标题

   • hr - 水平分隔线

   • isindex - input prompt

   • menu - 菜单列表

   • noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容

   • noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）

   • ol - 排序表单

   • p - 段落

   • pre - 格式化文本

   • table - 表格

   • ul - 非排序列表

   （3）可变元素：可变元素为根据上下文语境决定该元素为块元素或者内联元素。

   • applet - java applet

   • button - 按钮

   • del - 删除文本

   • iframe - inline frame

   • ins - 插入的文本

   • map - 图片区块 (map)

   • object - object对象

   • script - 客户端脚本

   (3)空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )

   br 换行 hr 分隔线 input 文本框等
   img 图片 link meta

10. 什么是WebGL,它有什么优点?
    WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。
    WebGL完美地解决了现有的 Web 交互式三维动画的两个问题:
    第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;
    第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

---

学习时间：

2021/1/8 19:00-20:00
花费时间：1H

---

寄语

想做知识的相机、将它保留在心中的相册。
又是努力学习的一天,加油!