10个有用的HTML5特性

时间：2023-03-12 19:53:00 科技观察

detais标签

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

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

ClickHeretogettheuserdetails

#	Name	Location	Job
1	Adam	Huston	UI/UX

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

购物清单（ContentEditable）

1.牛奶

2.面包

3.Honey

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

运行结果：技能图有其自身的缺点，但您可以将其用于视觉演示。marktag

你知道吗，你可以"Highlightsomethinginteresting"justwithanHTMLtag?

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

Knowdataattribute

Ihaveahiddensecret!

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

meter元素用于显示已知范围内的标量或分数值。/home/atapas2outof10
/root60%
Tips不要用作为进度条，进度对应的标签酒吧。Downloadingprogress:32%Inputs对于input标签类型，最常见的有text，password等等等等，下面列出了一些不太常见的语法。required要求输入字段是必需的。autofocus文本输入字段设置为在页面加载时获得焦点：使用正则表达式验证您可以使用正则表达式指定模式来验证输入。颜色选择器一个简单的颜色选择器。ColorMe!