The appearance of the details tag brings us a better user experience, without having to write JS for the effect of this contraction.
Note: only Chrome supports this tag at this time.
Details has a newly added sub-label--summary, and when the mouse clicks on the content text in the summary tag, all other elements in the Details tab will expand or contract.
Detalis Tags:
Case 1:
- <! DOCTYPE html>
-
-
- <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
- <TITLE>HTML5 daily Practice Details Expand Shrink Label Application </title>
-
- <body>
- <details>
- <summary>html5| css3| Forum | Front End Development Network (w3cfuns.com)!</summary>
- <P>HTML5 Forum, CSS3 Forum, CSS Forum, web front-end Development Forum, tutorial resources completely free CSS Forum, create the best HTML5/CSS3 forum </p>
- </detalis>
- </body>
-
Copy Code
What if the summary tag does not exist in details, in fact, when the details element does not have a summary tag, the browser will provide a default text when parsing, such as "view Details" such as localized text, The browser also offers an icon such as up and down arrows. For example, the following case 2 is a non-existent summary child tag example.
Case 2:
- <! DOCTYPE html>
-
-
- <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
- <TITLE>HTML5 daily Practice Details Expand Shrink Label Application </title>
-
- <body>
- <details>
- <P>HTML5 Forum, CSS3 Forum, CSS Forum, web front-end Development Forum, tutorial resources completely free CSS Forum, create the best HTML5/CSS3 forum </p>
- </details>
- </body>
-
Copy Code
Sometimes, we need to detalis content in the default to expand the status of what to do?
In fact, HTML5 has already thought for us, if has the aspect demand, we only need to add an attribute, like Case 3.
Open property:
Modify the code for Case 1 as follows:
Case 3:
- <! DOCTYPE html>
-
-
- <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
- <TITLE>HTML5 daily Practice Details Expand Shrink Label Application </title>
-
- <body>
- <details open>
- <summary>html5| css3| Forum | Front End Development Network (w3cfuns.com)!</summary>
- <P>HTML5 Forum, CSS3 Forum, CSS Forum, web front-end Development Forum, tutorial resources completely free CSS Forum, create the best HTML5/CSS3 forum </p>
- </details>
- </body>
-
Copy Code
This shows that HTML5 has indeed brought great convenience for us.