前端面试题及其总结

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为

所以，html5只有一种：<!DOCTYPE> 但是html4.01有三种，分别是strict（不包含展示性和弃用元素，不允许框架集）、transitional（包含展示性和弃用元素，不允许框架集）、frameset（允许框架集）

3、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

常见的行内元素有：a，b，span，img（我曾以为是block），input，strong，select

常见的块级元素有：div、ul（无序）、ol（有序）、li、p等

常见的空元素： <br><hr><link><script>

空元素定义：html元素的内容就是其两个标签之间的content，所以，标签之间没有内容的就是空元素

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

写法上：

<link rel="stylesheet" href="路径" />

<style type="text/css">
    @import '路径'
</style>
复制代码

本质上：link属于XHTML标签，除了加载css之外，还能定义RSS，定义rel连接属性等作用。而@import是css提供的，只能用于加载css

解析上：link是跟着页面加载同时加载的，但是@import会等到页面加载完再加载

兼容上：@import IE5以上才能识别，无限制

5、介绍一下你对浏览器内核的理解？

主要分为两部分：

• 渲染引擎
• JS引擎

渲染引擎：取得网页的内容（html、xml、图片）、构造cssom树、计算网页的显示方式，比如各元素宽高，然后输出至显示器或打印机。

js引擎：解析和执行javascript来实现网页的动态效果

6、常见的浏览器内核有哪些（背记）？

• Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
• Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

*Blink是Chrome使用的，webkit的简化版本，但是效率等都较之前有了提升

详细文章： 浏览器内核的解析和对比

7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

实现上：h5不再是SGML的子集。

新特性：主要是关于图像，位置，存储，多任务等功能的增加。

如：

绘画canvas

用于媒介回放的video和audio元素

本地离线存储localStorage，长期存储，浏览器关闭之后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search;

新的技术webworker, websocket, Geolocation;

移除的元素：
  纯表现的元素：basefont，big，center，font, s，strike，tt，u;
  对可用性产生负面影响的元素：frame，frameset，noframes；
复制代码

处理兼容性： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

也可以使用html5shim，可以让IE9或更低版本能支持html5

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
复制代码

如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

8、对html语义化的理解（了解）

• 用正确的标签做正确的事情。
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

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

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

1、页面头部像下面一样加入一个manifest的属性；

2、在cache.manifest文件的编写离线存储的资源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

3、在离线状态时，操作window.applicationCache进行需求实现。

10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？（这个比上面重要）

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

• cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage 数据在当前浏览器窗口关闭后自动删除。
• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

12、iframe有那些缺点？

• iframe会阻塞主页面的Onload事件；
• 搜索引擎的检索程序无法解读这种页面，不利于SEO;
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
• 动态给iframe添加src属性值，这样可以绕开以上两个问题。

13、Label的作用是什么？是怎么用的？

用来关联某个标签，可以是表单标签，也可以是button，这样就可以直接点击label的范围来触发绑定标签的事件

用法：

14、HTML5的form如何关闭自动完成功能？

自动完成：当你给输入框输入内容时，浏览器会从之前同名输入框的历史记录中查找出类似的内容并列在输入框下面。

给form或者该input设置autocomplete=off。

经过实验，提交之后，历史记录才会存储，当然，必须是name相同的input才会共享历史记录