html5 动态获取select 值_10个好用的 HTML5 特性

文末送书

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

? detais 标签

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

事例：

Click Here to get the user details

#NameLocationJob1AdamHustonUI/UX


运行结果：

技巧

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

? 内容可编辑

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

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

 Shoppping List(Content Editable) 


  "content-editable" contenteditable="true"> 1. Milk  2. Bread  3. Honey 


运行结果：

技巧

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

? Map

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

事例：

"circus.jpg" width="500" height="500" alt="Circus" usemap="#ci