<!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. ArcGIS发布地图服务后直接调用查看方法

    做项目配置了一个地理底图,不知道有没有问题,如何给到客户查看并确认呢? 首先在ArcGIS上发布该地图: 打开地图后->文件->共享为->服务…… 发布成功后,得到可以访问的地图服务 ...

  2. 白话SpringCloud | 第四章：服务消费者(RestTemple+Ribbon+Feign)

    前言 上两章节,介绍了下关于注册中心-Eureka的使用及高可用的配置示例,本章节开始,来介绍下服务和服务之间如何进行服务调用的,同时会讲解下几种不同方式的服务调用. 一点知识 何为负载均衡 实现的方 ...

  3. ThenJS

    安装ThenJs:  npm i thenjs 史上最快,与 node callback 完美结合的异步流程控制库 <!doctype html> <html lang=" ...

  4. （三）HTML中的列表标签、框架集及表单标签

    一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> ...

  5. Web程序中使用EasyUI时乱码问题

    今天偶然遇见使用easyUI时,弹窗和分页都是乱码的问题,耗费了很长的时间来解决,以此记住这个坑. 相信大家都会在使用easyUI时都会设置这样一句: 那么就有可能出现设置中文后的乱码问题,如下图: ...

  6. for循环的几种比较

    对一个集合遍历的3种方法:1.for(int i=0;i<list.size();i++) 2.for(int i=0,len=list.size();i<len;i++) 3.for ( ...

  7. vue+axios+easy-mock+element-ui实现表格分页功能

    废话不多,效果如图: LineSource.vue文件内代码如下: <template> <div class="c-main auth userControl" ...

  8. 关于Java中的线程安全（线程同步）

    java中的线程安全是什么: 就是线程同步的意思,就是当一个程序对一个线程安全的方法或者语句进行访问的时候,其他的不能再对他进行操作了,必须等到这次访问结束以后才能对这个线程安全的方法进行访问 什么叫 ...

  9. java 理解有符号数和无符号数

    转至:http://jinguo.iteye.com/blog/212049 理解有符号数和无符号数负数在计算机中如何表示呢? 这一点,你可能听过两种不同的回答. 一种是教科书,它会告诉你:计算机用“ ...

  10. 大数据的正确用法你get到了吗？

    Azure 镜像市场已于2016年9月21日正式上线,在这个统一的集成平台中,客户可以轻松地浏览.搜索和选择一系列来自第三方的应用和解决方案,并可以将其快速一键部署到 Azure 实例当中. 在移动为 ...