function passport_decrypt($txt, $key) {
$txt = passport_key(base64_decode($txt), $key);
$tmp = ”;
for($i = 0;$i < strlen($txt); $i++) {
$md5 = $txt[$i];
$tmp .= $txt[++$i] ^ $md5;
}
return $tmp;
}

function passport_key($txt, $encrypt_key) {
$encrypt_key = md5($encrypt_key);
$ctr = 0;
$tmp = ”;
for($i = 0; $i < strlen($txt); $i++) {
$ctr = $ctr == strlen($encrypt_key) ? 0 : $ctr;
$tmp .= $txt[$i] ^ $encrypt_key[$ctr++];
}
return $tmp;
}
?>
以下是一些示例…加深对这三个加密解密函数的理解…
//string.php
<?php
include “fun.php”;

$txt = “This is a test”;
$key = “testkey”;
$encrypt = passport_encrypt($txt,$key);
$decrypt = passport_decrypt($encrypt,$key);

echo $txt.”<br><hr>”;
echo $encrypt.”<br><hr>”;
echo $decrypt.”<br><hr>”;
?>
//array.php
<?php
include “fun.php”;

$array = array(
“a” => “1″,
“b” => “2″,
“c” => “3″,
“d” => “4″
);
//serialize产生一个可存储的值,返回一个字符串,unserialize还原
$txt = serialize($array);
$key = “testkey”;
$encrypt = passport_encrypt($txt,$key);
$decrypt = passport_decrypt($encrypt,$key);
$decryptArray = unserialize($decrypt);

