Xu hướng gần đây trong HTML

Bài viết này giải thích các xu hướng gần đây trong HTML.

Điều này giải thích các thẻ được thêm vào gần đây trong HTML5.

YouTube Video

Xu hướng gần đây trong HTML

Thẻ <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>

• Thẻ <template> được sử dụng để định nghĩa các đoạn HTML tái sử dụng, nó sẽ ẩn cho đến khi được kích hoạt bằng JavaScript.

• Bằng cách sử dụng thẻ <template>, bạn có thể tạo động các thành phần giao diện người dùng có thể tái sử dụng, chẳng hạn như thẻ hoặc các mục danh sách. Nó cũng giúp giảm trùng lặp mã và cải thiện khả năng bảo trì trong các ứng dụng quy mô lớn.

• Trong ví dụ này, khi nhấn nút 'Sử dụng Mẫu', nội dung của thẻ <template> sẽ hiển thị.

Thẻ <slot>

 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>

• Thẻ <slot> hoạt động như một chỗ giữ chỗ trong một thành phần web để hiển thị nội dung được truyền từ phần tử cha.
  • Nếu không có nội dung nào được cung cấp cho một slot, nội dung dự phòng (nội dung mặc định được viết trực tiếp trong thẻ <slot>) sẽ được hiển thị.
• Trong ví dụ này, các slot có tên (header và footer) được định nghĩa trong phần tử <template>.
• <my-element> là một phần tử HTML tùy chỉnh do người dùng định nghĩa. Thuộc tính slot trên thẻ <p> bên trong phần tử này chỉ định tên slot và nội dung sẽ được chèn vào slot.

Thẻ <dialog>

 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>

• Thẻ <dialog> được sử dụng để định nghĩa các cửa sổ tương tác như modals hoặc pop-ups. Bạn có thể điều khiển việc mở và đóng bằng JavaScript.

• Trong ví dụ này, khi nhấn nút 'Mở Hộp Thoại', hộp thoại sẽ hiển thị.

Thuộc tính inputmode của thẻ <input>

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">

• Thuộc tính inputmode của thẻ <input> xác định loại bàn phím ảo hiển thị trên các thiết bị cảm ứng, nâng cao trải nghiệm người dùng. Ví dụ, inputmode="tel" hiển thị bàn phím số để nhập số điện thoại.
• Thuộc tính inputmode chỉ dùng để điều chỉnh hiển thị bàn phím ảo và không kiểm tra tính hợp lệ của nội dung nhập vào. Để thực thi các giới hạn nhập liệu, bạn cần sử dụng thuộc tính type hoặc xác thực bằng JavaScript.
• Vì không phải tất cả trình duyệt và thiết bị đều hỗ trợ đầy đủ điều này, tốt nhất là bạn nên chuẩn bị các phương án dự phòng thích hợp.
• Thuộc tính inputmode có thể nhận các giá trị sau. Mỗi giá trị được dùng để hiển thị một loại đầu vào hoặc bàn phím ảo cụ thể.

Thuộc tính theme-color của thẻ <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)">

• Thuộc tính theme-color của thẻ <meta> được sử dụng để tùy chỉnh màu sắc của thanh địa chỉ và giao diện người dùng trong các trình duyệt di động tương thích.
• Ví dụ, nó có thể chuyển đổi giữa chế độ tối và chế độ sáng bằng cách sử dụng thuộc tính media.

Các thẻ và thuộc tính này là những cải tiến từ HTML5 và đã trở thành các yếu tố quan trọng trong phát triển web hiện đại. Nên kiểm tra sự hỗ trợ và tính tương thích của các trình duyệt cụ thể khi sử dụng chúng.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video