当前位置：首页 > news >正文

Web前端学习-第六课ＨＴＭＬ篇

news 来源：原创 2024/4/29 1:02:59

Q13：HTML5中Canvas、WebWorkers、Storage三者出现的意义？使用方式（使用代码展示）？优点？

Canvas为了客户端矢量图形而设计，自己没有行为，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制在一块画布上；

使用：大多数canvas绘图API都没有定义在<canvas>元素本身上，而是定义在通过画布的getConText（）方法获得的一个绘图环境对象上；canvas也使用了路径的表示法，但是路径有一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath（）和arc（）方法；一旦定义了路径，其他的方法如fill（），都是对此路径操作，绘图环境的各种属性，比如fillstyle，说明了这些操作如何使用；

代码：

优点：动态创建图形图像，图形是在一个特定的上下文中创建的，而上下文对象目前有两种：2D上下文，可移植性原始的绘图操作：设置填充，描边颜色和模式；绘制矩形；绘制路径；绘制文本；创建渐变和模式；3D上下文，即WebGL（从OpenGL ES2.0移植到浏览器中，OpenGL ES2.0是游戏开发人员在创建计算机图形图像时经常使用的一种语言）上下文，支持比2D上下文更丰富的更强大的图形图像处理能力：用GLSL（OpenGL Shading Language ，OpenGL着色语言）编写的顶点和片段着色器；支持类型化数组，既能够将数组中的数据限定为某种特定的数值类型；创建和操作纹理。（2D上下文浏览器基本都支持，WebGLobal目前只有Firefox 4+和Chrome支持）

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

代码：

优点：作为在后台运行的JavaScript脚本，不会影响页面的性能。

Storage：可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大得多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。

Web Storage 分为两种：session Storage和local storage；

保存数据：localStorage.setItem(key,value)

读取数据：localStorage.getItem(key)

删除单个数据：localStorage.removeItem(key)；

删除所有数据：localStorage.clear()

得到某个索引的key：localStorage.key(index)

示例代码：

<!DOCTYPE HTML>

<html>

<head>

<title>Web Storage</title>

</head>

<body>

<br />

<br />

<hr />

<label for = "search_phone">输入手机号：</label>、

</div>

<br />

</div>

</body>

//保存数据

function save(){

var mobilephone = document.getElementById("mobilephone").value;

var user_name = document.getElementById("user_name").value;

localStorage.setItem(mobilephone,user_name);

}

//查找机主

function find(){

var search_phone = document.getElementById("search_phone").value;

var name = localStorage.getItem(search_phone);

var find_result = document.getElementById("find_result");

find_result.innerHTML = search_phone + "的机主是：" + name;

}

//将所有存储在localStorage中的对象提取出来，并展现到界面上

function loadAll(){

var list = document.getElementById("list");

if(localStorage.length > 0){

var result = "<table border = '1'>";

result += "<tr><td>姓名</td><td>手机号码</td></tr>"

for(var i = 0;i < localStorage.length;i ++){

var mobilephone = localStorage.key(i);

var name = localStorage.getItem(mobilephone);

result += "<tr><td>" + name + "</td><td>" + mobilephone +"</td></tr>";

}

result += "</table>";

list.innerHTML = result;

}else{

list.innerHTML = "目前数据为空，赶紧加入联系人吧";

}

</script>

</html>

Q14：HTML5为什么适合做移动端？目前移动端框架有哪些？

Html5 可以直接在网页上调试和修改，在移动设备上支持媒体，引进新功能可以真正改变用户跟文档的交互方式。（新的解析规则增强了灵活性，新属性，淘汰过时的冗余的属性，一个html5文档到另一个文档间的拖放功能，离线编辑，信息传递增强，详细的解析规则，多用互联网邮件扩展和协议处理程序注册，在SQL数据库中存储数据的通用标准、。。。）

目前移动端框架：PhoneGap（开源开发框架，使用html，css，和JavaScript来构建跨平台的移动应用程序）、

　　　　　　　　Sencha Touch（让Web APP看起来像Native App，美丽的用户界面组件个丰富的数据管理全部基于最新的HTML5和css3的web标准全面兼容Android和iOS设备，是开发者最常用的UI工具箱）、

　　　　　　　　Media Queries（提供了一种基于不同的平台写css的技术，能很快让网站兼容移动设备，保证产品实现最快的跨平台的兼容性和多平台的可用性。）、

　　　　　　　　Zepto.js（专为mobile webkit浏览器而开发的JavaScript框架开发理念是简约，帮助开发人员简单快速的完成开发交付任务，超轻量级，语法借鉴且兼容jQuery）、

　　　　　　　　bootstrap（Twitter推出的开源的用于前端开发的工具包，是一个css/html框架，提供了优雅的HTML和css规范，由动态css语言less写成，与css框架blueprint存在很多相似之处，2.0版本添加响应式布局，更新了一些进度拦及可定制的图片缩略图，增加了一些新样式，非常轻量级的框架）、