HTML5学习笔记第一节（智能提示和视频音频标签）

来源：互联网发布：微信收红包网络出错编辑：程序博客网时间：2024/05/21 13:24

简介 ---------------------------------------------------------------------------------------------------------

我这里简单写一些，大家最好是在网上找一些看看，本节主要是界面VIdeo和Audio标签

View Code

HTML5 是下一代的 HTML。  什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。  HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。编者注：W3C 指 World Wide Web Consortium，万维网联盟。   编者注：WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。为 HTML5 建立的一些规则：  •新特性应该基于 HTML、CSS、DOM 以及 JavaScript。  •减少对外部插件的需求（比如 Flash）  •更优秀的错误处理  •更多取代脚本的标记  •HTML5 应该独立于设备  •开发进程应对公众透明  新特性HTML5 中的一些有趣的新特性：  •用于绘画的 canvas 元素  •用于媒介回放的 video 和 audio 元素  •对本地离线存储的更好的支持  •新的特殊内容元素，比如 article、footer、header、nav、section  •新的表单控件，比如 calendar、date、time、email、url、search  浏览器支持最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

复制代码

安装智能提示 -----------------------------------------------------------------------------------------------------------

智能提示是不能少的，对于大多数程序员来说这是很好的工具，大家参考一下吧

下载地址：http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d

下载完成后直接安装就行了，

然后对你的Vs2008/2010设置一下

工具---选项---文本编辑--HTml--验证，如下图片

然后就可以在输入时有提示了，这个就不演示了，因为这对于程序员来说是常识。呵呵

咱们先一起来看一下video标签吧，在我们开始之前先来看看都有那些浏览器支持它吧

当前，video 元素支持三种视频格式：

格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

一起来看看它都有那些属性吧

属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的视频的 URL。widthpixels

设置视频播放器的宽度。

下面咱们一起来看一个例子

<!DOCTYPE HTML><html><body>    <video   controls="controls" width="500" height="500">        <source src="video/123.mp4" type="video/mp4" />        当浏览器不支持此标签时显示我    </video></body></html>

复制代码

如果在Google浏览器上打开如下：

效果是不是很拉风啊

这样我们自己的电脑就不需要安装视频插件了，也不需要启动本机的视频播放器。

如果我们想实现这样的显示，当页面加载完成后，循环自动播放一个视频应该怎么做呢？

看下面的代码

<!DOCTYPE HTML><html><body>    <video  autoplay="autoplay" loop="loop" controls="controls" width="500" height="500">        <source src="video/123.mp4" type="video/mp4" />        当浏览器不支持此标签时显示我    </video></body></html>

复制代码

我们只是加了两个属性（autoplay="autoplay" loop="loop"），这样就会自动播放了，如果再把controls="controls"去掉的话，用户就不能手动关闭视频，只有关闭网页时才能关闭视频，

要不然就会一直重复的播放，这种显示其实很常用，比如广告和背景音乐。

我为什么把audio和Video放一起呢，那是因为他们两个的差别极下，看Audio的属性就明白了

属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的音频的 URL。

它只是比Video少了两个属性一个是高一个是长。

如果要设置背景音乐就可以这样做了。

    <audio autoplay="autoplay" loop="loop" controls="controls">        <source src="video/1.mp3" type="audio/mpeg">    </audio>

复制代码

好了，就到这里吧，很简单，其实HTMl更多的是标准，把我们经常用的一个插件使用标签来代替

-------------------------------------------------------------签名部分您可以不访问--------------------------------------------------------------

欢迎大家转载，如有转载请注明文章来自： http://sufei.cnblogs.com/

签名：做一番一生引以为豪的事业;在有生之年报答帮过我的人;并有能力帮助需要帮助的人;

软件开发，功能定制，请联系我给我留言 QQ:361983679 Email:sufei.1013@163.com MSN:sufei.1013@163.com