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

最新推荐文章于 2024-10-15 14:41:38 发布

Web小白菜~

最新推荐文章于 2024-10-15 14:41:38 发布

阅读量6.6k

点赞数 13

分类专栏： web前端面试指南文章标签： html html5 html面试题前端面试题 web面试题

本文链接：https://blog.csdn.net/weixin_43106777/article/details/96842011

版权

web前端面试指南专栏收录该内容

21 篇文章 1 订阅

订阅专栏

html5面试题

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

一个网页从请求到最终显示的完整过程一般可分为如下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），用于描述二维矢量图形的一种图形格式
特点：任意缩放、文本独立、文件较小、显示质量高等等

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

行内元素有哪些？块级元素有哪些？空(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 的私有的自定义数据。