html5常用特性,10个好用的 HTML5 特性

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。

detais 标签

标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容，简单的做法就是使用此标签。默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。

事例：

  Click Here to get the user details  

#	Name	Location	Job
1	Adam	Huston	UI/UX

运行结果：

技巧

在 GitHub Readme 中使用它来显示按需的详细信息。这是一个示例https://github.com/atapas/notifyme#properties

内容可编辑

contenteditable是可以在元素上设置以使内容可编辑的属性。它适用于DIV，P，UL等元素。

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

 Shoppping List(Content Editable) 

 

•      
•  1. Milk      
•  2. Bread      
•  3. Honey 

运行结果：

技巧

可以让span或div标签可编辑，并且可以使用css样式向其添加任何丰富的内容。这将比使用输入字段处理它更好。试试看！

Map

HTML 属性 与 属性一起使用来定义一个图像映射(一个可点击的链接区域)。可点击的区域可以是这些形状中的任何一个，矩形，圆形或多边形区域。如果不指定任何形状，则会考虑整个图像。

事例：

                                                     

运行结果：

技巧

map有其自身的缺点，但是你可以将其用于视觉演示。

mark 标签

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

运行结果：

技巧

可以使用css更改高亮颜色:

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

data-* 属性

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

data-*属性由两部分组成

属性名不能包含任何大写字母，并且必须在前缀“data-”之后至少有一个字符

属性值可以是任何字符串

事例：

 Know data attribute 

     I have a hidden secret!