Analisis komprehensif atribut standard dan atribut tersuai dalam kemahiran tutorial HTML5

Seperti yang dijelaskan dalam sintaks HTML5, elemen boleh mengandungi atribut untuk menetapkan pelbagai sifat untuk elemen.

Sesetengah sifat ditakrifkan sebagai global dan boleh digunakan pada mana-mana elemen, manakala yang lain ditakrifkan sebagai khusus unsur. Semua sifat mempunyai nama dan nilai, yang kelihatan seperti contoh di bawah.

Berikut ialah contoh menggunakan atribut HTML5, menunjukkan cara menandakan elemen div dengan atribut bernama kelas dan nilai "contoh":

Atribut

...

hanya boleh ditentukan dalam teg pembukaan dan tidak boleh digunakan dalam teg penutup.

Atribut HTML5 tidak sensitif huruf besar dan boleh digunakan dalam semua huruf besar atau gabungan huruf besar dan huruf kecil, walaupun konvensyen yang paling biasa ialah sentiasa menggunakan huruf kecil.

Atribut Standard
Atribut yang disenaraikan di bawah disokong oleh hampir semua teg HTML5.

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

Atribut Pilihan Fungsi kunci akses Ditentukan pengguna Tentukan pintasan papan kekunci untuk mengakses elemen. selaraskan kanan, kiri, tengah Jajarkan label secara mendatar. latar belakang URL Tetapkan imej latar belakang di belakang elemen. bgcolor Nilai berangka, nilai heksadesimal, nilai RGB Menetapkan warna latar belakang di belakang elemen. kelas Ditakrifkan pengguna. Mengkategorikan elemen untuk memudahkan penggunaan helaian gaya berlatarkan. boleh diedit benar, salah Mentakrifkan sama ada pengguna boleh mengedit kandungan elemen. menu konteks ID menu Tentukan menu konteks untuk elemen. data-XXXX Ditakrifkan pengguna. Atribut tersuai. Pengarang dokumen HTML boleh menentukan atribut mereka sendiri. Sifat tersuai mesti bermula dengan "data-". boleh diseret benar, salah, auto Mentakrifkan sama ada pengguna boleh menyeret elemen. tinggi nilai angka Tentukan ketinggian jadual, imej atau sel jadual. tersembunyi tersembunyi Mentakrifkan sama ada elemen harus kelihatan. id Ditakrifkan pengguna. menamakan elemen untuk memudahkan penggunaan helaian gaya berlatarkan. item senarai elemen. digunakan untuk menggabungkan elemen. itemprop Senarai entri. digunakan untuk menggabungkan entri. semakan ejaan benar, salah Mentakrifkan sama ada elemen mesti mempunyai ejaan atau semakan ralat. gaya Helaian gaya CSS. mentakrifkan gaya sebaris untuk elemen. subjek Id yang ditakrifkan pengguna. mentakrifkan item yang dikaitkan dengan elemen. tabindex Nombor tab ditentukan oleh susunan tab elemen. tajuk Ditakrifkan pengguna. Tajuk "pop timbul" elemen . tidak jelas atas, tengah, bawah Penjajaran menegak teg dalam elemen HTML. lebar Nilai angka. Mentakrifkan lebar jadual, imej dan sel jadual.

Atribut tersuai
HTML5 juga memperkenalkan ciri baharu, iaitu keupayaan untuk menambah atribut data tersuai.

Atribut data tersuai bermula dengan data- dan dinamakan berdasarkan keperluan kami. Berikut ialah contoh mudah:

...

Dua daripada contoh di atas Tersuai atribut yang dipanggil subjek data dan peringkat data adalah sah sepenuhnya dalam HTML5. Kami juga boleh mendapatkan nilai mereka menggunakan API JavaScript atau dalam CSS dengan cara yang serupa dengan sifat standard.

Tambahkan atribut tersuai pada elemen HTML dan aksesnya melalui JavaScript Jika anda telah mencubanya sebelum ini, anda akan mendapati bahawa pengesahan teg adalah mudah dan HTML5 boleh memberi anda keupayaan untuk mencipta dan menggunakan elemen anda sendiri dalam. halaman web yang sah.

Buat fail HTML5:

Jika anda belum memutuskan yang mana satu untuk digunakan, anda boleh menyalin kod di bawah:

Kod XML/HTMLSalin kandungan ke papan keratan

