实用的HTML5功能有哪些

代码如下:

  
Click Here to get the user details
   
      
          
#
          
Name
          
Location
          
Job
      
      
          
1
          
Adam
          
Huston
          
UI/UX
      
    

3.内容可编辑

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

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

代码如下:

 Shoppping List(Content Editable) 
 
     
 1. Milk 
     
 2. Bread 
     
 3. Honey 

小小提示

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

4.地图

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

代码如下:

小小提示

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

5.标记内容

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

代码如下:

 
 我为何这么帅? "这该死的魅力" 是吗? 

小小提示

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

mark {  background-color: green;  color: #FFFFFF;}

6.data- *属性

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

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

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

• 属性值可以是任何字符串

代码如下:

 你准备好了吗 
 
       我有个秘密！  
 点击看我的咪咪function reveal() {   let dataDiv = document.getElementById('data-attr');    let value = dataDiv.dataset['customAttr'];   document.getElementById('msg')[xss_clean] = `${value}`;}

小小提示

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

7.数据清单

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

代码如下:

    从列表中选择你的水果:                  

小小提示

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

8.范围（滑块）

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

代码如下:

小小提示

sliderHTML5中没有任何毛病

9.测量标签

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

代码如下:

/home/atapas2 out of 10
/root60%

小小提示

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

Downloading progress: 32% 

10.输入（这个没什么新鲜的，凑数吧!）

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

必填

将输入字段标记为必填

自动对焦

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

正则表达式验证

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

选色器

Color Me!

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