html5新增標籤

時間 2020-06-20

標籤 html5 html 新增標籤欄目 HTML5 简体版

原文原文鏈接

有且僅有IE9支持command 標籤（定義命令按鈕）。html

關於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標題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>
    <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：（定義插件等嵌入內容）ide

<!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（插圖的標題）ui

<figure>
  <figcaption>標題文字</figcaption>
  <img src="" width="" height="" />
</figure>

keygen（IE和Safari不支持）搜索引擎

用於表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。spa

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

mark標籤有突出顯示效果插件

meter標籤（一個簡單的進度條顯示效果 Firefox Chrome opera Safari6支持）code

<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標籤規定在文本中何處適合添加換行符

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。