HTML5 面试题大全（持续更新）看这一篇就够了

川长思鸟来 2021-11-29 15:00 702阅读 0赞

### html5面试题 ###

*   *   *  请描述一个网页从开始请求到最终显示的完整过程？
         *  什么是 HTML5?
         *  什么是<! DOCTYPE >？是否需要在HTML5中使用？
         *  DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?
         *  HTML5有哪些的新特性？
         *  简述一下你对HTML语义化的理解？
         *  HTML 和 XHTML 有什么区别？
         *  页面导入样式时，使用link和@import有什么区别？
         *  HTML5地理定位是什么？如何使用？
         *  HTML全局属性(global attribute)有哪些（包含H5）？
         *  简述a标签超链接target属性的取值和作用？
         *  浏览器内多个标签页之间的通信方式有哪些？
         *  viewport常见设置都有哪些？
         *  常见的浏览器内核都有哪些？并介绍下你对内核的理解
         *  说说你对html中的置换元素和非置换元素的理解？
         *  js放在html的< body >和< head >有什么区别？
         *  < img >的 title 和 alt 有什么区别?
         *  SVG 与 Canvas的区别??
         *  行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
         *  async 和 defer 的作用是什么？有什么区别？
         *  常⽤的meta标签有哪些??
         *  浏览器页面有哪三层构成，分别是什么，作用是什么?
         *  HTML5的优缺点？？？
         *  对 WEB 标准以及 W3C 的理解与认识?
         *  什么是 WebGL,它有什么优点?
         *  简述 cookies，sessionStorage 和 localStorage 的区别?
         *  data- 属性的作用是什么？
         *  iframe 有那些缺点？
         *  简述一下 src 与 href 的区别？
         *  WebSocket 与消息推送？

### 请描述一个网页从开始请求到最终显示的完整过程？ ###

一个网页从请求到最终显示的完整过程一般可分为如下7个步骤 ：

*  在浏览器中输入网址
 *  发送至`DNS`服务器并获得域名对应的web服务器的`IP`地址
 *  与web服务器建立`TCP`连接
 *  浏览器向web服务器的`IP`地址发送相应的`HTTP`请求
 *  web服务器响应请求并返回指定`URL`的数据，或错误信息，如果设定重定向，则重定向到新的URL地址
 *  浏览器下载数据后解析`HTML`源文件，解析过程中实现对页面的排版，解析完成后再浏览器中显示基础页面
 *  分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部显示

### 什么是 HTML5? ###

HTML5是HTML（超文本标记语言）的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。

WHATWG（Web超文本应用技术工作组）另一次W3C个人聚会认为，W3C没有认真考虑当前方言的现实改进需求，它已经开始处理HTML-HTML5的新确定。因此，HTML5是HTML 4.01和XHTML 1.0的另一种改编，它集中于Web应用程序设计者的必要性上，并且还倾向于在当前细节中发现的问题。

具体而言，HTML5包含许多新的句法特征。

### 什么是<! DOCTYPE >？是否需要在HTML5中使用？ ###

<！DOCTYPE>是关于页面写入了什么版本的HTML的指令。<！DOCTYPE>标记没有结束标记，它不区分大小写。

<！DOCTYPE>声明必须是HTML5文档中的第一行，在标记之前。如HTML 4.01，全部<！DOCTYPE>声明需要引用文档类型定义（DTD），因为HTML 4.01是基于标准通用标记语言（SGML）的。而HTML5并不基于SGML，因此不需要对文档类型定义（DTD）的引用。

### DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义? ###

*  `<!DOCTYPE>` 声明位于文档中的最前面，处于 `<html>` 标签之前。告知浏览器以何种模式来渲染文档。
 *  严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
 *  在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
 *  DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

### HTML5有哪些的新特性？ ###

*  绘图canvas
 *  拖放（Drag和drop）
 *  用于媒介回放的video和audio
 *  本地存储localStorage和sessionStorage
 *  语义化元素（header、footer、nav、section、article）
 *  表单控件（date、time、url、search、email、calendar）
 *  控件元素（webworker、websockt、Geolocation）

> **HTML5兼容IE低版本**  
> `HTML5提出的新的元素不被IE6-8识别`，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。  
> 针对IE浏览器`html5shiv` 是比较好的解决方案。  
> `注：html5shiv.js 引用代码`必须放在 `<head>` 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

### 简述一下你对HTML语义化的理解？ ###

