Rumah hujung hadapan web Tutorial 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>
Salin selepas log masuk

效果:

1.png

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

2.png

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

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

相关文章:

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

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah maksud h5? Apakah maksud h5? Aug 02, 2023 pm 01:52 PM

H5 merujuk kepada HTML5, versi terkini HTML H5 ialah bahasa penanda yang berkuasa yang menyediakan pembangun dengan lebih banyak pilihan dan ruang kreatif Kemunculannya menggalakkan pembangunan teknologi Web dan menjadikan interaksi dan kesan halaman web lebih Cemerlang, sebagai teknologi H5. secara beransur-ansur matang dan menjadi popular, saya percaya ia akan memainkan peranan yang semakin penting dalam dunia Internet.

Bagaimana untuk membezakan antara H5, WEB front-end, big front-end dan WEB full stack? Bagaimana untuk membezakan antara H5, WEB front-end, big front-end dan WEB full stack? Aug 03, 2022 pm 04:00 PM

Artikel ini akan membantu anda membezakan dengan cepat antara H5, bahagian hadapan WEB, bahagian hadapan yang besar dan timbunan penuh WEB. Saya harap ia akan membantu rakan yang memerlukan.

Bagaimana untuk menggunakan kedudukan dalam h5 Bagaimana untuk menggunakan kedudukan dalam h5 Dec 26, 2023 pm 01:39 PM

Dalam H5, anda boleh menggunakan atribut kedudukan untuk mengawal kedudukan elemen melalui CSS: 1. Kedudukan relatif, sintaksnya ialah "style="position: relative;"; 2. Kedudukan mutlak, sintaksnya ialah "style="position: mutlak;" "; 3. Kedudukan tetap, sintaksnya ialah "style="position: fixed;" dan seterusnya.

Bagaimana untuk melaksanakan h5 untuk meluncur ke atas pada bahagian web untuk memuatkan halaman seterusnya Bagaimana untuk melaksanakan h5 untuk meluncur ke atas pada bahagian web untuk memuatkan halaman seterusnya Mar 11, 2024 am 10:26 AM

Langkah-langkah pelaksanaan: 1. Pantau acara tatal halaman 2. Tentukan sama ada halaman telah menatal ke bawah 3. Muatkan halaman seterusnya data;

Bagaimana untuk melaksanakan komponen pengesahan borang H5 dalam vue3 Bagaimana untuk melaksanakan komponen pengesahan borang H5 dalam vue3 Jun 03, 2023 pm 02:09 PM

Penerangan pemaparan adalah berdasarkan vue.js dan tidak bergantung pada pemalam atau perpustakaan lain, fungsi asas kekal konsisten dengan elemen-ui, dan beberapa pelarasan telah dibuat pada pelaksanaan dalaman untuk perbezaan mudah alih. Platform pembinaan semasa dibina menggunakan perancah rasmi uni-app Oleh kerana kebanyakan terminal mudah alih pada masa ini mempunyai dua jenis: program mini h6 dan WeChat, ia sangat sesuai untuk pemilihan teknologi untuk menjalankan satu set kod pada berbilang terminal. Api teras idea pelaksanaan: gunakan menyediakan dan menyuntik, sepadan dengan dan. Dalam komponen, pembolehubah (tatasusunan) digunakan secara dalaman untuk menyimpan semua kejadian, dan data yang akan dipindahkan didedahkan melalui menyediakan komponen menggunakan suntikan secara dalaman untuk menerima data yang disediakan oleh komponen induk, dan akhirnya menggabungkan atributnya sendiri dengan penyerahan kaedah

Ringkasan dan pengenalan kepada teg promosi H5 baharu (dengan contoh) Ringkasan dan pengenalan kepada teg promosi H5 baharu (dengan contoh) Aug 03, 2022 pm 05:10 PM

​Artikel ini akan memberi anda pengenalan kepada tag promosi H5 baharu. Saya harap ia dapat membantu rakan yang memerlukan!

Apakah maksud halaman h5 dan php? (Perbincangan pengetahuan berkaitan) Apakah maksud halaman h5 dan php? (Perbincangan pengetahuan berkaitan) Mar 20, 2023 pm 02:23 PM

HTML5 dan PHP ialah dua teknologi yang biasa digunakan dalam pembangunan web yang pertama digunakan untuk membina susun atur halaman, gaya dan interaksi, dan yang kedua digunakan untuk mengendalikan logik perniagaan dan penyimpanan data sebelah pelayan. Mari selami pengetahuan berkaitan HTML5 dan PHP.

Kod H5: Kebolehcapaian dan HTML Semantik Kod H5: Kebolehcapaian dan HTML Semantik Apr 09, 2025 am 12:05 AM

H5 meningkatkan kebolehaksesan laman web dan kesan SEO melalui unsur -unsur semantik dan atribut ARIA. 1. Gunakan, dan lain -lain untuk mengatur struktur kandungan dan meningkatkan SEO. 2. Atribut Aria seperti ARIA-Label meningkatkan kebolehcapaian, dan pengguna teknologi bantuan boleh menggunakan laman web dengan lancar.

See all articles