面试题汇总（HTML篇）

╰半夏微凉° 2022-07-11 13:48 192阅读 0赞

## 1、doctype(文档类型) 的作用是什么？ ##

DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则（W3C所发布的一个文档类型定义即DTD）集去解释文档中的标记.

总之，doctype使浏览器按照dtd指定的渲染方式对页面进行渲染

## 2、浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？ ##

当微软开始产生与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们IE6.0以后的版本在浏览器内嵌了两种表现模式：Standards Mode（标准模式或Strict Mode）和Quirks mode（怪异模式或兼容模式Compatibility Mode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网页能正常显示。

对于这两种模式引起最大的问题就是盒模式的问题

当然，不只IE浏览器存在两种模式。

Mozilla Firefox 1+ 支持三种呈现模式：Quirks Mode、Almost Standards Mode（几乎标准的模式）和 Standards Mode。Firefox 的 Almost Standards 模式对应于 IE 和 Opera 的 Standards 模式。其中的Almost Standards Mode，除了在处理表格的方式方面有一些细微的差异之外，这种模式与标准模式基本相同。

## 3、HTML 和 XHTML 有什么区别？ ##

为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的tag，只是按照XML的要求来规范HTML。

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

## 4、如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？ ##

一些老的浏览器不支持,实际上,任何最新的浏览器都将支持application/xhtml+xml媒体类型。大多数浏览器也接受以application/xml发送的XHTML文.

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

## 5、如果网页内容需要支持多语言，你会怎么做？ ##

采用统一编码UTF-8方式编码

应用字符集的选择；所以对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集，不管是东方文字还是西方文字，在Unicode中一律用两个字节来表示，因而至少可以定义65536个不同的字符，几乎可以涵盖世界上目前所有通用的语言的每一种字符。 所以在设计和开发多语言网站时，一定要注意先把非中文页面的字符集定义为“utf-8”格式，即：这一步非常重要，原因在于若等页面做好之后再更改字符集设置，可说是一件非常非常吃力不讨好的工作，有时候甚至可能需要从头再来，重新输入网站的文字内容。

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

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

## 7、如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？ ##

标签及属性  
地理位置  
画布  
视频  
音频  
拖放  
微数据  
应用缓存  
Web存储  
web workers  
服务器发送事件

## 8、请描述 cookies、sessionStorage 和 localStorage 的区别。 ##

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

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

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

## 9、请解释 < script >、< script async > 和 < script defer > 的区别。 ##

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

## 10、为什么通常推荐将 CSS < link > 放置在 < head > 之间，而将 JS < script > 放置在 < /body > 之前？你知道有哪些例外吗？ ##

浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了< script >标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个过程中,页面渲染和交互都会被阻塞。所以将< script>放在之前,当页面渲染完成再去执行< script>。

一般希望DOM还没加载必须需要先加载的js会放置在< head>中,有些加了defer、async的< script>也会放在< head>中。

## 11、什么是渐进式渲染 (progressive rendering)？ ##

详见链接  
[http://www.07net01.com/2016/02/1274731.html][http_www.07net01.com_2016_02_1274731.html]

[http_www.07net01.com_2016_02_1274731.html]: http://www.07net01.com/2016/02/1274731.html