zoukankan      html  css  js  c++  java
  • html5新增的标签和使用的方法

    html5新增的标签:

    /*<article> 标签定义独立的内容。*/
    
    <article>
    <h1>标题</h1>
    <a href="#">你好</a>
    <p>这是一段文件内容</p>
    </article>
    /*<aside> 标签定义其所处内容之外的内容。 提示:提示:<aside> 的内容可用作文章的侧栏。*/
    
    <p>Me and my family visited The Epcot center this summer.</p>
    <aside>
    <h4>Epcot Center</h4>
    The Epcot Center is a theme park in Disney World, Florida.
    </aside>
    /*<audio> 标签定义声音,比如音乐或其他音频流。 */
    
    <audio src="someaudio.wav">
    您的浏览器不支持 audio 标签。
    </audio>
    /*提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。*/

    /*bdi 指的是 bidi 隔离。
    
    <bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。
    
    在发布用户评论或其他您无法完全控制的内容时,该标签很有用。*/
    
    
    <ul>
    <li>Username <bdi>Bill</bdi>:80 points</li>
    <li>Username <bdi>Steve</bdi>: 78 points</li>
    </ul>

    /*<canvas> 标签定义图形,比如图表和其他图像。
    
    <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。*/
    
    <canvas id="myCanvas"></canvas>
    
    <script type="text/javascript">
    
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);
    
    </script>

    /*command 元素表示用户能够调用的命令。
    
    <command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。
    
    只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。*/
    
    <menu>
    <command onclick="alert('Hello World')">
    Click Me!</command>
    </menu>

    /*<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
    
    datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
    
    请使用 input 元素的 list 属性来绑定 datalist。*/
    
    <input id="myCar" list="cars" />
    <datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
    </datalist>
    
    //目前只有 Firefox 和 Opera 支持 <datalist> 标签.
    /*<details> 标签用于描述文档或文档某个部分的细节。*/
    
    <details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of w3chtml.</p>
    </details>
    
    //与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

    /*<embed> 标签定义嵌入的内容,比如插件。*/
    
    <embed src="helloworld.swf" />

    /*<figcaption> 标签定义 figure 元素的标题(caption)。
    
    "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。*/
    
    <figure>
      <figcaption>黄浦江上的的卢浦大桥</figcaption>
      <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>
    /*<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。
    
    figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。  */
    
    <figure>
      <p>黄浦江上的的卢浦大桥</p>
      <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>
    
    //用作文档中插图的图像:使用 <figcaption> 元素为 figure 添加标题(caption)
    /*<footer> 标签定义 section 或 document 的页脚。
    
    在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。*/
    
    文档的页脚:
    
    <footer>This document was written in 2010</footer>
    
    //假如您使用 footer 来插入联系信息,应该在 footer 元素内使用 <address> 元素。
    /*<header> 标签定义文档的页眉(介绍信息)。*/
    
    对主页的介绍:
    
    <header>
    <h1>Welcome to my homepage</h1>
    <p>My name is Donald Duck</p>
    </header>
    
    <p>The rest of my home page...</p>
    /*<hgroup> 标签用于对网页或区段(section)的标题进行组合。*/
    
    使用 <hgroup> 标签对网页或区段(section)的标题进行组合:
    
    <hgroup>
      <h1>Welcome to my WWF</h1>
      <h2>For a living planet</h2>
    </hgroup>
    
    <p>The rest of the content...</p>
    
    //请使用 <figcaption> 元素为元素组添加标题。
    /*<keygen> 标签规定用于表单的密钥对生成器字段。
    
    当提交表单时,私钥存储在本地,公钥发送到服务器。*/
    
    <form action="demo_keygen.asp" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <input type="submit" />
    </form>

    /*<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。*/
    
    突出显示部分文本:
    
    <p>Do not forget to buy <mark>milk</mark> today.</p>
    /*<meter> 标签定义度量衡。仅用于已知最大和最小值的度量*/
    
    <meter min="0" max="20">5</meter>
    
    <meter>2 out of 10</meter>
    
    <meter>30%</meter>
    
    //必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。

    /*<nav> 标签定义导航链接的部分。*/
    
    <nav>
    <a href="/html5/tag/">Home</a>
    <a href="html5/tag/meter.html">Previous</a>
    <a href="html5/tag/noscript.html">Next</a>
    </nav>
    
    //如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。
    /*<output> 标签定义不同类型的输出,比如脚本的输出。*/
    
    如何在表单中使用 output 元素:
    
    <form action="form_action.asp" method="get" name="sumform">
    <output name="sum"></output>
    </form>

    /*<progress> 标签定义运行中的进度(进程)。
    
    可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。*/
    
    标记“下载进度”:
    
    对象的下载进度:
    <progress>
    <span id="objprogress">85</span>%
    </progress>

    /*<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。*/
    
    文档中的区段,解释了 PRC:
    
    <section>
      <h1>PRC</h1>
      <p>The People's Republic of China was born in 1949...</p>
    </section>
    
    
    属性
    //cite     URL     section 的 URL,假如 section 摘自 web 的话。
    /*time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
    
    该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。*/
    
    如何定义时间和日期:
    
    <p>我们在每天早上 <time>9:00</time> 开始营业。</p>
    
    <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

    /*<video> 标签定义视频,比如电影片段或其他视频流。*/
    
    一段简单的 HTML5 视频:
    
    <video src="movie.ogg" controls="controls">
    您的浏览器不支持 video 标签。
    </video>
    
    //提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

  • 相关阅读:
    解决:TypeError: object() takes no parameters
    刷题(三)
    刷题(二)
    web自动化流程总结
    不能在Python Console中运行pytest
    关于pytest的一些问题
    UML设计,可以设计程序的用例图、类图、活动图等_SurfaceView
    android系统下消息推送机制
    Android中的动画,选择器,样式和主题的使用
    内存监测工具 DDMS --> Heap
  • 原文地址:https://www.cnblogs.com/cxhx/p/6050395.html
Copyright © 2011-2022 走看看