我睡着的时候不困唉

HTML

1.HTML5 特性有哪些？语义化的做法有哪些，具体指的什么？

HTML5 新特性常用解释

  1. 多媒体，用于媒介回访的 video 和 audio 元素
  2. 图像效果，用于绘画的 canvas 元素， svg 元素等
  3. 离线存储，对本地离线存储能够更好的支持，比如：loaclstorage, Cookilse 等
  4. 设备兼容性特性，HTML5 体提供了数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连
  5. 连接特性，更有效的连接工作效率，是的基于页面的实时聊天，更快的网页游戏体验，更优化的在线交流得以实现，同时拥有了更有效的推送技术，Server-Sent Event 和 WebScockets 就是其中共两个特性，这两个特性能够帮助我嫩实现服务器数据，实时“推送”到客户端。以 WebScocketsopen in new window 为示例
// 1.建立连接
var socket = new WebSocket('ws://echo.websocket.org')
// 2.客户端和服务器之间的初始握手，这导致首次事物，并且Web应用程序准备好传输数据，打开 WebScockets 连接
socket.onopen = function (event) {}
// 3.接收服务器推送消息
socket.onmessage = function (event) {}
// 4.关闭推送
socket.close()
  1. 性能与集成特性，HTML5 通过 XML HttpRequest2 等技术，更好的在 Web 应用和网站多样化环境中快速工作

HTML5 新增标签（常用）

  1. 多媒体：<audio> <video> <source>``<embed>``<track>
  2. 新表单元素：<datalist> <output> <keygen>
  3. 新文档节段和纲要：<header>页面头部 <section>章节 <aside>边栏<article>文档内容 <footer>页面底部

HTML 语义化具体指以下内容

  1. 语义特性，添加<header></header>``<nav></nav>等标签
  2. 为了在没有 css 代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂其代码
  3. 为了提高用户体验，比如：title,alt 用于解释名词和图片信息
  4. 利于 SEO，语义化能和搜索引擎建立良好的关系，有利于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
  5. 便于团队开发和维护，语义化更具可读性，如果遵循 W3C 标准的团队都遵循这个标准，可以减少差异化，有利于规范化
  6. 方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备）以语义的方式来渲染网页

2.浏览器标准模式和怪异模式

TIP

产生原因: 现代的浏览器一般都有两种渲染模式：标准模式和怪异模式，在标准模式下，浏览器按照 HTML 和 CSS 标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染，这样的话，对于旧有的网页，浏览器就会启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用 HTML 和 CSS 的标准特性。

标准模式（W3C 标准）怪异模式（IE 盒模型）
给 span 等行内元素设置 width 和 height 无效行内元素设置 width 和 height 生效
margin:0 auto 水平居中，在标准模式下没有问题用 margin:0 auto 设置水平居中在怪异模式下会失效，解决办法，用 text-align 属性来解决
右边的这些问题，在标准模式下均不会出现问题怪异模式下设置图片的 padding 会失效，怪异模式下 Table 中的字体属性不能继承上层的设置怪异模式下 white-space:pre 会失效

3.XHTML 与 HTML 有什么区别

  1. XHTML 元素必须被正确的嵌套。
  2. XHTML 元素必须被关闭。
  3. 标签名必须用小写字母。
  4. XHTML 文档必须拥有根元素。

4.为什么要在标签上使用 data-, 它有什么好处

  1. html5 规范中规定自定义属性需要添加前缀 data-,目的是提供与渲染无关的信息
  2. 使用 getAttribute（）方法以及 setAttribute()方法操作自定义属性
  3. 使用 dataset 操作自定义属性。
  4. dataset 属性的兼容性问题，Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera11.10+ Safari 6+ 以上浏览器均能很好支持，兼容信息查询open in new window
  5. 使用 data-属性选择器好处：绑定 DOM 强相关数据，js 传递数据

5.Meta 标签，都有一些什么特性，有什么作用

  1. 什么是 meta 标签:标签提供关于 HTML 文档的元数据，它不会显示在页面上，但是对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
  2. meta 的作用:meta 里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的 HTTP 头部内容。
  3. 常用 meta 标签总结:Charset：它是声明文档使用的字符编码，以防乱码，而且一定要写在第一行 Viewport：主要是影响移动端页面布局的。

6.什么是 Canvas，你使用它做个什么需求

TIP

什么是 Canvas : Canvas 元素是 HTML5 的一部分，允许脚本语言动态渲染位图像。Canvas 由一个可绘制地区 HTML 代码中的属性定义决定高度和宽度。JavaScript 代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的 API，从而生成动态的图形

  1. 游戏：毫无疑问，游戏在 HTML5 领域具有举足轻重的地位。HTML5 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，Ohad 认为运用 Canvas 制作的图像能够令 HTML5 游戏在流畅度和跨平台方面发挥更大的潜力。
  2. 图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用 HTML/CSS 完成图标制作，但完全可以用 Canvas 来实现。当然，使用 SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。(例如：echarts.js heightchart.js 都是基于 canvas 来绘图!)

**提示：**其实还有很多领域（例如：模拟器 / 远程计算机控制 / 字体设计 / 图像编辑器 / 其它），但是就当前来说，基于 canvas 图表制作是我们必须要掌握的能力。

7.HTML 废弃的标签有哪些

标签作用
<em>=<i>定义强调的文字
<ins>=<u>定义插入的文字
<del>=<s>定义删除的文字
<strong>=<b>定义重要性强调的文字

8.CSS / JS 引入的位置一般在哪里

Script 标签最好放在</body>标签的前面，因为放在所有 body 中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生；而 css 标签应该放在<head></head>标签之间，因为如果放在</body>标签的前面，那么当 DOM 树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费，效率也不高，如果放在<head></head>之间，浏览器边构建边渲染，效率要高得多

9.Meta viewport 的原理是什么

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动设备默认的 viewport 是 layout viewport，也就是那个比屏幕要宽的 viewport，但在进行移动设备网站的开发时，我们需要的是 ideal viewport