HTML510个好用的特性_0

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

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

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

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

单击此处获取用户详细信息

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

运行结果：技巧在GitHub自述文件中使用此技巧以按需显示详细信息。这是一个示例https://github.com/atapas/notifyme#properties?contenteditablecontenteditable是可以在元素上设置以使内容可编辑的属性。它适用于DIV、P、UL等元素。请注意，当未在元素上设置contenteditable属性时，它将从其父元素继承该属性。

购物清单（内容可编辑）

1.牛奶

2.面包

3.Honey

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

运行结果：Trickmap有其自身的缺点，但您可以将其用于视觉呈现。？marktag

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

运行结果：trick可以使用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，但是标准的方式是使用dataset获取。技巧您可以使用它在页面中存储一些数据，然后使用REST调用将其传递给服务器。？输出标签标签表示计算或用户操作的结果。*=技巧，如果你想在客户端JS中执行任何计算并且你想要结果体现在页面上，可以使用，这样就不需要额外的步骤使用getElementById()来获取元素了。？datalist元素包含一组技巧dataList的行为类似于选择下拉列表，但只是提示，不限制用户在input输入框中输入的内容。选择标签创建一个菜单。菜单中的选项用选项标签指定。在select元素内，必须包含一个option元素。一般来说，它们都可以显示一个下拉表单框，但是select标签只能从它提供的选项中进行选择，而datalist不仅可以让你选择，还可以让你自己输入其他选项。？Range(Slider)范围是一种输入类型，给定类型滑块的范围选择器。

?meter元素用于显示标量值或已知范围值的分钟。/home/atapas2outof10
/root60%
提示不要用作为进度条，progress的相应的标签。下载进度：32%?Inputs对于输入标签类型，最常见的有文本、密码等，下面列出一些比较少见的语法。required要求输入字段是必需的。自动对焦文本输入字段设置为在页面加载时获得焦点：Validatewithregularexpressions您可以使用正则表达式来指定一个模式来验证输入。拾色器一个简单的拾色器。ColorMe!

原文：https://dev.to/atapas/10-usef...code部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一下Fundebug，一款好用的bug监控工具。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档写了很多，欢迎Star和完善，大家可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。