你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？

代码

     
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
                
            
        

看看它如何工作

你可以从这里玩它：https://haiyong.site/demo/html-tips-tricks/details/

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

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

代码

 Shoppping List(Content Editable) 
 

     
 1. Milk 
     
 2. Bread 
     
 3. Honey 

看看它如何工作

你可以从这里玩它：https://haiyong.site/demo/html-tips-tricks/content-editable/

快速提示

span 或 div 元素可以使用它进行编辑，您可以使用 CSS 样式向其中添加任何丰富的内容。这将比使用输入字段处理它要好得多。去试一试！

该

代码

看看它如何工作

你可以从这里玩它：https://haiyong.site/demo/html-tips-tricks/map/

快速提示

图像地图有其自身的缺点，但您可以将其用于视觉演示。试试看一张全家福怎么样，然后深入到个人的照片（可以是我们一直珍视的旧照片！）。

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

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

看看它如何工作

你可以从这里玩它：https://haiyong.site/demo/html-tips-tricks/mark/

快速提示

您可以随时使用 css 更改高亮颜色

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

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

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

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

代码

 Know data attribute 
 
 
   I have a hidden secret!
  

 Reveal
 

然后在 JavaScript 中，

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `${value}`;
}

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

看看它如何工作

你可以从这里玩它：https://haiyong.site/demo/html-tips-tricks/data-attribute/

快速提示

您可以使用它在页面上存储一些数据，然后使用 REST 调用将其传递给服务器。

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

代码

   
          * 
                = 

看看它如何工作

你可以从这里玩它：https://haiyong.site/demo/html-tips-tricks/output/

快速提示

如果您在客户端 JavaScript 中执行任何计算，并且希望结果反映在页面上，请使用

标记。您不必执行使用 获取元素的额外步骤getElementById()。

代码

    Choose your fruit from the list:
    
        
     
 
  

看看它如何工作

你可以从这里玩它：https://haiyong.site/demo/html-tips-tricks/datalist/

快速提示

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

刺 八、范围（滑块）

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

代码

/home/atapas
2 out of 10


/root
60%

Downloading progress:
 32% 

Color Me!