一. HTML5特性有哪些？语义化的做法有哪些，具体指的什么？
新特性：
1.用于媒介回放的video和audio元素。
2.用于绘画的canvas元素，svg元素等。
3.本地离线存储：
- localStorage 长期存储数据，浏览器关闭后数据不丢失；能维持在多个会话范围内。
//使用方法存储数据
localStorage.setItem('name','Nichoalas');
//使用属性存储数据
localStorage.book = 'Professional JavaScript';
//使用方法读取数据
var name = localStorage.getItem('name')
//使用属性读取数据
var book = localStorage.book;
- sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储，只能维持在当前会话范围内。
//确保在这段代码执行的时候不会发生其他磁盘写入操作 sessionStorage.begin(); //使用sessionStorage方法存储数据 sessionStorage.setitem('name','Nicholas'); //使用属性存储数据 sessionStorage.book = 'Profession JavaScript'; sessionStorage.commit(); //使用方法读取数据 var name = sessionStorage.getItem('name'); //使用属性读取数据 var book = sessionStorage.book; //删除数据 delete sessionStorage.name; sessionStorge.removeItem('book');
4.设备兼容特性，从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
5.连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现，同时拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
6.性能与集成特性，HTML5会通过XMLHttpRequest等技术，帮助您的Web应用和网站在多样化的环境中更快速地工作。
7.新表单元素：<datalist> <output> <keygen>
8.语义标签，新文档节段和纲要：<header>页面头部 <section>章节 <aside>边栏<article>文档内容 <footer>页面底部。
1.语义特性，添加<header></header><nav></nav>等标签。
2.为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂其代码
3.为了提高用户体验，比如：title,alt用于解释名词和图片信息
4.利于SEO，语义化能和搜索引擎建立良好的关系，有利于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
5.便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，有利于规范化
6.方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备）以语义的方式来渲染网页
二.览器标准模式和怪异模式
在标准模式下，给span等行内元素设置width和height无效的；margin:0 auto水平居中，在标准模式下没有问题的；可以设置图片的padding。
在怪异模式下，给span等行内元素设置width和height可以生效的；margin:0 auto水平居中会失效，解决办法，用text-align属性来解决；怪异模式下设置图片的padding会失效，怪异模式下Table中的字体属性不能继承上层的设置怪异模式下white-space:pre会失效。
三. XHTML与HTML有什么区别 ？
1.XHTML元素必须被正确的嵌套。
2.XHTML元素必须被关闭。
3.标签名必须用小写字母。
4.XHTML文档必须拥有根元素。
四. 为什么要在标签上使用data-, 它有什么好处了 ？
1.html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息
2.使用getAttribute（）方法以及setAttribute()方法操作自定义属性
3.使用dataset操作自定义属性。
4.dataset属性的兼容性问题，Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera11.10+ Safari 6+以上浏览器均能很好支持
5.使用data-属性选择器好处：绑定DOM强相关数据，js传递数据,在做选项卡功能时会使用到
五. Meta标签，都有一些什么特性，有什么作用 ？
1: 什么是meta标签:<meta>标签提供关于HTML文档的元数据，它不会显示在页面上，但是对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。
2: meta的作用:meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的HTTP头部内容。
3: 常用meta标签总结:Charset：它是声明文档使用的字符编码，以防乱码，而且一定要写在第一行Viewport：主要是影响移动端页面布局的。
六. 什么是Canvas，你使用它做个什么需求？
Canvas能应对以下需求：
1.游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。
2.图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，但完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。(例如：echarts.js heightchart.js都是基于canvas来绘图!)
3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
七.HTML废弃的标签有哪些？
八.滚动穿透的问题
body.modal-open{
position:fixed;
width: 100%;
}九.CSS / JS引入的位置一般在哪里？
Script标签最好放在</body>标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生；而css标签应该放在<head></head>标签之间，因为如果放在</body>标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费，效率也不高，如果放在<head></head>之间，浏览器边构建边渲染，效率要高得多 ！
十.什么是渐进式渲染 ？
十一. Meta viewport 的原理是什么 ？
移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport; 目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；
meta viewport 标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户进行手动缩放。
