如何使用 HTML 指定自包含内容？

在 HTML 中，可以使用自包含元素来指定只含有一个标签的内容，这样可以简化 HTML 代码的编写，同时也增加了代码的可读性。

基本语法

自包含元素一般是指只有一个标签的元素，比如 <img>、<input>、<br> 等，它们不需要使用闭合标签，可以在同一个标签中指定属性和内容，例如：

<img src="example.jpg" alt="example image">
<input type="text" name="username" placeholder="请输入用户名">

值得注意的是，这些标签可能不会在所有浏览器中都被正确解析，因此在编写 HTML 代码时，最好在这些标签后面加上一个斜杠 /，以确保代码的正确性，例如：

<br />
<input type="submit" value="提交" />

自定义自包含元素

在 HTML 5 中，可以使用 data-* 属性和 JavaScript 来创建自定义的自包含元素，例如：

<div data-message="Hello, World!"></div>

在 JavaScript 中，可以通过 dataset 属性来获取或设置 data-* 属性的值，例如：

const div = document.querySelector('div');
console.log(div.dataset.message); // 输出 "Hello, World!"

总结

使用自包含元素可以简化 HTML 代码的编写，同时也增加了代码的可读性。在 HTML 5 中，还可以通过 data-* 属性和 JavaScript 来创建自定义的自包含元素，提高了代码的灵活性。