HTML5新特性学习-1

本文在于巩固基础

新特性:音频的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>播放音乐</title>
    <link rel="stylesheet" type="text/css" href="Css/myCss.css"/>
    <script src="Script/jquery-2.1.1.min.js"></script>
</head>
<body>
<div>
    <h1>音乐播放</h1>

    <div>
        <button id="btn" onclick="clickMe()">播放/暂停</button>
        <audio id="audio" src="Source/Happiness.mp3" controls="controls"></audio>

    </div>

</div>
<script type="text/javascript" src="Script/myScript.js"></script>
</body>
</html>
/**
 * Created by Administrator on 2015/3/5 0005.
 */
function clickMe()
{
        //$("#btn").css("background","red");
       //$("#audio").css("background","red");
        if($("#audio").get(0).paused)
        {

            $("#audio").get(0).play();
        }
        else
        {
            $("#audio").get(0).pause();
        }

}
时间: 2024-10-10 16:51:34

HTML5新特性学习-1的相关文章

HTML5新特性学习-2

本文在于巩固基础 HTML5绘图基础 <canvas>画布元素的使用 <div> <canvas id="can" width="200px" height="200px"></canvas> </div> $(document).ready(function(){ //document.getElementById("can")'' var context=docu

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

HTML5新特性data_*自定义属性使用

HTML5 新特性data_*自定义属性使用HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单,就是你可以往 HTML 标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用 data-* 可以解决自定义属性混乱无管理的现状.

spring4.0.6最新稳定版新特性学习,简单学习教程(一)

Spring Framework 4.0 学习整理. Spring框架的核心部分就是Ioc容器,而Ioc控制的就是各种Bean,一个Spring项目的水平往往从其XML配置文件内容就能略知一二,很多项目,往往是外包公司的项目,配置文件往往是乱七八糟,抱着能跑就行,不报错就行的态度去写,然后在项目中后期发现各种缺失又去一通乱补,其结果就是,整个文档可读性极差,毫无章法.这也不能怪写这个XML的人,拿着苦逼程序员的工资干着架构师的工作必然是这个结果.为了程序员的幸福,我认为有必要来一套简单快速的官方

Html5新特性 &lt;canvas&gt;画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

ASP.NET5和MVC6新特性学习

ASP.NET5和MVC6新特性学习 ? ? ASP.NET5和MVC6的新特性 在新版ASP.NET5和MVC6中,有很多变化,有些是彻底的变化,比如在最底层支持依赖注入技术,为了方便了解,我们这里列出了最重要的10大变化,以便进行学习,具体如下: ASP.NET 5现在已经是跨平台了,可以在Mac和Linux上运行. 不再有Web Forms框架了. 只支持C#,不在支持VB.NET了.(貌似最近又听说最终版VB.NET又要支持了) 新的Tag语法,@Html.LabelFor或Html.T

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明