Quel est le rôle de la balise détails html5 ? Introduction à l'utilisation de la balise

(avec exemples d'utilisation)

寻∝梦

Libérer： 2018-08-22 13:58:57

original

9210 Les gens l'ont consulté

Quelles sont les fonctions de la balise détails html5 et comment utiliser la balise

Pour un contenu détaillé, jetons un coup d'œil à la définition et aux instructions d'utilisation de la balise de détails html introduite dans cet article, ainsi qu'à l'utilisation spécifique de la balise de détails html5

html5

balise Définition et instructions d'utilisation :

La nouvelle balise

en HTML5 permet aux utilisateurs de créer un élément extensible et pliable, permettant à un morceau de texte ou de titre de contenir des informations cachées. La balise

est utilisée pour décrire les détails d'un document ou d'une certaine partie d'un document. La balise

spécifie des détails supplémentaires sur l'exigence qui sont visibles ou masqués pour l'utilisateur. La balise

est utilisée par les utilisateurs pour ouvrir et fermer les contrôles interactifs. N'importe quelle forme de contenu peut être placée dans la balise

Le contenu de l'élément

n'est pas visible pour l'utilisateur sauf si l'attribut open est défini.

html5 Comment utiliser la balise :

Généralement, les détails sont utilisés pour expliquer davantage le contenu affiché sur la page. L'effet affiché est similaire à celui du plug-in accordéon jQuery.

Il s'écrit grossièrement comme suit :

<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>

Copier après la connexion

Il y a d'abord la balise

, suivie du titre

. sera affiché sur la page. Vous pouvez ensuite suivre n'importe quel type d'élément HTML en tant que contenu détaillé, qui ne sera affiché que lorsque vous cliquerez sur .

Details est un nouvel élément interactif dans h5. Les détails peuvent être utilisés en conjonction avec la balise de résumé pour définir un titre pour les détails. Par défaut, le contenu de la balise détails n'est pas affiché. Lorsque l'utilisateur clique sur le titre, les détails s'affichent. L'émergence de la balise

details nous a apporté une meilleure expérience utilisateur. Nous n'avons pas besoin d'écrire du JS pour obtenir cet effet de réduction et d'expansion.

Details a une sous-balise nouvellement ajoutée - résumé Lorsque la souris clique sur le texte du contenu dans la balise de résumé, tous les autres éléments de la balise de détails se dilatent ou se contractent.

balise html5 detailisExemple 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>

Copier après la connexion

Que se passe-t-il s'il n'y a pas de balise récapitulative dans les détails ? élément, navigation Lors de l'analyse, le navigateur fournira un texte par défaut, tel que "Afficher les détails" et un autre texte localisé, et le navigateur fournira également une icône telle que des flèches haut et bas. Par exemple, le cas 2 suivant est un exemple où la sous-balise de résumé n'existe pas :

Exemple 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>

Copier après la connexion

Parfois, que devons-nous faire si nous avons besoin du contenu en détail pour être développé par défaut ?

En fait, HTML5 a déjà été pensé pour nous. S'il y a un besoin, il suffit d'ajouter un attribut, comme le Cas 3.

Le rôle de la balise détails html5 et l'utilisation de l'attribut Open :

Modifiez le code du cas 1 comme suit :

Exemple 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>

Copier après la connexion

On voit que HTML5 nous a en effet apporté une grande commodité.

Le rôle de la balise détails html5 et l'utilisation des attributs communs de la balise détails :

open : La valeur est ouvert et la fonction est définie Si les détails sont visibles.

subject : La valeur est sub_id, et sa fonction est de définir le numéro d'identification du projet correspondant à l'élément.

draggable : La valeur est vraie ou fausse. La fonction est de définir si l'élément peut être déplacé. La valeur par défaut est fausse.

Exemple de détails simples :

Quel est le rôle de la balise détails html5 ? Introduction à lutilisation de la balise <details> (avec exemples dutilisation)

Actuellement, seuls Chrome et Safari 6 prennent en charge la balise

Je pense personnellement que la balise de détails devrait être prise en charge par davantage de navigateurs à l'avenir, car son apparence la rend beaucoup plus pratique pour les débutants. Il est toujours bon d'en savoir plus maintenant, et vous pouvez vous sentir libre de le faire. faites-le après sa promotion, cet article se termine ici. Si vous avez des questions, vous pouvez les poser ci-dessous.

[Recommandations personnelles]

Quelle est la fonction de la balise html em ? La différence entre les balises et

Introduction au style de la balise de table html5 (un exemple de centrage CSS de table html5 est joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!