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

jk_v1 发布于2019-08-29 11:27 / 1903人阅读

摘要：是标签，无兼容问题是提出的，以上才能识别。数据始终在同源的请求中携带，即会在浏览器和服务器间来回传递。和不会自动把数据发给服务器，仅在本地保存。输入输入的如何关闭自动完成功能给不想要提示的或某个设置为。内容显示为斜体，表示强调文本。

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

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

HTML5为什么只要写？

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

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

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

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

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

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

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

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

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的属性就行了。



……

工作原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就像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标签定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

输入：


输入：

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

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

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

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

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

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

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

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

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

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

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

GPU云服务器云服务器百度开发面试题php html面试题大数据开发面试题及答案 linux的面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111654.html

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

摘要：是标签，无兼容问题是提出的，以上才能识别。数据始终在同源的请求中携带，即会在浏览器和服务器间来回传递。和不会自动把数据发给服务器，仅在本地保存。输入输入的如何关闭自动完成功能给不想要提示的或某个设置为。内容显示为斜体，表示强调文本。 HTML DOCTYPE作用？标准模式与兼容模式各有什么区别？ 1 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文...

light 2019-08-22 10:40 评论0 收藏0
前端开发面试题——HTML篇（你想要的，都在这里）

摘要：是标签，无兼容问题是提出的，以上才能识别。数据始终在同源的请求中携带，即会在浏览器和服务器间来回传递。和不会自动把数据发给服务器，仅在本地保存。输入输入的如何关闭自动完成功能给不想要提示的或某个设置为。内容显示为斜体，表示强调文本。 HTML DOCTYPE作用？标准模式与兼容模式各有什么区别？ 1 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文...

scq000 2019-08-01 15:52 评论0 收藏0
前端 CSS 面试大纲

摘要：比如说预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试，请参考上学那会儿你们班学霸的姿势。背景参加完厦门第四届CSS Conf 后，让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术，但是我又不想在 CS...

mating 2019-08-30 14:19 评论0 收藏0