面试题整理之HTML、H5

HTML部分

1.谈谈你对web标准以及W3C的理解与认识

我认为W3C是一种用来指定各种web标准非营利的组织，其中包括html,css,html5,xhtml等。web标准有以下几个优点：

• 降低学习成本。要学习一门web语言只需要学习制定好的web标准，简单又便捷。否则就要学习各种浏览器厂商指定的标准，繁而杂；
• 统一的开发流程来提高团队开发效率。使用标准的编辑器开发代码，并且适用标准的浏览器进行测试，提高团队开发效率；
• 简化网站代码维护。不会有不同浏览器的多个版本，增加了网页寿命；
• 跨平台，可迁移不同设备中。例如添加无障碍标准后残障人士更便捷的使用设备访问网页；
• 专业性、实用性。标准大部分是由使用他们的人来制定，例如浏览器厂商、web开发人员，这样的标准就会既专业由实用。

2.HTML和XHTML是什么？区别？

HTML即超文本标记语言，用于创建网页。经历多个版本：2.0、3.x、4.x、5。HTML源于SGML,遵循SGML的语法规则。
xHTML的出现是为了解决HTML兼容性差、移植性差等问题。他是XML的一种应用，HTML的一种子集，因此完全兼容HTML但格式更严谨。
两者的区别如下：

• XHTML元素要合理嵌套；
• XHTML元素名称区分大小写且元素名称和属性要小写；
• XHTML所有元素需要结束标签；
• XHTML可混合各种XML元素；
• XHTML元素属性值需要引号包裹且禁止属性简化；
• XHTML注释（<!–>）中的内容会被省略
• XHTML文档中特殊字符必须替换为实体引用

HTML实体是对当前文档的编码方式不能包含的字符，提供一种转义表示。（’>‘转义为’&gt’）。HTML有三种定义方式，分别是名称、十进制、十六进制。

3.HTML文档中DOCTYPE作用？区分严格模式与混杂模式的意义？

DOCTYPE用于声明文档类型和DTD规范，确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。DTD是一种文档类型定义，是标记符的语法规则，保证SGML和XML文档格式的合法性。DOCTYPE不存在或者格式不正确都会导致文档以混杂模式呈现。

严格模式的排版和JS运行模式都是以浏览器支持的最高标准运行的。混杂模式页面以宽松的向后兼容的方式显示，模拟老式的浏览器（IE）的行为防止站点无法工作。

4.混杂模式的怪癖？

• 触发IE盒模型
• 表格中的字体样式不会被继承
• 对元素设置宽度和左右外边距自动，不会实现水平居中
• 内容超出容器高度会把容器拉伸，而不是溢出
• 颜色值必须十六进制标记法

5.说说你对语义化的理解（目标、意义）

目的：用正确的标签做正确的事情

意义：

• 丢失样式仍能呈现清晰的页面结构
• 和搜索引擎建立良好沟通，有助于爬虫爬取更多有效信息
• 其他设备以更有意义的方式渲染页面
• 可读性，方便团队开发和维护

6.浏览器的内核?

• IE—>Trident
• FireFox—>Gecko
• Safari—>Webkit
• Chrome—>Blink(基于Webkit，Google与Opera共同开发)
• Opera—>Blink(以前是Presto)

7.iframe的优缺点

优点：

• 解决加载缓慢的第三方内容
• 实现安全沙箱（sandbox），提升了iframe的安全性
• 并行加载脚本

缺点：

• 阻塞主页面onload事件
• 内容为空加载也需要时间
• 元素没有语义化

H5

1.h5新特性？移除了哪些元素？

新特性:

• 语义化更好的内容标签(header/nav/section/aside/article/footer)
• 视频、音频(video/audio)API
• 画布(Canvas)API
• 拖放(Drag/drop)API
• 地理(Geolocation)API
• 数据存储(localStorage/sessionStorage)
• 表单控件(date/time/email/calendar/url/search)
• 新的技术(webworker/WebSocket)

移除元素：

• 纯表现元素：big、center、font、basefont…
• 对可用性产生负面影响的元素：frame、frameset、Noframes

2.谈谈h5的应用缓存（目的、优势、与浏览器缓存区别）

目的：

• 帮助用户离线浏览页面。若网络连接不可用，打开页面来自浏览器缓存。
• 帮助用户指定哪些文件需要缓存，哪些不需要。

优势：

• 离线浏览
• 加快缓存资源加载
• 减少服务器负载

与传统浏览器缓存比较，该特性不强制要求用户访问网站

3.数据存储localStorage & sessionStorage

相同点：

• 为了本地存储数据
• 存储大小都为5M+
• 仅在客户端浏览器中保存，不参与和服务器通信
• 相同的操作方法：setItem、getItem、removeItem…

不同点：

• 数据有效期不同。localStorage中的数据永远不会过期除非主动删除,sessionStorage只在同一个会话页面访问，会话结束数据就会销毁。
• 作用域不同。localStorage在同源窗口共享。

4.Canvas & SVG

• Canvas绘制完成将不能访问像素或者操作
• Canvas运行快；SVG需要记录坐标因此运行慢
• Canvas不能为绘制对象绑定事件
• Canvas绘制出的是位图，与分辨率无关；SVG为矢量图，与像素有关

5.Web Worker

概念

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

作用：多线程的并行请求

1. 通过worker=new Worker(url)加载js文件，创建Worker,返回Worker实例
2. worker.postMessage(data)向Worker发送数据
3. worker.onmessage接受Worker发送过来的数据
4. worker.terminate()终止Worker的执行

6.WebSocket

• web应用程序的传输协议，提供了双向的、按序到达的数据流；
• HTML5新增协议，连接持久；
• 客户端服务器之间双工连接，服务器更新直接推送到客户端，不需要客户端以一定时间间隔轮询。

7.WebSql

• 浏览器客户端的结构性关系数据库，是浏览器本地的关系型数据库管理系统，可以使用SQL查询。
• 不是HTML5,它是基于SQLite的。