echo $txt.”<br><hr>”;
echo $encrypt.”<br><hr>”;
echo $decrypt.”<br><hr>”;
echo $decryptArray.”<br><hr>”;
?>
关键的地方来了…当你要跳转到另外一个网址,但又要保证你的session无误的时候,你需要对session作一个处理.貌似一个公司有一个网站又有一个论坛,两个地方都有注册和登录,但又不想让用户在主页登录后跳转到论坛的时候session失效,即是登录一次跑完整间公司…
那要怎样来处理用户的session呢…
网页都是无状态的,如果要在新的网页中继续使用session,则需要把session从一个地方移到另一个地方,可能有些人已经想到了,我可以通过url传址的方式来调用它….而PHP有个处理session的变量,叫$_SESSION.于是….
将需要注册的session转换成一个数组吧.那么,你可以这样写:
//login.php
<?php
session_start();
include “fun.php”;
….
$_SESSION[“userid”];
$_SESSION[“username”];
$_SESSION[“userpwd”];
…
header(”Location: http://$domain/process.php?s=”.urlencode(passport_encrypt(serialize($_SESSION),”sessionkey”)));
?>
上例中先用serialize将$_SESSION变成可存储的数据,然后通过passport_encrypt将这个数据加密,加urlencode的原因是因为$_SESSION加密时,有可能会产生像料想不到的编码,所以以防万一…(事实证明非常有效)
处理下先
//process.php
<?php
session_start();
include “fun.php”;
$_SESSION=unserialize(passport_decrypt($_GET["s"],”sessionkey”));
header(”Location: http://$domain/index.php”);
?>
先用$_GET[“s”]获取URL的参数,然后用passport_decrypt将其解密,再用unserialize将其数据还原成原始数据
到了这步处理,你的网页就可能通过header自由跳转啦….
这种方法还涉及到安全性的问题,如果你的url地址在传址的过程中被人家获取的话,那就真的是不好意思了…人家虽然可能破解不了url里边的内容,但人家也可以直接用这个url地址来登录你的一些个人账户啊,邮箱帐户啊甚至银行帐户(当然很少人会这样写,我例外,哈哈)…听起来好怕….但其实你可以在跳转页面作取消session处理….
以下是加强版的process.php
<?php
session_start();
include_once “fun.php”;
$_SESSION=unserialize(passport_decrypt($_GET["s"],”sessionkey”));
if((time()-$_SESSION["TIME"])>30){
header(”Location: http://$domain/ login.php”);
unset($_SESSION["USERNAME"]);
unset($_SESSION["PASSWORD"]);
}
else
header(”Location: http://$domain/ index.php”);
?>
写这个文件之前,你还要在登录那边设置
$_SESSION["TIME"] = time();
设置这个的原因主要是获取两边的时间,如果跳转的时候超过30秒的时候,你就可以让它跳转到login.php登录页面,网速慢的客户就不好意思啦…但这也预防了如果此url被人获取,而这个人又没有在30秒内登录的话,那就不好意思啊,超时重新登录.
$_SESSION["USERNAME"]和$_SESSION["PASSWORD"] 这两个东东就是用户登录时需要输入的用户名和密码了….取消这两个session的原因就是因为如果你的url被人获取了,那个人虽然在超过30秒内跳转到loign.php的页面,但那些传过来的session依然有效,只要将url后缀login.php改为index.php….那他一样登录成功…
感觉废话说了一大堆…不知让不让人明白一点…明白的就快去实践一下…

]]> http://www.yanzhilu.com/blog/archives/5685/feed 0 http://www.yanzhilu.com/blog/archives/5683 http://www.yanzhilu.com/blog/archives/5683#comments Fri, 03 Sep 2010 08:45:48 +0000 changboter http://www.yanzhilu.com/blog/?p=5683 在百度世界2010大会上，百度正式推出应用开放平台。4399董事长蔡文胜，对百度的应用开放平台模式表示担忧，并对百度开放平台提出建议。

蔡文胜表示，“希望百度要真的开放，不要自己做应用，有所为有所不为”。他同时表示，4399拒绝与百度合作的原因就在担心用户最终留在百度，“4399虽然赢得了品牌，却失去了流量”。

蔡文胜称，百度开放平台推出可以给合作者带来用户、带来品牌，但也会令很多中小站长有所担心。“大家会担心百度会怎样选择合作伙伴，而中小站长们可能不会有与合作的空间”。同时，蔡文胜建议，百度应当推动中小站长提升收入。

对此，百度高级副总裁沈皓瑜回应，百度会本着开放的心态，选择开放平台的资源提供方，只要开发者提交的产品过硬、只要用户喜欢，百度都会把应用放到平台上。同时，他也表示，百度会集中精力做好搜索，而未来如何解决开放平台公平公正等问题也是百度正在思考的。

mysql> select
-> user()
-> \c
mysql>

练习如下操作：
mysql> select
-> USER()
-> ,
-> now()
->;
mysql> Select (20+5)*4;
mysql> Select (20+5)*4,sin(pi()/3);
mysql> Select (20+5)*4 AS Result,sin(pi()/3); (AS: 指定假名为Result)

查看MySQL当前用户占用的连接数

命令： show processlist;
如果是root帐号，你能看到所有用户的当前连接。如果是其它普通帐号，只能看到自己占用的连接。
show processlist;只列出前100条，如果想全列出请使用show full processlist;
mysql> show processlist;

一。数据库：

mysql> CREATE DATABASE abccs;　        创建一个数据库　        
mysql> USE abccs            选择使用数据库
mysql> drop database 数据库名;        删除数据库

二。表：

1。创建一个表mytable:

mysql> CREATE TABLE mytable 
-> (
-> name VARCHAR(20), 
-> sex CHAR(1),
-> birth DATE, 
-> birthaddr VARCHAR(20)
-> );
建立一个员工生日表，表的内容包含员工姓名、性别、出生日期、出生城市。
由于name、birthadd的列值是变化的，因此选择VARCHAR，其长度不一定是20。
可以选择从1到255的任何长度，如果以后需要改变它的字长，可以使用ALTER TABLE语句。
性别只需一个字符就可以表示：”m”或”f”，因此选用CHAR(1);
birth列则使用DATE数据类型。

2。查询刚添加的记录：
mysql> select * from mytable;
Empty set (0.00 sec)　　    这说明刚才创建的表还没有记录。

3。添加新记录：
mysql> insert into mytable                
-> values
->(
->’abccs’,
->’f',
->’1977-07-07′,
->’china’
->);

4。用文本方式将数据装入一个数据库表：
一条一条地添加新记录，实在太麻烦。
创建一个文本文件“mysql.txt”，按表结构排好每行每条记录，用定位符(tab)把值分开。
abccs f 1977-07-07 china 　
mary f 1978-12-12 usa
tom m 1970-09-02 usa
使用此命令将文本文件“mytable.txt”装载到表中:    
mysql> Load data local infile “mytable.txt” into table mytable;

数据传入命令load data local infile “文件名” into table 表名;
注意：你最好将文件复制到mysql/bin目录下，并且要先用use命令选表所在的库。

5。更新记录：
mysql> update mytable set birth = “1973-09-02″ where name = “tom”;

6。删除记录：
mysql> delete from mytable where id=10;         //删除掉所有id=10的记录;
mysql> delete from mytable where id=10 limit 1; //限制删除掉1条id=10的记录;
mysql> delete from mytable            //删除一个表的全部记录;
mysql> DELETE FROM t1 WHERE C>10;
mysql> drop table tablename1,tablename2,…;    //删除整一个表或多个表，小心使用。

7。重命名表：
mysql> alter table t1 rename t2;

8。修改mysql的表结构：

查看mysql的表结构：
mysql> describe mytable;   或用show columns from 表名；

修改字段属性
mysql> alter table tablename modify id int(10) unsigned auto_increment primary key not null

修改默认值
mysql> alter table tablename alter id default 0

给字段增加primary key
mysql> alter table tablename add primary key(id);

删除primary key
1、alter table tablename drop primary key;
2、drop primary key on tablename;

修改table表数据引擎
mysql> alter table tableName ENGINE = MyISAM (InnoDB);

增加一新字段名：
mysql> alter table mytable add column single char(1);
mysql> ALTER TABLE table ADD field INT(11) UNSIGNED NOT NULL

删除字段
mysql> alter table t2 drop column c;

附：
为了改变列a，从INTEGER改为TINYINT NOT NULL(名字一样)，
并且改变列b，从CHAR(10)改为CHAR(20)，同时重命名它，从b改为c:
ALTER TABLE t2 MODIFY a TINYINT NOT NULL, CHANGE b c CHAR(20);

增加一个新TIMESTAMP列，名为d：
ALTER TABLE t2 ADD d TIMESTAMP;

在列d上增加一个索引，并且使列a为主键：
ALTER TABLE t2 ADD INDEX (d), ADD PRIMARY KEY (a);

增加一个新的AUTO_INCREMENT整数列，命名为c：
ALTER TABLE t2 ADD c INT UNSIGNED NOT NULL AUTO_INCREMENT,ADD INDEX (c);

注意，我们索引了c，因为AUTO_INCREMENT柱必须被索引，
并且另外我们声明c为NOT NULL，因为索引了的列不能是NULL。

使用name列的头10个字符创建一个索引:
CREATE INDEX part_of_name ON customer (name(10));

三。数据的备份与恢复：

导出和导入数据：(命令在DOS的mysql/bin目录下执行)
导出表
mysqldump –opt school > school.sql
注释：将数据库school中的表全部备份到school.sql文件，school.sql是一个文本文件，
文件名任取，打开看看你会有新发现。
mysqldump –opt school teacher student > school.teacher.student.sql
注释：将数据库school中的teacher表和student表备份到school.teacher.student.sql文
件，school.teacher.student.sql是一个文本文件，文件名任取，打开看看你会有新发现。

导入表
mysql
mysql>create database school;
mysql>use school;
mysql>source school.sql;
(或将school.sql换为school.teacher.sql / school.teacher.student.sql)

导出数据库
mysqldump –databases db1 db2 > db1.db2.sql
注释：将数据库dbl和db2备份到db1.db2.sql文件，db1.db2.sql是一个文本文件，文件名
任取，打开看看你会有新发现。
(举个例子：
mysqldump -h host -u user -p pass –databases dbname > file.dump
就是把host上的以名字user，口令pass的数据库dbname导入到文件file.dump中。)

导入数据库
mysql < db1.db2.sql

复制数据库mysqldump –all-databases > all-databases.sql
注释：将所有数据库备份到all-databases.sql文件，all-databases.sql是一个文本文件，文件名任取。

导入数据库
mysql
mysql>drop database a;
mysql>drop database b;
mysql>drop database c;
…
mysql>source all-databases.sql; (或exit退出mysql后 mysql < all-databases.sql)
<

下面，我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。

input { font-size: 14px; font-weight: bold;  }input[type=range]:before   
{ content: attr(min); padding-right: 5px; }input[type=range]:after  
{ content: attr(max); padding-left: 5px;}output   
{    display: block;    font-size: 5.5em;    font-weight: bold;} 

第三步：JavaScript

最后，我们

检测我们的浏览器是否认识range input，如果不，显示提示。

当用户移动滑块的时候，动态改变output的值。

监听，当用户离开滑块，插入值，同时本地存储。

然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。

(function() {    var f = document.forms[0],        range = f['range'],        result = f['result'],        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;      
// 检测浏览器是否是足够酷   
// 识别range input.    var o = document.createElement('input');    
  o.type = 'range';    
  if   
( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');   
   // 设置初始值   
   // 无论是否本地存储了，都设置值为5    range.value = cachedRangeValue;    result.value = cachedRangeValue;     
// 当用户选择了个值，更新本地存储    range.addEventListener("mouseup", function() {        alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");    
      localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");    
  }, false);    
  // 滑动时显示选择的值     
range.addEventListener("change", function() {        result.value = range.value;    }, false);})(); 

感谢您的阅读!我们已经讨论了很多，但可能只是触及到HTML5的皮毛，全当抛砖引玉，希望能对您的学习有所帮助!

正如你可能预料到的，output元素被用来显示部分计算，例如，如果你想显示一个鼠标的位置，或者是一系列数字的总和坐标，这个数据应被插入到output元素中。

举个简单的例子，当提交按钮被按下，我们用JavaScript将两个数字相加值插入到空的output中。

<form action="" method="get">    
  <p>        10 + 5 = <output name="sum"></output>    </p>    
  <button type="submit">计算</button></form>(function()   
{    var f = document.forms[0];    if ( typeof f['sum'] !== 'undefined' ) {        f.addEventListener('submit', function(e) {            f['sum'].value = 15;            e.preventDefault();  
        }, false);     
}   
else  
{        alert('你的浏览器尚未准备好！');   
   }})(); 

自己测试了下，貌似现在只有在Opera浏览器下有上佳的效果：

如果您现在使用的是较新版本的Opera浏览器，您可以狠狠地点击这里：HTML5结果输出框demo

此元素也可以接受一个属性，它反映了输出相关元素的名称，类似label工作原理。

二十八、使用区域input创建滑块(Create Sliders with the Range Input)

HTML5引进了range类型的input。

<input type="range"> 

最值得注意的是，它可以接收 min, max, step,和value 属性，等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的!

参见下面的快速演示：

第一步：标签

首先，创建标签

<form method="post">    
  <h4>音量控制</h4>     
<input type="range" name="range" min="0" max="10" step="1" value="" />     
<output name="result">    
</output> 
</form> 

]]> http://www.yanzhilu.com/blog/archives/5676/feed 0 http://www.yanzhilu.com/blog/archives/5674 http://www.yanzhilu.com/blog/archives/5674#comments Thu, 02 Sep 2010 10:49:19 +0000 changboter http://www.yanzhilu.com/blog/?p=5674 二十六、data属性(The Data Attribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：

