HTML5小技巧

原文地址：https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0

🔥 Details Tag

<details>标签提供随需应变的细节内容给用户。如果需要按需向用户显示内容，请使用此标记。默认情况下，详细内容是关闭的。打开后，它将展开并显示其中的内容。

<summary>标签与<details>一起使用，来为它指定一个可见的标题。

Code

<details>
     <summary>Click Here to get the user details</summary>
         <table>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Job</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Adam</td>
                    <td>Huston</td>
                    <td>UI/UX</td>
                </tr>
          </table>
  </details>
复制代码

效果演示

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

小提示

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

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

🔥 Content Editable

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

可以与DIV，P，UL等元素一起使用。您必须像这样指定它：<element contenteditable=”true|false”>。

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

Code

<h2> Shoppping List(Content Editable) </h2>
 <ul class=“content-editable” contenteditable=“true”>
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>
复制代码

效果演示

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

小提示

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

🔥 Map

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67,114,207,254" href="elephant.htm">
        <area shape="rect" coords="222,141,318, 256" href="lion.htm">
        <area shape="rect" coords="343,111,455, 267" href="horse.htm">
        <area shape="rect" coords="35,328,143,500" href="clown.htm">
        <area shape="circle" coords="426,409,100" href="clown.htm">
    </map>
 </div>

效果演示

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

小提示

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

🔥 Mark Content

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

Code

 <p> Did you know, you can <mark>“Highlight something interesting”</mark> just with an HTML tag? </p>
复制代码

效果演示

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

小提示

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

mark {
  background-color: green;
  color: #FFFFFF;
}
复制代码

🔥 data-* attribute

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

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

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

属性值可以是任何字符串

Code

<h2> Know data attribute </h2>
 <div
       class=“data-attribute”
       id=“data-attr”
       data-custom-attr=“You are just Awesome!”>
   I have a hidden secret!
  </div>

function reveal() {
   let dataDiv = document.getElementById(‘data-attr’);
    let value = dataDiv.dataset[‘customAttr’];
   document.getElementById(‘msg’).innerHTML = &lt;mark&gt;<span class="hljs-subst">${value}</span>&lt;/mark&gt;;
}
复制代码

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

效果演示

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

小提示

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

🔥 Output Tag

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

Code

<form oninput=“x.value=parseInt(a.value) * parseInt(b.value)”>
   <input type=“number” id=“a” value=“0”>

* <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"b"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"0"</span>&gt;</span>
      = <span class="hljs-tag">&lt;<span class="hljs-name">output</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"x"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"a b"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">output</span>&gt;</span>

</form>
复制代码

效果演示

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

小提示

如果要在客户端JavaScript中执行任何计算，并且希望结果反映在页面上，请使用<output>标记。您不必走动使用可获取元素的额外步骤：getElementById()。

🔥 Datalist

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

Code

<form action=“” method=“get”>
    <label for=“fruit”>Choose your fruit from the list:</label>
    <input list=“fruits” name=“fruit” id=“fruit”>
        <datalist id=“fruits”>
           <option value=“Apple”>
           <option value=“Orange”>
           <option value=“Banana”>
           <option value=“Mango”>
           <option value=“Avacado”>
        </datalist>
     <input type=“submit”>
 </form>
复制代码

效果演示

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

小提示

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

🔥 Range(Slider)

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

Code

<form method=“post”>
    <input
         type=“range”
         name=“range”
         min=“0”
         max=“100”
         step=“1”
         value=“”
         onchange=“changeValue(event)”/>
 </form>
 <div class=“range”>
      <output id=“output” name=“result”>  </output>
 </div>
复制代码

效果演示

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

小提示

在html5中，没有叫slider的东西

🔥 Meter

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

Code

`<label for=“home”>/home/atapas</label>
<meter id=“home” value=“4” min=“0” max=“10”>2 out of 10</meter><br>

2020-11-27