九个有趣的H5特性

一、详情标签

1、用法概述

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

该<summary>标签用于<details>为它指定一个可见的标题。

2、代码示例

    <details>
     <summary>Click Here to get the user details</summary>
        <table>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>地址</th>
                <th>工作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Rose</td>
                <td>北京</td>
                <td>Web前端</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jack</td>
                <td>上海</td>
                <td>产品测试</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Tom</td>
                <td>南京</td>
                <td>数据分析</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Jerry</td>
                <td>杭州</td>
                <td>网络安全</td>
            </tr>
        </table>
    </details>
    

3、效果展示

二、可编辑内容

1、用法概述

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

例如，<element contenteditable="true|false">。

若contenteditable没有设置true或false值，则从其父级继承。

2、代码示例

    <ul class="content-editable" contenteditable="true">
      <li> 1. 数据一
      <li> 2. 数据二
      <li> 3. 数据三
    </ul>

3、效果展示

三、标记内容

1、用法概述

使用<mark>标签突出显示任何文本内容

2、代码示例

    <p> 普通文本 <mark>突出显示的文本</mark></p>

注意

高亮颜色可随意改变

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

3、效果展示

四、data- 属性

1、用法概述

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

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

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

• 属性值可以是任何字符串

2、代码示例

（1）HTML部分

    <div
        class="data-attribute"
        id="data-attr"
        data-custom-attr="隐藏的数据">
        有一条隐藏的数据
    </div>

    <button onclick="reveal()">点击显示</button>
    <p id="msg"></p>
    

（2）Js部分

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

3、效果展示

五、输出标签

1、用法概述

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

2、代码示例

    <form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
       <input type="number" id="a" value="0">
       * <input type="number" id="b" value="0">
       = <output name="x" for="a b"></output>
    </form>

3、效果展示

六、数据列表

1、用法概述

<datalist>标签指定了一个预定义选项列表，并允许用户向其中添加更多选项。它提供了一项autocomplete功能，允许您通过预先输入获得所需的选项。

2、代码示例

    <form action="" method="get">
        <label for="boyfriend">请选择您心仪的男朋友</label>
        <input list="boyfriends" name="boyfriend" id="boyfriend">
            <datalist id="boyfriends">
               <option value="张清博">
               <option value="彭于晏">
               <option value="梁朝伟">
               <option value="胡歌">
               <option value="吴彦祖">
            </datalist>
         <input type="submit">
     </form>  

3、效果展示

4、注意事项

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

七、范围滑块

1、用法概述

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

2、代码示例

    <form method="post">
        <input 
             type="range" 
             name="range" 
             min="0" 
             max="100" 
             step="1" 
             value=""/>
     </form>
     

3、效果展示

八、Meter

1、用法概述

使用<meter>标签测量给定范围内的数据。

2、代码示例

    <p>指定最大10 占用4</p>
    <meter id="home" value="4" min="0" max="10">4/10</meter><br>
    
    <p>直接占用总长70%</p>
    <meter id="root" value="0.7">70%</meter>

3、效果示例

九、Inputs

1、用法概述

这部分是我们最熟悉的输入类型的用法，如文本、密码等。输入类型的特殊用法很少

2、代码示例

（1）将输入字段设置为必填字段

    <form action="">
        <input type="text" id="username1" name="username" required>
        <button>submit</button>
    </form>
    

效果展示

（2）自动获取焦点

    <form action="">
        <input type="text" id="username1" name="username" required autofocus>
        <button>submit</button>
    </form>

效果展示

（3）正则表达式验证

    <form action="">
        <input type="password"
            name="password"
            id="password"
            placeholder="6-20 chars, at least 1 digit, 1 uppercase and one
            lowercase letter"
            // 正确格式：6-20位且必须包含数字以及大小写字母
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" 
            autofocus
            required>
        <button>submit</button>
    </form>
    

效果展示

（4）颜色选择器

    <input type="color">
    <p id="colorMe">点击选择颜色</p>

效果展示

总结

在H5的使用过程中，我们平时常用的属性有很多，但是仍然有许多非常方便便捷的属性或者元素供我们使用，更多的方法希望也能对大家在以后的学习或者工作中能起到一些作用，并且不断的去发现新的东西。