[简介]HTML5 and CSS3
一.HTML5
1.语义标签与新增表单控件
标签更加语义化
header
footer
article等
还增加了许多表单控件
记得有：
进度条，
颜色选择，
日期等
2.音频，视频标签
关键字：
audio
video
他们会监听许多事件且返回播放的进度数据等
事件：播放，暂停，停止，跳转
数据：加载进度，播放进度，总长度等
注：浏览器不同，支持的音频和视频格式不同
可以在标签source里指定多个格式的文件以便支持更多的浏览器
具体可以看 w3cschool
3.画板和可缩放矢量图形
关键字：
canvas
SVG
多用于游戏和酷炫的效果
另：canvas可以画图形，多边形，图片，视频帧；需要js技术
但是，自动建立某个图形的对象，也就无法做到对象的监听
所以判断触电位置与图形对象的关系是一个麻烦点
如果内部需要建立众多对象，并需要监听事件的话，使用SVG比较好
4.地理定位
关键字：Geolocation
猜想主要用于手机GPS定位和PC端IP定位用
确实，对于全国性的网站来说，是很有用的，
但是，他需要客户端的允许...
PC端还不如和以往一样，直接用IP定位
对于手机端就不一样了，那是个宝贝吧。
例子：
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
5.离线存储
关键字：manifest
想想，也是用于webApp的吧
特别对于游戏
一是省了流量
二是可以当手机里的app用
例子：
1)页面：告诉客户端缓存名单文件地址
<html manifest=”/cache.manifest”>
2)服务器：列出缓存文件
你的缓存名单文件可以放在你网络服务器的任何地方，但他需要type text/cache-manifest内容类别的支持。如果你正使用基于Apache的网络服务器，你大概只需要在你网络根目录的.htaccess文件中添加一个AddType指令：
AddType text/cache-manifest .manifest
然后确认你缓存文件的扩展名为.manifest。如果你使用不同的网络服务器或者不同的Apache配置，请查阅服务器说明文档关于配置Content-Type头的部分。
3)缓存名单文件
cache.manifest：
---
i. CACHE MANIFEST // 声明文件头部
ii. #This is a comment 以及 版本号
iii. CACHE // 离线存储文件
iv. NETWORK // 需要网络调用的文件
v. FALLBACK // 资源失效或不可用时更新文件
---
CACHE MANIFEST
# VERSION 0.3
# 直接缓存的文件
CACHE:
abc.html
images/sofish.png
js/main.js
css/layout.css
# 需要在时间在线的文件
NETWORK:
/wp-admin/
# 替代方案
FALLBACK:
/ajax/ ajax.html
---
4)离线内容更新
a) 自动更新：
b) 手动更新：
i. 检测window.applicationCache.status的值；如果是UPDATEREADY
ii. 使用 window.applicationCache.update更新缓存；
6.本地存储
关键字：localStorage
a) 本地存储是一个window的属性：, 相当于一个大型的Cookie;
b) window.localStorage :
c) set方法：
i. localStorage.t1 = “aaa”;
ii. localStorage[t2] = “bbb”;
iii. localStorage.setItem(“t3”, “ccc”);
d) get方法：
i. localStorage.t1;
ii. localStorage[t1];
iii. localStorage.getItem(“t1”);
e) delete方法：
i. localStorage.removeItem();
ii. localStorage.clear(); // 清除所有；
f) 遍历方法：
i. localStorage.length;
ii. localStorage.key();
7.双向推送
关键字：WebSocket
用以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。
a)区别ajax：
WebSocket API：服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
b)WebSocket API的用法
只专注于客户端的API，因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接，为连接创建事件监听器，断开连接，消息时间，发送消息返回到服务器，关闭连接。
CODE:
// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket
socket.onopen = function(event) {
// 发送一个初始化消息
socket.send('I am the client and I\'m listening!');
// 监听消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
};
// 监听Socket的关闭
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// 关闭Socket....
//socket.close()
};
让我们来看看上面的初始化片段。参数为URL，ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件，以表示Socket的状态。
onmessage事件提供了一个data属性，它可以包含消息的Body部分。消息的Body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多的数据。
WebSocket的语法非常简单，使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通信。如果你的客户端不支持WebSocket通信，下面有几个后备方案供你使用：
Flash技术 —— Flash可以提供一个简单的替换。 使用Flash最明显的缺点是并非所有客户端都安装了Flash，而且某些客户端，如iPhone/iPad，不支持Flash。
AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术，但它不能优化发送的信息。也就是说，它是一个解决方案，但不是最佳的技术方案。
由于目前的IE等浏览器不支持WebSocket，要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API，那么该怎么办呢？幸运的是，Guillermo Rauch创建了一个Socket.IO技术。
c)带Socket.IO的WebSocket
http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html
8.webSql
1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction：这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql：这个方法用于执行真实的SQL查询。
打开数据库
openDatabase方法可以打开已经存在的数据库，不存在则创建：
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。
执行查询
database.transaction()函数用来查询，下面将在mydatabase数据库中创建表t1：
var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
});
插入操作
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
在插入新记录时，我们还可以传递动态值，如：
var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1
(id,log) VALUES (?, ?'), [e_id, e_log]; //e_id和e_log是外部变量
});
读操作
如果要读取已经存在的记录，我们使用一个回调捕获结果，代码如下：
var db = openDatabase(mydatabase, '2.0', 'my db', 2*1024); db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM t1, [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
9.浏览历史管理
关键字：history
http://zawa.iteye.com/blog/1271031
html4:
A) history.length：当前历史列表中的历史记录数（我大概测了下，IE6+是从0开始的，其他的是从1开始的，若有误请反馈哈，^_^）；
B) history.go(n)：前进或后退n条记录，当n=0或空时会刷新当前页；
C) history.back()：后退一步；
D) history.forward()：前进一步;
html5:
A) history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会忽略此参数；url为页面地址，可选，缺省为当前页地址；
B) history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上；
C) history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样；
D) window.onpopstate：响应pushState或replaceState的调用；
检测浏览器是否支持History API
function supports_history_api() {
return !!(window.history && history.pushState);
}
检测history.state的兼容性
var originalHistoryState = history.state; // 保存原有的历史信息
history.replaceState(1, null); // 替换当前历史信息
var stateSupport = history.state == 1; // 是否存储到刚设置的历史信息
history.replaceState(originalHistoryState, null); // 恢复原来的历史信息
二.CSS3
1.选择器
http://www.w3school.com.cn/cssref/css_selectors.asp
2.盒模型
http://www.3lian.com/edu/2011/08-25/8620.html
3.背景和边框
http://www.w3school.com.cn/css3/css3_background.asp
http://www.w3school.com.cn/css3/css3_border.asp
4.文字特效
http://www.w3school.com.cn/css3/css3_text_effect.asp
http://www.w3school.com.cn/css3/css3_font.asp
5.2D/3D旋转
http://www.w3school.com.cn/css3/css3_2dtransform.asp
http://www.w3school.com.cn/css3/css3_3dtransform.asp
6.动画,过度
动画
关键字：@keyframes
http://www.w3school.com.cn/css3/css3_animation.asp
过度
关键字：transition
http://www.w3school.com.cn/css3/css3_transition.asp
7.多列布局
关键字：columns
http://www.w3school.com.cn/css3/css3_multiple_columns.asp
8.用户界面
http://www.w3school.com.cn/css3/css3_user_interface.asp
[简介]HTML5 and CSS3的更多相关文章
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物
探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- iOS Web应用开发：运用HTML5、CSS3与JavaScript
<iOS Web应用开发:运用HTML5.CSS3与JavaScript> 基本信息 原书名:Pro iOS web design and development:HTML5, CSS3, ...
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...
- 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结
今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Modernizr.js:为HTML5和CSS3而生！
原文链接:http://caibaojian.com/modernizr-js.html modernizr这个JS,在国外的主题里面很多地方都看到,就只记得是为html补充的,有点类似与respon ...
随机推荐
- Reveal-Plugin-for-Xcode 自动结合 Reveal 进行 UI 分析
下载地址:https://github.com/shjborage/Reveal-Plugin-for-Xcode 还记得之前我们如何使用 Reveal UI 分析工具进行实时查看 UI 的结构吗?如 ...
- MemSQL start[c]up Round 2 - online version C. More Reclamation（博弈）
题目大意 额,写来写去,我还是直接说抽象之后的题目大意吧: 有一个 r*2 的矩形,两个人轮流的在矩形上面减去一个 1*1 的小正方形,要求在减的过程中,不能使矩形“断开”,也就是说,如果一个人减去了 ...
- SharePoint 2013中以其他用户身份登录的WebPart（免费下载）
在SharePoint 2013中微软并没有提供在SharePoint 2010中以其他用户身份登录的菜单,这对一般用户影响不大,但对于系统管理员或测试人员或特定人员(如在OA系统中的文员或秘书,常常 ...
- H5+CSS3实现手指滑动切换图片
包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <htm ...
- Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问
本篇内容还是建立在上一篇Java Web学习系列——Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Jar包 这 ...
- ListView不规律刷新多次，重复执行getView
写ListView的时候,有时会发现ListView中的getView执行多次,有的时候又不是,搞了半天才找到原因,在http://blog.csdn.net/danielinbiti/article ...
- Tools - Oracle SQL Developer
Oracle SQL Developer Oracle公司出品的一个免费非开源的用以开发数据库应用程序的图形化工具. 可以浏览数据库对象.运行SQL语句和脚本.编辑和调试PL/SQL语句,也可以创建执 ...
- Tools - 为知笔记
为知笔记 Homepage Web登陆 帮助支持 功能 特色功能 发布到blog 便携版制作 模板 如何建立模板 下载为知笔记模版 Markdown http://www.wiz.cn/markdow ...
- 创意欣赏：20幅字体排版（Typography）素描
通常我们都只关注最终的作品,但其实幕后还有很多的过程,其中一个是素描.素描用来表达最初思想观念的原型.有时客户需要一个独特的品牌新LOGO或字体,这时先绘制在纸上是比较方便的,之后扫描到 Photos ...
- [操作系统实验lab2]实验报告
static void * alloc(u_int n, u_int align, int clear) { extern char end[]; int i; u_long alloced_mem; ...