Menguasai konsep utama dan aplikasi atribut global HTML

Kuasai konsep utama dan penggunaan atribut global HTML dengan cepat

HTML (Hypertext Markup Language), sebagai bahasa penanda, digunakan untuk membina halaman web. Dalam HTML, atribut global ialah satu set atribut yang digunakan untuk semua elemen HTML dan mempunyai konsep dan penggunaan yang sama. Menguasai konsep utama dan penggunaan atribut global ini boleh membantu kami lebih memahami penanda HTML dan membina halaman web.

1. Konsep atribut global
Atribut global merujuk kepada atribut yang boleh digunakan pada mana-mana elemen HTML. Sifat global adalah serupa dengan sifat yang berkaitan dengan elemen tertentu, tetapi boleh digunakan pada mana-mana elemen. Atribut global termasuk aspek berikut:

1. kelas: Tentukan satu atau lebih nama kelas unsur HTML. Nama kelas boleh digunakan untuk menentukan gaya dan tingkah laku elemen. Berbilang nama kelas boleh dipisahkan dengan ruang.
2. id: Menentukan pengecam unik elemen HTML. Setiap nilai id mestilah unik dalam dokumen HTML dan boleh digunakan untuk rujukan elemen dalam bahasa lain seperti JavaScript.
3. gaya: Tentukan gaya sebaris untuk elemen HTML. Anda boleh menetapkan gaya elemen secara terus melalui atribut gaya, seperti warna, fon, jidar, dsb.
4. tajuk: Menentukan maklumat tambahan untuk elemen HTML, biasanya dipaparkan pada tuding tetikus. Lebih banyak maklumat teks atau penerangan boleh disediakan.

2. Penggunaan atribut global
Yang berikut akan menunjukkan penggunaan atribut global melalui contoh kod tertentu:

1. Penggunaan atribut kelas:

   <style>
    .red-text {
        color: red;
    }
   
    .bold-text {
        font-weight: bold;
    }
   </style>
   
   <p class="red-text">这是一个红色的文本。</p>
   <p class="bold-text">这是一个加粗的文本。</p>
   <p class="red-text bold-text">这是一个既红色又加粗的文本。</p>

   Dalam kod di atas, atribut kelas digunakan untuk menentukan satu atau lebih banyak nama kelas, dan kemudian tambahkan gaya merah dan tebal pada teks melalui lembaran gaya CSS. Anda boleh menindih berbilang gaya dengan menentukan berbilang nama kelas dalam atribut kelas.

2. Penggunaan atribut id:

   <p id="my-paragraph">这是一个段落。</p>
   
   <script>
    var paragraph = document.getElementById("my-paragraph");
    paragraph.style.color = "blue";
   </script>

   Dalam kod di atas, atribut id digunakan untuk menetapkan pengecam unik kepada elemen perenggan. Kemudian anda boleh menggunakan kaedah getElementById dalam JavaScript untuk mendapatkan rujukan kepada elemen perenggan melalui nilai id, dan kemudian beroperasi padanya. Dalam contoh ini, kami menetapkan warna teks perenggan kepada biru.

3. Penggunaan atribut gaya:

   <p style="color: green; font-size: 20px;">这是一个绿色且字体大小为20px的文本。</p>

   Dalam kod di atas, atribut gaya dibenamkan terus dalam teg perenggan Anda boleh menukar warna dan saiz fon teks dengan menetapkan atribut gaya.

4. Penggunaan atribut tajuk:

   <p title="这是一个特殊的段落。">这是一个段落。</p>

   Dalam kod di atas, atribut tajuk digunakan untuk menentukan maklumat tambahan untuk elemen perenggan dan akan dipaparkan apabila tetikus dituding di atas perenggan.

Ringkasan:
Atribut global ialah satu set atribut yang digunakan pada semua elemen dalam HTML Melalui atribut kelas, id, gaya dan tajuk, kita boleh mengawal gaya dan tingkah laku elemen tersebut. Dengan menguasai konsep utama dan penggunaan atribut global, kami boleh menggunakan HTML dengan lebih baik untuk membina halaman web dengan interaktiviti dan kesan visual yang baik.

Atas ialah kandungan terperinci Menguasai konsep utama dan aplikasi atribut global HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!