What is the role of the html5 details tag? Introduction to the use of tag (with usage examples)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

What is the role of the html5 details tag? Introduction to the use of tag (with usage examples)

寻∝梦

Aug 22, 2018 pm 01:58 PM

html5

html5 What are the functions of the details tag and how to use the

tag? For detailed content, let us take a look at the definition and usage instructions of the html details tag introduced in this article, as well as the specific usage of the html5 details tag

html5

tag Definition and usage instructions:

The new

tag in HTML5 allows users to create an expandable and foldable element, allowing a piece of text or title to contain some hidden information.

tag is used to describe details of a document or a certain part of a document. The

tag specifies additional details of the requirement that are visible or hidden to the user.

tag is used for users to open and close interactive controls. Any form of content can be placed inside the

tag.

The content of the element is not visible to the user unless the open attribute is set.

html5 How to use the

tag:

Generally, details are used to further explain the content displayed on the page. The effect displayed is similar to that of the jQuery accordion plug-in.

It is roughly written as follows:

<details>
<summary>Google Nexus 6</summary>
<p>商品详情：</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>电池</dt>
<dd>3220 mAh</dd>
<dt>相机</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>处理器</dt>
<dd>Qualcomm? Snapdragon? 805 processor</dd>
</dl>
</details>

Copy after login

The first is the

tag, followed by the title

. The content here is generally short and summary, and will be displayed on the page . You can then follow any type of HTML element as detailed content, which will only be displayed when

is clicked.

Details is a new interactive element in h5. Details can be used in conjunction with the summary tag to define a title for details. By default, the content in the details tag is not displayed. When the user clicks on the title, details are displayed. The emergence of the

details tag has brought us a better user experience. There is no need to write JS to achieve this shrinking and expanding effect.

details has a newly added sub-tag - summary. When the mouse clicks on the content text in the summary tag, all other elements in the details tag will expand or contract.

html5 detailis tagExample 1:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details标签的应用</title> 
    </head>     
    <body> 
        <details> 
                <summary>HTML5|CSS3|PHP | PHP中文网(php.cn)!</summary> 
                <p>PHP中文网,WEB前端开发论坛,教程资源完全免费PHP网站，打造最好的编程网站</p> 
        </detalis> 
    </body> 
</html>

Copy after login

What happens if the summary tag does not exist in details? In fact, when there is no summary tag in the details element, the browser During parsing, a default text will be provided, such as "View details" and other localized text, and the browser will also provide an icon such as up and down arrows. For example, the following case 2 is an example where the summary subtag does not exist:

Example 2:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details展开收缩标签的应用</title> 
    </head> 
    <body> 
        <details> 
                <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p> 
        </details> 
    </body> 
</html>

Copy after login

Sometimes, what should we do if we need the content in detalis to be in the expanded state by default?

In fact, HTML5 has already been thought of for us. If there is a need, we only need to add an attribute, such as Case 3.

html5 The role of the details tag and the usage of the Open attribute:

Modify the code of case 1 as follows:

Example 3:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details展开收缩标签的应用</title> 
    </head> 
    <body> 
        <details open> 
                <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary> 
                <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p> 
        </details> 
    </body> 
</html>

Copy after login

It can be seen that HTML5 has indeed brought us great convenience.

html5 The role of the details tag and the usage of common attributes of the details tag:

open: The value is open and the function is defined Whether details are visible.

subject: The value is sub_id, and its function is to set the ID number of the project corresponding to the element.

draggable: The value is true or false. The function is to set whether the element can be dragged. The default value is false.

Simple details example:

What is the role of the html5 details tag? Introduction to the use of <details> tag (with usage examples)

##Currently only Chrome and Safari 6 support the

tag.

I personally think that the details tag should be supported by more browsers in the future, because its appearance makes it a lot more convenient for beginners. It is always good to learn more now, and you can feel free to do it after it is promoted. has been used, this article ends here. If you have any questions, you can ask them below.

[Personal related recommendations]

html What is the role of the em tag? The difference between and tags

Introduction to the style of html5 table tag (attached is an example of html5 table css centering)

The above is the detailed content of What is the role of the html5 details tag? Introduction to the use of tag (with usage examples). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn