zoukankan      html  css  js  c++  java
  • html5新增标签

    有且仅有IE9支持command 标签(定义命令按钮)

    关于datalist:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <input type="text" list="">
        <datalist id=""/>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            
        </datalist>
    </body>
    </html>

    关于details:(Chrome和Safari支持)&  summary标签用来存放details标题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <details>
            <summary>iwijaido</summary>
            <p>hiuyisu sdufiu dug skjdh sdfg </p>
        </details>
    </body>
    </html>

    关于dialog:(Chrome,Safari6支持)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
            <p><b>注释:</b>只有 Chrome 和 Safari 6 和支持 dialog 标签。</p>
    
    
            <table border="1">
            <tr>
            <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
            <th>二月</th>
            <th>三月</th>
            </tr>
            <tr>
            <td>31</td>
            <td>28</td>
            <td>31</td>
            </tr>
            </table>
    </body>
    </html>

    embed:(定义插件等嵌入内容)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
           <embed src="" type="" height="" height="" type="">
    </body>
    </html>

    figure(插图图像)&  figcaption(插图的标题)

    <figure>
      <figcaption>标题文字</figcaption>
      <img src="" width="" height="" />
    </figure>

    keygen(IE和Safari不支持)

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

    <form action="" method="get">
    Username: <input type="text" name="" />
    Encryption: <keygen/>
    <input type="" />
    </form>

    mark标签有突出显示效果

    meter标签(一个简单的进度条显示效果 Firefox Chrome opera Safari6支持)

    <meter value="3" min="0" max="10">3/10</meter><br>
    <meter value="0.6">60%</meter>

    nav(导航栏标签)

    <nav>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </nav>

    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> 

    progress标签(双标签需要设置最大值和状态值显示进度,单标签有滚动显示效果):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <progress value="40" max="100"></progress><br>
        <progress>
    </body>
    </html>

    ruby  rp rt 标签(ruby注释)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
            <div style="background-color:antiquewhite">
                <ruby><rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
                </ruby>
            </div>
            <div  style="background-color:rgb(248, 143, 4)">
                <ruby><rt> ㄏㄢˋ </rt>
                </ruby>
            </div>
            <div  style="background-color:rgb(197, 110, 70)">
                <ruby><rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
                </ruby>
            </div>
    </body>
    </html>

    section标签定义文章中的区段,如页眉页脚等

    audio标签定义音频  video标签定义视频

    source标签给多媒体标签定义资源 &  track标签为多媒体标签规定字幕等文本内容,多媒体文件播放时文本可见。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
         <audio controls="">
            <source src="" type="">
            <source src="" type="">
        <track kind="subtitles" src="" srclang="zh" label="Chinese">
           <track kind="subtitles" src="" srclang="en" label="English">
    
    
         你的浏览器不支持
            </audio>
         <audio src=""></audio>
         <video src=""></video>
    
    
    

    </body> </html>

    time标签能够以计算机可读的形式显示时间及日期,可以用来做备忘录时间以及在搜索引擎中搜索相关时间的内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
            <p>我们在每天早上 <time>9:00</time> 开始营业。</p>
    
            <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
    </body>
    </html>

    wbr标签规定在文本中何处适合添加换行符

  • 相关阅读:
    MS SQL Server2012中的TRY_CONVERT函数
    MS SQL Server2012中的CONCAT函数
    查询数据库大小
    显示数据与存储方式
    Windows 8 安装之后怎样更改产品码
    IIS SubStatus Codes
    MS SQL Server Quarter Function
    程序中处理一对多的数据
    找出字符串中所有数字
    BOOTMGR is missing
  • 原文地址:https://www.cnblogs.com/zwowoy/p/12781467.html
Copyright © 2011-2022 走看看