BAT大佬推荐的HTML5十大特性

时间：2023-04-02 17:02:40 HTML

HTML5并不是什么新鲜事物。自最初发布（2008年1月）以来，我们一直在使用它的一些功能。后来又仔细看了看HTML5的特性列表。看看我发现了什么？到目前为止我还没有真正使用过它！在这篇文章中，我列出了HTML5的10个特性，这些特性我过去没有使用过，但现在发现它们很有用。我还创建了一个工作示例流程并将其托管在Netlify上。希望你也觉得它有用。点击演示示例：https://html5-tips.netlify.app/太好了，让我们介绍一下他们的解释并快速编写代码。您可以在Twitter上关注我，以了解我未来的文章和工作。？详细信息标签

标签向用户提供按需详细信息。如果您需要按需向用户显示内容，请使用此标记。默认情况下，详细信息处于关闭状态。打开后，它将展开并显示其内容。

标签与

一起使用，给它一个可见的标题。代码

点击此处获取用户详情

#	姓名	位置	工作
1	亚当	休斯顿	UI/UX

效果Demo可以从这里开始查看demo：https://html5-tips.netlify.app/details/index.htmlTips在GitHubReadme中使用它来显示你需要的细节.隐藏大量文本并仅在需要时显示。很酷吧？点击查看示例：https://github.com/atapas/not...?ContentEditablecontenteditable是一个属性，可以在元素上设置，使内容可编辑可以和DIV、P、UL等元素一起使用，你必须这样指定：。请注意，如果未在元素上设置contenteditable属性，它将从其父元素继承。代码

购物清单（内容可编辑）

1.牛奶

2.面包

3.Honey

效果demo可以从这里开始查看demo：https://html5-tips.netlify.ap...使用CSS样式向其中添加任何丰富的内容。这比使用输入框要好。尝试一下！?Map标签帮助定义一个图像映射，它是包含一个或多个可点击区域的任何图像。地图标签与标签一起确定可点击区域。可点击区域可以是矩形、圆形或多边形区域中的任意一种。如果您不指定任何形状，它将默认为整个图像。代码

效果演示你可以从这里开始看一个演示：https://html5-tips.netlify.ap...我们可以尝试使用家庭照片并更深入地研究个人照片吗？标记内容使用标记来突出显示任何文本内容。代码

您知道吗，您可以仅使用HTML标记来“突出显示有趣的内容”？

效果演示您可以从这里开始查看演示：https://html5-tips。netlify.ap...TIP你总是可以用CSS改变高亮颜色，标记{background-color:green;color:#FFFFFF;}?data-*属性data-*属性用于存储页面或应用程序特定的自定义数据。存储的数据可以在JavaScript代码中使用，以创造更多的用户体验。data-*属性由两部分组成：属性名不能包含任何大写字母，并且必须在前缀“data-”之后至少长一个字符属性值可以是任意字符串代码

了解数据属性

我有一个隐藏的秘密！

显示functionreveal(){letdataDiv=document.getElementById('data-attr');letvalue=dataDiv.dataset['customAttr'];document.getElementById('msg').innerHTML=`${value}`;}注意：要在JavaScript中读取这些属性的值，可以使用getAttribute()，但规范定义了一个更简单的方法：使用数据集属性。效果Demo可以从这里开始查看demo：https://html5-tips.netlify.ap...Tips你可以使用它在页面中存储一些数据，然后使用REST调用将它传递给服务器。？输出标签标签表示操作的结果。通常，此元素定义一个区域，该区域将用于显示一些计算文本。代码*=效果演示您可以在这里开始查看演示：https://html5-tips.netlify.ap...提示如果您想在客户端JavaScript中执行任何计算并希望结果反映在页面上，请使用标记。您不必执行获取元素的额外步骤：getElementById()。？Datalist标签指定一个预定义的选项列表，并允许用户添加更多。它提供了一个自动完成功能，允许您提前输入所需的选项。代码从列表中选择你的水果：效果演示可以从这里开始查看演示：https://html5-tips.netlify.ap...Tipsvstraditional