Maison interface Web Tutoriel H5 在H5中如何使用details元素和summary元素

在H5中如何使用details元素和summary元素

Mar 30, 2017 pm 04:24 PM
h5

是一个全新的HTML5元素,功能是描述文档某个部分的细节。
标记常与标记配合使用。在默认情况下,不显示
中的内容。当与标记配合使用时,在单击标记后才会显示元素中设置的内容。
元素的常用属性如下所示:

1)open:值为open,功能是定义details是否可见。

2)subject:值为sub_id,功能是设置元素所对应项目的ID号。

3)draggable:值为true或false,功能是设置是否为可拖动元素,默认值是false。

标记的本质上允许我们在单击标签时显示和隐藏内容。

标签包含了
元素的标题。在两者结合起来使用的代码中,元素是
元素的第一个子元素,二者经常同时出现在页面中。

使用示例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<details open="open">
   <summary>页面说明</summary>
   今天是2016年7月20号
</details>
</body>
</html>
Copier après la connexion

效果:

1.png

点击小三角形之后,文字隐藏:

2.png

是不是特别方便?但是,目前只有Chrome和Safari浏览器支持

标签,所以这一效果现在还是用js实现。。。你可以试一试,这段代码在IE中是不起效果的。。。

相关文章:

HTML5每日一练之details展开收缩标签的应用

介绍三个不常用的HTML元素:

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie h5 ? Que signifie h5 ? Aug 02, 2023 pm 01:52 PM

H5 fait référence à HTML5, la dernière version de HTML. H5 est un langage de balisage puissant qui offre aux développeurs plus de choix et d'espace créatif. Son émergence favorise le développement de la technologie Web et rend l'interaction et l'effet des pages Web plus excellents. mûrit progressivement et devient populaire, je pense qu'il jouera un rôle de plus en plus important dans le monde d'Internet.

Comment distinguer H5, WEB front-end, big front-end et WEB full stack ? Comment distinguer H5, WEB front-end, big front-end et WEB full stack ? Aug 03, 2022 pm 04:00 PM

Cet article vous aidera à distinguer rapidement entre H5, WEB front-end, grand front-end et WEB full stack. J'espère qu'il sera utile aux amis dans le besoin !

Comment utiliser la position en h5 Comment utiliser la position en h5 Dec 26, 2023 pm 01:39 PM

Dans H5, vous pouvez utiliser l'attribut position pour contrôler le positionnement des éléments via CSS : 1. Positionnement relatif, la syntaxe est "style="position: relative;"; 2. Positionnement absolu, la syntaxe est "style="position : Absolute;" "; 3. Positionnement fixe, la syntaxe est "style="position:fixed;" et ainsi de suite.

Comment implémenter h5 pour glisser vers le haut du côté Web pour charger la page suivante Comment implémenter h5 pour glisser vers le haut du côté Web pour charger la page suivante Mar 11, 2024 am 10:26 AM

Étapes de mise en œuvre : 1. Surveiller l'événement de défilement de la page ; 2. Déterminer si la page a défilé vers le bas ; 3. Charger la page de données suivante ; 4. Mettre à jour la position de défilement de la page.

Résumé et introduction à la nouvelle balise de promotion H5 (avec exemples) Résumé et introduction à la nouvelle balise de promotion H5 (avec exemples) Aug 03, 2022 pm 05:10 PM

​Cet article vous donnera une introduction aux nouvelles balises de promotion H5. J'espère qu'il sera utile aux amis dans le besoin !

Comment implémenter le composant de validation de formulaire H5 dans vue3 Comment implémenter le composant de validation de formulaire H5 dans vue3 Jun 03, 2023 pm 02:09 PM

La description du rendu est basée sur vue.js et ne repose pas sur d'autres plug-ins ou bibliothèques ; les fonctions de base restent cohérentes avec element-ui, et certains ajustements ont été apportés à l'implémentation interne pour les différences mobiles. La plate-forme de construction actuelle est construite à l'aide de l'échafaudage officiel uni-app. Étant donné que la plupart des terminaux mobiles ont actuellement deux types : les mini-programmes h6 et WeChat, elle est très adaptée à la sélection technologique pour exécuter un ensemble de codes sur plusieurs terminaux. API de base de l'idée de mise en œuvre : utilisez provide et inject, correspondant à et. Dans le composant, une variable (tableau) est utilisée en interne pour stocker toutes les instances, et les données à transférer sont exposées via provide ; le composant utilise inject en interne pour recevoir les données fournies par le composant parent, et combine enfin ses propres attributs avec soumission de méthode

Que signifient la page h5 et php ? (Discussion sur les connaissances connexes) Que signifient la page h5 et php ? (Discussion sur les connaissances connexes) Mar 20, 2023 pm 02:23 PM

HTML5 et PHP sont deux technologies couramment utilisées dans le développement Web. La première est utilisée pour créer la mise en page, le style et l'interaction, et la seconde est utilisée pour gérer la logique métier et le stockage de données côté serveur. Plongeons dans les connaissances pertinentes de HTML5 et PHP.

De quels mécanismes de mise en cache dispose h5 ? De quels mécanismes de mise en cache dispose h5 ? Nov 16, 2023 pm 01:27 PM

H5 ne dispose pas de mécanisme de mise en cache direct, mais en combinant des technologies telles que l'API Web Storage, IndexedDB, Service Workers, Cache API et Application Cache, il peut réaliser de puissantes fonctions de mise en cache et améliorer les performances, la disponibilité et l'évolutivité des applications. Il peut être sélectionné et utilisé selon différents besoins et scénarios d'application. Introduction détaillée : 1. L'API Web Storage est simple, etc. fournie par H5.

See all articles