10 你必须了解的 HTML 特点

使用TinyMCE（一个富文本编辑器（RTE），即“Rich Text Editor”）的过程中，我逐渐意识到HTML不仅仅是基础标签，比如<div>、<p>和<img>。TinyMCE直接与DOM进行交互，并将内容转换成HTML，有许多高级功能可以显著提升我们在网页开发中的体验，不仅增强了功能，还提升了网页的可访问性和安全性。遗憾的是，我们中的许多人忽视了这些强大的工具。因此，我整理了一份包含10个你可能未曾使用过的HTML功能列表，你应该考虑在你的工作中使用它们。

1. 模板组件

我发现<template>元素对于定义可重用的HTML片段非常有用，这些片段只有在需要时才被渲染显示。这对于高效管理动态内容非常有帮助。由于<template>内的内容直到被调用时才渲染显示，因此这有助于减少初始页面加载并提高性能。

例子:

    <template id="myTemplate">
        <div class="modal">
            <p>这里放模板内容。</p>
        </div>
    </template>

点击进入全屏 点击退出全屏

安全提示： 当我使用 <template> 元素动态插入内容时，我总是确保内容经过了 sanitization，以防止 XSS（跨站脚本攻击）:

为了突出重要文本，我使用了<mark>元素。这是一种简单但有效的方法，吸引读者对内容中关键点的注意。对于使用辅助技术的用户来说，比如屏幕阅读器，<mark>元素有助于强调文本中的重要信息，让屏幕阅读器用户更容易注意到这些信息。

比如说:

    <p>在这个上下文中，被突出显示的术语很重要。</p>

进入全屏 退出全屏

可访问性提示: mark 元素会被屏幕阅读器自动读出，因此是确保使用这些技术的用户不会错过关键信息的好方法。

当我想要确保图像在所有设备上都能自适应并看起来很棒时，我会使用<picture>元素。它允许我指定多个图像来源，因此我可以根据用户的设备提供最适合的图像。这对于加快加载时间和提升用户体验至关重要。

例子:

    <picture>
        <source media="(min-width: 800px)" srcset="large.jpg">
        <source media="(min-width: 400px)" srcset="medium.jpg">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="small.jpg" alt="自适应图片">
    </picture>

点击全屏按钮可以切换到全屏或退出全屏模式

可访问性提示: 我总是给图片添加 alt 属性，确保所有用户都能理解内容，即使他们看不到图片。

为了创建可扩展的内容部分，我使用了<details>和<summary>元素。它们非常适合用于FAQ或可折叠部分，有助于保持网页的整洁和用户友好性。这些元素还通过允许用户在无需JavaScript的情况下控制额外内容的显示来提高可访问性。

例子:

    <details>
        <summary>更多信息</summary>
        <p>这是点击“更多信息”后会出现的隐藏内容。</p>
    </details>

进入全屏 关闭全屏

可访问性考量： <details> 和 <summary> 元素可以用来创建具有语义化的可折叠内容，确保辅助技术能正确理解摘要与详情间的关系。

注：根据专家建议，“对话元素”改为“对话要素”，并在句末添加了句号以符合中文的标点规则。同时，在“5.”后添加了冒号，使其与英文版本一致，尽管在中文中这样做是可选的。

<dialog>元素是一种内置的方法，用于创建不需要依赖外部JavaScript库的模态窗口。我发现它非常适合用来展示警告、确认对话框或自定义弹出窗口。除了使用方便之外，<dialog>元素比许多自定义模态实现更为易用，因为它内置了焦点管理。

例子:

    <dialog id="myDialog">
        <p>这是一个模态对话</p>
        <button onclick="document.getElementById('myDialog').close()">关闭对话框</button>
    </dialog>

    <button onclick="document.getElementById('myDialog').showModal()">打开对话框</button>

全屏显示，退出全屏

可访问性考虑： dialog 元素会在打开时自动处理焦点，这对于使用键盘或屏幕阅读器的用户来说非常重要。

我使用<output>元素在表单内直接显示计算结果或用户交互。这是一种增强表单的互动性的简单方法，无需使用复杂的JavaScript脚本，并确保辅助技术能正确解释内容。

例子:

``
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0">
= <output name="result" for="a b">0</output>
</form>

此表单允许你将两个数字相加。

切换到全屏模式，退出全屏

**可访问性考虑：** `output` 元素可以通过编程链接到表单中的元素，让屏幕阅读器在结果变化时自动播报。

## 7\. 数据元素

使用`<data>`元素，我可以将机器可读的值与人类可读的内容关联起来。这对于SEO来说特别有用，使内容对搜索引擎更易理解，使内容在搜索结果中更准确地呈现。

**例子:**

<p>价格： 49.99美元 <data value="49.99">$49.99</data></p>

全屏模式,退出全屏

**安全提示:** 在显示与后端系统相关的数据时，我确保展示的数据经过了净化处理，不含可能泄露敏感信息的漏洞。

## 8\. 计量元素

如果需要在一个已知范围内表示测量值，我使用 `<meter>` 元素。无论是磁盘使用情况还是进度跟踪，都能很好地展示出来。`<meter>` 元素也是可访问的，为所有用户提供易于理解的数值信息。

**例如:**

当前的进度是 70%，如需调整请修改数值。
<meter value="70" min="0" max="100">70%</meter>

进入全屏，退出全屏

**可访问性小贴士:** 我会在 `<meter>` 标签周围加上适当的上下文，这样使用辅助设备的用户就能明白这个测量表示的意思。

## 9\. 时间因素

为了准确地表示日期和时间，我使用了`<time>`元素。这不仅使内容更易于理解和访问，也使搜索引擎更好地理解和索引时间数据。这对屏幕阅读器用户尤其有帮助。

**例子:**

2024年8月15日

点击全屏 点击退出全屏

**可访问性提示:** 使用 `日期时间(datetime)` 属性可以提供一种机器可读的格式，帮助辅助技术轻松解析。

## 10\. 进展要素.

`<progress>`元素可以用来显示如下载或提交等任务的进度。这能给用户提供实时反馈，并让辅助技术能及时更新进度。

**例子:**

`` 
    <progress value="70" max="100">70%</progress>

进度条显示70%，最大值为100。

进入全屏 退出全屏

可访问性考量： 将 <progress> 元素与 aria-label 或类似的属性配合使用，可以为屏幕阅读器用户说明进度代表的内容。

我很想听听这些技巧是如何帮助您改进工作流程的。想来增强您的内容创作体验吗？访问TinyMCE 博客获取见解、最佳实践和教程，或注册14天免费试用[TinyMCE]。开始您的[TinyMCE]之旅！