html 5学习-audio标签插入音乐

作者：寒川 发布于：2010-6-22 9:59 Tuesday 分类：网页编程

昨天学习了html 5中插入视频的audio标签，详见《html 5学习-video标签插入视频 》，今天翻开html 5手册，学习学习audio标签插入音乐。<audio>标签也是html 5新增的标签，用于定义声音，比如音乐或其他音频流。因此之前的html版本是没啥用处的。其基本用法：<audio src="music.wav">您的浏览器不支持 audio 标签，赶快升级吧。</audio>

 

属性 值 说明
autoplay true | false 如果是 true，则音频在就绪后马上播放。
controls true | false 如果是 true，则向用户显示控件，比如播放按钮。
end numeric value 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。
loopend numeric value 定义在音频流中循环播放停止的位置，默认是 end 属性的值。
loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount numeric value 定义音频片断播放多少次。默认是 1。
src url 所播放音频的 url。
start numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。

有朋友说希望能给出演示，这要咋演示呢？下载个支持html 5的浏览器就可以测试了，据我所知，目前支持或部分支持html 5的浏览器主要有：Opera，Chrome ，IE9，Safari。

ps：IE9是不支持xp系统的哦。。。。


 

标签: html html 5 video标签 audio标签 网络编程

评论(2) 引用(0) 浏览(1585)

html读取xml并分页显示

作者：寒川 发布于：2010-5-27 14:13 Thursday 分类：网页编程

下面这个html读取xml并分页显示的例子，是给别人做作业的时候写的（靠，这小子太懒了，居然找人做考试题）。例子如下：
data.xml文件如下:
<?xml version="1.0" encoding="gb2312"?>
<通讯录>
<学生 学号="S101">
<姓名>李正如</姓名>
<地址>合肥市</地址>
<QQ>666666</QQ>
<专业>计算机</专业>
</学生>
<学生 学号="S102">
<姓名>张广平</姓名>
<地址>滁州市</地址>
<QQ>888888</QQ>
<专业>计算机</专业>
</学生>
<学生 学号="S103">
<姓名>陈艳</姓名>
<地址>铜陵市</地址>
<QQ>111111</QQ>
<专业>网络</专业>
</学生>
<学生 学号="S104">
<姓名>李强</姓名>
<地址>郑州市</地址>
<QQ/>
<专业>网络</专业>
</学生>
</通讯录>

data.html文件如下:
<html>
<head>
<title>通讯录</title>
<xml src="data.xml" id="xmldso" async="false"></xml>
</head>
<body>
<table id="tb2" datasrc="#xmldso" width="100%" border="1" datapagesize="3" > 
<thead> 
<th>学号</th> 
<th>姓名</th> 
<th>地址</th> 
<th>QQ</th>
<th>专业</th>  
</thead> 
<tr align="left">
<td><span datafld="学号"></span></td> 
<td><span datafld="姓名"></span></td> 
<td><span datafld="地址"></span></td> 
<td><span datafld="QQ"></span></td> 
<td><span datafld="专业"></span></td> 
</tr></table>   
<INPUT TYPE="button" VALUE="第一页" ONCLICK='document.getElementById("tb2").firstPage();'> 
<INPUT TYPE="button" VALUE="前一页" ONCLICK='document.getElementById("tb2").previousPage();'> 
<INPUT TYPE="button" VALUE="后一页" ONCLICK='document.getElementById("tb2").nextPage();'> 
<INPUT TYPE="button" VALUE="最后一页" ONCLICK='document.getElementById("tb2").lastPage();'> 
</body> 
</html> 

标签: html xml 分页

评论(3) 引用(0) 浏览(1956)

Google Font API打造美轮美奂的网页字体

