<!doctype html>

<html>

    <head>

        <style>

            /*

            *{border:1px solid red;height:20px}

            所有的HTML5结构标签本质上来说就是一个div标签，只不过有意义

            */

            /*页面头部 header*/

            header{height:150px;background:#ABCDEF}

            nav{height:30px;background:#ff9900;margin-top:100px}

            nav ul li{width:100px;height:30px;float:left;line-height:30px}

            /*页面中间 div */

            div{margin-top:10px;height:1000px;}

            section{height:1000px;background:#ABCDEF;width:70%;float:left}

            article{background:#F90;width:500px;margin:0 auto;text-align:center}

            aside{height:1000px;background:#ABCDEF;width:28%;float:right}

            /*页面底部 footer*/

            footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}

        </style>

    </head>

    <body>

        <header>

            <p>这是一个header标签</p>

            <nav>

                <ul>

                    <li>首页</li>

                    <li>起夜</li>

                    <li>论坛</li>

                    <li>商城</li>

                    <li>社区</li>

                </ul>

            </nav>

        </header>

        <div>

            <section>

                <p>这是一个section标签</p>

                <article>

                    <h2>春晓</h2>

                    <p>

                    春眠不觉晓，<br />

                    处处蚊子咬，<br />

                    打上敌敌畏，<br />

                    不至死多少。<br />

                    </p>

                </article>

                <hr />

                <article>

                    <h2>上学歌</h2>

                    <p>

                    太阳当空照，<br />

                    花儿对我笑，<br />

                    小鸟说早早早，你为什么背上小书包?<br />

                    我要炸学校老师不知道，一拉线，赶快跑，<br />

                    轰的一声，学校炸没了。<br />

                    </p>

                </article>

                <hr />

                <figure>

                    <figcaption>UFO</figcaption>

                    <p>不明飞行物 Unknown Flying Object</p>

                </figure>

                <figure>

                     <dt>DDS</dt>

                     <dd>大屌丝</dd>

                </figure>

                <hr />

                <dialog>

                    <dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt>

                    <dd>悟空:...(看着)</dd>

                    <dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>

                    <dd>悟空:...(纠结)</dd>

                    <dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。</dt>

                    <dd>悟空:我靠!(一棍子抡上去！)</dd>

                </dialog>

                <hr />

                <menu>

                    <li>点击</li>

                    <li>右键单击</li>

                </menu>

                <hr />

                <span contextmenu="candan">右键单击我试试</span>

                <menu type="context" id="candan">

                    <menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/
img/baidu_sylogo1.gif"></menuitem>

                </menu>

                <hr />

                <meter min="0" max="10" value="5" low="3" high="7" ></meter>

                <progress max="100" value="0" id="pro"></progress>

                <script>

                    var pro =document.getElementById('pro');

                    setInterval(function(){

                        pro.value+=1;

                    },100);

                </script>

                <hr />

                <details>

                    <dt>这是一个问题？</dt>

                    <dd>to be or not to be</dd>

                    <dt>这是一个问题？</dt>

                    <dd>to be or not to be</dd>

                    <dt>这是一个问题？</dt>

                    <dd>to be or not to be</dd>

                </details>

                <hr />

                <ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>

                <hr />

                女人<mark>最喜欢做的事情</mark>就是逛街

            </section>

            <aside>

                <p>这是一个aside标签</p>

                <hgroup>

                    <h3>女生宿舍为何频频被盗</h3>

                    <h3>两百头母猪为何半夜惨死</h3>

                    <h3>是人性的扭曲？</h3>

                    <h3>还是道德的沦丧！</h3>

                </hgroup>

            </aside>

        </div>

        <footer>

            <p>这是一个footer标签</p>

            <hr />

            <small>法律条文</small>

            <small>联系我们</small>

            <small>客户意见</small>

            <small>商户合作</small>

        </footer>

    </body>

</html>

下面是video标签的应用：

<!doctype html>

<html>

    <head></head>

    <body>

        <!--<video src="movie.webm" controls="controls">

            您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。

        </video>

        <hr />

        多资源的视频播放

        <video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg">

            <source src="movie.ogg" type="video/ogg" />

            <source src="movie.webm" type="video/webm" />

            您的浏览器不支持视频标签，还不赶快升级。

        </video>-->

        <hr />

        使用以下VIDEO标签的API<br />

        <video src="movie.webm" controls="controls" id="video">

            您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。

        </video>

        <br />

        <button onclick="bofang()">播放</button>

        <button onclick="zanting()">暂停</button>

        <button onclick="kuaijin()">快进10秒</button>

        <button onclick="kuaitui()">快退10秒</button>

        <button onclick="shutup(this)">闭嘴</button>

        <button onclick="soso()">加速播放</button>

        <button onclick="yu()">减速播放</button>

        <button onclick="normal()">正常播放</button>

        <button onclick="upper()">提高嗓门</button>

        <button onclick="lower()">降低嗓门</button>

        <script>

            //获取对应的video标签

            var video=document.getElementById('video');

            //播放方法

            function bofang(){

                video.play();

            }

            //暂停方法

            function zanting(){

                video.pause();

            }

            //快进10秒

            function kuaijin(){

                video.currentTime+=10;//相当于video.currentTime=video.currentTime+10

            }

            //快退10秒

            function kuaitui(){

                video.currentTime-=10;

            }

            //静音按钮

            function shutup(obj){

                if(video.muted){

                    obj.innerHTML="闭嘴";

                    video.muted=false;

                }else{

                    obj.innerHTML="张嘴";

                    video.muted=true;

                }

            }

            //加速播放(3倍速度)

            function soso(){

                video.playbackRate=3;

            }

            //慢速播放(慢三倍)

            function yu(){

                video.playbackRate=1/3;

            }

            //正常倍速

            function normal(){

                video.playbackRate=1;//默认的播放倍速是1

            }

            //调高声音

            function upper(){

                video.volume+=0.2;//声音值的范围是0-1

            }

            //调低声音

            function lower(){

                video.volume-=0.2;

            }

        </script>

        <hr />

        音频标签的使用<br />

        <audio src="我的好兄弟.mp3" controls="controls">

            您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？

        </audio>

    </body>

</html>

HTML5标签应用的更多相关文章

  1. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  2. HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

    (1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...

  3. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

  4. [js开源组件开发]html5标签audio的样式更改

    html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...

  5. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  6. 是时候全面使用html5标签了

    html5,这个词语,不管是业内还是业外,都已经耳熟能详了.因为已经火了这么长的的时间了.但是,真正开始使用的又有多少人呢?只能用呵呵来形容了! html5真的来了 2014年10月28日,历经八年, ...

  7. 关于HTML5标签不兼容(IE6~8)

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 比较常用的HTML5的新标签元素有: <hea ...

  8. HTML5标签一览

    HTML5标签一览,点击下载 访问密码:1907

  9. html5标签兼容ie6，7，8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  10. 在IE6/7/8下识别html5标签

    识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...

随机推荐

  1. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  2. android studio 框架搭建：加入注解框架Annotations

    参考github上的demo,新建一个project后,会有一个位于app文件夹下的局部build.gradle文件和一个位于根目录project下的全局build.gradle文件,我们要修改的是局 ...

  3. CF 305B——Continued Fractions——————【数学技巧】

    B. Continued Fractions time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  4. js 用简单案例举模态对话框弹出

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. ubuntu命令行添加拥有管理员权限新用户

    最近买了个服务器,只有一个root用户,天天登录挺不方便的,所以想要新建用户;之前在本地都是用界面话新建的用户,这次记录一下学习命令行新建用户的过程: 第一步 : # sudo adduser zhq ...

  6. C# 使用cookie实现登录

    首先,我们需要做的是什么? 我们成功登录之后,跳转到主界面,然后主界面的登录按钮变成头像啥的.下一次打开网页就要判断有没有登录过,有cookie就不需要登录,直接显示头像 1.成功登录后,客户端请求服 ...

  7. ASP.NET复习笔记（1）

    今天是个好日子,伴着早上八点的朝阳,我背上书包,提上电脑,带上一根网线,风风火火的冲向教室,因为,我终于想好博客内容写啥了——这不是快期末了么,我就写复习,虽然有些课程还没讲完,但并不影响我做复习,正 ...

  8. 08.StreamReader和StreamWrite的学习

    StreamReader和StreamWrite是用来操作字符的 namespace _21.对StreamReader和StreamWriter的学习 { class Program { stati ...

  9. 1.net平台

    .net/dotnet:一般指的是.Net Framework框架,是一种平台,一种技术.   .net Framewoek框架是.net平台不可缺少的一部分,它提供了一个稳定的运行环境来保证.net ...

  10. 《Unity Shader入门精要》读书笔记（1）

    主要是对第二章的整理 渲染流水线:由一个三维场景出发,生成(渲染)一张二维图像. 渲染流程:应用阶段.几何阶段.光栅化阶段. 应用阶段: 1. 把数据加载到显存中 渲染所需数据从硬盘,到内存,再到显存 ...