题目来源：https://h5bp.org/Front-end-Developer-Interview-Questions/translations/chinese/
题目
1.doctype(文档类型) 的作用是什么？
2.浏览器标准模式 、几乎标准模式和怪异模式之间的区别是什么？
3.HTML 和 XHTML 有什么区别？
4.如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？
5.如果网页内容需要支持多语言，你会怎么做？
6.在设计和开发多语言网站时，有哪些问题你必须要考虑？
7.使用 data- 属性的好处是什么？
8.如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
9.请解释 <script>、<script async> 和 <script defer> 的区别。
10.为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
11.什么是渐进式渲染？
12.你用过哪些不同的 HTML 模板语言？
题目+答案
doctype(文档类型) 的作用是什么？
Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则（W3C所发布的一个文档类型定义即DTD）集去解释文档中的标记。
浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
区别是：
1.在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在怪异模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)
2.可以设置行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
3.可设置百分比的高度
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
4.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:body{text-align:center};#content{text-align:left}
5.quirk模式下设置图片的padding会失效
6.quirk模式下Table中的字体属性不能继承上层的设置
7.quirk模式下white-space:pre会失效
Almost Standards mode(近乎标准模式):由mozilla提出,和strict mode(标准模式)的区别是：img元素在strict中是inline的，而在almost strict mode中是block的.
HTML 和 XHTML 有什么区别？
HTML与XHTML之间的差别，主要分为功能上的差别和书写习惯的差别两方面。
关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。
由于XHTML的语法较为严谨，所以如果你是习惯松散结构的HTML编写者，那需要注意XHTML的规则。
一个是功能上的差别
主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。
另外是书写习惯的差别
因为XHTML要求比较严谨，所以书写应用要求细心与细致，下面列出了几条容易犯的错误，供大家引用。
（1）XHTML要求正确嵌套
（2）XHTML所有元素必须关闭
在HTML下某些原始可以单独使用，如<p>标记，可以不写</p>。但在XHTML下，要求必须写关闭标记。
（3）XHTML区分大小写
HTML中是不区分大小写的，但在XHTML中区分。XHTML所有标记和属性都要小写。
（4）XHTML属性值要加引号
属性值可以用双引号，也可以用单引号，但要成对。
（5）XHTML用id属性代替name属性
（6）属性值不能简写
HTML中，有的元素属性值只有单一的固定值，这时可以只写属性名不写属性值，但在XHTML中必须写属性名和属性值。
如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？
要求比较严格，必须有head、body标签且每个元素必须是关闭的。
一些老的浏览器不支持，实际上，任何最新的浏览器都将支持application/xhtml+xml媒体类型。大多数浏览器也接受以application/xml发送的XHTML文档。
如果网页内容需要支持多语言，你会怎么做？
静态：就是为每种语言分别准备一套页面文件，要么通过文件后缀名来区分不同语言，要么通过子目录来区分不同语言。
动态：站点内所有页面文件都是动态页面文件（PHP，ASP等）而不是静态页面文件，在需要输出语言文字的地方统一采用语言变量来表示，这些语言变量可以根据用户选择不同的语言赋予不同的值，从而能够实现在不同的语言环境下输出不同的文字。
采用静态方法的长处是页面直接输出到客户端，不需要在服务器上运行，占用服务器的资源比拟少，系统能够支撑的并发连接数较多，毛病是要为每种语言制作一套页面文件，很多内容即使是和语言无关的也要分不同语言来存储，因此占用的存储空间较多。
采用动态方法和静态方法的优毛病正好相反，它的长处是动态页面文件只有一套，不同语言的文字应用语言变量来存储，和语言无关的内容只存储一份，占用的存储空间较少，并且扩大新语言比拟轻易，毛病需要在服务器上运行，然后把成果输进到客户端，占用服务器的资源比拟多，系统能够支撑的并发连接数较少。
对于存储在数据库中信息，可以采取以下几种方式支持多语言：
1、在数据库级别支持多语言：为每种语言建立独立的数据库，不同语言的用户操作不同的数据库。
2、在表级别支持多语言：为每种语言建立独立的表，不同语言的用户操作不同的表，但是它们在同一个数据库中。（最佳）
3、在字段级别支持多语言：在同一个表中为每种语言建立独立的字段，不同语言的用户操作不同的字段，它们在同一个表中。
在设计和开发多语言网站时，有哪些问题你必须要考虑？
1.应用字符集的选择
对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集，不管是东方文字还是西方文字，在Unicode中一律用两个字节来表示，因而至少可以定义65536个不同的字符，几乎可以涵盖世界上目前所有通用的语言的每一种字符。 所以在设计和开发多语言网站时，一定要注意先把非中文页面的字符集定义为“utf-8”格式
2.语言书写习惯&导航结构
有些国家的语言书写习惯是从右到左，如果你的市场目标是这些语言的国家，那么在网站设计中就需要考虑这些特殊的语言书写习惯。而且如果你在网站导航结构设计中使用的是一个竖直导航栏，这时候就应该把它放在右边，而不是象我们习惯的那样放在左边了。
3.数据库驱动型网站
对一个数据库驱动型的网站，尤其是当客户可以留言并向数据库添加信息时，则应当考虑如何从技术上实现对不同语言数据信息的收集和检索。
4.搜索引擎&市场推广
需要注意的是：并非所有的主流搜索引擎都会支持多语言网页，这也就是为什么一个多语言的网站不一定被所有的主流搜索引擎收录。当然Google不存在这样的问题。最好的办法是找一个专业的网站推广公司来帮助进行市场调研。调研内容主要应包括：目标市场国家或地区对什么搜索引擎或门户网站的使用率最高? 一些主要的门户网站的用户真实查询率又是多少? 这一点尤为重要。
使用 data- 属性的好处是什么？
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
语法 <element data-*=“somevalue”>
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。
好处
1.自定义属性，可以被js很好的操作
2.H5的新属性
3.通过js的element.dataset.或jQuery的data(’’)拿到，*可以为url等字符
4.框架的数据绑定，例如data-ng-if=“cs==1”
如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
<nav>, <header>,<section>, <footer>
请描述 cookies、sessionStorage 和 localStorage 的区别。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。
Firefox每个域名cookie限制为50个。
Opera每个域名cookie限制为30个。
Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。
请解释 <script>、<script async> 和 <script defer> 的区别
直接使用script标签引入js脚本文件，html会按照顺序来加载并执行脚本，在脚本加载执行过程中，会阻塞后续的DOM渲染
script 标签中加入 async 或者 defer 都可以使script不会阻塞后续DOM的渲染。
区别：
async：设置 async 会使script脚本异步加载，并在允许的条件下执行，并且会不按照 script引入的顺序执行，谁先加载完谁执行
defer：设置 defer属性，浏览器会异步下载该文件，并且会在文档渲染完毕，DOMContentLoaded事件后执行
如果有多个 defer属性的script，则会按引入顺序执行所有的js脚本
如果async为true，那么脚本在下载完成后异步执行
如果async为false，defer为true，那么脚本会在页面解析完毕之后执行
如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行
为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了<script>标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个过程中,页面渲染和交互都会被阻塞。所以将<script>放在</body>之前,当页面渲染完成再去执行<script>。
一般希望DOM还没加载必须需要先加载的js会放置在<head>中,有些加了defer、async的<script>也会放在<head>中。
什么是渐进式渲染 (progressive rendering)？
指浏览器不用等待所有页面资源都渲染好之后再呈现给用户看，而是边下载边渲染，所以用户打开一个网页的时候往往不能第一时间看到所有的内容，但是能够看到一个大概的样子，后续的内容浏览器会慢慢补上形成一个完整的页面。
其实就是为了解决js加载时间的问题。
实现：需要服务器端渲染SSR，流行的vue，react都有SSR解决方案。
进行首屏渲染，直接返回json和页面
你用过哪些不同的 HTML 模板语言？
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
