前端开发面试题——HTML篇(你想要的,都在这里)

谷歌架构师 2019-06-20

HTML

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

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

HTML5为什么只要写<!DOCTYPE HTML>?

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

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

工作原理: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标签定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

<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表示强调文本。

相关推荐