HTML <summary> ਟੈਗ

  • ਪਿਛਲਾ ਪੰਨਾ <sub>
  • ਅਗਲਾ ਪੰਨਾ <sup>

定义和用法

<summary> 标签为 <details> 元素 定义了一个可见的标题。点击标题可以查看/隐藏详细信息。

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

另请参阅：

HTML DOM 参考手册：Summary 对象

实例

例子 1

使用 <summary> ਐਲੀਮੈਂਟ:

<details>
  <summary>ਭਵਿੱਖ ਦੇ ਕੇਂਦਰ (Epcot Center)</summary>
  <p>Epcot ਹੋਵਰਡ ਵਾਨ ਡਿਜ਼ਨੀ ਵਿਸ਼ਵ ਰਿਸਾਰਟ ਦਾ ਥੀਮ ਪਾਰਕ ਹੈ, ਜਿਸ ਵਿੱਚ ਉਤਸ਼ਾਹਜਨਕ ਸਥਾਨ, ਅੰਤਰਰਾਸ਼ਟਰੀ ਮੌਜੂਦਗੀ, ਪੁਰਸਕਾਰ ਵਿਜੇਤਾ ਫਾਇਰਵਰਕ ਅਤੇ ਸੀਜ਼ਨਲ ਗਤੀਵਿਧੀਆਂ ਹਨ。</p>
</details>

ਸਵੈ ਸਿਖਲਾਈ ਦੇਖੋ

例子 2

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

<html>
<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>
<body>
<details>
  <summary>ਭਵਿੱਖ ਦੇ ਕੇਂਦਰ (Epcot Center)</summary>
  <p>Epcot ਹੋਵਰਡ ਵਾਨ ਡਿਜ਼ਨੀ ਵਿਸ਼ਵ ਰਿਸਾਰਟ ਦਾ ਥੀਮ ਪਾਰਕ ਹੈ, ਜਿਸ ਵਿੱਚ ਉਤਸ਼ਾਹਜਨਕ ਸਥਾਨ, ਅੰਤਰਰਾਸ਼ਟਰੀ ਮੌਜੂਦਗੀ, ਪੁਰਸਕਾਰ ਵਿਜੇਤਾ ਫਾਇਰਵਰਕ ਅਤੇ ਸੀਜ਼ਨਲ ਗਤੀਵਿਧੀਆਂ ਹਨ。</p>
</details>
</body>
</html>

ਸਵੈ ਸਿਖਲਾਈ ਦੇਖੋ

ਗਲੋਬਲ ਅਟਰੀਬਿਊਟ

<summary> ਟੈਗ ਇਸ ਈਵੈਂਟ ਅਟਰੀਬਿਊਟ ਦੀ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਗਲੋਬਲ ਅਟਰੀਬਿਊਟ。

ਈਵੈਂਟ ਅਟਰੀਬਿਊਟ

<summary> ਟੈਗ ਇਸ ਈਵੈਂਟ ਅਟਰੀਬਿਊਟ ਦੀ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਈਵੈਂਟ ਅਟਰੀਬਿਊਟ。

ਮਿਆਰੀ CSS ਸੈਟਿੰਗ

ਮਿਆਰੀ ਬਰਾਊਜ਼ਰ ਮੂਲਧਾਰਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦਿਸਾਈ ਜਾਵੇਗੀ <summary> ਐਲੀਮੈਂਟ:

summary {
  display: block;
}

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰੇ ਦੇ ਅਨੁਸਾਰ ਇਸ ਅਟਰੀਬਿਊਟ ਦਾ ਪਹਿਲਾ ਪੂਰਣ ਸਮਰਥਨ ਕਰਨ ਵਾਲਾ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਖਿਆ ਦਿੱਤੀ ਗਈ ਹੈ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
12.0 79.0 49.0 6.0 15.0
  • ਪਿਛਲਾ ਪੰਨਾ <sub>
  • ਅਗਲਾ ਪੰਨਾ <sup>