HTML5常见面试题

网上有关于html5的面试题很多，几乎大同小异，想要做一名合格的web前端开发工程师，首先我认为web开发是在基础的html5上的一个台阶！试问最基础的都一问三不知（回答模棱两可），那还谈什么框架？今天先总结一些常见的，太多了，我也是望尘莫及。希望各位童鞋好好进行知识的延伸。学会像DOM树一样。

.HTML5 为什么只需要写 ？
1） HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）；
2） HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型；

.对WEB标准以及W3C的理解与认识？
（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可
提高搜索机器人对网页内容的搜索几率；
（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的
分离，提高页面的渲染速度，能更快地显示页面的内容；
（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户
所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低
维护成本、改版更方便；
（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高
网站易用性；
遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发
者之间更好的交流。

.简述一下你对HTML语义化的理解？
1）用正确的标签做正确的事情；
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

.页面导入样式时，使用link和@import有什么区别？
1）link属于XHTML标签，而@import是css提供的；
2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
4）link方式的样式的权重高于@import的权重。

.如何区分 HTML 和 HTML5？
1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的

，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：

.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1）声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

.HTML 和 XHTML 有什么区别？
为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的tag，只是按照XML的要求来规范HTML。
1）XHTML中的标签都必须被正确地嵌套,HTML中的某些标签可以彼此不正确的嵌套。
2）XHTML中的所有标签必须要关闭。
3）XHTML中规范定义：标签名和属性对大小写敏感,所有XHTML标签名必须用小写字母。
4）XHTML文档必须拥有根元素。
5）XHTML中标签的属性值要使用双引号”。

.新的HTML5文档类型和字符集是？
HTML5文档类型
HTML5使用UTF-8字符集

.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：

---

.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
新特性，新增元素：
1）内容元素：article、footer、header、nav、section
2）表单控件：calendar、date、time、email、url、search
3）控件元素：webworker，websockt，Geolocation
移除元素：
1）显现层元素：basefont，big，center，font，s，strike，tt，u
2）性能较差元素：frame，frameset，noframes
处理兼容问题有两种方式：
1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2）使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。

.HTML5中如何嵌入音频？
HTML5支持MP3、Wav和Ogg格式的音频，下面是在网页中嵌入音频的简单实例：

.HTML5如何嵌入视频？
和音频类似，HTML5支持MP4、WebM和Ogg格式的视频，下面是简单实例：
标签定义嵌入的内容，比如插件。

对于定义多个数据源很有用。

.HTML5 Canvas元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，

.HTML5存储类型有什么区别？
1）HTML5能够本地存储数据，在之前都是使用cookie使用的，HTML5提供了下面两种本地存储方案：
2） localStorage用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
3） sessionStorage 同一个会话的页面才能访问并且当会话结束后数据也会随之销毁，因此sessionStorage不是一种持久化的本地

.介绍一下 CSS 的盒子模型？
1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。

.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？
1）id 选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li）
6）后代选择器（li a）
7）通配符选择器（* ）
8）属性选择器（ a[rel = "external"]）
9）伪类选择器（a: hover, li: nth - child）

10. 可继承的样式： font-size font-family color, UL LI DL DD DT
11. 不可继承的样式：border padding margin width height
12. 优先级就近原则，同权重情况下样式定义最近者为准
    13)载入样式以最后载入的定位为准;优先级为: !important > id > class > tag ； important 比 内联优先级高

.为什么要初始化 CSS 样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法是：*{padding:0;margin:0} (不建议)

.简述一下src与href的区别

1. href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2. src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

.px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。
em得值不是固定的，并且em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位，可以理解为"root em"，相对于根节点html的字体大小来计算的，chrome/firefox/IE9+支持。
任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1rem=16px。

.浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

.使用 CSS 预处理器吗？喜欢哪个？
SASS

.css3有哪些新特性？
1）CSS3 实现圆角（border-radius:8px;），
2）阴影（box-shadow:10px）,
3）对文字加特效（text-shadow）,
4）线性渐变（gradient），
5）旋转（transform）,
6）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜 ,
7）增加了更多的 css 选择器 ,
8）多背景 rgba ,