简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Atribut HTML

Atribut HTML

PHPz
PHPzasal
2024-09-04 16:17:23623semak imbas

Atribut HTML ialah perkataan khas yang mengubah suai gelagat elemen HTML. Ia mula digunakan dalam teg pembuka elemen dan sama ada boleh mengubah suai kefungsian lalai elemen atau menyediakan kefungsian yang diperlukan. Secara sintaksis, atribut ditambahkan pada teg permulaan HTML. Ia boleh dikategorikan sebagai atribut yang diperlukan, pilihan, standard atau peristiwa dan ditulis sebagai pasangan nilai nama yang dipisahkan dengan tanda sama ” = ” dalam teg permulaan elemen.

 

Atribut HTML yang berbeza

Di bawah adalah atribut HTML yang berbeza dan cara ia berfungsi secara terperinci:

1. Atribut Teras

Terdapat empat atribut teras yang digunakan terutamanya:

  • ID: Atribut ini mengenal pasti elemen secara unik dalam halaman HTML. Apabila elemen membawa atribut ID, ia berfungsi sebagai pengecam unik yang memudahkan untuk mengenal pasti elemen dan kandungannya. Ini amat berguna apabila terdapat berbilang elemen dengan nama yang sama dalam halaman web.
  • Atribut Tajuk: Atribut ini menyediakan tajuk yang dicadangkan untuk elemen. Tingkah lakunya bergantung pada konteks di mana ia digunakan, dan ia mungkin dipaparkan sebagai petua alat apabila kursor melayang di atas elemen atau apabila elemen sedang dimuatkan. Ia juga boleh memberikan maklumat tambahan tentang elemen apabila pengguna menuding tetikus di atasnya.
  • Atribut Kelas: Atribut ini mengaitkan elemen dengan helaian gaya dengan menyatakan kelas elemen tersebut. Lebih banyak boleh dipelajari tentang atribut ini apabila helaian Gaya Cascading sedang dipelajari. Nilai atribut kelas boleh menjadi senarai nama kelas yang dipisahkan oleh ruang. Contohnya: class=”className1 className2 className3″
  • Atribut Gaya: Atribut ini membenarkan pengguna menentukan peraturan CSS untuk elemen individu. Dengan atribut gaya, pengguna boleh menggunakan pelbagai kesan CSS pada elemen HTML, seperti menukar saiz fon, keluarga fon dan warna.

2. Atribut Pengantarabangsaan

  • Dir: Atribut dir membantu menunjukkan kepada penyemak imbas arah yang harus diikuti oleh teks. Atribut ini boleh mengambil dua nilai: LTR dan RTL. LTR bermaksud kiri ke kanan, iaitu nilai lalai, manakala RTL bermaksud kanan ke kiri. Apabila digunakan dalam tag, ia menentukan cara teks harus diwakili sepanjang keseluruhan dokumen. Ia juga boleh mengawal arah teks dalam kandungan teg.
  • Atribut Lang: Atribut ini membantu mempamerkan bahasa utama yang digunakan dalam dokumen. Seseorang boleh menggunakannya dalam HTML untuk mengekalkan keserasian ke belakang dengan versi HTML yang lebih awal. Juga, seseorang menggantikannya dengan atribut XML: lang dalam dokumen XHTML baharu. Nilai atribut lang adalah berdasarkan standard ISO-639 dan terdiri daripada kod bahasa dua aksara. Mengisytiharkan bahasa adalah penting untuk kebolehaksesan dan untuk enjin carian mengindeks kandungan dengan betul.
  • Atribut XML-Lang: Atribut ini cenderung untuk menggantikan atribut lang. Nilai atribut XML-lang mesti termasuk bahasa dan kod negara seperti yang ditentukan oleh ISO-639.

3. Atribut Generik

  • Sejajarkan Atribut: Atribut ini berguna apabila anda ingin meletakkan elemen tertentu pada halaman web anda. Ia membolehkan anda menukar penjajaran ke kiri, kanan atau tengah halaman. Penjajaran lalai untuk semua elemen ditetapkan ke kiri, tetapi anda boleh menukarnya menggunakan atribut penjajaran.
  • Atribut Src: Apabila seseorang ingin memasukkan imej ke dalam halaman web, seseorang itu perlu menggunakan tag dengan atribut src. Seseorang boleh menentukan alamat imej sebagai nilai atribut di dalam petikan berganda. Seseorang boleh menggunakan atribut src seperti berikut untuk memasukkan imej pada halaman web.