*  用正确的标签做正确的事情
 *  html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
 *  即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的
 *  搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
 *  使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

### HTML 和 XHTML 有什么区别？ ###

*  XHTML中的标签都必须被正确地嵌套,HTML中的某些标签可以彼此不正确的嵌套。
 *  XHTML中的所有标签必须要关闭。
 *  XHTML中规范定义：标签名和属性对大小写敏感,所有XHTML标签名必须用小写字母。
 *  XHTML文档必须拥有根元素。
 *  XHTML中标签的属性值要使用双引号”。

### 页面导入样式时，使用link和@import有什么区别？ ###

*  link属于XHTML标签，而@import是css提供的
 *  页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
 *  @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
 *  link方式的样式的权重高于@import的权重。

### HTML5地理定位是什么？如何使用？ ###

HTML5 地理定位用于定位用户的位置  
HTML5 地理定位API用于获取用户的地理位置。  
由于这会侵犯用户隐私，除非用户批准，否则该位置不可用。  
使用 getCurrentPosition() 方法获取用户的位置。

### HTML全局属性(global attribute)有哪些（包含H5）？ ###

*  accesskey:设置快捷键
 *  class:为元素设置类标识
 *  contenteditable:指定元素内容是否可编辑
 *  contextmenu:自定义鼠标右键弹出上下文菜单内容（仅firefox支持）
 *  data-\*:为元素增加自定义属性
 *  dir：设置元素文本方向（默认ltr；rtl）
 *  draggable:设置元素是否可拖拽
 *  dropzone:设置元素拖放类型（copy|move|link,H5新属性，主流均不支持）
 *  hidden:规定元素仍未或不在相关
 *  id:元素id，文档内唯一
 *  lang:元素内容的语言
 *  spellcheck:是否启动拼写和语法检查
 *  style:行内css样式
 *  tabindex:设置元素可以获得焦点，通过tab导航
 *  title:规定元素有关的额外信息
 *  translate:元素和子孙节点内容是否需要本地化（均不支持）

### 简述a标签超链接target属性的取值和作用？ ###

a 标签的 target 属性一共有四个值。

*  \_self ：默认属性。在当前窗口或者框架中加载目标文档。
 *  \_blank ：打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel=“noopener norefferrer” 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。
 *  \_parent ：在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 \_self 相同。
 *  \_top ：在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口

### 浏览器内多个标签页之间的通信方式有哪些？ ###

即在浏览器中，两个不同页面（A页面的window ！= B页面的window）网页之间的消息传递。

*  WebSocket （可跨域）
 *  postMessage（可跨域）
 *  Worker之SharedWorker
 *  Server-Sent Events
 *  localStorage
 *  BroadcastChannel
 *  Cookies

### viewport常见设置都有哪些？ ###

在移动端做开发时，必须要搞清楚 viewport 这一设置。

viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport 会超出设备的显示区域（即会有横向滚动条出现）。  
设备默认的 viewport 在 980 - 1024 之间。

*  width ：设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
 *  initial-scale ：设置页面的初始缩放值，为一个数字，可以带小数
 *  minimum-scale ：允许用户的最小缩放值，为一个数字，可以带小数
 *  maximum-scale ：允许用户的最大缩放值，为一个数字，可以带小数
 *  height ：设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
 *  user-scalable ：是否允许用户进行缩放，值为"no"或"yes"， no 代表不允许，yes 代表允许

### 常见的浏览器内核都有哪些？并介绍下你对内核的理解 ###

常见浏览器所用内核

*  IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；
 *  Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；
 *  Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；
 *  Safari 浏览器内核：Webkit 内核；
 *  Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；
 *  360浏览器、猎豹浏览器内核：IE + Chrome 双内核；
 *  搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
 *  百度浏览器、世界之窗内核：IE 内核；
 *  2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；
 *  UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。

--------------------

内核理解

主要分成两部分：渲染引擎和 JS 引擎。  
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也  
可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。  
JS 引擎：解析和执行 javascript 来实现网页的动态效果。  
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

### 说说你对html中的置换元素和非置换元素的理解？ ###

置换元素（Replaced Element）

*  简单来说，置换元素可以设置宽 高,他们有自己的属性，和inline-block有一样的属性
 *  主要是指 img、input、textarea、select、object 等这类默认就有 CSS 格式化外表范围的元素。
 *  浏览器根据元素的标签和属性，来决定元素的具体显示内容

例如：浏览器根据标签的src属性显示图片。根据type属性决定显示输入框还是按钮

