Three infrequently used HTML elements:<details>, <summary>, <dialog>

Previous words

HTML5 not only added semantic block-level elements and form elements, but also added some other functional elements, which are not widely used due to browser support, for various reasons.

Document description

<details> is used primarily to describe the details of a document or part of a document, and with <summary>, you can define headings for <details>. The title is visible, and when the user clicks on the title, the details are displayed

[note] These two tags are only supported by Chrome and opera

<details>

The label has only one open property to define whether details are visible (default is invisible)

<details>    .</summary>    <p> Blue ideal for small matches </p></details>    

dialog box

The <dialog> tag is used to define a dialog box or window, and the dialog box is positioned horizontally at the center of the window

<details>

The label has only one open property that defines whether the dialog box is visible (default is not visible)

[note] only Chrome and opera support

<button> Show dialog box </button><dialog> I am the content of the dialog box </dialog><script>varOBTN = document.getElementsByTagName ('Button')[0];varOdia = document.getElementsByTagName ('Dialog')[0]; Obtn.onclick=function () {Console.log (Odia.getattribute ('Open'))  if(!odia.getattribute ('Open') {Odia.setattribute ('Open','Open');  This. InnerHTML ='Hide text boxes'; }Else{Odia.removeattribute ('Open');  This. InnerHTML ='Show text Box'; }}</script>

Three infrequently used HTML elements:<details>, <summary>, <dialog>