今天小编给大家分享一下实用的HTML5功能有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

<output>标签表示的运算的结果。通常，此元素定义一个区域，该区域将用于显示某些计算得出的文本。

<formoninput="x.value=parseInt(a.value)*parseInt(b.value)"><inputtype="number"id="a"value="0">*<inputtype="number"id="b"value="0">=<outputname="x"for="ab"></output></form>小小提示

如果您要在客户端JavaScript中执行任何计算，并且希望结果反映在页面上，请使用<output>标记。您不必走动使用即可获取元素的额外步骤getElementById()。

该<details>标签提供随需应变的细节给用户。如果需要按需向用户显示内容，请使用此标记。默认情况下，小部件是关闭的。打开后，它将展开并显示其中的内容。

该<summary>标签使用<details>来为它指定一个可见的标题。

<details><summary>ClickHeretogettheuserdetails</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>3.内容可编辑

contenteditable属性是可以在元素上设置以使内容可编辑的属性。它可与DIV，P，UL等元素一起使用。使用方法如下:

<elementcontenteditable="true|false"/>

注意，如果contenteditable未在元素上设置，则会从其父级继承该属性。

<h3>ShopppingList(ContentEditable)</h3><ulclass="content-editable"contenteditable="true"><li>1.Milk</li><li>2.Bread</li><li>3.Honey</li></ul>小小提示

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

该<map>标签可以帮助定义图像映射。图像映射是其中具有一个或多个可单击区域的任何图像。map标签与<area>标签一起确定可点击区域。可点击区域可以是矩形，圆形或多边形区域中的任意一种。如果未指定任何形状，它将考虑整个图像。

<div><imgsrc="circus.jpg"width="500"height="500"alt="Circus"usemap="#circusmap"><mapname="circusmap"><areashape="rect"coords="67,114,207,254"href="elephant.htm"><areashape="rect"coords="222,141,318,256"href="lion.htm"><areashape="rect"coords="343,111,455,267"href="horse.htm"><areashape="rect"coords="35,328,143,500"href="clown.htm"><areashape="circle"coords="426,409,100"href="clown.htm"></map></div>小小提示

图像贴图有其自身的缺点，但是您可以将其用于视觉演示。如何用全家福照片尝试一下并深入研究个人照片（可能是我们一直以来都怀有的旧照片！）。

使用<mark>标记突出显示任何文本内容。

<p>我为何这么帅?<mark>"这该死的魅力"</mark>是吗?</p>小小提示

您还可以使用CSS更改突出显示颜色，标记功能确实能够做出很多有意思的东西!

mark{background-color:green;color:#FFFFFF;}6.data- *属性

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

data- *属性由两部分组成：

属性名称不得包含任何大写字母，并且前缀“ data-”后必须至少长一个字符

属性值可以是任何字符串

<h3>你准备好了吗</h3><divclass="data-attribute"id="data-attr"data-custom-attr="YouarejustAwesome!">我有个秘密！</div><buttononclick="reveal()">点击看我的咪咪</button>functionreveal(){letdataDiv=document.getElementById('data-attr');letvalue=dataDiv.dataset['customAttr'];document.getElementById('msg').innerHTML=`<mark>${value}</mark>`;}小小提示

要在JavaScript中读取这些属性的值，可以使用getAttribute()它们的完整HTML名称（即data-custom-attr），但是该标准定义了一种更简单的方法：使用dataset属性。

<datalist>标签指定的预先定义的选项列表，并允许用户添加更多了。它提供了一项autocomplete功能，使您可以提前输入所需的选项

<formaction=""method="get"><labelfor="fruit">从列表中选择你的水果:</label><inputlist="fruits"name="fruit"id="fruit"><datalistid="fruits"><optionvalue="Apple"><optionvalue="Orange"><optionvalue="Banana"><optionvalue="Mango"><optionvalue="Avacado"></datalist><inputtype="submit"></form>小小提示

与传统<select>-<option>标签有何不同？选择标记用于从选项中选择一个或多个项目，您需要浏览列表以进行选择。Datalist是具有自动完成功能的高级功能。

range是给定的一个样滑块范围选择的输入类型。

<formmethod="post"><inputtype="range"name="range"min="0"max="100"step="1"value=""onchange="changeValue(event)"/></form><divclass="range"><outputid="output"name="result"></output></div>小小提示

sliderHTML5中没有任何毛病

使用<meter>标签测量给定范围内的数据。

<labelfor="home">/home/atapas</label><meterid="home"value="4"min="0"max="10">2outof10</meter><br><labelfor="root">/root</label><meterid="root"value="0.6">60%</meter><br>小小提示

不要将<meter>标签用于进度指示器，以实现用户体验。我们有<Progress>HTML5 的标记。

<labelfor="file">Downloadingprogress:</label><progressid="file"value="32"max="100">32%</progress>10.输入（这个没什么新鲜的，凑数吧!）

我们最了解这部分的用法，例如文本，密码等输入类型。输入类型的特殊用法很少，

将输入字段标记为必填

<inputtype="text"id="username1"name="username"required>自动对焦

通过将光标放在输入元素上来自动将焦点放在输入元素上。

<inputtype="text"id="username2"name="username"requiredautofocus>正则表达式验证

您可以使用正则表达式指定模式以验证输入。

<inputtype="password"name="password"id="password"placeholder="6-20chars,atleast1digit,1uppercaseandonelowercaseletter"pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"autofocusrequired>选色器

<inputtype="color"onchange="showColor(event)"><pid="colorMe">ColorMe!</p>

以上就是“实用的HTML5功能有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。