• Q: doctype（文档类型）的作用是什么？

  A: 在HTML中 doctype 有两个主要目的。

  • 对文档进行有效性验证:

  它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。

  • 决定浏览器的呈现模式:

  对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响HTML 排版布局。浏览器有三种方式解析HTML文档。

  • 非怪异（标准）模式
  • 怪异模式
  • 部分怪异（近乎标准）模式

  关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE标签，可详细阅读模式？标准！的内容。

• Q: 浏览器标准模式和怪异模式之间的区别是什么？

  A: 在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。

  强烈建议阅读加深理解：怪异模式（Quirks Mode）对 HTML 页面的影响，这里列下浏览器标准模式和怪异模式的区别：

  另可参考阅读：https://www.cs.tut.fi/~jkorpela/quirks-mode.html

• Q: 使用 XHTML 的局限有哪些？

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

  A: xhtml 语法要求严格，必须有head、body 每个dom 必须要闭合。空标签也必须闭合。例如<img />, <br/>, <input />等。另外要在属性值上使用双引号。一旦遇到错误，立刻停止解析，并显示错误信息。

  如果页面使用'application/xhtml+xml',一些老的浏览器会不兼容。

• Q: 如果网页内容需要支持多语言，你会怎么做？

  • 在设计和开发多语言网站时，有哪些问题你必须要考虑？

  A: 编码使用UTF-8，空间域名需要支持多浏览地址,准备多套模板。

  在设计和开发多语言网站时，需要考虑

  • 应用字符集的选择
  • 语言书写习惯&导航结构
  • 数据库驱动型网站
  • css 盒子会因为内容尺寸不一样出现不对齐偏移

• Q: data-属性的作用是什么？

  A: data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取:

  <div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>

  div.dataset.commentNum; // 10

  需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome 和Opera 支持。

  即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

  Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

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

  A: 开放网络平台:

  The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. Using the Open Web Platform, everyone has the right to implement a software component of the Web without requiring any approvals or waiving license fees.

  开放网络平台（Open Web Platform）是一些开放的（免版权）技术的集合，这些技术激活了互联网。使用开放网络平台时，每个人都有权实现 Web 上的一个组件，而不用向任何人索取许可和证书。

  将 HTML5 看做开放网络平台，那它的构建模块有哪些？我想，所谓构建模块，指的应该是开放网络平台这个技术集合中的技术。

  • HTML

  • DOM

  • CSS

  • SVG

  • MathML

  • Web APIs

    • Canvas WebGL
    • Audio
    • Web Storage
    • File, File System
    • History, contentEditable, Drag & Drop, HTML Editing Commands
    • Web Sockets
    • Web Workers
    • Server-Send Events
    • XMLHttpRequest
    • Geolocation, Device Orientation
    • DOM Events, Touch Events, Progress Events
    • Custom application development
    • Clipboard and events
    • Web Notifications, Web Messaging
    • Offine Web Applications
    • Media Capture API
    • Timing control for script-based animations, Page Visibility, Navigation + Timing, Resource Timing
    • Selectors
    • DOM Traversal, DOM XPath, Element Traversal
    • EcmaScript / JavaScript
    • HTTP
    • URI
    • Media Accessibility Checklist

  该答案引自: http://witcher42.github.io/2014/06/03/open-web-platform/

• Q: 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

  A: sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

  sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage 对象也是不同的

  cookies会发送到服务器端。其余两个不会。

  Microsoft 指出 Internet Explorer 8 增加cookie 限制为每个域名50个，但IE7 似乎也允许每个域名50个cookie。Firefox 每个域名cookie 限制为50个。Opera每个域名cookie 限制为30个。Firefox 和Safari 允许cookie 多达4097个字节，包括名（name）、值（value）和等号。Opera 许cookie 多达4096个字节，包括：名（name）、值（value）和等号。Internet Explorer 允许cookie 多达4095个字节，包括：名（name）、值（value）和等号。

  • Cookie

    • 每个域名存储量比较小（各浏览器不同，大致4K）
    • 所有域名的存储量有限制（各浏览器不同，大致4K）
    • 有个数限制（各浏览器不同）
    • 会随请求发送到服务器

  • LocalStorage

    • 永久存储
    • 单个域名存储量比较大（推荐5MB，各浏览器不同）
    • 总体数量无限制

  • SessionStorage

    • 只在 Session 内有效
    • 存储量更大（推荐没有限制，但是实际上各浏览器也不同）

• 请描述一下 GET 和 POST 的区别?

  A: 区别如下：

  • get 向指定的资源请求数据,请求的数据会附在URL 之后,就是把数据放置在请求行（request line）中），以?分割URL和传输数据，多个参数用&连接；
  • post 向指定的资源提交要被处理的数据。get 方法，查询请求是在url中显示的，有长度限制，get 方法是安全幂等的。而post 方法请求是封装在http 消息包体中

&

get

post

后退/刷新

无害

请求重新提交

书签

可做书签

不可做

缓存

可被缓存

不能被缓存

历史

保留在浏览器记录里

不保留

对数据长度限制

限制（2048字符）

不限制

安全性

url中暴露数据

相对安全

可见性

url中可见

不可见

总结：

• 对于get 来说，是向服务器端请求数据，其请求在url 中可见，其长度有限制（2048字符）个体方法是安全幂等，这里的安全是指用于获取信息而非修改信息，幂等是指每次请求得到的结果都一样。
• 对于post 来说，是向服务器端提交数据，每次刷新或者后退都会重新提交，post 请求的数据封装在http 请求的首部里。

tips: 以上部分答案参考自：

• paddingme
• Witcher42
• 郑州网建