非置换元素（non-Replaced Element）:

*  就是除了 img、input、textarea、select、object 等置换元素以外的元素。
 *  内容直接展示给浏览器。例如标签，标签里的内容会被浏览器直接显示给用户

### js放在html的< body >和< head >有什么区别？ ###

js 放在<head> 中，如果不添加 async 或者 defer 时，当浏览器遇到 script 时，会阻塞 DOM 树的构建，进而影响页面的加载。当 js 文件较多时，页面白屏的时间也会变长。

在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析 HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。

把 js 放到 <body> 里（一般在 </body> 的上面）时，由于 DOM 时顺序解析的，因此 js 不会阻塞 DOM 的解析。对于必须要在 DOM 解析前就要加载的 js，我们需要放在 <head> 中。

### < img >的 title 和 alt 有什么区别? ###

*  **alt** ： 图片加载失败时，显示在网页上的替代文字
 *  **title** ：鼠标悬浮在图片上显示的文字

`注 : alt是必要属性，title非必要`

### SVG 与 Canvas的区别?? ###

> SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML）， 用于描述二维矢量图形的一种图形格式  
> **特点**：任意缩放、文本独立、文件较小、显示质量高等等

<table> 
 <thead> 
  <tr> 
   <th>Canvas</th> 
   <th>SVG</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>依赖分辨率</td> 
   <td>不依赖分辨率</td> 
  </tr> 
  <tr> 
   <td>不支持事件处理器</td> 
   <td>支持事件处理器</td> 
  </tr> 
  <tr> 
   <td>弱的文本渲染能力</td> 
   <td>最适合带有大型渲染区域的应用程序（比如谷歌地图）</td> 
  </tr> 
  <tr> 
   <td>能够以 .png 或 .jpg 格式保存结果图像</td> 
   <td>复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</td> 
  </tr> 
  <tr> 
   <td>最适合图像密集型的游戏，其中的许多对象会被频繁重绘</td> 
   <td>不适合游戏应用</td> 
  </tr> 
 </tbody> 
</table>

### 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？ ###

*  行内元素有：a b span img input select strong
 *  块级元素有：div ul ol li dl dt dd h1~h6 p
 *  空元素：br hr img input link meta
 *  行内元素不可以设置宽高,margin仅设置左右方向有效，不独占一行
 *  块级元素可以设置宽高，独占一行

### async 和 defer 的作用是什么？有什么区别？ ###

*  脚本没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。
 *  **defer** 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时， HTML 并未停止解析，这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。
 *  **async** 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。

### 常⽤的meta标签有哪些?? ###

> `meta`标签由`name`和`content`属性定义，用来描述一个网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