>
<
html
>
<
kepala
>
<
skrip
>
/*berfungsi di sini*/
skrip
>
kepala
>
<
badan
>
badan
>
html
>

Tetapkan elemen tersuai dalam badan dan aksesnya menggunakan elemen JavaScript dalam kawasan skrip kepala.

Buat elemen:

Mula-mula, tambahkan beberapa kandungan dan elemen ringkas seperti atribut tersuai dan ID supaya kami boleh mengenal pasti contoh JavaScript.

Kod XML/HTMLSalin kandungan ke papan keratan

<
div id="produk1" kategori-produk data="pakaian"
>
Baju Kapas
div
>

Seperti yang anda lihat, atribut tersuai mempunyai bentuk: "data-*", tetapkan nama dalam bahagian "data-" atau nama pilihan anda. Gunakan atribut tersuai dalam HTML5, ini adalah satu-satunya cara yang berkesan. Oleh itu, hanya gunakan kaedah ini jika anda ingin mengesahkan sama ada halaman web itu sah.

Sudah tentu, butiran projek menentukan sama ada harta tersuai berguna kepada anda dan cara anda menamakannya. Contoh ini boleh digunakan pada tapak web runcit merentas kategori produk yang berbeza.

Atribut tersuai membolehkan anda menggunakan kod JavaScript dalam halaman untuk menetapkan elemen dengan cara yang istimewa, contohnya, untuk menghidupkan fungsi paparan. Jika tiada unsur HTML standard, kami mengesyorkan anda menggunakan atribut tersuai.

Tambah butang ujian

Gunakan elemen JavaScript anda sendiri pada halaman untuk melaksanakan acara, dengan syarat kod berikut ditambahkan pada halaman:

Kod XML/HTMLSalin kandungan ke papan keratan

<
input taip="butang" nilai="dapatkan atribut" onclick="getElementAttribute ('produk1')"
/>

Dapatkan atribut:

Cara paling biasa untuk mengakses atribut dalam JavaScript ialah menggunakan "getAttributes", yang juga merupakan langkah pertama yang perlu kita lakukan. Tambahkan fungsi berikut dalam kawasan skrip kepala halaman:

Kod JavaScriptSalin kandungan ke papan keratan

fungsi getElementAttribute(elemID) {
var theElement = document.getElementById(elemID
var theAttribute = theElement.getAttribute('data-product-category');

Di sini, kami telah menambah nilai amaran pada contoh Sudah tentu, anda juga boleh menambahnya dalam skrip mengikut keperluan anda sendiri.

Dapatkan data:

Anda boleh menggunakan set data elemen dan bukannya DOM "getAttributes", yang mungkin lebih cekap, terutamanya dalam kes tertentu di mana kod itu berulang melalui berbilang atribut Walau bagaimanapun, sokongan penyemak imbas untuk set data masih sangat rendah , kod ini melaksanakan proses yang sama seperti kaedah // selepas.

//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory; Masih termasuk dalam HTML.

Sila ambil perhatian bahawa jika nama atribut tersuai anda mempunyai tanda sempang di dalamnya, ini akan muncul dalam bentuk huruf unta apabila diakses melalui data, iaitu ("data-product-category" menjadi "productCategory").

Modul dan fungsi lain

Kami telah memperoleh harta itu, skrip masih boleh menetapkan dan mengeluarkannya. Kod di bawah menunjukkan cara menetapkan sifat menggunakan modul dan set data JavaScript standard.

Kod JavaScriptSalin kandungan ke papan keratan

//Kaedah DOM
theElement.setAttribute('data-product-category', 'sale');
//versi set data
theElement.dataset.productCategory =
"jualan"; Anda juga boleh menggunakan kaedah DOM atau set data untuk memadamkan atribut:
//Kaedah DOM
theElement.removeAttribute('data-product-category'
); //versi set data
theElement.dataset.productCategory = null;
Melaksanakan atribut tersuai dalam HTML5 tidak begitu rumit secara teknikalnya ialah sama ada kaedah yang anda pilih untuk digunakan sesuai untuk projek anda, bagaimana untuk menjadikannya lebih berkesan? Sila ambil perhatian bahawa masih terlalu awal untuk mendayakan kaedah set data sebagai ciri halaman, kerana banyak penyemak imbas belum menyokong ciri ini lagi.

Analisis komprehensif atribut standard dan atribut tersuai dalam kemahiran tutorial HTML5_html5