前端基础问题整理-HTML相关

2016-07-03 02:43:00

DOCTYPE的作用以及常见的DOCTYPE类型
声明位于文档中的最前面的位置,处于标签之前,用来告知浏览器页面目前的文件是用哪种版本的HTML(或XML)撰写。

常见类型

HTML 5
HTML 4.01
三种文档类型:Strict、Transitional、Frameset。
XHTML 1.0
三种XML文档类型:Strict、Transitional、Frameset。

浏览器标准模式和怪异模式之间的区别

标准模式:严格遵循W3C标准来呈现网页的渲染模式。
怪异模式:兼容旧版本浏览器,不会严格遵循W3C标准的网页的一种渲染模式

每个HTML文档的首行都是一个文档声明,这种文档声明是用来表示后面的那些个页面标签遵循哪一个原则的,这是HTML5的文档类型声明：

这个是XHTML 1.0严格模式的文档类型声明：

保留文档类型声明主要是历史原因,没有文档声明的话大多数浏览器都将会转换到为怪异模式(quirk mode),这种模式下浏览器会以老版本的浏览器使用的规则来渲染页面,并且不同浏览器的怪异模式还是不一样的,我们在平时码代码时应该尽量回避这种错误。

在添加了文档类型声明之后,浏览器使用的就是标准模式(standard mode),这种情况下浏览器会用W3C的标准来渲染网页。

附上两篇
Mozilla Quirks Mode Behavior
怪异模式（Quirks Mode）对 HTML 页面的影响

HTML和XHTML有什么区别?

XHTML中的标签都必须被正确地嵌套,HTML中的某些标签可以彼此不正确的嵌套。
XHTML中的所有标签必须要关闭。
XHTML中规范定义：标签名和属性对大小写敏感,所有XHTML标签名必须用小写字母。
XHTML文档必须拥有根元素。
XHTML中标签的属性值要使用双引号"。

如果页面使用'application/xhtml+xml'会有什么问题吗？

使用xhtml,页面结构中必须包含head标签,并且每个标签结构都要关闭,包括空标签。所有标签都要小写。使用了'application/xhtml+xml'之后,部分老浏览器不会支持。

使用data-属性的好处是什么？

通过data-可以自定义属性,可以通过HTMLElement.dataset获取这些属性的值,data-中-后接自定义属性的名字,例如data-url。实际开发中可以利用这一点在生成DOM结构时把数据储存在自定义属性中,通过一系列交互操作,可以再获得这些数据,而不用再去ajax去后台取得数据。

cookies、sessionStorage和localStorage的区别。
sessionStorage和localStorage是web storage的两种储存方式,其中sessionStorage是会话级别储存,在浏览器或页面关闭时数据就会销毁,而localStorage是持久化的本地储存,不刻意去删除数据,数据是不会销毁的。以上这两种方式只是客户端的储存,不会涉及到服务器储存。与之相比,每次发送HTTP请求时会将cookie添加到Cookie头字段,发送给服务器。

在储存量方面也有差异,单个cookie保存的数据不能超过4K,而localStorage和sessionStorage一般有5-10M。

除此之外,每个域名下cookie的个数会有限制,依据浏览器不同会有不同,而localStorage数量是无限制的。

、和的区别
加载js文件会阻塞页面的渲染和交互,而和都是异步加载js文件,期间不会才生阻塞,区别在于是加载完之后自动执行,需要等到页面加载之后再执行。