目录：

1. 元素
2. 语义化
3. html5新特性

1. 元素

常见的行内元素、块级元素？区别？

常用的行内元素就记这几个：a、br、img、input、span、select、textarea（一个a一个b两个i两个s开头的）

块级元素：div、h1-h6、hr、form、table、html5新加的header、footer、audio、video

区别：

一方面是换行的区别，行内元素不换行，块级换行；

另一方面是内容的区别，正常情况下行内元素只能包含行内元素，而块级元素既可以包含行内元素也可以包含块级元素

2.html语义化

为什么要语义化？

①给用户们看：保证css失效时用户仍然可读

②给开发者看：代码结构更清晰

③给浏览器看：利于搜索引擎检索

具体怎么语义化？

①纯样式的标签不用：b、i、u（结构、样式、行为三者分离是大趋势）

②无语义的标签少用：div、span

③有语义的标签用对：header页眉footer页脚nav目录导航aside侧栏

个人觉得web标准被重视的时间不长，整个大环境对web标准的理解基本也就是个概念，即使很多大神也只是处于摸索阶段，不同公司不同团队不同工程师对“好的语义化文档”都有不同的理解，回答的时候基本的大方向别错就行了，其他的应该不会细究

3.html5新特性

• 语义化新标签

header、footer、nav、section、article、aside

（移除对语义化有碍的标签，如：frame、big）

• 旧标签新类型

input 有哪些新增类型？
color颜色time时间date日期email检测@和前后是否有字符number数值的输入域range范围滑动条search用于搜索tel电话号码url网址file文件

• 视频音频

以标签加src属性的形式使用：

<

把质量高的文件放在前面的source里，浏览器优先识别第一个，如果不支持退而求其次识别第二个（audio|video.canPlayType(type)函数可以检测浏览器是否能播放指定的类型）

标签属性：controls是否显示播放控件autoplay是否打开浏览器后自动播放loop是否循环播放preload是否加载完再播放src、url设置要播放视频的地址poster、imgurl 设置播放器初始默认图片

• canvas画布

<canvas> 标签只是容器，图形用脚本来绘制。标签内的绘制只涉及一个dom元素，所以canvas适合做许多个动画叠加的游戏特效，能减少卡顿。

html

• svg伸缩矢量图

以xml格式定义图形，优点：尺寸小，放缩不失真

这个应该不需要会画，会下载别人的就行了

• 地理定位API

有一个getCurrentPosition() 方法

• 鼠标拖放API

如果想要拖动某个元素，需要设置元素的 draggable 属性为 true，在落点的容器上设置ondrop事件为容器添加子元素

• webWorker

工作线程（webWorker）允许JavaScript创建受主线程控制的多线程，但子线程不能操作DOM。基本原理就是在当前javascript的主线程中，使用worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果。

• webSocket

webSocket 是 一种在单个 TCP 连接上进行全双工通讯的协议。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

• webStorage（localStorage、sessionStorage、离线缓存）

webStorage和cookie的区别？

①最本质的区别：cookie夹在http请求中在客户端和服务器之间来回传递，webStorage只在客户端存储

②大小：cookie<4K；webStorage>=5M（IE浏览器10M）

③时效：cookie通过expire设置过期时间；sessionStorage关闭页面后失效；localStorage需要用clear（）函数清除

④作用域：sessionStorage会话级（标签页）存储，其他两种存储同源窗口共享

⑤开发：cookie一般用的是别人封装好的Cookie，webStorage的原生API可以拿来直接用

离线缓存与传统浏览器缓存区别？

①离线缓存是针对整个应用，浏览器缓存是单个文件

②离线缓存断网了仍可以打开缓存的页面，浏览器缓存不行

③离线缓存有网也会优先使用缓存资源，但可以主动通知浏览器更新资源