<h1 id=someId customAttribute=value> 小样，胆儿挺肥的呢 </h1> 

校验器会小题大做!但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。

HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div> 

检索自定义属性的价值

var theDiv = document.getElementById('myDiv');var attr = theDiv.getAttribute('data-custom-attr');alert(attr); // My Value 

此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：

CSS代码：.data_custom { display:inline-block; position: relative; }.data_custom:hover { color: transparent; }.data_custom:hover:after {    content: attr(data-hover-response);    color: black;    position: absolute;    left: 0;} 

HTML代码：

<a class="data_custom" data-hover-response="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a> 

如果你的浏览器支持after伪类，以及content的attr属性，则可以看到类似下面的效果(IE8不一样)：

还有，content属性其实是一个非常强大的属性，由于低版本的IE不支持，所以此属性尚未流行，关于content内容生成技术，可以参见我之前的“CSS content内容生成技术以及应用”这篇文章。

试想元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。

<h3> 搜索结果 </h3><p> 我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做 <mark>北川景子</mark>。 </p> 

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section,和footer，还有机会使用div…吗?当然可以。

div应该用在没有更好的元素的时候。

例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用和元素，因为其更具语义。

二十四、什么可以开始立即使用

一直谈论到现在的HTML5要到2022年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上，有少量的HTML5的功能，我们可以在我们所有的项目中使用!更简单，更干净的代码总是一件好事。在今天的视频快速展示的技巧中，我将告诉你一些可用的选项。

