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

目录

• 一、详情标签
• 二、内容可编辑
• 三、地图
• 四、标记内容
• 五、data-* 属性
• 六、输出标签
• 七、数据列表
• 八、范围（滑块）
• 九、Meter
• 十、Inputs
• 必需的
• 自动对焦
• 使用正则表达式验证
• 颜色选择器

HTML5 是 HyperText Markup Language 5 的缩写，HTML5技术结合了HTML4.01的相关标准并革新，符合现代网络发展要求，在2008年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。

HTML5并非仅仅用来表示Web内容，它将 Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。

HTML5自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。再次查看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新特性代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！