Bagaimana untuk menyembunyikan menggunakan tag HTML

Dalam proses pembangunan tapak web, tag HTML ialah alat yang sangat biasa digunakan untuk menetapkan gaya dan reka letak halaman web untuk mencapai kesan yang pelbagai. Tetapi kadangkala kita perlu menggunakan tag HTML untuk menyembunyikan beberapa elemen Contohnya, dalam beberapa kes tertentu, anda tidak mahu kandungan tertentu dipaparkan Pada masa ini, menyembunyikan tag HTML berguna Untuk bersembunyi.

1. Kaedah menyembunyikan elemen

1. paparan: tiada;

Atribut paparan ialah atribut terbina dalam CSS, yang melaluinya elemen boleh Tunjukkan dan sembunyikan. Apabila kita ingin menyembunyikan elemen, kita boleh menggunakan atribut paparan: none Kod khusus adalah seperti berikut:

.hide {
   display: none;
}

Dalam kod di atas, kami menetapkan paparan untuk elemen dengan nama kelas "hide. " : tiada atribut, elemen ini akan disembunyikan.

Tetapi harus diingat bahawa menggunakan display:none akan mengalih keluar elemen sepenuhnya daripada aliran dokumen, yang bermaksud elemen itu tidak lagi menduduki kedudukan dalam halaman web, tetapi kod elemen masih wujud dalam dokumen HTML , jadi ia mungkin mempunyai kesan tertentu pada SEO dalam beberapa kes.

2. keterlihatan: tersembunyi;

Atribut keterlihatan juga merupakan atribut terbina dalam CSS, yang boleh mengawal penyembunyian dan paparan elemen. Apabila kita mahu elemen disembunyikan sambil mengekalkan kedudukannya, kita boleh menggunakan atribut visibility:hidden Kodnya adalah seperti berikut:

.hide {
   visibility: hidden;
}

Dalam kod di atas, kami juga menetapkannya untuk elemen dengan. nama kelas "sembunyikan" atribut visibility:hidden, supaya elemen akan disembunyikan, tetapi ia masih akan menduduki kedudukannya dalam halaman web, tetapi ia tidak akan kelihatan pada skrin.

Tetapi harus diingat bahawa penggunaan visibility:hidden masih akan menduduki ruang aliran dokumen, jadi ia masih akan menjejaskan reka letak, tetapi impaknya akan lebih kecil daripada display:none.

3. opacity: 0;

opacity ialah atribut gaya baharu dalam CSS3, yang boleh mengawal kelegapan elemen. Tetapkan atribut kelegapan elemen kepada 0, yang bermaksud ia benar-benar telus, iaitu, kesan hilang Kod adalah seperti berikut:

.hide {
    opacity: 0;
}

Perlu diambil perhatian bahawa apabila menggunakan kelegapan:0. untuk menyembunyikan elemen, elemen itu masih menduduki ruang , tidak akan dialih keluar daripada aliran dokumen dan elemen anaknya akan disembunyikan bersama.

2. Gunakan pemilih atribut untuk menyembunyikan

Selain kaedah di atas, kita juga boleh menyembunyikan berdasarkan atribut elemen, yang memerlukan penggunaan pemilih atribut. Contohnya:

1. [tersembunyi]

Dalam standard HTML5, atribut tersembunyi baharu ditambahkan, yang boleh digunakan untuk menyembunyikan elemen. Kodnya adalah seperti berikut:

<div hidden="hidden">...</div>

Dalam kod di atas, kami menetapkan atribut tersembunyi untuk elemen div, dan elemen itu akan disembunyikan.

2. [aria-hidden="true"]

Jika anda ingin menyembunyikan berdasarkan atribut lain elemen, anda boleh menggunakan pemilih atribut, seperti aria- hidden Attribute, kodnya adalah seperti berikut:

<div aria-hidden="true">...</div>

Antaranya, aria-hidden="true" bermaksud elemen tersebut tersembunyi.

3. Ringkasan

Melalui pengenalan di atas, kami telah mempelajari beberapa kaedah menyembunyikan tag HTML, dan boleh memilih kaedah yang sepadan untuk menyembunyikan dan memaparkan elemen mengikut keperluan sebenar. Dan anda harus memberi perhatian kepada beberapa butiran apabila menggunakannya Sebagai contoh, kaedah penyembunyian yang berbeza mempunyai kesan yang berbeza pada susun atur halaman web dan SEO, dan anda perlu memilih mengikut situasi tertentu.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan menggunakan tag HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!