作者：寒川 发布于：2010-5-25 13:13 Tuesday 分类：网页编程

    不得不佩服Google公司的想象力及其称霸IT行业的野心。光Google的软件都好多，开源API更多，所涉及的行业也不局限于IT，目光之远大，雄心勃勃！扯远了~~~。

    今天上CSDN的时候看到篇《Google Web 字体 API 访谈》的博文，顺着线索找到Google Font API，试用了一下，感觉确实不错，不过真担心要是网上所有网页都采用他提供的API的话，他们服务器承受得了这么多用户么？这下web字体设计就不用那么纠结了，呵呵~下面给个Google字体API的实例，有兴趣的朋友一起研究研究：
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine ">
    <style>
 h1 {
        font-family: 'Tangerine',serif;
        font-size: 48px;
      }
    body {
        font-family: '微软雅黑',serif;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <h1>Very Good！很好！</h1>
 Very Good！很好！
  </body>
</html>

标签: html 编程 google api font 字体

评论(7) 引用(0) 浏览(1338)

网页编程之针对html源码的搜索引擎优化(SEO)建议

作者：寒川 发布于：2010-5-9 9:48 Sunday 分类：网页编程

在对html源码搜索引擎优化(SEO)之前，先来看看如下一个典型的html源码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv=Content-Language content=zh-cn>
<title>网页标题</title>
<meta name="keywords" content="关键词一,关键词二">
<meta name="description" content="页面描述">
<link href="style/css.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>
<h1>页面内容标题</h1>
<h2>页面相关性标题（副标题）</h2>
<h3>标题系列</h3>
<h4>标题系列</h4>
<h5>标题系列</h5>
<h6>标题系列</h6>
<img src="images/picture.gif" alt="图片说明">
<a href="./" title="链接说明">链接</a>
<strong>重点关键词强调</strong>
<b>关键词强调</b><u>关键词强调</u><i>关键词强调</i>
</div>
<div>
版权信息</div>
</body>
</html>
在源码中，个关键标签重要性依次如下：
title标签：这里的内容及其重要，可以说这里字字值千金！想做到排名靠前，这儿优化是必不可少的。
meta标签的keywords：重要，不过网上说貌似权重越来越低，但是我个人认为还是重要的，关键词度别太多，且每个页面最好别写成一样，避免搜索引擎认为是重复页面。
meta标签的description：重要，不过网上说不太受重视，自己拿主意。
h1标签：非常重要，是搜索引擎定位此页面的主要依据，且里面应该出现关键词。重要性仅次于title标签。

h2~h6要性是依次递减的，h2是比较重要的，其他的讲究吧。
img标签的alt：尽量写上吧，比较重要的。
a标签的title：重要，尤其是google。
strong标签：重要性仅低于h1，看来以后得注意这方面的优化了。

标签: html 编程 优化 seo

评论(0) 引用(0) 浏览(1463)

gb2312编码页面post到utf-8页面乱码解决方案

作者：寒川 发布于：2010-4-22 16:23 Thursday 分类：网页编程

说实话，要是所有网站都采用统一编码，根本就不会出现这样或那样的编码问题，不过现在的问题是既然已经存在了n种编码了，总得想办法解决吧。由于目前国内gb2312、utf-8的编码网站较多（big5等忽略不计），当想gb2312从页面提交表单至utf-8时，问题就来了。解决方案：
在gb2312页面的form中添加：accept-charset="utf-8" onsubmit="document.charset='utf-8';"，如：
<form method="post" action="2.php" accept-charset="utf-8" onsubmit="document.charset='utf-8';">
这样一来，ie、ff、opera、google等主流浏览器都欣然接受了。但是当提交后直接后退这又出现新问题了，form页面变成乱码，别怕，再在gb2312页面的<head></head>之间加上如下代码：
<script>
if(document.charset!="gb2312" && navigator.userAgent.indexOf("MSIE")>0){
       window.location.reload();
}
</script>
至此，问题得以完美解决。

标签: html 编程 web 编码

评论(7) 引用(0) 浏览(1751)

xhtml页面中用什么来替换marquee标签

作者：寒川 发布于：2010-3-29 19:59 Monday 分类：网页编程

众所周知，w3c从来就没承认marquee标签，当然，w3c不承认并不是说marquee标签不能使用。虽然marquee是微软的产物，但是众多浏览器都支持它，而且很多html新手也对marquee喜欢有佳。将marquee放到页面中也无可厚非，但是当页面提交给w3c验证的时候很明显是不受欢迎的，看着心里总有个疙瘩。如何能在xhtml标准页面中出现移动字体呢？
方法如下：
1、建一个js文件，命名为marquee.js，代码如下：
function getElementsByClass(searchClass,tagName) {
 var classElements = new Array();
 if ( tagName == null )
  tagName = '*';
 var els = document.getElementsByTagName(tagName);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
 for (i = 0, j = 0; i < elsLen; i++) {
  if ( pattern.test(els[i].className) ) {
   classElements[j] = els[i];
   j++;
  }
 }
 return classElements;
}
 
function ccMarquee(className){
 var a=getElementsByClass(className);
 for (i = 0; i < a.length; i++) {
  a[i].innerHTML="<marquee direction='up' width='264' height='120' scrollamount='2' onmouseover='javascript:this.stop();' onmouseout='javascript:this.start();'>"+ a[i].innerHTML+"</marquee>";
 }
}window.onload = function () {
 ccMarquee("ccMarquee");
}
2、在欲使用marquee的页面head中调用js，如下：
<script type="text/javascript" src="marquee.js"></script>
3、在要marquee的页面的div中加入class="ccMarquee"，如下：
<div class="ccMarquee">
这儿是向上移动的文字。
 </div>
现在页面再给w3c验证，看看是不是通过了呢？呵呵。。

标签: html 脚本 编程 w3c

评论(3) 引用(0) 浏览(2113)

批量设置连接在新窗口打开

作者：寒川 发布于：2010-3-4 13:22 Thursday 分类：网页编程

今天遇到个问题，需要使框架中的链接在新窗口中打开，但是被嵌入的框架页面中连接n多，有没有个简单的代码一下就搞定呢？其实很简单，在被嵌入框架的页面的<head></head>之间加入<base target=”_blank”>，问题就解决了。呵呵，这些再简单不过的东西可不能忘记了啊。

标签: html 脚本 编程 web it

评论(0) 引用(0) 浏览(1577)

Powered by emlog 沪ICP备09072012号