2.HTML5新增的其他元素

HTML5新增的其他元素:

  video元素用于定义视频。

  audio元素用于定义音频。

  embed元素用于插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

  mark元素主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词。

  progress元素表示运行中的进程,可以使用process元素来显示JavaScript中消耗时间的函数的进程。   <progress value="22" max="100"></progress>

  meter元素表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围,即可以再元素的文本中,也可以在min/max属性中定义。

    <meter value="9" min="0" max="10">9/10</meter><br>
    <meter value="0.4">40%</meter>

  time元素用于表示日期或时间,也可以同时表示两者。

    <p>
      我们在每天早上 <time>9:00</time> 开始营业。
    </p>

    <p>
      我在 <time datetime="2010-02-14">情人节</time> 有个约会。
    </p>

  ruby元素表示ruby注释(中文注音或字符)。rt元素表示字符(中文注音或字符)的解释或发音。rp元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容

    <ruby>
      汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
      字 <rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>

    效果如下:

         

  wbr元素表示软换行。wbr元素与br元素的区别是:br元素是此处必须换行,二wbr元素是指浏览器窗口或父级元素的宽度足够宽是(没必要换行时),不进行换行,而当宽度不够时,主动在此处进行换行。wbr元素好像对字符型的语言用处比较大,但是对于中文,貌似没多大用处。 

    <p>
      如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
    </p>
    <p>
      如果想学习 AJAX,那么您必须熟悉 XML<br>Http<br>Request 对象。
    </p>

  canvas元素表示图形,比如图标和其他图像。这个元素本身没有行为,仅提供一块画布,但把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。

  command元素表示命令按钮,比如单选按钮、复选按钮或按钮。只有 IE 9 支持 <command> 标签

  details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示细节信息。summary元素应该是details原点的第一个子元素。目前只有 Chrome 和 Safari 6 支持 <details> 标签。

    <details>
      <summary>Copyright 2011.</summary>
      <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>

  效果如下:

      

      点击图标就展示P标签内容,如下图

      

  datalist元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。(使用谷歌浏览器)

    <form action="demo-form.php" method="get">
      <input list="browsers" name="browser">
      <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      <input type="submit">
    </form>

    <p><strong>注意:</strong> Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。</p>

  datagrid元素表示可选数据的列表,它以树形列表的形式显示。https://www.quackit.com/html_5/tags/html_datagrid_tag.cfm

  keygen元素表示生成密钥。

    <form action="/example/html5/demo_form.asp" method="get">
      用户名:<input type="text" name="usr_name" />
      加密:<keygen name="security" />
      <input type="submit" />
    </form>

  output元素表示不同类型的输出,比如脚本的输出。 

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
      <input type="range" id="a" value="50">100
      +

      <input type="number" id="b" value="50">
      =<output name="x" for="a b"></output>
    </form>

    <p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p>

  source元素为媒介元素(比如video和audio)定义媒介资源。

    <audio controls>
      <source src="/i/horse.ogg" type="audio/ogg">
      <source src="/i/horse.mp3" type="audio/mpeg">
      您的浏览器不支持音频。
    </audio>

  menu元素表示菜单列表。当希望列出表单控件时使用该标签。

    <menu>
      <li><input type="checkbox" />Red</li>
      <li><input type="checkbox" />blue</li>
    </menu>

  dialog元素表示对话框。只有 Chrome 和 Safari 6 和支持 dialog 标签。

时间: 2024-10-17 18:15:46

2.HTML5新增的其他元素的相关文章

HTML5新增的语义元素、JS常用对象

HTML5新增的语义元素 <header>元素表示页面中一个内容区域或整个页面的标题,通常他可能是一个页面中的(指主体标记中的第一个元素),可以包含站点的标题.Logo和旗帜广告 <header> <img src="logo.png"> <h1>YEN的Java Web之路</h1> </header> <footer>元素表示整个页面或页面中一个区域块的脚注,通常包含一些基本信息,包括一些基本信息:

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

HTML5新增的结构元素

HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档,页面或应用程序中独立的完整的,可以独自被外部引用的内容,<article> 标签定义外部的内容.article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联, 另外article元素也可以用来表示一个插件. <time> 标签定义日期或时间,或者两者.pubdate

疯狂的表单-html5新增表单元素和属性

疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body> <form action="upload.php" method="post" accept-charset="utf-8&

《Web前端笔记2.10-2.11》 HTML5 新增的结构元素

课程背景: 在 HTML5 中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的元素. 核心内容:1.Article2.Section3.Nav4.Aside5.Time6.Pubdate 7. header 元素8. footer 元素9. hgroup 元素10. address 元素 article 元素 article 元素代表文档,页面或应用程序中独立的.完整的.可以独自被外部引用的内容. section 元素 本课时讲解 HMTL5 新增的主体结构元素

IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性,仍然可以显示为常规的表单元素. 1  <datalist>元素 <datalist>元素规定输入域的选项列表.<datalist>属性规定form或input域应该拥有自动完成功能.当用户在自动完成域中开始输入时,浏览器应该在该域中显示的填写的选项.Internet Exp

HTML5新增的常用元素

1.文档结构元素 <article>:该元素用于代表页面上独立.完整的一篇“文章”. <section>:该元素用于对页面的内容进行分块. <nav>:该元素专门用于定义页面上的导航条. <aside>:该元素专门用于定义当前页面或当前文章的附属信息. <header>:该元素主要用于为<article.../>元素定义文章的“头部”信息. <hgroup>:该元素主要用于组织多个<h1.../>~<h6

HTML5新增的结构元素 详解

这篇文章我们不老生常谈的讲基础的HTML 就讲讲H5中新添加的一些知识 ?首先废话不多说 先来看看H5添加了那些新的结构元素 标签 说明 header 页面或页面中某一个区块的页眉,通常是一些引导和导航信息. nav 可以作为页面导航的链接组 section 页面中的一个内容区块,通常由内容及其标题组成 article 代表一个独立的.完整的相关内容块,可独立于页面其它内容使用 aside 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容 footer 页面或页面中某一个区块

html5 新增的页面 元素

figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form> <figure> <img src="海豚.png"