2017前端面试题之Html篇（1）

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

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

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

• 浏览器有三种方式解析HTML文档。

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

---

2 . HTML 和 XHTML 有什么区别？？ 如果页面使用 'application/xhtml+xml' 会有什么问题吗？

答：xhtml 语法要求严格，一旦遇到错误，立刻停止解析，并显示错误信息。
如果页面使用'application/xhtml+xml',一些老的浏览器会不兼容。

• XHTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML 文档必须拥有根元素。
• 所有属性都必须使用双引号

---

3 . 如果网页内容需要支持多语言，你会怎么做？在设计和开发多语言网站时，有哪些问题你必须要考虑？

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

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

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

---

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

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

    
...

    div.dataset.commentNum; // 10

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

---

5 . 请描述 cookies、sessionStorage 和 localStorage 的区别。 ☆ ☆ ☆

答 sessionStorage、localStorage、cookie都是在浏览器端存储的数据 有了本地数据，
就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可用于web请求之间保存数据。

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

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

• SessionStorage 只在 Session 内有效 存储量更大（推荐没有限制，但是实际上各浏览器也不同）
  sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。
  sessionStorage 是在同源的同窗口（或tab）中，始终存在的数据。
  也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。
  关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage 对象也是不同的

---

6 . 请解释