--- highlight: an-old-hope theme: channing-cyan --- # 九个有趣的H5特性 ## 一、详情标签 ### 1、用法概述该`

`标签向用户提供按需详细信息。如果您需要按需向用户显示内容，请使用此标签。默认情况下，小部件是关闭的。打开时，它会展开并显示其中的内容。该`

`标签用于`

`为它指定一个可见的标题。 ### 2、代码示例

Click Here to get the user details

序号	姓名	地址	工作
1	Rose	北京	Web前端
2	Jack	上海	产品测试
3	Tom	南京	数据分析
4	Jerry	杭州	网络安全

### 3、效果展示 ![1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbd6a0c8c45b4025a0dc23ba3cb07314~tplv-k3u1fbpfcp-watermark.image?) ## 二、可编辑内容 ### 1、用法概述 `contenteditable`是可以在元素上设置以使内容可编辑的属性。它适用于DIV、P、UL等元素。您必须指定它。例如，``。若`contenteditable`没有设置true或false值，则从其父级继承。 ### 2、代码示例

1. 数据一
2. 数据二
3. 数据三

### 3、效果展示 ![2.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7767a1bc596640239d887572699da974~tplv-k3u1fbpfcp-watermark.image?) ## 三、标记内容 ### 1、用法概述使用``标签突出显示任何文本内容 ### 2、代码示例

普通文本突出显示的文本

**注意** 高亮颜色可随意改变 mark { background-color: green; color: #FFFFFF; } ### 3、效果展示 ![3.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/041d6d3d529843b7a8d21a2a772f43ed~tplv-k3u1fbpfcp-watermark.image?) ## 四、data- 属性 ### 1、用法概述这些`data-*`属性用于存储页面或应用程序私有的自定义数据。存储的数据可用于JavaScript代码以创建进一步的用户体验。 `data-*`属性由两部分组成: - 属性名称不应包含任何大写字母，并且必须在前缀`data-`之后至少长一个字符 - 属性值可以是任何字符串 ### 2、代码示例 #### （1）HTML部分

有一条隐藏的数据

#### （2）Js部分 function reveal() { let dataDiv = document.getElementById('data-attr'); let value = dataDiv.dataset['customAttr']; document.getElementById('msg').innerHTML = `${value}`; } ### 3、效果展示 ![4.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a7fcbcaefb344da9f1638916ee39026~tplv-k3u1fbpfcp-watermark.image?) ## 五、输出标签 ### 1、用法概述 ``标签表示的运算的结果。通常，此元素定义将用于显示某些计算的文本输出的区域。 ### 2、代码示例 ### 3、效果展示 ![5.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e07260148e7543798dc87d8c118a9e85~tplv-k3u1fbpfcp-watermark.image?) ## 六、数据列表 ### 1、用法概述 ``标签指定了一个预定义选项列表，并允许用户向其中添加更多选项。它提供了一项`autocomplete`功能，允许您通过预先输入获得所需的选项。 ### 2、代码示例 ### 3、效果展示 ![6.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5831c8903a164246a299830d8a51dd00~tplv-k3u1fbpfcp-watermark.image?) ### 4、注意事项它与传统` ### 3、效果展示 ![7.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0589f7ebf7e14bd690388e5e5d9d1c08~tplv-k3u1fbpfcp-watermark.image?) ## 八、Meter ### 1、用法概述使用``标签测量给定范围内的数据。 ### 2、代码示例

指定最大10 占用4

4/10

直接占用总长70%

70% ### 3、效果示例 ![8.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3368da5564324c8bb3ffa960bee3bed5~tplv-k3u1fbpfcp-watermark.image?) ## 九、Inputs ### 1、用法概述这部分是我们最熟悉的输入类型的用法，如文本、密码等。输入类型的特殊用法很少 ### 2、代码示例 #### （1）将输入字段设置为必填字段 ***效果展示*** ![9-1.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abc9acec66c14e498a9e4391b75d5c77~tplv-k3u1fbpfcp-watermark.image?) #### （2）自动获取焦点 ***效果展示*** ![9-2.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64d1a4b34d5f4c9a8f5f1b0b7ee65944~tplv-k3u1fbpfcp-watermark.image?) #### （3）正则表达式验证 ***效果展示*** ![9-3.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8dd219192a1f46ccbf6f59b35edf810b~tplv-k3u1fbpfcp-watermark.image?) #### （4）颜色选择器

点击选择颜色

***效果展示*** ![9-4.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/459cdffe90a34464aa31893aa8d3c78b~tplv-k3u1fbpfcp-watermark.image?) # 总结 ***在H5的使用过程中，我们平时常用的属性有很多，但是仍然有许多非常方便便捷的属性或者元素供我们使用，更多的方法希望也能对大家在以后的学习或者工作中能起到一些作用，并且不断的去发现新的东西。***