Kod:

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>
  • Atribut Alt: Atribut ini digunakan sebagai teg alternatif yang boleh digunakan untuk memaparkan sesuatu jika atribut utama, iaitu tag, gagal memaparkan imej asal yang diberikan kepadanya. Ia boleh menerangkan imej kepada pembangun yang menggunakannya pada penghujung pengekodan. Jika imej utama gagal, maka imej ganti boleh dipaparkan.
  • Atribut Lebar dan Tinggi: Atribut ini boleh melaraskan ketinggian dan lebar imej.

Contoh:

Kod:

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html>

4. Data Attribute

HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.

In order to customize, one divides the data into two parts:

  • Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using “data-“.
  • Attribute Value: Any string value can be associated with the attribute.

The syntax for a data attribute is as follows:

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

5. DOM Attribute Property

To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.

The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.

Example:

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
function myeduCBA() {
// It returns the number of nodes
var cba = document.getElementById("CBA").attributes.length;
// Display the number of nodes
document.getElementById("sudo").innerHTML = cba;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2

6. Global Attributes

HTML also provides global attributes that can work with any HTML element:

  • Accesskey: Specifies a shortcut key to activate or focus on any element.
  • Translate: Specifies whether the content of the element is to be translated or not.
  • Class: One or more class names for an element are specified.
  • Title: Specifies extra information about an element.
  • Contenteditable: This attribute can be used to specify whether the content is editable or not.
  • Tabindex: Specifies the tabbing order of an element.
  • Dir: Specifies the text direction for any content of an element.
  • Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
  • Draggable: Specifies if an element should be draggable or not.
  • Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.

7. Event Attributes

HTML has the ability to trigger actions when some events take place.

  • Onload: Fires after the page has finished loading.
  • Onmessage: A script that runs when the message is triggered.
  • Onstorage: A script that runs when a web storage area is updated.
  • Onerror: The script runs when an error occurs.
  • Onpagehide: The script can be used when the user navigates away from a page.

8. Form Event Attributes

Actions inside an HTML form trigger these events.

  • Onblur: Ia dicetuskan sebaik sahaja elemen hilang fokus.
  • Onchange: Ia dicetuskan sebaik sahaja nilai elemen berubah.
  • Oncontextmenu: Ini dijalankan apabila menu konteks dicetuskan.
  • Onfocus: Ia dicetuskan sebaik sahaja elemen mendapat fokus.
  • Oninput: Skrip perlu dijalankan apabila elemen menerima input.
  • Onsearch: Ini dicetuskan apabila pengguna menulis sesuatu dalam medan carian.
  • Tidak sah: Ini dicetuskan apabila elemen yang dimasukkan tidak sah.

9. Atribut Acara Utama

  • Onkeydown: Dicetuskan apabila kekunci ditekan.
  • Tekan kekunci: Dicetuskan apabila kekunci ditekan.
  • Onkeyup: Ini dicetuskan apabila pengguna melepaskan kunci.

10. Atribut Acara Tetikus

  • Onclick: Ini dicetuskan apabila tetikus mengklik pada elemen.
  • Onmousemove: Dipecat apabila penuding tetikus bergerak semasa ia berada di atas elemen.
  • Onmouseip: Dicetuskan apabila butang tetikus dilepaskan dari atas elemen.
  • Atas roda: Dicetuskan apabila roda tetikus berguling ke atas atau ke bawah di atas elemen

11. Seret Atribut Acara

  • Ondrag: Ini dicetuskan apabila elemen diseret.
  • Ondragleave: Skrip berjalan apabila elemen meninggalkan sasaran jatuh yang sah.
  • Ondrop: Dicetuskan apabila elemen yang diseret sedang digugurkan
  • Onscroll: Skrip berjalan apabila bar skrol elemen sedang ditatal.

Kesimpulan

HTML telah berkembang dari semasa ke semasa, menawarkan pelbagai atribut seperti teras, pengantarabangsaan, data, global dan acara, menjadikan aplikasi web dan halaman lebih interaktif. Digabungkan dengan CSS, HTML membolehkan penyesuaian mudah elemen web untuk mencipta aplikasi web yang menarik secara visual.

Atas ialah kandungan terperinci Atribut HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css html xhtml String Object if for while include xml Error double using class private Attribute Property Event Collection Generic pointer number default dom this href display position input Access
Kenyataan：
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
Artikel sebelumnya：HTML Lembaran CheatArtikel seterusnya：HTML Lembaran Cheat

Artikel berkaitan

Lihat lagi