zoukankan      html  css  js  c++  java
  • html5新元素

    1.section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    <section cite="http://www.baidu.com">
    我是<section></section>
    </section>

    2.progress相当于一个进度条,如果不给max和value,进度条会变成一个来回运动的进度条
    <progress max="100" value="50"></progress>

    3.nav定义导航链接的部分。如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。
    <nav>
    <a href="index.asp">Home</a>
    <a href="html5_meter.asp">Previous</a>
    <a href="html5_noscript.asp">Next</a>
    </nav>

    4.meter标签定义已知范围或分数值内的标量测量。如果标记进度条,请使用progress标签。
    <meter value="3" min="0" max="10">十分之三</meter>
    <meter value="0.6">60%</meter>

    5.time定义元素的日期和时间。(不知道有什么用,去掉页面没有任何变化,可能是对盲人比较优化吧)
    我们在每天早上 <time>9:00</time> 开始营业。
    我在 <time datetime="2008-02-14">情人节</time> 有个约会。

    6.command元素表示用户能够调用的命令。但是目前只有ie9支持,暂时不用管这个

    7.datalist标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。(这个不错,而且有模糊搜索,提示)
    <input id="myCar" list="cars" />
    <datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
    </datalist>

    8.details标签用于描述文档或文档某个部分的细节。summary显示出详细信息。
    <details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>

    9.embed标签定义嵌入的内容,比如插件,适用于非ie浏览器,ie使用object

    10.figure与figcaption用作文档中插图的图像,带有一个标题
    <figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
    </figure>

    11.hgroup标签被用来对标题元素进行分组
    <hgroup>
    <h1>Welcome to my WWF</h1>
    <h2>For a living planet</h2>
    </hgroup>
    <p>The rest of the content...</p>

    <keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

    12.mark 标签定义带有记号的文本。
    <p>Do not forget to buy <mark>milk</mark> today.</p>

    13.output 标签定义不同类型的输出,比如脚本的输出。output标签也可以放到form外面,但需要指定form id
    <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>

    14.rp标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
    rt标签定义字符(中文注音或字符)的解释或发音。
    ruby标签定义 ruby 注释(中文注音或字符)。
    <ruby>
    汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
    字 <rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>

    15.source标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。(就是可能多个浏览器支持的视频音频不一致)
    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>

    16.wbr规定在文本中的何处适合添加换行符。
    如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用wbr元素来添加 Word Break Opportunity(单词换行时机)。
    (本来应该xmlhttprequest连着换行的,加了这个,就会在xml后就换行了)
    如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。

    contenteditable可编辑
    <div contenteditable="true">
    contenteditable
    </div>

    contextmenu属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。
    <div contextmenu="mymenu">
    <menu type="context" id="mymenu">
    <menuitem label="Refresh"></menuitem>
    <menuitem label="Twitter"></menuitem>
    </menu>
    </div>

    draggable可拖拽
    <div draggable="true">
    draggable
    </div>

    draggable属性规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。
    <div dropzone="copy">
    dropzone
    </div>

    spellcheck 属性规定是否对元素内容进行拼写检查。
    <p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

    hidden 属性是布尔属性。浏览器不应显示已规定 hidden 属性的元素。(貌似可以替代样式,更方便,只是ie不支持)

    img (srcset sizes) 在不同屏幕宽度显示不同宽度的图片
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
    alt="Clock"
    srcset="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3987907653,720009510&fm=26&gp=0.jpg 200w,
    https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2174909441,2495215020&fm=26&gp=0.jpg 400w"
    sizes="(min- 600px) 100px, 50vw">

    picture同样可以通过不同设备来匹配不同的图像资源
    <picture>
    <source srcset="/media/examples/surfer-240-200.jpg"
    media="(min- 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
    </picture>

  • 相关阅读:
    Linux 下升级python和安装pip
    All of Me
    MangataのACM模板
    HDU1517 A Multiplication Game (博弈论+思维)
    Home_W的握手问题(思维+打表)
    Home_W的几何题 (计算几何)
    stone (组合数学 + Lucas定理)
    随笔分类
    HDU 5586 Sum (预处理 + 动态规划)
    POJ2104 K-th Number (平方分割 + 二分)
  • 原文地址:https://www.cnblogs.com/wangxi01/p/11590203.html
Copyright © 2011-2022 走看看