1 Star 0 Fork 1

小弟调调 / html-tutorial

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
summary.md 2.33 KB
一键复制 编辑 原始数据 按行查看 历史
小弟调调 提交于 2022-05-01 21:55 . doc: update document.

HTML <summary> Tag

示例

使用 <summary> 元素:

<details>
  <summary>
    HyperText Markup Language
  </summary>
  <p>HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)</p>
</details>

定义和用法

<summary> 标记定义了 <details> 元素的可见标题。 可以单击标题以查看/隐藏详细信息。

注意: <summary> 元素应该是 <details> 元素的第一个子元素。

浏览器支持

表中的数字指定了完全支持该元素的第一个浏览器版本。

Element chrome edge firefox safari opera
<summary> 12.0 79.0 49.0 6.0 15.0

全局属性

<summary> 标签支持 HTML 中的全局属性

事件属性

<summary> 标签支持 HTML 中的事件属性

更多示例

使用 CSS 设置 <details> 和 <summary> 的样式:

<html>
<head>
  <style>
    details > summary {
      padding: 4px;
      width: 200px;
      background-color: #eeeeee;
      border: none;
      box-shadow: 1px 1px 2px #bbbbbb;
      cursor: pointer;
    }
    details > p {
      background-color: #eeeeee;
      padding: 4px;
      margin: 0;
      box-shadow: 1px 1px 2px #bbbbbb;
    }
  </style>
</head>
<body>
  <details>
    <summary>HyperText Markup Language</summary>
    <p>HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)</p>
  </details>
</body>
</html>

默认 CSS 设置

大多数浏览器将显示具有以下默认值的 <summary> 元素:

summary {
  display: block;
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/jaywcjlove/html-tutorial.git
git@gitee.com:jaywcjlove/html-tutorial.git
jaywcjlove
html-tutorial
html-tutorial
main

搜索帮助