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包含许多新的句法特征。

什么是？是否需要在HTML5中使用？

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

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

HTML5有哪些的新特性？

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

简述一下你对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 放在 中，如果不添加 async 或者 defer 时，当浏览器遇到 script 时，会阻塞 DOM 树的构建，进而影响页面的加载。当 js 文件较多时，页面白屏的时间也会变长。

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

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