Atribut HTML yang Dikenali untuk Meningkatkan Pengalaman Pengguna

HTML ialah bahasa yang berkuasa untuk mencipta halaman web, dan walaupun kebanyakan pembangun sudah biasa dengan atribut HTML yang biasa digunakan, terdapat beberapa atribut yang kurang dikenali yang boleh menyediakan kefungsian tambahan dan meningkatkan pengguna. pengalaman.

1. Atribut enterkeyhint untuk Papan Kekunci Maya

Apabila mereka bentuk borang web untuk peranti mudah alih, adalah penting untuk mempertimbangkan papan kekunci maya yang berinteraksi dengan pengguna. Atribut enterkeyhint ialah atribut global yang boleh digunakan untuk membentuk kawalan atau elemen dengan atribut boleh diedit kandungan ditetapkan kepada benar. Ia membantu pengguna dengan memberikan petunjuk kepada papan kekunci maya tentang tindakan yang dimaksudkan yang dikaitkan dengan kekunci "Enter". Atribut ini menerima nilai seperti masukkan, selesai, pergi, seterusnya, sebelumnya, cari dan hantar, membolehkan anda menyesuaikan pembayang berdasarkan konteks khusus aplikasi anda.

<input type="text" enterkeyhint="done">

2. Atribut untuk Senarai Tertib Tersuai

Semasa bekerja dengan senarai tersusun

, anda boleh menggunakan beberapa atribut yang kurang dikenali untuk menyesuaikan gelagat penomboran. Atribut ini termasuk:

• Atribut terbalik: Ia membenarkan anda menomborkan item senarai dalam susunan terbalik, dari tinggi ke rendah dan bukannya rendah lalai ke tinggi.

• Atribut mula: Ia mentakrifkan nombor dari mana senarai harus bermula.

• Atribut jenis: Ia menentukan sama ada untuk menggunakan nombor, huruf atau angka Rom untuk item senarai.

• Atribut nilai: Ia membolehkan anda menetapkan nombor tersuai untuk item senarai tertentu.
  

<ol reversed>
  <li>List item...</li>
  <li>List item...</li>
  <li>List item...</li>
</ol>

<ol reversed start="20" type="1">
  <li>Typee: A Peep at Polynesian Life (1846)</li>
  <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
  <li>Mardi: and aVoyage Thither (1849)</li>
  <li>Redburn: His First Voyage (1849)</li>
  <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
  <li>Moby-Dick; or, The Whale (1851)</li>
  <li>Pierre; or, The Ambiguities (1852)</li>
  <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

3. Atribut penyahkodan untuk unsur

Atribut penyahkodan membolehkan anda memberikan petunjuk kepada penyemak imbas tentang cara imej harus dinyahkod. Atribut ini boleh ditambahkan pada elemen dan menerima tiga nilai: segerak, tak segerak dan auto.

• segerak: Nyahkod imej secara serentak, yang merupakan kelakuan lalai.

• async: Nyahkod imej secara tidak segerak untuk mengelakkan melengahkan pembentangan kandungan lain.

• auto: Biarkan penyemak imbas menggunakan kaedah penyahkod lalainya.
  

<img src="/static/imghw/default1.png" data-src="/images/example.png" class="lazy" alt="Atribut HTML yang Dikenali untuk Meningkatkan Pengalaman Pengguna" decoding="async">

Dengan menyatakan tingkah laku penyahkodan yang sesuai, anda boleh mengoptimumkan pemuatan dan pemaparan imej pada halaman web anda.

4. Atribut pemuatan untuk

Serupa dengan imej malas memuatkan, atribut pemuatan boleh digunakan pada

<iframe src="/page.html" width="300" height="250" loading="lazy"></iframe>

5. Atribut silang asal untuk Perkongsian Sumber Silang (CORS)

Apabila bekerja dengan elemen seperti ,

<img src="/static/imghw/default1.png" data-src="https://example.com/image.jpg" class="lazy" crossorigin="anonymous" alt="Atribut HTML yang Dikenali untuk Meningkatkan Pengalaman Pengguna Image">

Atribut menerima dua nilai: anonymous dan use-credentials. Menetapkannya kepada awanama menunjukkan bahawa sumber harus diambil tanpa memasukkan bukti kelayakan pengguna, manakala bukti kelayakan penggunaan menunjukkan bahawa bukti kelayakan pengguna harus disertakan.

6. Atribut disablepictureinpicture untuk

Atribut disablepictureinpicture boleh digunakan pada

<video src="example.mp4" disablepictureinpicture controls></video>

7. Atribut integriti untuk Skrip

Untuk memastikan skrip luaran tidak diganggu, anda boleh menggunakan atribut integriti. Atribut ini membolehkan anda memberikan nilai cincang kriptografi yang boleh digunakan oleh penyemak imbas untuk mengesahkan integriti fail skrip sebelum melaksanakannya.

<script src="script.js" integrity="sha256-Kx70Z9jzvYF0Eex8oO7w08=" crossorigin="anonymous"></script>

Dengan memasukkan atribut integriti dengan nilai cincang yang sesuai, anda boleh menambah lapisan keselamatan tambahan untuk memastikan ketulenan skrip.

Kesimpulan

Dalam artikel ini, kami telah meneroka koleksi atribut HTML yang kurang dikenali yang boleh meningkatkan projek pembangunan web anda. Daripada meningkatkan interaksi pengguna kepada mengoptimumkan pemuatan sumber, atribut ini menyediakan fungsi berharga yang mungkin tidak diketahui atau digunakan secara meluas.

これが役立つと思われる場合は、購読を検討してください_Web 開発に関するさらに役立つ記事やツールを入手できます。読んでいただきありがとうございます!

Atas ialah kandungan terperinci Atribut HTML yang Dikenali untuk Meningkatkan Pengalaman Pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!