1.html5有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas

⽤于媒介回放的 video 和 audio 元素

本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后⾃动删除

语意化更好的内容元素，⽐如article 、footer 、header 、nav 、section

表单控件， calendar 、date 、time 、email 、url 、search

新的技术webworker 、 websocket 、 Geolocation

移除的元素：

纯表现的元素： basefont 、big 、center 、font 、 s 、strike 、tt 、u

对可⽤性产⽣负⾯影响的元素： frame 、frameset 、noframes

⽀持HTML5 新标签：

IE8/IE7/IE6 ⽀持通过document.createElement ⽅法产⽣的标签

可以利⽤这⼀特性让这些浏览器⽀持HTML5 新标签

浏览器⽀持新标签后，还需要添加标签默认的样式

当然也可以直接使⽤成熟的框架、⽐如html5shim

2.浏览器对html渲染

1. 解析html和构建dom树是同步进行的，这个过程就是逐行解析代码，包括html标签和js动态生成的标签，最终生成dom树。

2. 构建呈现树，就是把css文件和style标签的中的内容，结合dom树的模型，构建一个呈现树，写到内存，等待进一步生成界面。呈现树一定依赖dom树，呈现节点一定会有对应的dom节点，但是dom节点不一定会有对应的呈现节点，比如，被隐藏的一个div。

3. 布局，这一步就是结合呈现树，把dom节点的大小、位置计算出来。虽然呈现节点已经附着在都没节点上，会有对元素大小、位置的定义，但是浏览器还需要根据实际窗口大小进行计算，比如对auto的处理。

4. 绘制，把css中有关颜色的设置，背景、字体颜色等呈现出来。

3.html标准盒模型和怪异盒模型

标准盒模型：一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

4.position有哪些值

1、static：默认值；

2、绝对定位：absolute

3、相对定位：relative

4、固定定位：fixed

5.CSS优先级算法如何计算？

!important 大于一切 > 内联 1000 > id 100 > class 10 > tag 1 ;

6.什么是 canvas?

HTML5

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

7. 你是如何理解HTML语义化的？

HTML结构，是用有一定语义的英文字母标签表示的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写，别人看你的代码和结构也容易理解。

根据内容的结构化、选择合适的标签，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好的解析。

语义化好处：

1）有利于SEO

2）在没有CSS的情况下，页面也能呈现出很好地内容结构

3）便于开发和维护

4）支持多终端设备的浏览器渲染

8. metaviewport是做什么用的，怎么写？

viewport是指web页面上用户的可见区域，viewport的大小是和设备相关的。

width：控制viewport的宽度大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度。

height：与width相对应，指定viewport高度。

initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：是否允许用户手动缩放。

9．你用过哪些HTML5标签？

，

web前端html，js面试题