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> 标签用于定义可重复使用的HTML片段，这些片段在通过JavaScript激活之前保持隐藏状态。

  • 通过使用 <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)">
  • <meta> 标签的 theme-color 属性用于自定义兼容移动浏览器中的地址栏和用户界面的颜色。
  • 例如，可以通过使用 media 属性在深色模式和浅色模式之间切换。

这些标签和属性是 HTML5 的改进，已经成为现代网页开发中的核心元素。建议在使用这些功能时检查特定浏览器的支持和兼容性。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

与元信息相关的标签