10个好用的 HTML5 特性

益华IT技术论坛IT科技 2025-10-10 00:14:20

detais 标签<details>标签向用户提供按需查看详细信息的个好效果。如果需要按需向用户显示内容，特性简单的个好做法就是使用此<details>标签。默认情况下，特性它是个好收起来的，打开后，特性它将展开并显示被隐藏的个好内容。

事例：

<details> <summary>Click Here to get the user details</summary> <table> <tr> <th>#</th> <th>Name</th> <th>Location</th> <th>Job</th> </tr> <tr> <td>1</td> <td>Adam</td> <td>Huston</td> <td>UI/UX</td> </tr> </table> </details>

运行结果：

技巧在 GitHub Readme 中使用它来显示按需的特性详细信息。这是个好一个示例https://github.com/atapas/notifyme#properties

内容可编辑contenteditable是可以在元素上设置以使内容可编辑的属性。它适用于DIV，特性P，个好UL等元素。特性

注意，个好当在元素上没有设置contenteditable属性时，特性它将从其父元素继承该属性。个好

<h2> Shoppping List(Content Editable) </h2> <ul class="content-editable" contenteditable="true"> <li> 1. Milk </li> <li> 2. Bread </li> <li> 3. Honey </li> </ul>

运行结果：

技巧可以让span或div标签可编辑，并且可以使用css样式向其添加任何丰富的内容。这将比使用输入字段处理它更好。试试看！

MapHTML <map> 属性与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域)。可点击的区域可以是云服务器这些形状中的任何一个，矩形，圆形或多边形区域。如果不指定任何形状，则会考虑整个图像。

事例：

运行结果：

技巧map有其自身的缺点，但是你可以将其用于视觉演示。

mark 标签

<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>

运行结果：

mark { background-color: green; color: #FFFFFF; }

data-* 属性data-*属性用于存储页面或应用程序专用的自定义数据。可以在 JavaScript 代码中使用存储的数据来创建更多的用户体验。

data-*属性由两部分组成

属性名不能包含任何大写字母，并且必须在前缀“data-”之后至少有一个字符属性值可以是任何字符串

事例：

<h2> Know data attribute </h2> <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> I have a hidden secret! </div> <button onclick="reveal()">Reveal</button>

在 JS 中：

function reveal() { let dataDiv = document.getElementById(data-attr); let value = dataDiv.dataset[customAttr]; document.getElementById(msg).innerHTML = `<mark>${ value}</mark>`; }

**注意：**要在 JS 中读取这些属性的值，可以通过getAttribute(data-custom-attr)g来获取，但是标准方式是用dataset来获取。

技巧你可以使用它在页面中存储一些数据，然后使用REST调用将其传递给服务器。

output 标签<output> 标签表示计算或用户操作的结果。

技巧如果要在客户端 JS 中执行任何计算，并且希望结果反映在页面上，可以使用<output>,这样就无需使用getElementById()获取元素的额外步骤。

datalist<datalist>元素包含了一组<option>元素，这些元素表示其它表单控件可选值.

事例：

<form action="" method="get"> <label for="fruit">Choose your fruit from the list:</label> <input list="fruits" name="fruit" id="fruit"> <datalist id="fruits"> <option value="Apple"> <option value="Orange"> <option value="Banana"> <option value="Mango"> <option value="Avacado"> </datalist> <input type="submit"> </form>