HTML <summary> टैग

  • पिछला पृष्ठ <sub>
  • अगला पृष्ठ <sup>

परिभाषा और उपयोग

<summary> टैग के लिए <details> एलीमेंट एक दृश्यमान शीर्षक निर्धारित करता है। शीर्षक पर क्लिक करके विवरण देख सकते हैं/छुपा सकते हैं。

ध्यान देंः<summary> एलीमेंट होना चाहिए <details> एलीमेंट पहला चयनकर्ता.

अन्य संदर्भः

HTML DOM संदर्भ दस्तावेज़ःसमीक्षा ऑब्जेक्ट

उदाहरण

उदाहरण 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>