Salam, Habr! Saya mempersembahkan untuk Anda terjemahan artikel
"9 Trik HTML yang Sangat Berguna" oleh
Klaus .
HTML memiliki banyak rahasia praktis yang mungkin berguna bagi Anda.
Asli dari penulisTetapi saya ingin memastikan bahwa situs tersebut berfungsi di Internet Explorer dan browser lainnya.
Saya menggunakan
Endtest untuk membuat tes otomatis dan menjalankannya di cloud lintas-browser.
Netflix menggunakan platform yang sama untuk menguji aplikasi webnya.
Keterampilan Endtest bahkan ada dalam daftar keterampilan yang dibutuhkan untuk beberapa
lowongan pekerjaan mereka.
Endtest memiliki beberapa fitur yang sangat berguna, seperti:
• Jaringan lintas browser berjalan pada komputer dengan Windows dan MacOS
• Editor tanpa kode untuk pengujian otomatis
• Dukungan aplikasi web
• Dukungan untuk aplikasi asli dan hybrid untuk Android dan iOS
• Video tidak terbatas untuk menjalankan tes Anda
• Perbandingan
tangkapan layar
• Geolokasi
• jika pernyataan
• Siklus
• Unggah file ke tes Anda
• Endtest API, untuk memudahkan integrasi dengan sistem CI / CD Anda
• Pernyataan yang diperluas
• Tes seluler di perangkat seluler
• Pengujian Email dengan Kotak Surat Endtest
Anda dapat melihat
dokumen .
Di bawah ini adalah 9 trik HTML yang sangat berguna.
1. Tag "gambar"Ini dapat digunakan untuk menandai foto.
Elemen
gambar juga mengandung
figcaption :
<figure> <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%"> <figcaption>Fig.1 - SWAT Kats</figcaption> </figure>
Dan beginilah tampilannya:
Gbr. 1 - SWAT Kats
2. Tag "video"Ini memungkinkan Anda untuk menyematkan pemutar media untuk pemutaran video.
Misalnya, Anda dapat mengunggah video ke AWS S3 dan menggunakan tag "video" untuk menyematkannya di situs web Anda.
Menggunakan YouTube untuk ini mungkin tampak tidak profesional.
Dan Vimeo tidak memungkinkan Anda untuk menyematkan video Anda tanpa pembayaran.
Anda dapat menentukan karakteristik tertentu, seperti lebar, tinggi, autostart, siklus, kontrol, dll.
<video autoplay="" loop="" controls="" width="640" height="480"> <source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"> </video>
Dan beginilah tampilannya:
Anda juga dapat menanamkan siaran langsung menggunakan
getUserMedia () atau
WebRTC3. Tag "gambar"Tag ini membantu menampilkan gambar dalam bentuk publik, menampilkan versi alternatif gambar untuk jendela tampilan kecil.
Itu harus mengandung satu atau lebih tag
"sumber" dan satu tag
"img" .
Tag
img hanya akan digunakan jika pemirsa tidak cocok dengan salah satu tag
sumber atau jika tidak didukung oleh browser.
<picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="avatar"> </picture>
4. Tag "kemajuan"Tag
progres menampilkan progres tugas.
Tag ini tidak boleh bingung dengan tag
"meter" (yang merupakan sensor).
<progress value="63" max="100"> </progress>
Begini tampilannya:
5. Beri tag "meter"Anda dapat menggunakan tag
"meter" untuk mengukur data dalam rentang tertentu (sensor).
Hasilnya dapat ditetapkan melalui nilai minimum dan maksimum atau dalam persen.
<meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter>
Dan inilah mereka:
6. Tag "peta"Tag
peta digunakan untuk mendefinisikan peta gambar klien.
Peta gambar adalah gambar dengan area interaktif.
Yang harus Anda lakukan adalah memasukkan koordinat X dan Y di elemen dari
peta .
Ini artinya Anda membuat peta tata surya kita, menentukan area untuk setiap planet, dan mengarahkan pengunjung ke halaman terpisah untuk setiap planet yang mereka klik.
<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth"> <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars"> <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn"> </map>
7. Atribut yang dapat dieditAtribut ini menunjukkan apakah konten suatu item dapat diedit.
<p contenteditable="true">This is an editable paragraph.</p>
8. Saran untuk masukan <input type="text" list="planets"> <datalist id="planets"> <option value="Mercury"></option> <option value="Venus"></option> <option value="Earth"></option> <option value="Mars"></option> <option value="Jupiter"></option> <option value="Saturn"></option> <option value="Uranus"></option> <option value="Neptune"></option> </datalist>
Saya harap Anda tidak keberatan bahwa saya tidak menambahkan berbagai gaya.
Saya lebih suka mendesain contoh sesuai dengan keinginan saya, seindah mungkin.
9. Tag "noscript"Konten di
dalam elemen
noscript ditampilkan oleh browser hanya jika JavaScript dinonaktifkan.
Ini memberikan mekanisme fallback untuk komponen yang berhenti bekerja tanpa JavaScript.
<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
Saya pikir itu sangat keren bahwa Anda mencari trik HTML, tetapi apakah Anda yakin aplikasi web Anda berfungsi dengan baik di semua browser dan perangkat?
Anda dapat menggunakan
Endtest untuk membuat tes otomatis dengan cepat dan menjalankannya di cloud lintas browser.
Anda bahkan tidak perlu kode untuk menggunakannya.
Serius, baca saja
dokumen .