第五十一天

●响应式界面有四个层次：

1、同一页面在不同大小和比例上看起来都应该是舒适的；

2、同一页面在不同分辨率上看起来都应该是合理的；

4、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

5、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

•优点：

面对不同分辨率设备灵活性强 

能够快捷解决多设备显示适应问题 

•缺点

仅适用布局、信息、框架并不复杂的部门类型网站 

兼容各种设备工作量大，效率低下 

代码累赘，会出现隐藏无用的元素，加载时间加长 

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

●白盒测试的测试内容：

内部安全漏洞

编码规范

预期输出

条件循环的功能

分别测试每个语句、对象和功能

白盒测试可以在软件开发的系统、集成和单元测试阶段进行。

●白盒测试的类型

白盒测试包含几种用于评估应用程序，代码块或特定软件包的可用性的测试类型。

•单元测试： 通常是在应用程序上进行的第一类测试。单元测试是在开发每个单元或代码块时执行的。在此阶段发现的错误更便宜且易于修复。

测试内存泄漏：内存泄漏是导致应用程序运行缓慢的主要原因。

•黑盒和白盒测试均包含一些测试类型：

白盒渗透测试：在此测试中，测试人员/开发人员具有应用程序源代码的完整信息，详细的网络信息，所涉及的IP地址以及应用程序在其上运行的所有服务器信息。

目的是从多个角度对代码进行攻击以暴露安全威胁

白盒突变测试：突变测试通常用于发现用于扩展软件解决方案的最佳编码技术。

●运用黑盒技术设计测试用例常用的方法有：

   等价类划分

   边界值分析

   因果图分析法

    错误推断法 等

●HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

●<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

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

可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

●SVG 定义为可缩放矢量图形。

HTML5 支持内联 SVG。

HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种绘制路径、框、圆、文本和图形图像的方法。

●SVG优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

图像可通过文本编辑器来创建和修改

 图像可被搜索、索引、脚本化或压缩

 是可伸缩的

图像可在任何的分辨率下被高质量地打印

可在图像质量不下降的情况下被放大

●SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。