<!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. 01-spring配置详解

    1 bean元素 <!--将User对象交给spring容器进行管理 --> <!-- Bean元素:使用该元素描述需要spring容器管理的对象 class属性:被管理对象的完整类 ...

  2. 10 Linux DIG Command Examples for DNS Lookup--reference

    by RAMESH NATARAJAN on FEBRUARY 29, 2012 http://www.thegeekstuff.com/2012/02/dig-command-examples/ D ...

  3. nyoj 1197——你会加吗？——————【快速幂、分治】

    你会加吗? 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 给出两个整数A和N,计算(A + A^2 + A^3 + …… + A^(N - 1) + A^N)% 6 ...

  4. linux服务器git pull/push时避免频繁输入账号密码

    1.先cd到根目录,执行git config --global credential.helper store命令 [root@iZ25mi9h7ayZ ~]# git config --global ...

  5. 7、侧边栏：Menu

    1.单个侧边栏 导航的代码在分析源码的时候已经分析过了,下面只看他的一些应用与方法. /* ---示例代码----*/ <ion-menu [content]="mycontent&q ...

  6. linux服务器时间自动同步

    最常用的是 rdate 服务 安装(centOs为例): yum install -y rdate 用法: rdate -s time-b.nist.gov 执行完以上方法时间就同步了.有的服务器隔一 ...

  7. WPF的项目，ListBox 纵向滚动条不显示

    最近在做WPF的项目,ListBox 纵向滚动条不显示,但是鼠标滚轮可以在ListBox中使用,但是必须要出现纵向滚动条.  索性就直接在listBox外面包裹一个ScrollViewer. Scro ...

  8. SharePoint 2013 - System Features

    1. Embed Information & Convert to PDF 功能,在文档的preview界面(hover panel); 2. Share功能可以选择是否发送邮件 -- Don ...

  9. matlab练习程序（演化策略ES）

    还是这本书上的内容,不过我看演化计算这一章是倒着看的,这里练习的算法正好和书中介绍的顺序是相反的. 演化策略是最古老的的演化算法之一,和上一篇DE算法类似,都是基于种群的随机演化产生最优解的算法. 算 ...

  10. Browser进程和浏览器内核（Renderer进程）的通信过程

    看到这里,首先,应该对浏览器内的进程和线程都有一定理解了,那么接下来,再谈谈浏览器的Browser进程(控制进程)是如何和内核通信的, 这点也理解后,就可以将这部分的知识串联起来,从头到尾有一个完整的 ...