Maison >
Article > interface Web > Quel est le rôle de la balise détails html5 ? Introduction à l'utilisation de la balise
Quel est le rôle de la balise détails html5 ? Introduction à l'utilisation de la balise (avec exemples d'utilisation)
- 寻∝梦original
- 2018-08-22 13:58:579242parcourir
Quelles sont les fonctions de la balise détails html5 et comment utiliser la balise
html5
La nouvelle balise
html5
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>
Il y a d'abord la balise . 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>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>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>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 :
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
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!