//zxx:YouTuBe视频，需要翻墙

Subscribe to our YouTube page to watch all of the video tutorials!

二十五、哪些不是HTML5(What is Not HTML5)

那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML5的人是可以理解的，嘿，甚至苹果无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是HTML5。

1. SVG:不是HTML5，至少5岁了。

2. CSS3:不是HTML5，它是…CSS。

3. Geolocation:不是HTML5.//zxx:Geolocation(地理位置)：通过HTML 5，您应该能够使Web应用程序可确定您的位置，并为您提供更多的相关信息。

4. Client Storage(客户端存储):非HTML5，虽说有一点切合，但被排除在规范之外，原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。

5. Web Sockets:不是HTML5，同样的，有着自己的一套准则。

不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还是同一人。

与元素很类似，在新的浏览器中也存在Video!事实上，就在最近，YouTube宣告了新的HTML5视频嵌入，当然，是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以预期支持H.264格式的视频(其中Flash播放器可以播放)，Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，当显示HTML5的视频，您必须提供这两种格式。

<video controls preload>   
   <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />     
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />    
  <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> 
</video> 

还有一个值得注意的一些事情：

1. 我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。节省一些带宽，还是你自己声明下吧。

2. 不是所有的浏览器理解HTML5视频。在资源元素的下面，我们可以提供一个下载链接，或嵌入视频的Flash版本代替。这取决于你。

