码迷,mamicode.com
首页 > Web开发 > 详细

html5新增标签

时间:2020-04-26 19:12:06      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:gen   content   div   文字   source   cal   pat   comm   文章   

有且仅有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标签规定在文本中何处适合添加换行符

html5新增标签

标签:gen   content   div   文字   source   cal   pat   comm   文章   

原文地址:https://www.cnblogs.com/zwowoy/p/12781467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!