HTML510个好用的特性

时间：2023-04-02 20:16:03 HTML

作者：Ahmadshaded译者：前端小智来源：Sitepoint移动端已经收录到网站上了，收藏了更多分类的往期好评文章，还有我的大量文档和教程材料也整理好了。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。回馈各位读者，文末送5份《你不知道的 JavaScript 上劵》下周一抽奖，祝大家好运！https://mp.weixin.qq.com/s/A5...大家都说简历里没有项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。在本文中，我列出了10个HTML5特性，这些特性我以前没有用过，但现在发现它们很有用，所以废话少说，让我们开始吧。？详情标签

标签为用户提供按需查看详细信息的效果。如果您需要按需向用户显示内容，一个简单的方法是使用此

标签。默认情况下，它是折叠的，打开时，它会展开并显示隐藏的内容。示例：

ClickHeretogettheuserdetails

#NameLocationJob1AdamHustonUI/UX

RunResults:ImageDescriptionTechnique在GitHubReadme中使用这个来显示按需详细信息.这是一个示例https://github.com/atapas/not...图片描述？contenteditablecontenteditable是可以在元素上设置以使内容可编辑的属性。它适用于DIV、P、UL等元素。请注意，当未在元素上设置contenteditable属性时，它将从其父元素继承该属性。

购物清单（内容可编辑）

1.牛奶

2.面包

3.Honey

运行结果：图片描述技术可以让span或者div标签可以编辑，可以使用css样式添加任意丰富的内容。这将比使用输入字段更好地处理它。尝试一下！?MapHTML属性与属性一起使用来定义图像映射（可点击链接的区域）。可点击区域可以是这些形状中的任何一种，矩形、圆形或多边形。如果未指定形状，则考虑整个图像。示例：

运行结果：图片描述技术map有其自身的不足，但可以用它来进行可视化展示。？marktag

你知道吗，你可以只用一个HTML标签来“突出显示一些有趣的东西”？

运行结果：clipboard.png技巧可以使用css改变高亮颜色：mark{background-color:green;颜色：#FFFFFF；}？data-*属性data-*属性用于存储页面或特定于应用程序的自定义数据。存储的数据可以在JavaScript代码中使用，以创造更多的用户体验。data-*属性由两部分组成属性名不能包含任何大写字母，前缀“data-”后必须至少有一个字符属性值可以是任意字符串示例：

知乎数据属性

我有一个隐藏的秘密！

Reveal在JS中：functionreveal(){letdataDiv=document.getElementById('data-attr');letvalue=dataDiv.dataset['customAttr'];document.getElementById('msg').innerHTML=${value};}注意：在JS中读取这些属性的值，可以通过getAttribute('data-custom-attr')g，但标准方法是使用数据集来获取它们。图像描述技巧您可以使用它在页面中存储一些数据，然后使用REST调用将其传递给服务器。？输出标签标签表示计算或用户操作的结果。*=图像描述技巧如果你想在客户端JS中执行任何计算并且想要result反映在页面上，可以使用，这样就不需要额外的步骤使用getElementById()来获取元素了。？数据列表元素包含一组ImageDescriptionTechniquedataList的行为类似于一个select下拉列表，但它只是一个提示，并没有限制用户在inputinput中输入什么select标签框来创建菜单。菜单中的选项用选项标签指定。在select元素内，必须包含一个option元素。一般来说，它们都可以显示一个下拉表单框，但是select标签只能从它提供的选项中进行选择，而datalist不仅可以让你选择，还可以让你自己输入其他选项。？Range(Slider)范围是一种输入类型，给定类型滑块的范围选择器。

图片描述？meter元素用于显示已知范围的标量值或分数值。/home/atapas2outof10/root60%clipboard.png提示不要用作为进度条，对应的进度条<进度>标签。下载进度：32%clipboard.png?Inputs对于输入标签类型，最常见的有文本、密码等，下面列出一些不太常见的语法。required要求输入字段是必需的。clipboard.pngautofocus文本输入字段设置为在页面加载时获得焦点：Validatewithregularexpressions您可以使用regex指定模式来验证输入。拾色器一个简单的拾色器。ColorMe!

原图说明：https://dev.to/atapas/10-usef...代码部署后可能存在的BUG无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。