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> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 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标签？

10.H5是什么？

HTML5是HTML的第五代标准。

PC端流行Flash无法在移动端播放，H5指可以达到Flash效果（如各种动画，互动）的，可以在移动端播放的，用于广告、营销的，具有酷炫效果的网页。

11.html5存储类型有什么区别？

cookies:服务器和客户端都可以访问，大小只有4KB左右，有有效期，过期后将会删除；

localStorage:将数据保存在本地的硬件设备，没有时间限制，关闭浏览器也不会丢失。永久保存

sessionStorage:将数据保存在session对象中，关闭浏览器后数据也随之销毁。临时保存

12.doctype 作用？严格模式与混合模式如何区分？它们有何意义？

<!DOCTYPE> 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

在标准模式中，浏览器根据规范呈现页面；

在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

13.哪些浏览器支持HTML5？

答：几乎所有的高版本浏览器Safari，Chrome，Firefox，Opera，IE8以上都支持HTML5

14.HTML静态页面出现中文乱码如何解决？

答：<meta charset="UTF-8" />

15.背景图合并用在什么地方最适合，有什么优点。

答: 通常当遇到一个网站要加载大量icon(小图标)的时候，我们会把它合并成sprite(图片拼接)。目的是为了减少HTTP请求次数。这样做既能减少页面加载时间，又可以减轻服务器的负载

16.页面如何在浏览器里达到居中，并且左右自适应？

答：margin: 0 auto;

17.HTML5版本类型声明怎么写。有什么用？

答：<!DOCTYPE html>

18.XHTML1.0版本你知道么，跟html5版本有什么区别

答: XHTML 1.0 是 XML 风格的 HTML 4.01。

XHTML 1.1 主要是初步进行了模块化。

HTML5 是下一代 HTML，取代 HTML 4.01。

W3C 原本确实计划用 XHTML 系列替代 HTML 4.01，但 XHTML 系列实际上只活到了 1.1（1.1 和夭折的 1.2 已经体现出过分 XML 的迹象，而 W3C 的理想其实在疯狂的 XHTML 2 身上，当然，它没能诞生），还没脱离 HTML 4.01 的阴影就死了。

19.前端页面有哪三层构成，分别是什么？作用是什么？

答: 分成：结构层、表示层、行为层。

结构层由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

20.你知道less,sass这些东西吗？

答: CSS 预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。

21.table的合并边框属性是什么？跨行是什么？跨列是什么？

答:合并边框:cellspacing, 跨行:rowspan, 跨列: colspan

22.标签的隐藏（display:none和visibility:hidden）的区别

答：visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！

23.在页面内居中（水平和垂直方向）*3

答：垂直居中:水平方向给父级设置text-align;使用左右margin值为auto

竖直方向:设置line-height值为元素高度;设置元素绝对定位,top:0;bottom:0 margin:auto, 0

24.CSS有几种引入方式？link和@import有什么区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

25、SGML、HTML、XML和XHTML之间的关系？

SGML（标准通用标记语言）是一种指定文档标记的标准，是一种描述了文档标记应该如何的元语言。HTML是描述使用SGML的标记语言。

通过SGML，每一个HTML页面都需要在相同的地方创建并附加一个DTD（文档类型定义）节点。所以，你总是可以在HTML页面的顶部发现DTD用于解析目的的“DOCTYPE”属性。

由于解析SGML是一种痛苦，所以创建了XML。XML使用SGML。例如，在SGML，你必须拥有成对的开始和结束标签，但在XML中，你可以使用自动关闭的标签。

XHTML源自于使用HTML 4.0的XML。你可以参考XML DTD如以下所示的代码片段。

js面试

1.JS原型、原型链

每个对象都会在其内部初始化⼀个属性，就是prototype (原型)，当我们访问⼀个对象的

属性时

如果这个对象内部不存在这个属性，那么他就会去prototype ⾥找这个属性，这个

prototype ⼜会有⾃⼰的prototype ，于是就这样⼀直找下去，也就是我们平时所说的

原型链的概念

2.介绍js的基本数据类型

Undefined 、Null 、Boolean 、Number 、String

3、闭包

闭包就是能够读取其他函数内部变量的函数

闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域

闭包的特性：

.函数内再嵌套函数

.内部函数可以引⽤外层的参数和变量

.参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

使⽤闭包主要是为了设计私有的⽅法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增⼤内存使⽤量，使⽤不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产⽣作⽤域的概念

闭包的最⼤⽤处有两个，⼀个是可以读取函数内部的变量，另⼀个就是让这些变量始终保持在内存中闭包的另⼀个⽤处，是封装对象的私有属性和私有⽅法

好处：能够实现封装和缓存等；

坏处：就是消耗内存、不正当使⽤会造成内存溢出的问题

使⽤闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹⻚的性能问题，在IE中可能导致内存泄露

解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除

4.JS哪些操作会造成内存泄露

1）意外的全局变量引起的内存泄露

2）闭包引起的内存泄露

3）没有清理的DOM元素引用

4）被遗忘的定时器或者回调 5）子元素存在引起的内存泄露

web前端html，js面试题