3. controls和preload属性就会在下面提及。

4. 有方法可以让所有的浏览器支持video标签，具体参见我前面的“让所有浏览器支持HTML5 video视频标签”一文。

十八、视频预载(Preload Videos)

预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要?或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。

<video preload> 

请注意，不同浏览器渲染出来的进度条的模样都是不一样的。

二十、正则表达式

你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。

<form action="" method="get">    
  <label for="username">姓名:</label>    
  <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus />     
<button type="submit">提交</button> 
</form> 

如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。如下图所示。

我自己小测了下，貌似目前只在Chrome下有效(win系统)

注意到，我们已经开始组合使用这些很棒的属性。

如果您对正则表达式概念模糊了，可以参见这里。

二十一、属性支持检测

如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的Modernizr库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：

alert( 'pattern' in document.createElement('input') ); // boolean   

事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。

<script>if (!'pattern' in document.createElement('input') ) {    // do client/server side validation}  
</script> 

谨记此方法依赖于JavaScript。

表单允许新的必要属性，用来指定是否需要特殊的input。这取决于你的代码偏好，你可以以下面两种方式之一申明此属性。

<input type="text" name="someInput" required> 

或者，使用更结构化的方法：

<input type="text" name="someInput" required="required"> 

两种方法都行。有了这个代码，并且浏览器支持此属性，如果“someInput”文本框是空白，则表单不会被提交。下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。

<form action="" method="get">    
  <label for="name">姓名:</label>   
   <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />      
<button type="submit">提交</button></form> 

如果input里面内容是空白，则表单提交的时候，文本框会高亮显示。//zxx:貌似仅在Chrome浏览器下有点小效果

十五、Autofocus属性

同样，HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。

<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus> 

有趣的是，虽然我个人更倾向于喜欢XHTML的方法(用引号，等等)，写作“autofocus=autofocus”让人感到有点怪。因此，我们将坚持使用单一关键字的方法。

十六、Audio支持

我们无需再依赖第三方插件区渲染音频。HTML5提供了元素，嗯，至少，最终，我们将不必担心这些插件。就目前，只有最近期的的浏览器提供HTML5音频支持。在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。

<audio autoplay="autoplay" controls="controls">    
  <source src="file.ogg" />    
  <source src="file.mp3" />   
   <a href="file.mp3">Download this file.</a> 
</audio> 

Mozilla和WebKit的还没有完全相处，当涉及到音频格式， Firefox会希望看到一个.ogg文件，而WebKit的浏览器支持.mp3扩展。这意味着，至少在现在，你应该创建两个版本的音频。

当Safari加载页面时，它不会承认.ogg格式，会跳过它并移动到的MP3版本，因此。请注意IE，每往常一样，不支持这些格式，Opera 10和以及以下版本只能使用.wav文件。