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

[简介]HTML5 and CSS3

news 来源：原创 2024/4/30 2:20:12

一.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

转载于:https://www.cnblogs.com/wangxinsheng/p/4259120.html

相关文章：

  • LexYacc Parser错误发生后再次parser之前恢复初始状态
  • ae开发基础功能
  • 水果的英文名称
  • LaTeX学习笔记
  • 杭电OJ BestCoder28期1001Missing number问题（小技巧偏移法）
  • Ecshop系统二次开发教程及流程演示
  • C#的百度地图开发(一)发起HTTP请求
  • python学习
  • MySQL STRAIGHT_JOIN
  • 数据结构之线性结构
  • lucene查询排序结果原理总结
  • Azure 中的多个 VM NIC 和网络虚拟设备
  • poj 1236 scc强连通分量
  • Javascript模块化编程（一）：模块的写法
  • leetcode[44]Wildcard Matching
  • [译] React v16.8： 含有Hooks的版本
  • Git 使用集
  • golang中接口赋值与方法集
  • js
  • mysql中InnoDB引擎中页的概念
  • Python_网络编程
  • React-redux的原理以及使用
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典：程序员走江湖必备
  • Spark RDD学习: aggregate函数
  • tweak 支持第三方库
  • Vim 折腾记
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 前端面试之闭包
  • 前端性能优化--懒加载和预加载
  • 前言-如何学习区块链
  • 原生js练习题---第五课
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 3月7日云栖精选夜读 | RSA 2019安全大会：企业资产管理成行业新风向标，云上安全占绝对优势 ...
  • Java数据解析之JSON
  • 蚂蚁金服CTO程立：真正的技术革命才刚刚开始
  • ​总结MySQL 的一些知识点：MySQL 选择数据库​
  • ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException
  • #微信小程序（布局、渲染层基础知识）
  • ()、[]、{}、(())、[[]]等各种括号的使用
  • （11）工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • （day 12）JavaScript学习笔记（数组3）
  • （简单有案例）前端实现主题切换、动态换肤的两种简单方式
  • （经验分享）作为一名普通本科计算机专业学生，我大学四年到底走了多少弯路
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • （篇九）MySQL常用内置函数
  • （四）【Jmeter】 JMeter的界面布局与组件概述
  • （已解决）什么是vue导航守卫
  • （转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转)Mysql的优化设置
  • (转载)深入super，看Python如何解决钻石继承难题
  • ./configure,make,make install的作用
  • .NET CF命令行调试器MDbg入门（三） 进程控制
  • .NET 反射的使用
  • .NET 同步与异步 之 原子操作和自旋锁（Interlocked、SpinLock）（九）
  • .Net8 Blazor 尝鲜