*  **charset**：文档的编码类型
    
        <meta charset="UTF-8" />
 *  **keywords**：页面关键词
    
        <meta name="keywords" content="关键词" />
 *  **description**：页面描述
    
        <meta name="description" content="描述内容" />
 *  **refresh**：页面重定向和刷新
    
        <meta http-equiv="refresh" content="0;url=" />
 *  **viewport**：适配移动端，视口
    
        <meta name="viewport" content="width-device-width, initial-scale=1, maximum-scale=1" />
    
    > **content 参数有以下几种：**  
    > width viewport ：宽度(数值/device-width)  
    > height viewport ：高度(数值/device-height)  
    > initial-scale ：初始缩放比例  
    > maximum-scale ：最大缩放比例  
    > minimum-scale ：最小缩放比例  
    > user-scalable ：是否允许用户缩放(yes/no）
 *  搜索引擎索引方式
    
        <meta name="robots" content="index,follow" />
    
    > **content 参数有以下几种：**  
    > all：文件将被检索，且页面上的链接可以被查询  
    > none：文件将不被检索，且页面上的链接不可以被查询  
    > index：文件将被检索  
    > follow：页面上的链接可以被查询  
    > noindex：文件将不被检索  
    > nofollow：页面上的链接不可以被查询

### 浏览器页面有哪三层构成，分别是什么，作用是什么? ###

**构成**： 结构层（HTML）、表示层（CSS）、行为层（JavaScript）  
**作用**：HTML实现页面结构、CSS实现页面样式、JS实现业务逻辑功能

### HTML5的优缺点？？？ ###

**优点**：

*  网络标准统一
 *  多设备、跨平台
 *  即时更新
 *  提高可用性和改进用户体验
 *  被大量应用于移动应用程序和游戏
 *  …还有html5的一些新特性等等等等

**缺点**：

*  安全性： 像之前 Firefox4 的 web socket 和透明代理的实现存在严重的安全问 题，同时 web storage、web socket 这样的功能很容易被黑客利用，来盗取用 户的信息和资料
 *  完善性： 许多特性各浏览器的支持程度也不一样
 *  技术门槛： HTML5 简化开发者工作的同时代表了有许多新的属性和 API 需要 开发者学习，像 web worker、web socket、web storage 等新特性，后台甚至 浏览器原理的知识
 *  性能： 某些平台上的引擎问题导致HTML5性能低下
 *  浏览器兼容性： IE9一下浏览器几乎全军覆没

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

> 标签闭合、标签小写、不乱嵌套、提高搜索几率利于SEO、使用外链CSS和JS脚本、结构行为表现得分离、文件下载与页面速度更快、内容能被更多的用户访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、版本迭代方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

### 什么是 WebGL,它有什么优点? ###

> WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准 允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的 一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这 样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL 技术标准免去了开发网页 专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用 来设计 3D 网页游戏等等。

> **WebGL 完美地解决了现有的 Web 交互式三维动画的两个问题：**
> 
>  *  第一，它通过 HTML 脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器 插件支持 ;
>  *  第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、 跨平台的 OpenGL 接口实现的。 通俗说 WebGL 中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常 会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

### 简述 cookies，sessionStorage 和 localStorage 的区别? ###

> sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方 便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服 务器间不必要地来回传递。sessionStorage、 localStorage 、 cookie 都是在 浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览 器窗口”的概念。sessionStorage 是在同源的同窗口（或 tab ）中，始终存在 的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一 页面，数据仍然存在。关闭窗口后， sessionStorage 即被销毁。同时“独立” 打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的 cookies 会发送到服务器端。其余两个不会。  
> Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie。Firefox 每个域名 cookie 限制为 50 个。Opera每个域名 cookie 限制为 30 个。 Firefox 和 Safari 允许 cookie 多达 4097 个字 节，包括名（name）、值（value）和等号。Opera 许 cookie 多达 4096 个字节， 包括：名（name）、值（value）和等号。Internet Explorer 允许 cookie 多达 4095 个字节，包括：名（name）、值（value）和等号。

*  Cookie 每个域名存储量比较小（各浏览器不同，大致 4K ） 所有域名的存储量有限制（各浏览器不同，大致 4K ） 有个数限制（各浏览器不同） 会随请求发送到服务器 (浪费带宽)
 *  Cookie只在设置了有限时间内有效
 *  LocalStorage 永久存储 单个域名存储量比较大（推荐 5MB ，各浏览器不同） 总体数量无限制
 *  LocalStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不 会丢失。
 *  SessionStorage 只在 Session 内有效 存储量更大（推荐没有限制，但是实际上各浏览器也不同）
 *  SessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之 销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存 储

### data- 属性的作用是什么？ ###

`data-`为 H5 新增的为前端开发者提供自定义的属性，这些属性集可以通过对象 的`dataset`属性获取，不支持该属性的浏览器可以通过`getAttribute`方法获 取，需要注意的是：`data-`之后的以连字符分割的多个单词组成的属性，获取 的时候使用驼峰风格。所有主流浏览器都支持 `data-*` 属性。 即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的 私有的自定义数据。

### iframe 有那些缺点？ ###

*  iframe会阻塞主页面的`onload`事件
 *  搜索引擎的检索程序无法解读这种页面，不易于SEO
 *  iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

`注：`**若使用iframe，最好通过JS动态给iframe添加src属性值**

### 简述一下 src 与 href 的区别？ ###

*  src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当 前标签所在位置
 *  href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元 素（锚点）或当前文档（链接）之间的链接

### WebSocket 与消息推送？ ###

B/S 架构的系统多使用 HTTP 协议  
**HTTP协议：**

*  连接无状态
 *  数据明文传输
 *  端口默认为80,底层通信还是使用 Socket 完成

> HTTP 协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送,一些变相的解决办法：  
> **双向通信与消息推送**

**轮询：** 客户端定时向服务器发送 Ajax 请求，服务器接到请求后马上返回响应信 息并关闭连接。

*  优点：后端程序编写比较容易
 *  缺点：请求中有大半无用，浪费带宽和服务器资源
 *  实例：适用于小型应用

**长轮询：** 客户端向服务器发送 Ajax 请求，服务器接到请求后 hold 住连接， 直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器 发送新的请求。