html5新增标签

HSdiana

2020-04-26

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

HSdiana

0 关注 0 粉丝 0 动态

关注关注

安科网

html5新增标签

HSdiana

HSdiana

HSdiana