BAT大佬推荐使用的HTML5的十个功能

Code

     
Click Here to get the user details
         

                

                    
#
                    
Name
                    
Location
                    
Job
                
                

                    
1
                    
Adam
                    
Huston
                    
UI/UX
                
          
``  

效果演示

您可以从这里开始查看演示：https : //html5-tips.netlify.app/details/index.html

小提示

在GitHub Readme中使用它来显示需要的详细信息。隐藏大量的文字并仅按需显示它。酷吧？

点击查看例子：https://github.com/atapas/notifyme#properties

?? Content Editable

contenteditable是可以在元素上设置以使内容可编辑的属性

可以与DIV，P，UL等元素一起使用。您必须像这样指定它：。

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

Code

 Shoppping List(Content Editable) 
 

     
 1. Milk 
     
 2. Bread 
     
 3. Honey 

效果演示

您可以从这里开始查看演示：https://html5-tips.netlify.app/content-editable/index.html

小提示

可以使span或div元素可编辑，并且可以使用CSS样式向其添加任何丰富的内容。这将比使用input 输入框更好。试一试！

?? Map

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

Code

效果演示

您可以从这里开始查看演示：https://html5-tips.netlify.app/map/index.html

小提示

图像贴图有其自身的缺点，但是您可以将其用于视觉演示。我们可以用全家福照片尝试一下并深入研究个人照片

?? Mark Content

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

Code

 
 Did you know, you can "Highlight something interesting" just with an HTML tag? 

效果演示

您可以从这里开始查看演示：https://html5-tips.netlify.app/mark/index.html

小提示

您始终可以使用CSS更改突出显示颜色，

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

?? data-* attribute

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

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

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

Code

 Know data attribute 
 
 
   I have a hidden secret!
  

 Reveal

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

注意：要在JavaScript中读取这些属性的值，可以使用getAttribute()，但是规范定义了一种更简单的方法：使用dataset属性。

效果演示

您可以从这里开始查看演示：https://html5-tips.netlify.app/data-attribute/index.html

小提示

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

?? Output Tag

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

Code

   
          * 
                = 

效果演示

您可以从这里开始查看演示：https://html5-tips.netlify.app/output/index.html

小提示

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

标记。您不必走动使用可获取元素的额外步骤：getElementById()。

?? Datalist

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

Code

    Choose your fruit from the list:
    
        
     
 
  

效果演示

您可以从这里开始查看演示：https://html5-tips.netlify.app/datalist/index.html

小提示

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

?? Range(Slider)

range具有滑块，范围选择的输入类型

Code

`

    
 
 

      
  
 
 `

Downloading progress:
 32%