<!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. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  2. HDU 5313——Bipartite Graph——————【二分图+dp+bitset优化】

    Bipartite Graph Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  3. Starting MySQL. ERROR! The server quit without updating PID file如何解决

    今天数据库突然挂了.重启提示: Starting MySQL. ERROR! The server quit without updating PID file (/usr/local/mysql/v ...

  4. js把数据处理成钱的格式

    1.var Rmoney = parseFloat(money).toFixed(2);//把money处理成保存2位小数的格式

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

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

  6. Hibernate中的session的线程安全问题

    SessionFactory的实现是线程安全的,多个并发的线程可以同时访问一 个SessionFactory并从中获取Session实例, 而Session不是线程安全的,Session中包含了数 据 ...

  7. 科学计算基础包——Numpy

    一.NumPy简介 NumPy是高性能科学计算和数据分析的基础包.它是pandas等其他各种工具的基础. 1.NumPy的主要功能 (1)ndarray:一个多维数组结构,高效且节省空间. (2)无需 ...

  8. MicroService

  9. Java NIO（四） Scatter/Gather

    Java NIO开始支持scatter/gather,scatter/gather用于描述从Channel(译者注:Channel在中文经常翻译为通道)中读取或者写入到Channel的操作.分散(sc ...

  10. java中什么是上下文（servletContext）

    找了很多大佬的博客,看了之后还不是很清楚上下文到底是怎么回事,我个人理解 所谓上下文,它是用来存储系统的一些初始化信息,例如在jboss中通过配置文件指定了数据源,那么在jboss启动的时候就把这个文 ...