基于HTML5 CSS3的相册设计与实现 (4)

只剩骄傲 分享 2020-06-28 下载文档

除了原先的DOM接口,HTML5增加了更多样化的API:?实时二维绘图

Canvas API:有关动态产出与渲染图形、图表、图像和动画的API。?定时媒体播放

HTML5 音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。 ?离线存储数据库(离线网络应用程序) ?编辑 ?拖放 ?跨文档通信 ?通信/网络

Communication APIs:构建实时和跨源(cross-origin)通信的两大基础:跨文档通信(Cross Document Messaging)与XMLHttpRequest Level 2。 二、HTML5的优点

? SEO(搜索引擎优化)得到提升

一些常用的图形效果有CSS3表达方式,包括不透明贴图、圆角、阴影。这些效果与CSS3渐变色一起使得上传更为简洁,跨平台维护也更为容易。此外,它们还在SEO(搜索引擎优化)方面具有优势。

?更快的图片下载速度,尤其是对于移动用户

在网页设计中,“渐变”是一种背景效果:你的网页上的“窗口”拥有更精致的底纹或纹理。公司设计人员有更大的空间来平衡明暗度、匹配边界,实现让大数浏览者叹为观止的色彩或风格。

? Web应用开发更容易,尤其是移动应用

最后一个优势是,HTML5解决方案是一个可媲美原生应用的编程环境。这对于移动终端用户来说非常重要,原生应用开发成本昂贵:其编程人员薪水高、许可证各类繁多,可移植性差。HTML5在优势在于许多应用能够被完整的编在HTML5内。 ?更精美的动画效果

除了上面所提到的功能外,其特色功能还包括 HTML5能够以更低的成本和更短的下载时间展现媲美目前顶级网页设计人员设计的外观,语义标记具有SEO和维护优势。HTML5现在拥有的一些效果已经超越早期标准的效果,其中之一就是动画制作。

第三节 JavaScript及jQuery简介

一、JavaScript

JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端

脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript,提供了数据验证的基本功能。由于Ajax的出现,JavaScript的功能被越来越多的丰富,能做的事情也越来越多,是Web2.0时代的象征。

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心

(ECMAScript)、文档对象模型(Document Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。

JavaScript的一个重要功能就是面向对象的功能,通过基于对象的程序设计,可以用更直观、模块化和可重复使用的方式进行程序开发。

二、jQuery

jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、

events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全;而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML内容分离,也就是说,不用再在HTML里面插入一堆js来调用命令了,只需定义ID即可。如今,jQuery已经成为最流行的JavaScript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。 jQuery特点: ?动态特效 ? AJAX

?通过插件来扩展

?方便的工具 - 例如浏览器版本判断 ?渐进增强 ?链式调用

?多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+

jQuery库是一个单独的JavaScript文件,可以保存到本地或者服务器直接引用,也可以从多个公共服务器中选择引用。有Media Temple、Google、Microsoft等多家公司给jQuery提供CDN服务,比较常用的引用地址如下 选择器:

jQuery使用 sizzle引擎,支持css选取,Xpath选取等方式。

$(\选取全部 元素。

$(\选取所有包含class为\的 元素。

$(\选取 id为\的元素。 $(\选取所有带有href属性的元素。

$(\选取所有带有href值等于 \的元素。 $(\选取所有带有href值不等于 \的元素。 $(\选取所有href值以 \结尾的元素。 事件处理:

直接绑定指定事件,事件类型即方法名,支持click、focus、blur、submit等。

$(\//script goes here });

用on来绑定事件,off来解绑事件,第一个参数为事件名,第二个参数为回调函数。$(\选取所有href值以 /imgaes/\开头的元素。 动态特效:

$(\


基于HTML5 CSS3的相册设计与实现 (4).doc 将本文的Word文档下载到电脑

下一篇:东北大学17秋学期《数控机床与编程》在线作业3答案

相关推荐
相关阅读
本类排行
× 游客快捷下载通道(下载后可以自由复制和排版)

下载本文档需要支付 7

支付方式:

开通VIP包月会员 特价:29元/月

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信:xxxxxx QQ:xxxxxx