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 这些元素上，里面的内容就变成可编辑的了。用法很简单：。需要注意的是，如果元素本身没有设置这个属性，它会从父元素那里继承。

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

三、地图

标签用来定义图像映射，简单说，就是在一张图片上划分出多个可点击的区域。每个区域由 标签定义，可以指定形状（矩形、圆形、多边形），如果不指定形状，默认就是整个图片区域。这个功能很实用，比如做一张带交互点的地图或者产品展示图。

四、标记内容

用 标签来高亮显示文本，太直观了。默认的高亮颜色是黄色，但你可以通过 CSS 轻松改变它。

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

使用 css 更改高亮颜色

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

五、data-* 属性

这是 HTML5 中一个非常强大的特性。data-* 属性允许我们在 HTML 元素上存储自定义的私有数据。这些数据可以很方便地被 Ja vaScript 获取并用于构建更丰富的用户体验。需要注意的是，属性名称不能包含大写字母，并且前缀“data-”之后至少得有一个字符。

 Know data attribute 
 
    I ha ve a hidden secret!  
 Reveal 

六、输出标签

标签用来表示计算或用户操作的结果，通常用于表单中，显示一些动态计算的值。

      *    = 

七、数据列表

这是实现“自动补全”功能的内置方案。 标签指定了一个预定义选项列表，用户除了可以选择这些选项，还能自由输入其他内容。它和 标签配合使用，提供了一种非常流畅的输入体验。

    Choose your fruit from the list:                  
  

八、范围（滑块）

这不是什么新东西，但 range 输入类型确实为滑块选择器提供了原生支持，搭配 onchange 事件可以实时显示当前值，交互非常自然。

九、Meter

如果要展示一个已知范围内的数据，比如磁盘使用率、投票结果等， 标签是首选。它用视觉化的方式告诉你“用了多少”。但要注意，它和 标签不同， 用于静态测量，而 用于表示任务的动态进度。

/home/atapas2 out of 10
/root60%

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

Downloading progress: 32% 

十、Inputs

输入类型这部分大家都很熟悉，但有几个特殊的用法值得单独拎出来说说。

必需的

用 required 属性，可以轻松将输入字段标记为必填项，表单提交时会自动进行前端验证。

自动对焦

autofocus 属性，让页面加载时自动将光标聚焦到指定的输入框，用户体验非常好。

使用正则表达式验证

想对密码或邮箱格式做更精细的控制？用 pattern 属性加上正则表达式即可。比如下面这个例子，要求密码是6-20个字符，并且至少包含一个数字、一个大写字母和一个小写字母。

颜色选择器

最后，一个非常直观的 type="color"，就能生成一个原生的颜色选择器，省去了开发第三方插件的麻烦。

Color Me!