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;
}
}