面试-html

1.defer和async
defer并行加载js文件，在所有元素解析完成后，会按照页面上script标签的顺序执行
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行
2.语义化的理解
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1）、<!DOCTYPE> 声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。
2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
4.多少种Doctype文档类型？
Strict, Transitional,frameset
严格版本、过渡版本以及基于框架的 HTML 文档
5.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
h5新特性：
语义化标签
<section>文档的主体部分</section>
<aside>用来装载页面中非正文的内容,例如广告、成组的链接、侧边栏</aside>
<header></header>
<nav>定义了一个链接组组成的导航部分</nav>
<audio><video>
表单新特性：
process进度条
datalist 建议列表
meter 度量衡/刻度尺/, 用于标示一个所处的范围
placeholder：占位字符 作为提示不可提交
multiple : 允许输入框中出现多个输入值用逗号分隔 [a@dn.com](mailto:a@dn.com)，[b@dn.com](mailto:b@dn.com)
video和audio
canvas画布：<canvas>只是图片容器，要用js脚本绘制，
1.使用DOM获取到canvas元素
2.获取canvas元素的上下文context,传一个参数’2d’,目前只支持2d
3.渲染图像的方法:stroke()可以渲染线条,fill()可以渲染一个区域填充.
webworker：Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断
webscoket
拖拽api
处理兼容使用dom操作添加新的标签，或用别人封好的js库
XML和JSON的区别？
(1).数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。(2).数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。(3).数据描述方面。JSON对数据的描述性比XML较差。(4).传输速度方面。JSON的速度要远远快于XML。
meta标签用法
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎、更新频度、cookie的描述和关键词。元数据总是以名称/值对的形式表示，名称有两种类型：name和http-equiv。其中当名称为http-equiv，会将值关联到HTTP头部。

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />  5秒跳转
<meta name="viewport" content="width=device-width, initial-scale=1.0">  页面适配
<meta http-equiv="charset" content="iso-8859-1">   声明字符集
<meta http-equiv="expires" content="31 Dec 2008">   声明过期时间

bootstrap栅格系统的原理是什么？
媒体查询 + 百分比宽度

@media (min-width: 768px) {/*当宽度大于768px时触发*/
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {/*当宽度大于992px时触发*/
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {/*当宽度大于1200px时触发*/
  .container {
    width: 1170px;
  }
}