H5新标签

最新推荐文章于 2025-09-14 10:15:31 发布

原创最新推荐文章于 2025-09-14 10:15:31 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#H5新标签

css 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了HTML5中新增的三个重要标签：optgroup用于组织select下拉菜单中的选项，output用于显示计算结果，details用于创建可折叠的详细信息部分。这些标签增强了网页的交互性和可维护性。

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

<select>
    <optgroup label="Group 1">
      <option>Option 1.1</option>
    </optgroup> 
    <optgroup label="Group 2">
      <option>Option 2.1</option>
      <option>Option 2.2</option>
    </optgroup>
    <optgroup label="Group 3" disabled>
      <option>Option 3.1</option>
      <option>Option 3.2</option>
    </optgroup>
 </select>

效果图：

简单的介绍这个功能，大多数的时候，我们所选择的框架开发，都会集成这种效果，可维护性也比较好，这里权当认识一下这个标签，不要遗忘了它~

output

HTML <output> 标签是HTML 5 中的新标签，表示计算或用户操作的结果,执行计算然后在 <output> 元素中显示结果。

注释：Internet Explorer 不支持标签。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="b" value="40" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>

效果图：

details 标签

HTML <details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

<details>
  <summary>点击展开</summary>
  <p>世间万物，为我所用，非我所得。</p>
</details>

效果图：

注意： 目前只有 Chrome 和 Safari 6 支持 <details> 标签。