<!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. AutoMagic自动化测试平台简介

    PS:给想做自动化平台同学一点思路. AutoMagic 是一个基于WebUI的自动化管理平台.为什么叫AutoMagic呢?因为自动化(Automation)在执行起来的时候是一个很神奇的事情,它可 ...

  2. BNU4299——God Save the i-th Queen——————【皇后攻击，找到对应关系压缩空间】

    God Save the i-th Queen Time Limit: 5000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      ...

  3. 修改K3数据是简介方法

    如  及时库存里有个别产品库存没有库位  是*号的 这个时候  我们创建一个其他出库单,把这个没有库位的产品输入进去,库位随便写个 如002 保存,审核不了的  会提示负库存 去后台找到此单据号 修改 ...

  4. 写一个安全的Java单例

    单例模式可能是我们平常工作中最常用的一种设计模式了.单例模式解决的问题也很常见,即如何创建一个唯一的对象.但想安全的创建它其实并不容易,还需要一些思考和对JVM的了解. 1.首先,课本上告诉我,单例这 ...

  5. spynner解析中文页面，应该显示中文字符的地方都是？的解决方案

    这个是底层的QtWebKit相关库里 用的是Qt的QString spynner在将QString转为Python的通用字符串时,没有考虑到中文编码这一块的问题. Python27\Lib\site- ...

  6. 天气小雨, 心情多云, 练习标准的键盘ABC打法

    今天看到饿了么转型生活做千亿美元公司 突然想到一些就写下来 当时外卖一份8元 10元的年代那个开心啊 很久以前宁可跑个远, 都不愿意叫外卖 叫了大概1年的外卖了, 之前还感到便宜多样, 现在感觉到的是 ...

  7. java中try-catch-finally中的return语句

    在try-catch-finally语句中使用return语句遇到了一些疑问 代码一: static int intc(){ int x =0; try{ x=1; return x; }finall ...

  8. maven项目的创建

    ·做了两年多Java Web一多半的项目都是SSM架构的,只搭建过两次,趁着周末做个总结整理. Eclipse搭建Maven项目 1.new project  --> Maven project ...

  9. Node 的fs模块

    这个fs.readdir路径要加上__dirname  找到绝对路径  否则会报错 { Error: ENOENT: no such file or directory, scandir '/User ...

  10. Jmeter使用CSV Data Set Config参数化数据不重复的多次循环执行（实现多用户多次抽奖功能）

    Jmeter中使用CSV Data Set Config参数化不重复数据执行N遍 要求: 今天要测试上千条数据,且每条数据要求执行多次,(模拟多用户多次抽奖) 1.用户id有175个,且没有任何排序规 ...