HTML5 面试题整理

一、HTML5面试题

1.1 H5的新特性有哪些？
画布(Canvas) API
地理(Geolocation) API
音频、视频API(audio,video)
localStorage和sessionStorage
webworker和 websocket
header,nav,footer,aside,article,section
web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了

1.2 Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>

<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

1.3 HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off

 
1.4 dom如何实现浏览器内多个标签页之间的通信? (阿里)
WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；localstorge另一        个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通        过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出                 QuotaExceededError 的异常；
 
1.5 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？
<div style="height:1px;overflow:hidden;background:red"></div>

 
1.6 title与h1的区别、b与strong的区别、i与em的区别？
  title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

  strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：   <strong>会重读，而<B>是展示强调内容。

  i内容展示为斜体，me表示强调的文本；

  Physical Style Elements -- 自然样式标签

  b, i, u, s, pre

  Semantic Style Elements -- 语义样式标签

  strong, em, ins, del, code

  应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

1.7 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Trident内核:IE系列

Gecko内核:Firefox

Webkit内核:Safari

Blink内核：是基于Webkit内核的子项目,使用的浏览器有：

Chrome/opera等除IE、Firefox、Safari之外的几乎所有浏览器

几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等

 
1.8 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
文档声明。

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题

 
1.9 div+css的布局较table布局有什么优点？
正常场景一般都适用div+CSS布局，

优点：