HTML已更新为HTML5，所以你也应该了解HTML5面试题。本文为您提供参考。
doctype 用于告诉浏览器使用哪个版本的 HTML 规范来呈现文档。格式不正确或缺失的 DOCTYPE 会导致 HTML 文档以混杂模式呈现。
标准模式以浏览器支持的最高标准运行； Quirks 模式下的页面以更宽松的向后兼容方式显示。
HTML5并不是基于SGML（标准通用标记语言），因此不需要引用DTD（DTD文档类型定义），但需要DOCTYPE来规范浏览器行为。
HTML4.01是基于SGML的，所以需要引用DTD。为了告诉浏览器该文档使用的文档类型，如下：
行内元素：input、select、a、span、img
块级元素：dl、dt、dd、h1、pdiv、ul、ol、li
相同的地方是外部参考CSS方法，不同的是：
link 是一个 xhtml 标签。除了加载css之外，还可以定义RSS等其他事务； @import属于CSS类别，只能加载CSS
当链接引用CSS时，在页面加载时同时加载； @import需要在页面完全加载后加载，而@import引用的CSS只有在引用它的CSS文件加载完毕后才会被加载
link是xhtml标签，没有兼容性问题； @import是在css2.1中提出的，低版本浏览器不支持
link支持使用javascript控件改变样式，但@import不支持
链接样式样式的权重高于@import
使用html时导入需要标签
@import 导入 CSS 文件将等到文档加载完毕后才加载 CSS 样式表。因此，在页面 DOM 加载完成和 CSS 导入完成之间会有一段时间，页面上的内容将是无样式的。
解决方案：使用link标签加载CSS样式文件。由于链接是按顺序加载的，因此页面将等到 CSS 下载完毕后再下载 HTML 文件。这样布局就先做好了，就不会有FOUC的问题了。
主要分为两部分：渲染引擎（Layout Engine或Rendering Engine）和JS引擎。
渲染引擎：负责获取网页内容（HTML、XML、图像等）、组织信息（如添加CSS等）、计算网页的显示方式页面，然后将其输出到显示器或打印机。不同的浏览器内核会对网页的语法解释不同，因此呈现的效果也会不同。
JS引擎：解析并执行javascript，实现网页动态效果。
一开始渲染引擎和JS引擎并没有明确区分。后来JS引擎越来越独立，内核往往只指渲染引擎。
Trident( MSHTML )：IE MaxThon TT 世界360搜狗浏览器
Geckos：Netscape6 及更高版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上版本（Opera内核原来：Presto，现在：Blink）
Webkit：Safari Chrome
新增图像、位置、存储、多任务等功能。
新元素：用于媒体播放的画布视频和音频元素
本地离线存储。 localStorage长期存储数据，浏览器关闭后数据不丢失； sessionStorage数据在浏览器关闭后自动删除
具有更好语义的内容元素，例如文章页脚标题导航部分
位置 API：地理位置
表单控件，日历日期时间电子邮件网址搜索
新技术：Web Worker（Web Worker是在后台运行的JavaScript，独立于其他脚本，不影响页面的性能。你可以继续做任何你想做的事情：点击、选择内容等。 ，而这个当webworker在后台运行时）websocket
拖放API：拖、放
删除的元素：
纯粹的表达元素：basefont 大中心字体 s Strike tt u
性能较差的元素：frameframesetnoframes
部门：
DOCTYPE声明的方式是区分重要因素
按照新增结构和功能划分
删除或丢失样式可以使页面结构清晰。
有助于SEO和搜索引擎建立良好的沟通，帮助爬虫爬取更多的信息。爬虫依靠标签来确定上下文和每个关键字的权重。
方便其他设备解析。
易于团队开发和维护，语义基于可读性。
在线时，浏览器发现HTML header有manifest属性，就会请求manifest文件。如果是第一次访问，浏览器会根据manifest文件的内容下载相应的资源并离线存储。如果已经被访问过并且资源已经离线存储，浏览器就会使用离线资源来加载页面。然后，浏览器会将新的清单文件与旧的清单文件进行比较。如果文件没有改变，则不会执行任何操作。如果文件发生变化，文件中的资源会重新下载并离线存储。
它们的共同点：都是保存在浏览器端，同源。
差异：
Cookies是存储在用户本地终端上的用于识别用户身份的数据。它们总是携带在同源http请求中，即浏览器和服务器之间来回传递cookie，但sessionstorage和localstorage不会自动向Server发送数据，仅保存在本地。
存储大小限制各不相同。 cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据很大，可以达到5M。
数据有不同的有效期。即使窗口或浏览器关闭，cookie 仍然有效，直到设置的 cookie 过期时间为止。会话存储仅在浏览器窗口关闭之前有效。 localstorage 始终有效，即使窗口和浏览器关闭，也可用于长期数据存储。
范围不同。 Cookie 在同源的所有窗口之间共享；不同浏览器之间不共享sessionstorage，即使在同一页面上； localstorage 在同源的所有窗口之间共享
优点：
iframe可以完整显示嵌入的网页。
如果有多个网页引用iframe，那么只需要修改iframe的内容就可以改变每个调用的页面的内容，方便快捷。
如果网页有相同的标题和版本，为了统一风格，可以写成一页，用iframe嵌套，这样可以增加代码的复用性。
如果遇到图标、广告等第三方内容加载缓慢，这些问题都可以通过iframe来解决。
缺点：
搜索引擎爬虫无法解读此类页面
框架结构中出现各种滚动条
使用框架结构时，请确保设置正确的导航链接。
iframe页面会增加服务器的http请求
label标签用于定义表单控件之间的关系。当用户选择标签时，浏览器会自动将焦点转向与该标签相关的表单。在控制上。 label中有两个非常有用的属性，FOR和ACCESSKEY。
FOR属性作用：表示要绑定到label标签的HTML元素。当您单击此标签时，绑定的元素将获得焦点。
ACCESSKEY属性功能：表示访问label标签绑定的元素的热键。当您按下热键时，绑定的元素将获得焦点。
HTML输入框可以具有自动完成功能。当您在输入框中输入内容时，浏览器会从您之前的同名输入框的历史记录中查找类似的内容，并将其列在输入框下方。这样就不需要输入所有内容，只需选择列表中的项目即可。但有时我们想关闭输入框的自动完成功能。例如，当用户输入内容时，我们希望使用AJAX技术从数据库中搜索并列出，而不是在用户的历史记录中搜索。
方法：
在IE的互联网选项菜单中设置自动完成
将表单输入框的自动完成设置为开或关闭，以启用输入框的自动完成功能
WebSocket SharedWorker
还可以调用localstorge、cookies等本地存储方法。当 localstorge 在另一个浏览上下文中添加、修改或删除时，将会触发一个事件。我们通过监听事件并控制其值来传达页面信息。
注意：在隐身模式下设置 localstorge 值时，Safari 会抛出 QuotaExceededError 异常
基于多部分编码的 Adobe Flash Socket ActiveX HTMLFile (IE)，基于长轮询 XHR 发送 XHR
参考WebSocket.js文件，兼容低版本浏览器。
使用visibility state的值来检测页面当前是否可见以及网页被打开的时间。
当页面切换到其他后台进程时自动暂停音乐或视频播放。
地图+区域或svg
边界半径
纯js实现，点不在圆上的算法
区分用户是计算机还是人的程序；
可防止恶意破解密码、门票诈骗、论坛泛滥；
title该属性没有明确的含义，只代表标题；h1代表了一个层次明确的标题，这对页面信息的抓取也有很大的影响
强标记重点内容，语气加强意义；b是无意义的视觉表征
em表示强调文字；i 是斜体，这是一种无意义的视觉表示
视觉风格标签：b i u s
语义风格标签：强em ins del代码
同时设置alt和标题时，alt作为图片的替代文字出现，title为图片的说明文字。
以上是小编整理的关于HTML5的面试题及答案。
转载自：https://m.smtshopping.cn/CaseyWei/
