1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <style>
  5.             /*
  6.             *{border:1px solid red;height:20px}
  7.             所有的HTML5结构标签本质上来说就是一个div标签，只不过有意义
  8.             */
  9.             /*页面头部 header*/
  10.             header{height:150px;background:#ABCDEF}
  11.             nav{height:30px;background:#ff9900;margin-top:100px}
  12.             nav ul li{width:100px;height:30px;float:left;line-height:30px}
  13.             /*页面中间 div */
  14.             div{margin-top:10px;height:1000px;}
  15.             section{height:1000px;background:#ABCDEF;width:70%;float:left}
  16.             article{background:#F90;width:500px;margin:0 auto;text-align:center}
  17.  
  18.             aside{height:1000px;background:#ABCDEF;width:28%;float:right}
  19.             /*页面底部 footer*/
  20.             footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <header>
  25.             <p>这是一个header标签</p>
  26.             <nav>
  27.                 <ul>
  28.                     <li>首页</li>
  29.                     <li>起夜</li>
  30.                     <li>论坛</li>
  31.                     <li>商城</li>
  32.                     <li>社区</li>
  33.                 </ul>
  34.             </nav>
  35.         </header>
  36.         <div>
  37.             <section>
  38.                 <p>这是一个section标签</p>
  39.                 <article>
  40.                     <h2>春晓</h2>
  41.                     <p>
  42.                     春眠不觉晓，<br />
  43.                     处处蚊子咬，<br />
  44.                     打上敌敌畏，<br />
  45.                     不至死多少。<br />
  46.                     </p>
  47.  
  48.                 </article>
  49.                 <hr />
  50.                 <article>
  51.                     <h2>上学歌</h2>
  52.                     <p>
  53.                     太阳当空照，<br />
  54.                     花儿对我笑，<br />
  55.                     小鸟说早早早，你为什么背上小书包?<br />
  56.                     我要炸学校老师不知道，一拉线，赶快跑，<br />
  57.                     轰的一声，学校炸没了。<br />
  58.                     </p>
  59.  
  60.                 </article>
  61.                 <hr />
  62.                 <figure>
  63.                     <figcaption>UFO</figcaption>
  64.                     <p>不明飞行物 Unknown Flying Object</p>
  65.                 </figure>
  66.                 <figure>
  67.                      <dt>DDS</dt>
  68.                      <dd>大屌丝</dd>
  69.                 </figure>
  70.                 <hr />
  71.                 <dialog>
  72.                     <dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt>
  73.                     <dd>悟空:...(看着)</dd>
  74.                     <dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>
  75.                     <dd>悟空:...(纠结)</dd>
  76.                     <dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。</dt>
  77.                     <dd>悟空:我靠!(一棍子抡上去！)</dd>
  78.                 </dialog>
  79.                 <hr />
  80.                 <menu>
  81.                     <li>点击</li>
  82.                     <li>右键单击</li>
  83.                 </menu>
  84.                 <hr />
  85.                 <span contextmenu="candan">右键单击我试试</span>
  86.                 <menu type="context" id="candan">
  87.                     <menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/
    img/baidu_sylogo1.gif"></menuitem>
  88.                 </menu>
  89.                 <hr />
  90.                 <meter min="0" max="10" value="5" low="3" high="7" ></meter>
  91.                 <progress max="100" value="0" id="pro"></progress>
  92.                 <script>
  93.                     var pro =document.getElementById('pro');
  94.                     setInterval(function(){
  95.                         pro.value+=1;
  96.                     },100);
  97.                 </script>
  98.                 <hr />
  99.                 <details>
  100.                     <dt>这是一个问题？</dt>
  101.                     <dd>to be or not to be</dd>
  102.                     <dt>这是一个问题？</dt>
  103.                     <dd>to be or not to be</dd>
  104.                     <dt>这是一个问题？</dt>
  105.                     <dd>to be or not to be</dd>
  106.                 </details>
  107.                 <hr />
  108.                 <ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
  109.                 <hr />
  110.                 女人<mark>最喜欢做的事情</mark>就是逛街
  111.  
  112.             </section>
  113.             <aside>
  114.                 <p>这是一个aside标签</p>
  115.                 <hgroup>
  116.                     <h3>女生宿舍为何频频被盗</h3>
  117.                     <h3>两百头母猪为何半夜惨死</h3>
  118.                     <h3>是人性的扭曲？</h3>
  119.                     <h3>还是道德的沦丧！</h3>
  120.                 </hgroup>
  121.             </aside>
  122.         </div>
  123.         <footer>
  124.             <p>这是一个footer标签</p>
  125.             <hr />
  126.             <small>法律条文</small>
  127.             <small>联系我们</small>
  128.             <small>客户意见</small>
  129.             <small>商户合作</small>
  130.         </footer>
  131.     </body>
  132. </html>

下面是video标签的应用：

  1. <!doctype html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <!--<video src="movie.webm" controls="controls">
  6.             您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
  7.         </video>
  8.         <hr />
  9.         多资源的视频播放
  10.         <video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
  11.             <source src="movie.ogg" type="video/ogg" />
  12.             <source src="movie.webm" type="video/webm" />
  13.             您的浏览器不支持视频标签，还不赶快升级。
  14.         </video>-->
  15.         <hr />
  16.         使用以下VIDEO标签的API<br />
  17.         <video src="movie.webm" controls="controls" id="video">
  18.             您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
  19.         </video>
  20.         <br />
  21.         <button onclick="bofang()">播放</button>
  22.         <button onclick="zanting()">暂停</button>
  23.         <button onclick="kuaijin()">快进10秒</button>
  24.         <button onclick="kuaitui()">快退10秒</button>
  25.         <button onclick="shutup(this)">闭嘴</button>
  26.         <button onclick="soso()">加速播放</button>
  27.         <button onclick="yu()">减速播放</button>
  28.         <button onclick="normal()">正常播放</button>
  29.         <button onclick="upper()">提高嗓门</button>
  30.         <button onclick="lower()">降低嗓门</button>
  31.         <script>
  32.             //获取对应的video标签
  33.             var video=document.getElementById('video');
  34.             //播放方法
  35.             function bofang(){
  36.                 video.play();
  37.             }
  38.             //暂停方法
  39.             function zanting(){
  40.                 video.pause();
  41.             }
  42.             //快进10秒
  43.             function kuaijin(){
  44.                 video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
  45.             }
  46.             //快退10秒
  47.             function kuaitui(){
  48.                 video.currentTime-=10;
  49.             }
  50.             //静音按钮
  51.             function shutup(obj){
  52.                 if(video.muted){
  53.                     obj.innerHTML="闭嘴";
  54.                     video.muted=false;
  55.                 }else{
  56.                     obj.innerHTML="张嘴";
  57.                     video.muted=true;
  58.                 }
  59.             }
  60.             //加速播放(3倍速度)
  61.             function soso(){
  62.                 video.playbackRate=3;
  63.             }
  64.             //慢速播放(慢三倍)
  65.             function yu(){
  66.                 video.playbackRate=1/3;
  67.             }
  68.             //正常倍速
  69.             function normal(){
  70.                 video.playbackRate=1;//默认的播放倍速是1
  71.             }
  72.             //调高声音
  73.             function upper(){
  74.                 video.volume+=0.2;//声音值的范围是0-1
  75.             }
  76.             //调低声音
  77.             function lower(){
  78.                 video.volume-=0.2;
  79.             }
  80.         </script>
  81.         <hr />
  82.         音频标签的使用<br />
  83.         <audio src="我的好兄弟.mp3" controls="controls">
  84.             您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？
  85.         </audio>
  86.     </body>
  87. </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. [转]MVC系列——MVC源码学习：打造自己的MVC框架（一：核心原理）

    本文转自:http://www.cnblogs.com/landeanfen/p/5989092.html 阅读目录 一.MVC原理解析 1.MVC原理 二.HttpHandler 1.HttpHan ...

  2. 初学Hadoop之中文词频统计

    1.安装eclipse 准备 eclipse-dsl-luna-SR2-linux-gtk-x86_64.tar.gz 安装 1.解压文件. 2.创建图标. ln -s /opt/eclipse/ec ...

  3. 《Java开发实战经典》读书笔记

    Java常用的内存区域: (1)      栈内存空间:保存所有的对象名称. (2)      堆内存空间:保存每个对象的具体属性内容. (3)      全局数据区:保存static类型的属性. ( ...

  4. MyBatis 中 sqlmapconfig核心标签typeAliases配置说明

    标签说明 在 MyBatis 的 sql 映射配置文件中,需要使用 paramterType.resultType 来设置 sql 语句的输入输出参数,一般参数都是基本的数据类型或封装类型,但都需要声 ...

  5. VS2012 无法启动 IIS Express Web

    用记事本打开项目的.csproj文件,定位到<WebProjectProperties>,把关于IIS的配置<DevelopmentServerPort>.<Develo ...

  6. spring boot 2.0.0 + mybatis 报：Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    spring boot 2.0.0 + mybatis 报:Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required 无法启动 ...

  7. python占位符%s,%d,%r,%f

    input接收的所有输入默认都是字符串格式 1.%s代表字符串占位符 conn, client_addr = phone.accept() print(conn) print(client_addr) ...

  8. scss-@mixin传参

    混合器一个很重要特性就是可以传递参数,可以根据不同场景来定制css代码的复用.极大提高了混合器的适用性,看如下scss代码实例: @mixin makeradius($radius) { border ...

  9. vue打包（npm run build）时错误记录

    vue项目打包时,报错如下: 问题分析:semver.js报错,版本不正确,解决办法,打包时忽略版本检查 解决办法:

  10. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...