HTML5中一些酷炫又有趣的新特性代码整理汇总

     
Click Here to get the user details
            

                

                    
#
                    
Name
                    
Location
                    
Job
                
                

                    
1
                    
Adam
                    
Huston
                    
UI/UX
                
                

                    
2
                    
Bob
                    
London
                    
Machine Learning
                
                

                    
3
                    
Jack
                    
Australia
                    
UI Designer
                
                

                    
4
                    
Tapas
                    
India
                    
Blogger
                
            
        

二、内容可编辑

contenteditable是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。您必须指定它，例如，。

注意: 当contenteditable元素上没有设置属性时，它将从其父元素继承。

 Shoppping List(Content Editable) 
 

     
 1. Milk 
     
 2. Bread 
     
 3. Honey 

三、地图

该标签有助于定义图像映射。图像映射是其中包含一个或多个可点击区域的图像。地图标签带有一个标签来确定可点击区域。可点击区域可以是这些形状、矩形、圆形或多边形区域之一。如果您不指定任何形状，它会考虑整个图像。

四、标记内容

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

 你知道吗，你可以仅使用 HTML 标签 "突出显示有趣的东西"

使用 css 更改高亮颜色

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

五、data-* 属性

这些data-*属性用于存储页面或应用程序私有的自定义数据。存储的数据可用于 JavaScript 代码以创建进一步的用户体验。

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

属性名称不应包含任何大写字母，并且必须在前缀"data-"之后至少长一个字符
属性值可以是任何字符串

 Know data attribute 
 
 
   I have a hidden secret!
  

 Reveal
 

六、输出标签

标签表示的运算的结果。通常，此元素定义将用于显示某些计算的文本输出的区域。

   
   * 
   = 

七、数据列表

标签指定了一个预定义选项列表，并允许用户向其中添加更多选项。它提供了一项autocomplete功能，允许您通过预先输入获得所需的选项。

    Choose your fruit from the list:
    
        
     
 
  

八、范围（滑块）

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

九、Meter

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

/home/atapas
2 out of 10


/root
60%

提示不要将标签用于进度指示器类型的用户体验。我们有来自 HTML5的标签。

Downloading progress:
 32% 

十、Inputs

这部分是我们最熟悉的输入类型的用法，如文本、密码等。输入类型的特殊用法很少

必需的

将输入字段标记为必填字段。

自动对焦

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

使用正则表达式验证

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

颜色选择器

一个简单的颜色选择器。

Color Me!

到此这篇关于HTML5中一些酷炫又有趣的新特性代码整理汇总的文章就介绍到这了,更多相关HTML5新特性代码内容请搜索讯客以前的文章或继续浏览下面的相关文章希望大家以后多多支持讯客！