分享几个 HTML5 不常使用但却很有用的小技巧（微信文章未删减版）

HTML 并不是一个新技术，做前端的同学第一个要掌握的就是 HTML。本文将列举一些平时不经常用到但是却很有用的 HTML 标签或者属性。

1. details 标签

利用<details>标签，我们可以很方便的控制内容的展开和收起。

下面是它的用法：

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
复制代码

看下效果

但是这个标签不支持 IE

2. contenteditable 属性

contenteditable 是一个全局属性，几乎可以对所有的 HTML 标签设置 contenteditable 属性。

有几点需要注意：

当 contenteditable 为 true 或者一个空字符串时，对应的元素可编辑。
当 contenteditable 为 true 或者空字符串以外的字符时，不可以编辑。
如果未对 contenteditable 设置任何值，默认为空字符串，即可编辑。
contenteditable 具有继承性。如果父元素设置了 contenteditable=true, 则所有的子元素都是可编辑的。

下面是代码

<div contenteditable=true>
    <p>
        <span>Edit this content to add your own quote</span>
    </p>
</div>
复制代码

看下效果：

3. mark

<mark> 标签可以对文字设置高亮显示。

用法如下：

<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
复制代码

效果如下:

4. 自定义 data 属性

可以在 HTML 标签中通过 data-* 自定义一些属性，然后在 js 中或者 css 中可以获取到自定义的属性。

下面这段代码

<li data-fullname="Thomas Cruise Mapother IV">Tom Cruise</li>

// css
li:after {
    content: 'FullName: ' attr(data-fullname);
    position: absolute;
    top: -22px;
    left: 10px;
    background: black;
    color: white;
    padding: 2px;
    border: 1px solid #eee;
    opacity: 0;
    transition: 0.5s opacity;
}
复制代码

当鼠标悬浮之后，将显示全名：

JS 中也可以获取到自定义的属性值

this.dataset.fullname
复制代码

5. output 元素

<output>标签作为计算结果输出显示。

下面是它的用法

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result" for="a b"></output>
</form>
复制代码

for: 描述计算中使用的元素与计算结果之间的关系。
form: 定义输入字段所属的一个或多个表单。
name: 定义对象的唯一名称。

这个标签不支持 IE。

6. datalist 元素

<datalist>元素包含了一组<option>元素，这些元素表示其它表单控件的可选值.

下面是它的用法

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
复制代码

7. map 元素

<map>标签与<area>标签一起使用，用来实现图像指定区域的可点击。

下面是它的用法

<p id="choose"></p>
<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="#HTML"
    onclick="onAreaClick('HTML')"
    alt="HTML"
  />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="#CSS"
    onclick="onAreaClick('CSS')"
    alt="CSS"
  />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="#JavaScript"
    onclick="onAreaClick('JavaScript')"
    alt="JavaScript"
  />
</map>
<img
  usemap="#infographic"
  src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png"
  alt="MDN infographic"
/>
复制代码

效果如下：

8. meter 元素与progress 元素

<meter>和<progress>标签都是用来表示占比，默认显示为进度条样式。

它们的用法如下：

<meter>用法

<label for="fuel">Fuel level:</label>

<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

复制代码

<progress>用法

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>
复制代码

与<meter>不同的是，<progress>属性很少，并且不支持 min 属性，默认最小值始终为 0。

但是<progress>几乎兼容所有浏览器，而<meter>不兼容 IE。

9. dialog 元素

<dialog>标签用来显示一个对话框。

它的用法如下：

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>
复制代码

它的兼容性不是很好，不支持 IE 及 Safari。

10. picture 元素

<picture>元素的作用与<img>元素类似，都是用来显示图片，但是它比<img>功能更加强大。

<img>只能加载一张图片，无论运行在任何设备上，始终加载显示同样的图片，这样就会导致在某些设备上显示效果不佳。
<picture>可以内嵌多个<source>元素，可以通过 srcset 及 media 配合实现不同分辨率上显示不同的图片，来达到最佳的显示效果。

下面是它的基本用法：

<picture>
    <source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 550px)">
    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fda16dfe9d42473ab91bcec54629e4ab~tplv-k3u1fbpfcp-zoom-1.image" alt="" />
</picture>
复制代码

通过调整浏览器窗口大小发现，当浏览器宽度大于 550 时，显示 surfer-240-200.jpg 这张图片，否则显示默认的 img 中定义的图片。

11. input 元素

<input>标签光 type 属性就有 20 多种，除了常用的"text", "number", "checkbox"等，下面主要列举几个比较少用但是很有用的属性。

Required

<input type="text" required/>
复制代码

拾色器

<input type="color" />
复制代码

Range

<input type="range" />
复制代码

Email

<input type="email" placeholder="email" required />
复制代码

**Regex (^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{6,20}$)**

<input
    type="password"
    id="password"
    name="password"
    placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
    required
/>
复制代码

分享几个 HTML5 不常使用但却很有用的小技巧

分享几个 HTML5 不常使用但却很有用的小技巧

1. details 标签

2. contenteditable 属性

3. mark

4. 自定义 data 属性

5. output 元素

6. datalist 元素

7. map 元素

8. meter 元素与progress 元素

<meter>用法

<progress>用法

9. dialog 元素

10. picture 元素

11. input 元素

Required

拾色器

Range

Email

Regex (^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{6,20}$)

文章中的示例代码已经上传到GitHub

**Regex (^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{6,20}$)**