转载自 前端面试常考系列一
一、简述HTML5的优点和缺点？
1、网络标准统一、HTML5是由W3C推出的。
2、多设备、跨平台 ，移植性强。
3、自适应网页设计。
4、即时更新。
5、新增了几个标签，有助于开发人员定义重要的内容；
6、给站点带来了视频和音频等多媒体元素；
7、很好的替代Flash和Silverlight；
8、涉及到网站的抓取和索引时，对于SEO很友好；
9、可大量应用于移动应用程序和游戏。
1、声音问题：HTML5的声音制作存在很大问题。
2、安全问题：Firefox4的web socket和透明代理的实现存在严重的安全问题，web storage、web socket 等功能容易被黑客利用，导致用户的信息和资料被窃取。
3、完善性：各浏览器对一些特性的支持程度不一样。
4、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，提升了技术门槛。
5、性能：某些平台上的引擎问题导致HTML5性能低下。
6、浏览器兼容性：IE9以下浏览器几乎全部不兼容。
二、简单介绍一下浏览器的页面由几层组成，以及相应功能是什么?
浏览器页面由三层构成，分别是结构层、表示层和行为层。
结构层（structural layer）由HTML或XHTML之类的标记语言负责创建，其功能是实现页面的结构。
表示层（presentation layer）由CSS负责创建，其功能是完成页面的表现和风格。
网页的行为层由JavaScript负责创建，其功能是实现一些客户端的功能和相应的业务。
三、Doctype的作用是什么?
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用是为了告诉浏览器所声明文件的类型。让浏览器解析器知道解析文档需要用什么规范。
四、严格模式与混杂模式是什么？如何区分？有何意义?
定义：严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
1、严格 DTD ——严格模式：文档包含严格的DOCTYPE，一般以严格模式呈现。
2、有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式。
3、DTD不存在或者格式不正确——混杂模式。
4、HTML5 没有严格和混杂之分。
浏览器解析时到底使用严格模式还是混杂模式，由网页中的 DTD 声明决定。 DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明 ,网页将会进入混杂模式。
五、简单介绍一下HTML5，并说明一下其出现的原因
简介：HTML5 是 HTML 最新版本，是2014年10月由万维网联盟（ W3C ）完成标准制定的一套技术组合，包括 HTML 、 CSS 和 JavaScript 。主要作用是为了减少网页浏览器对于需要插件的丰富性网络应用服务的需求，并且提供更多能有效加强网络应用的标准集。最终目的是为了替换 1999 年所制定的 HTML 4.01和 XHTML 1.0 标准，希望能在互联网应用迅速发展的时期，使网络标准达到时代对于网络的需求。
随着时代的发展，HTML4已经不能满足日益发展的互联网需要，为了增强浏览器功能 ，广泛的使用了Flash，导致了稳定性和安全性较差，且不适合在移动端使用。在这种情况下，HTML5应运而生，它增强了浏览器的原生功能，减少了 Web 应用对插件的依赖，给开发带来了方便，也带来了更好的用户体验。
六、说一下你对于WEB标准以及W3C的理解与认识
1.Web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。
2.建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。
3.样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便。
4.不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性，遵循w3c制定的Web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
七、WebGL是什么？有什么优点?
WebGL（全写 Web Graphics Library ）是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
WebGL完美地解决了现有的Web交互式三维动画的两个问题：
第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;
第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
通俗说WebGL中canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，这些库多数用于HTML5游戏开发。
八、请你描述一下 cookies，sessionStorage 和 localStorage 的区别?
Cookie：在浏览器和服务器之间来回传递。
每个域名存储量比较小（各浏览器不同，大致 4K ）
所有域名的存储量有限制（各浏览器不同，大致 4K ）
有个数限制（各浏览器不同）
LocalStorage：仅在本地保存。
永久存储
单个域名存储量比较大（推荐 5MB ，各浏览器不同）
总体数量无限制
SessionStorage：仅在本地保存。
只在Session内有效
存储量更大（推荐没有限制，但是实际上各浏览器也不同）
九、说说你对HTML语义化的理解?
1.什么是HTML语义化？基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等。根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；
用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用来在页面中表示一套结构完整且独立的内容部分
<aslde></aside> SM:主题的附属信息(用途很广，主要就是一个附属内容)，如果 article 里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了。
<figure></figure>SM:媒体元素，比如一些视频，图片啊等等
<datalist></datalist>
SM:选项列表，与input元素配合使用，来定义input可能的值
<details></details>
SM:用于描述文档或者文档某个部分的细节~默认属性为open~
ps:配合summary一起使用
十、你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
1、 IE: trident 内核
2、 Firefox ： gecko 内核
3、 Safari、Chromewebkit:webkit 内核
4、 Opera、Chrome: Blink 内核
十一、HTML5有哪些新特性、移除了哪些元素？
Html5新增了27个元素，废弃了16个元素，根据现有的标准规范，把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。
结构性元素主要负责web上下文结构的定义
section：在web页面应用中，该元素也可以用于区域的章节描述。
header：页面主体上的头部，header元素往往在一对body元素中。
footer：页面的底部（页脚），通常会标出网站的相关信息。
nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分，确保内容的有效分割。
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure：是对多个元素进行组合并展示的元素，通常与ficaption联合使用。
code：表示一段代码块。
dialog：用于表达人与人之间的对话，该元素包含dt和dd这两个组合元素，dt用于表示说话者，而dd用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监事。
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与legend交互才会显示出来。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
command：用来处理命令按钮。
十二、HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
参考答案
(1)行内元素
a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体 (不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码 (在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定 (不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线 (不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
(2)块元素 (block element)
* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级容易，也是 css layout 的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块 (map)
* object - object对象
* script - 客户端脚本
(3)空元素 (在HTML[1]元素中，没有内容的HTML元素被称为空元素)
<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> <meta>
 - Python实现)
