開發者們大家好👋
在這篇文章中，我將分享一些在 HTML5 中加入的新的、有用的 html 標籤，用於編寫簡單快速的程式碼來建立複雜、動態、引人入勝且有效的網站。
讓我們開始吧🚀
對話
➡ 現在您可以使用<dialog>標籤輕鬆建立對話方塊或彈出視窗。這是建立自訂模式對話方塊的好方法，而無需嚴重依賴JavaScript 。
<dialog id="myDialog">
<p>This is a dialog box</p>
<button onclick="document.getElementById('myDialog').close()">Close
</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog
</button>
範本
➡ <template>標籤用作儲存頁面載入時不希望顯示的客戶端內容的容器。可以使用JavaScript克隆該內容並將其插入到文件中。
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Hello, This is Kiran</h2>
<p>Thanks for reading this</p>
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
圖片
➡ 透過使用<picture>標籤，您可以為一張圖片定義多個來源，現在瀏覽器會根據螢幕尺寸、解析度選擇最佳的來源。這對於響應式設計特別有用。
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
儀表
➡ <meter>標籤可用來表示已知範圍內的標量測量，例如磁碟使用情況或查詢結果的相關性。它有助於直觀地顯示一定範圍內的值。
<label for="diskUsage">Disk Usage:</label>
<meter id="diskUsage" value="0.6">60%</meter>
輸出
➡ <output>標籤代表計算的結果。它可以與JavaScript一起使用來顯示計算結果。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="50"> +
<input type="number" id="b" value="25"> =
<output name="result" for="a b">75</output>
</form>
進步
➡ <progress>標籤代表任務的完成進度，例如下載或檔案上傳。
<label for="fileProgress">File upload progress:</label>
<progress id="fileProgress" value="70" max="100">70%</progress>
標記
➡ <mark>標籤用於反白顯示文字。它對於您想要突出顯示匹配文字的搜尋結果頁面特別有用。
<p>The word <mark>highlighted</mark> is important.</p>
縮寫
➡ <abbr>標籤用於定義縮寫詞或首字母縮寫詞，在標題屬性中提供完整的描述。
<p>I'm a true<abbr title="Marvel Cinematic Universe">MCU</abbr>fan.</p>
時間
➡ <time>標籤用於表示日期、時間或持續時間。它對於使與時間相關的資料變得機器可讀非常有用。
<p>The concert starts at <time datetime="20:00">8 PM</time>.</p>
巴迪
➡ <bdi>標籤用於隔離可能與外部其他文字的格式方向不同的文字部分。無論涉及何種語言或文字方向，它都能確保您的網頁內容保持一致和可讀。
<ul>
<li>Product: <bdi>ABC1234</bdi></li>
<li>Product: <bdi>مرحبا5678</bdi></li>
</ul>
沃伯
➡ <wbr>標記指定文字可以在何處換行（如有必要）。這對於長單字或 URL 很有用。
<p>Thisisaverylongword<wbr>thatmightneedbreaking.</p>
主要的
➡ <main>標籤用於指定文件的主要內容。它每頁只能使用一次，並且排除文件中重複的內容，例如頁首、頁尾、導覽和側邊欄。
<main>
<h1>Welcome to my blog post</h1>
<p>Today we will learn some new html tags</p>
</main>
圖片標題
➡ <figcaption>標籤用於為圖形提供標題。
<figure>
<img src="Thanos.jpg" alt="Thanos image">
<figcaption>Thanos snapping his fingers</figcaption>
</figure>
這就是本文的內容。
感謝您的閱讀❤
在 👉 https://x.com/kiran__a__n X https://github.com/Kiran1689 GitHub 上找到我
https://dev.to/dev_kiran
原文出處：https://dev.to/dev_kiran/html-tags-you-might-not-know-about-3gk7
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式