html5代码经典实例(html5基础代码)

今天给各位分享html5代码经典实例的知识，其中也会对html5基础代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何用HTML5在页面中插入可自动播放的视频
• 2、html5几种在客户端存储数据的实例详解
• 3、html5页面如何实现点击复制的功能(完整代码)
• 4、如何用HTML5操作WebSQL数据库

如何用HTML5在页面中插入可自动播放的视频

在HTML5中新增了，两个标签来插入音频和视频。

纯H5页面在手机端中是无法实现自动播放，移动端浏览器大部分是禁用video和audio的autoplay功能并且，很多移动浏览器也不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。

浏览器将使用第一个可识别的格式，这样我们只要多准备几个不同格式的视频就可以了。

新建一个文件夹，将mp4格式的视频放入文件夹下。请点击输入图片描述 2 打开dw软件，我们点击新建，页面类型选择html，文件类型选择html5 格式。选择完成后点击创建。

如图，在项目文件中放置mp4格式的视频，因为H5只支持这类视频，avi格式的不可以。然后在自己的HTML编辑软件建一个HTML5的文件，这里就用Hbuilder建立了。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。

html5几种在客户端存储数据的实例详解

Application CacheHTML5引入应用缓存，意味着web应用可以进行缓存，即使在没有网络的情况下也能使用。

关系数据库，通过SQL语句访问 Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

HTML5 提供了两种在客户端存储数据的新方法：..两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；localStorage - 没有时间限制的数据存储，第二天、第二周或下一年之后，数据依然可用。

html5页面如何实现点击复制的功能(完整代码)

1、clipboard API 具体的文档查看如上，文章中有个实例，获取页面中元素的信息粘贴到剪切板。

2、type=button onclick=copyToClipboard()； value=复制代码 这里放上你的文本域 命名ID为source 问题是，除了IE外，其它所有浏览器均不支持复制，不是该方法不支持，是除IE外其它均无法实现复到到剪切板功能。

3、具体方法有下：假如表单是整个页面的第一个表单。在页面的地址栏里输入：javascript：document.forms[0].target=_blankvoid(0)；按下回车。之样点提交之后就是新窗口啦！将页面源代码复制保存到c.html里。

4、首先建立一个父级页面parent.html，代码如图，一个pop函数方法，一个链接到child.html的iframe标签。

5、复制代码 代码如下：link rel=prerenderhref=http：//blog.wpjam.com// 注意，目前 Chrome 支持这个功能。

6、通过使用HTML5的拖放功能我们可以拖放HTML页面元素。在上一篇文章中，我们介绍了有关于可以拖放单个元素的代码。在接下来的这篇文章中，我们将来介绍关于允许拖放多个元素的代码。

如何用HTML5操作WebSQL数据库

openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。transaction：这个方法允许我们根据情况控制事务提交或回滚。executeSql：这个方法用于执行真实的SQL查询。

Web SQL 关系数据库，通过SQL语句访问Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

Application CacheHTML5引入应用缓存，意味着web应用可以进行缓存，即使在没有网络的情况下也能使用。

关于html5代码经典实例和html5基础代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。