【前端面试整理 | html面试题】

DOCTYPE作用

	告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。

标准模式与混杂模式如何区分

	标准模式（Standards mode）以浏览器支持的最高标准运行
	混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

元素

	行内元素：a span img input select 
	块级元素：div ul ol li dl dt dd h1 p
	空元素：<br> <hr> <link> <meta>

页面导入样式时，使用link和@import的区别

	相同：都是外部引用CSS方式
	不同点
		link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
		link支持使用javascript控制去改变样式，而@import不支持
		import在html使用时候需要<style type="text/css">标签
		link方式的样式的权重高于@import的权重

无样式内容闪烁（FOUC）

	@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。
	解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现FOUC问题。

浏览器内核

	渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
	JS引擎：解析和执行javascript来实现网页的动态效果。

html5

	新特性：新增了图像、位置、存储、多任务等功能
	新增元素
		canvas
		用于媒介回放的video和audio元素
		本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
		语意化更好的内容元素，比如 article footer header nav section
	移除元素
		纯表现的元素：basefont big center font s strike tt u
		性能较差元素：frame frameset noframes
	离线储存
		在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。
	form如何关闭自动完成功能
		设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能

html语义化理解

	去掉或丢失样式的时候能够让页面呈现出清晰的结构。
	有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
	方便其它设备解析。
	便于团队开发和维护，语义化根据可读性。

iframe

	优点
		iframe能够把嵌入的网页展现出来。
		当多个网页引用iframe，只需要修改iframe的内容，就可更改每个调用页面的内容，方便快捷。
		如果为了统一风格，页面头部和版本是一样的，可以写成一个页面，用iframe来嵌套，增加代码的可重用。
		遇到加载缓慢的第三方内容如图标和广告，可以用iframe来解决。
		并行加载脚本
		方便制作导航栏
	缺点
		搜索引擎的爬虫程序无法解读这种页面
		框架结构中出现各种滚动条
		使用框架结构时，保证设置正确的导航链接。
		iframe页面会增加服务器的http请求
		iframe会阻塞主页⾯的Onload事件
		即使内容为空，加载也需要时间