最近发现的一些 HTML 实用小知识

今天再为大家分享点 HTML 的新知识，每天不分享点有意思的东西,浑身难受。

是一些 HTML 特性。

大家可以在 分格 HTML 编辑器这个我自制的 HTML 调试工具里面实验下面的代码：

大家很少会关注 HTML 的发展，因为相较于CSS、JavaScript，这个 HTML 的发展进程会缓慢很多。

details 标签可以分组

学过 HTML5 的同学都知道很实用的 details / summary 这个组合，能搞一个标签，然后让其把内容折叠对吧。

但如果你有多个 details-summary 呢？如果你想打开一个，把另一个给关闭了，一次只显示一个，怎么弄呢？

其实这个 details 是可以分组的！

就是 name 属性，相同的 name 属性会产生互斥效果！

大家可以试试下面这个案例，我向一个门里放进了一个大钻石，很有意思！

<style>
  details { background: #eee; margin: 5px; padding: 10px; border-radius: 8px; cursor: pointer; }
  details[open] { background: #ffd700; font-weight: bold; transform: scale(1.01); transition: 0.2s;}
  summary { list-style: none; } /* 隐藏默认三角 */
</style>

<h3>只能选一扇门 (name="game")</h3>

<!-- 相同的 name 属性产生互斥效果 -->
<details name="game"><summary>门 1</summary>空</details>
<details name="game"><summary>门 2</summary>大钻石！</details>
<details name="game"><summary>门 3</summary>空</details>

效果如下：

是不是很好玩呢？

那它有啥用呢？就是在你盒子长度、高度等有限制的 时候，不适合都展开的场景里。

选择框里支持两种注释

在之前，我们可能知道 HTML 里有个选择框 select 标签，其实 HTML 这个 select 里还可以装 注释，以及很关键的 hr 分割线。

还有 select, ::picker(select){appearance: base-select;} 这个伪元素，可以重置 select 的默认样式，让它更容易被修饰：

<style>
  select, ::picker(select) { appearance: base-select; }
  option { padding: 5px; }
</style>

<h3>勇者装备店</h3>
<select>
  <option>空手 (默认)</option>
  <hr>
  <optgroup label="传说武器">
    <option>烈焰之剑</option>
    <option>寒冰法杖</option>
  </optgroup>
  <hr>
  <option style="color:red">诅咒物品 (慎选)</option>
</select>

这是一个我昨天晚的在线小游戏里的案例，几个魔法技能：

还是比较漂亮的。

更简易的弹出模态框

领导让你去做一个模态框，你怎么做？捣鼓 JS 吗？

其实 HTML 后来又悄无声息地新出了 popovertarget 这个很实用的属性。就像 bootstrop 里加个属性就是模态框一样，可以很轻松实现一个模态框。

<style>
  [popover] { padding: 2rem;  }
</style>

<button popovertarget="surprise-box">单击我</button>
<div id="surprise-box" popover="auto">
  <h1>TADA!</h1>
  <p>我是原生 Popover 模态框，处于浏览器顶层</p>
  <button popovertarget="surprise-box">关闭</button>
</div>

效果如下：

还是很实用的。

不用 noopener noreferrer 了

还有一个，我就不说明了。在写 HTML 的时候，我们肯定少不了在 a 标签里写 noopener noreferrer 对吧，因为会有漏洞，让新打开的页面，访问原页面。但现在已经修复这个漏洞了。

只要 target="_blank" 标签写上，浏览器会自动为 链接 加上 noopener noreferrer 。

详细的修复细节见这篇文章:

https://chromestatus.com/feature/6140064063029248chromestatus.com/feature/6140064063029248

今天就这样吧~