前端开发面试题——HTML篇（你想要的，都在这里）

时间 2019-12-12

原文原文链接

HTML

DOCTYPE做用？标准模式与兼容模式各有什么区别？

1 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现。
2 标准模式中，排版和JS运做模式都是以该浏览器支持的最高标准运行；
　兼容模式中，页面以宽松的向后兼容的方式呈现，模拟老式浏览器的行为以防止站点没法工做。javascript

HTML5为何只要写<!DOCTYPE HTML>？

HTML5不基于SGML，所以不须要对DTD进行引用，但须要DOCTYPE来规范浏览器的行为；
而HTML4.01基于SGML，须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。html

行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素：a b i em span input select strong等
块级元素：h1~h6 p div ul ol dl li等
空元素：meta link br hr img input area等java

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

1 link除了加载CSS以外，还能定义RSS，定义rel链接属性等做用；而@import只能加载CSS。
2 link在页面加载时同时加载；而@import引用的CSS会等到页面加载完后再加载。
3 link是XHTML标签，无兼容问题；@import是CSS提出的，IE5以上才能识别。web

介绍一下你对浏览器内核的认识？

主要分红两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页内容，整理讯息，以及计算网页的显示方式，而后输出至显示器或打印机。浏览器的内核不一样对于网页的语法解释会有不一样，因此渲染的效果也不一样。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎没有很明确的区分，后来JS引擎愈来愈独立，内核就倾向于只指渲染引擎。canvas

常见的浏览器内核有哪些？

1 Trident内核：IE
2 Gecko 内核：Firefox
3 Presto 内核：Opera（现为Blink）
4 Webkit 内核：Safari,Chrome (Chrome现为Blink)浏览器

HTML5有哪些新特性、移除了哪些元素？

HTML5如今已不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增长。
　绘画：canvas;
　媒体播放：video和audio元素；
　本地离线存储：localStorage和sessionStorage;
　语义化更好的元素，如article、footer、header、nav、section;
　表单控件，如calendar、date、time、email、url、search;
　新的技术，webworker,websockert,Geolocation;
移除的元素：
　纯表现的元素：big，center,font,basefont,strike,s,u;
　对可用性产生负面影响的元素：frame,frameset,noframes;缓存

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?

IE6/7/8支持经过document.createElement方法产生的标签，可使用这种方法来兼容，还要添加上标签默认的样式。
识别HTML5：经过DOCTYPE声明，新增的结构元素，功能元素安全

HTML5的离线储存怎么使用？工做原理能不能解释一下？

如何使用：只要在在页面头部加入mainfest的属性就好了。服务器

<!DOCTYPE HTML>
<html manifest="cache.manifest">
……
</html>

工做原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），经过这个文件上的解析清单离线存储资源，这些资源就像cookie同样被存储下来。当无网时，浏览器会经过被离线存储的数据进行展现。cookie

浏览器是怎么对HTML5的离线存储资源进行管理和加载的？

在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件。若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并进行离线存储。若是已经访问过app，浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件和旧的manifest文件，若是发生改变就更新资源。

请描述一下cookies,sessionStorage,localStorage的区别？

cookie是网站为了标识用户身份而储存在用户本地终端的数据（一般通过加密）。
cookie数据始终在同源的http请求中携带，即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
　cookie数据大小不能超过4k。
　sessionStorage和localStorage虽然也有存储大小限制，但比cookie大得多，有5M或更大。
有效时间：
　cookie　　　　　在cookie设置的过时时间以前一直有效，即便浏览器关闭
　sessionStorage　数据在当前浏览器窗口关闭以后自动删除
　localStorage　　存储持久数据，浏览器关闭以后数据不丢失除非主动删除数据

iframe有哪些缺点？

1 iframe会阻塞主页面的Onload事件；
2 搜索引擎的检索程序没法解读这种页面，不利于SEO;
3 iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。

若是要使用iframe，最好经过javascript动态给ifarme添加src属性值，这样能够避免以上问题。

label的做用是什么？是怎么用的？

label标签订义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="name">输入：</label>
<input type="text" name="name" id="name" />

<label>输入：<input type="text" name="name" /></label>

HTML5的from如何关闭自动完成功能？

给不想要提示的 from 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通讯？

WebSocket,SharedWorker;
也能够调用localStorage,cookies等本地存储方式；

localStorage在另外一个浏览器上下文里被添加、修改或删除时，它都会触发一个事件，咱们经过监听事件，控制它的值来进行页面信息通讯。

页面可见性（Page Visibility API）能够有哪些用途？

经过visibilityState的值检测页面当前是否可见，以及打开网页的时间等；
在页面被切换到其余后台进程的时候，自动暂停音乐或视频播放

网页验证码是干吗的，是为了解决什么安全问题？

区分用户是人仍是计算机的自动程序，能够防止恶意破解密码，刷票，论坛灌水；
有效防止黑客对某个特定用户用程序来进行暴利破解登录。

b与strong的区别？i与em的区别？

strong是代表重点内容，有语气增强的含义，使用阅读设备阅读网络时，strong会重读，而b是展现强调内容。i内容显示为斜体，em表示强调文本。