Articles
HTML 簡介
HTML 的最新趨勢

HTML 的最新趨勢

本文解釋了 HTML 的最新趨勢。

這解釋了在HTML5中相對最近新增的標籤。

YouTube Video

HTML 的最新趨勢

<template> 標籤 

 1<template id="myTemplate">
 2    <div>
 3        <p>Hello, this is a reusable template!</p>
 4    </div>
 5</template>
 6<button onclick="useTemplate()">Use Template</button>
 7<div id="container"></div>
 8<script>
 9    function useTemplate() {
10        const template = document.getElementById('myTemplate');
11        const clone = template.content.cloneNode(true);
12        document.getElementById('container').appendChild(clone);
13    }
14</script>

  • <template> 標籤用於定義可以通過JavaScript啟用的可重複使用並且保持隱藏的HTML片段。

  • 透過使用 <template> 標籤，您可以動態創建可重複使用的 UI 元件，例如卡片或列表項目。這也有助於減少程式碼的重複使用，並改善大型應用程式的可維護性。

  • 在此範例中，點擊「使用範本」按鈕會顯示 <template> 標籤的內容。

<slot> 標籤

Header Content

Footer Content

 
 1<template id="myElementTemplate">
 2    <slot name="header">Default Header</slot>
 3    <main>Default Content</main>
 4    <slot name="footer">Default Footer</slot>
 5</template>
 6<my-element>
 7    <p slot="header">Header Content</p>
 8    <p slot="footer">Footer Content</p>
 9</my-element>
10<script>
11    class MyElement extends HTMLElement {
12        constructor() {
13        super();
14        const shadow = this.attachShadow({ mode: 'open' });
15        shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16        }
17    }
18    customElements.define('my-element', MyElement);
19</script>
  • <slot> 標籤作為 Web 元件中的一個佔位符，用於顯示從父元素傳遞而來的內容。
    • 如果未為插槽提供內容，則將顯示後備內容（直接寫在 <slot> 標籤裡的預設內容）。
  • 在此範例中，在 <template> 元素內定義了具名插槽（header 和 footer）。
  • <my-element> 是使用者自定義的自訂 HTML 元素。在此元素中的 <p> 標籤上的 slot 屬性指定了插槽名稱以及要插入插槽的內容。

<dialog> 標籤

This is a dialog box.

 
 1<dialog id="exampleDialog">
 2    <p>This is a dialog box.</p>
 3    <button id="closeButton">Close</button>
 4</dialog>
 5
 6<button id="openButton">Open Dialog</button>
 7
 8<script>
 9    const dialog = document.getElementById('exampleDialog');
10    const openButton = document.getElementById('openButton');
11    const closeButton = document.getElementById('closeButton');
12
13    openButton.addEventListener('click', () => dialog.showModal());
14    closeButton.addEventListener('click', () => dialog.close());
15</script>

  • <dialog> 標籤用於定義互動式窗口，例如模態窗口或彈出窗口。您可以使用JavaScript控制開啟和關閉。

  • 在此範例中，點擊「開啟對話框」按鈕會顯示對話框。

<input> 標籤的 inputmode 屬性 

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">
  • <input> 標籤的 inputmode 屬性指定了觸控設備上顯示的虛擬鍵盤類型，從而提升使用者體驗。例如，inputmode="tel" 會顯示用於輸入電話號碼的數字鍵盤。
  • inputmode 屬性僅用於調整虛擬鍵盤顯示，不會驗證輸入內容。若要強制執行輸入限制，您需要使用 type 屬性或 JavaScript 驗證。
  • 由於並非所有瀏覽器和設備都完全支援此功能，最好準備適當的後備方案。
  • inputmode 屬性可以接受以下值。每個值用於顯示特定的輸入類型或虛擬鍵盤。
值 描述
none none 隱藏虛擬鍵盤。
text text 顯示標準的文字輸入虛擬鍵盤。
tel tel 顯示用於輸入電話號碼的數字鍵盤。
url url 顯示用於輸入 URL 的虛擬鍵盤。
email email 顯示用於輸入電子郵件地址的虛擬鍵盤。
numeric 「numeric」顯示一個僅供數字輸入的虛擬鍵盤。
decimal 「decimal」顯示一個用於數字輸入的虛擬鍵盤。
search 「search」顯示一個用於搜索輸入的虛擬鍵盤。

「theme-color」屬性是 <meta> 標籤的一部分 

1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
  • 「theme-color」是 <meta> 標籤的屬性，用於自定義在相容移動瀏覽器中的地址列和用戶界面的顏色。
  • 例如，可以通過使用「media」屬性在深色模式和淺色模式之間切換。

這些標籤和屬性是 HTML5 的進步成果，已成為現代網頁開發中的關鍵要素。在使用它們時，建議檢查特定瀏覽器的支援範圍和相容性。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

與元信息相關的標籤