HTML5或者css3的新特性
你有用到哪些新标签
html：header，nav，section，aside，footer，video，audio
css：transform，translate，animation
新特性主要包括哪几大块？你项目中有用到哪些？
html： 语义化标签，增强型表单，多媒体标签，图形标签
css： 选择器，动画，边框阴影渐变，盒模型，伪类，伪元素
canvas有用过吗
通过JS和HTML的<canvas>元素来绘制图形的方式
HTML5语义化（Html5有哪些新特性）
什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
- 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析，如盲人阅读器根据语义渲染网页
- 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
语义化标签：
<header>：定义页眉
<nav>：定义导航
<section>：定义文档中的区段
<time>：定义日期和时间
<article>：定义文章
<aside>：定义文章的侧边栏
<figure>：定义一组媒体对象以及文字
<figcaption>：定义figure的标题
<footer>：定义页脚
关于meta viewport， 属性
将视口大小设置为可视区域的大小。
通过meta设置视口大小（保证在移动端不自动缩放网页的尺寸）：
meta标签的属性：
Html5有哪些新特性
- 增加了语义标签（header，nav，section，aside，footer等）
- 增强型表单，新增input类型和属性
- 类型type：email，number，date，range，color
- 属性：placeholder，min，max，readonly，disabled
- doctype和字符编码的声明，默认UTF-8。
- 新的多媒体标签：视频、音频
- 新的图形标签：svg，canvas绘图
- 废弃了一些标签（font，center，big，dir）
浏览器的标准模式和怪异模式
- 根据document.compatMode属性判断，“CSS1Compat”是标准模式，“BackCompat”是怪异模式。
- 标准模式：浏览器按W3C标准解析执行代码；一般用<!doctype html>声明，盒模型box-sizing:content-box（没有把padding，border算进去）。
- 怪异模式：使用浏览器自己的方式解析执行代码，盒模型box-sizing: border-box，怪异模式为了兼容旧版本浏览器，IE低版本获取不到document.doucumentElement.clientWidth。
xhtml和html的区别
- xhtml的语法更严谨，要求标签小写，正确嵌套，顺序正确，属性使用双引号，不允许使用target="_blank"。
使用data-的好处
- 是H5新增的自定义属性，通过jQuery的data(' ')获取，能被js很好的操作，方便数据绑定
canvas
- 通过JS和HTML的<canvas>元素来绘制图形的方式
css js放置位置和原因
- css的<link>标签放在head标签之间，js的<script>放在</body>前；
- 原因：<link>里面的href表示超文本引用，浏览器能识别css文档不会停止加载，防止出现样式问题；<script>使用src引用，浏览器解析时会停止对文档的渲染直到该资源加载完成，
性能优化：当把js放在头部时，为了解决阻塞问题，可以在<script>里添加defer（延迟）和async(异步)；
- 遇到网络请求
- 当使用defer时，js和html并行下载，不会阻塞dom树的创建，当dom树创建完成时才会执行js
- 当使用async时，js和html并行下载，当下载完会立即执行js，执行期间会阻塞html的解析
延伸问题：href和src的区别
- href表示超文本引用，用在link、a等元素上，href识别css文件，不影响加载
- src表示引用资源，浏览器解析src，会暂停其他资源，直到将该资源加载编译完成，也是将js脚本放在底部的原因。
什么是渐进式渲染，渐进增强，优雅降级
- 作用：提升性能，加载速度更快；
- 懒加载：
- 优先级：
- 异步加载：
渐进增强，优雅降级
- 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
- 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
渐进增强相当于向上兼容，而优雅降级相当于向下兼容。绝大多数更采用渐进增强的方式。
懒加载的原理？
- 解释：延时加载，通过用户滚动页面，自动获取更多的数据，而新得到的数据不会影响原有数据的显示，最大程度上减少服务器端的资源耗用。
原理：将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储在img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
参考：
html面试题： https://juejin.im/post/6844904176837722120#heading-1
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。