5 Ciri HTML Anda Mungkin Tidak Tahu Mengenai

Untuk bahasa yang begitu mudah dan mudah dipelajari, HTML pasti menawarkan jumlah ciri berguna yang tidak dijangka, banyak yang kebanyakan kita tidak tahu. Sukar untuk berhati-hati dengan masa dan anda mungkin berfikir bahawa semuanya “anda mungkin tidak tahu” artikel mestilah mengenai tag yang terkini, HTML juga mempunyai beberapa ciri-ciri yang sangat berguna yang sudah ada seketika.

Dari menyemak ejaan untuk menambah pintasan papan kekunci, dalam artikel ini, saya akan menunjukkan kepada anda lima ciri HTML yang kurang dikenali.

1. Periksa ejaan semasa anda menaip

The semak ejaan atribut meminta penyemak imbas untuk memeriksa ejaan semasa pengguna menaip elemen. Atribut ini adalah global, makna, anda boleh menambahkannya ke mana-mana tag HTML.

Walau bagaimanapun, ia hanya berfungsi pada elemen yang boleh mengambil input teks. Memiliki ia global berguna kerana boleh diwarisi oleh elemen kanak-kanak. Sebagai contoh, tambahkannya kepada a

tag dan semua unsur anaknya yang mengambil input teks akan mewarisi atribut ini.

Pemeriksaan ejaan berfungsi semua teks jenis: teks, carian, url, dan e-mel. Ia juga berfungsi </code>, dan unsur yang boleh diedit</strong> (elemen dengan <code>kandungan boleh diubah</code> atribut).</p> <p>Nilainya boleh menjadi tali kosong, <code>benar</code>, atau <code>salah</code>. Rentetan kosong dan <code>benar</code> akan <strong>membolehkan pemeriksa ejaan</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Taip sesuatu di sini </p> </pre> <p>Dalam kod di atas, <strong>kedua-duanya <code><div></code> dan <code><p></code> tag akan menyemak ejaan</strong> apabila pengguna menaipnya.</p> <p>Jika pengguna mempunyai <strong>semakan ejaan kurang upaya</strong> dalam tetapan pelayar ejaan tidak akan diperiksa, <strong>walaupun <code>semak ejaan</code> telah ditambah</strong>.</p> <h4>2. Jadilah selamat dari sumber CDN yang dikompromi</h4> <p>Sudah cukup umum untuk menjadi tuan rumah sumber, seperti skrip dan fail stylesheet, melalui <abbr>CDN</abbr>s. Tetapi, jika <strong>CDN akan dikompromi</strong>, begitu juga dengan fail-fail yang dihoskan, dan jika ada sumber yang dijangkiti dikompromi di laman web anda, begitu pula laman web anda!</p> <p>Lihat apa yang disebut Rangkaian Pembangun Mozilla mengenai masalahnya:</p> <blockquote><p><q>... menggunakan CDN juga datang dengan risiko, jika seseorang penyerang memperoleh kawalan CDN, penyerang boleh menyuntik kandungan jahat yang sewenang-wenang ke dalam fail pada CDN (atau menggantikan fail sepenuhnya) dan dengan itu juga berpotensi menyerang semua laman web yang mengambil fail dari CDN itu.</q></p></blockquote> <p>Untuk mengelakkan ini, <strong>Integriti Subresource (SRI)</strong> diperkenalkan pada awal 2014 oleh W3C. Skim ini <strong>membandingkan nilai hash</strong> (hasil memohon fungsi hash ke input) <strong>sumber</strong> untuk mengesahkannya.</p> <p>Katakanlah, ada fail JavaScript pada <code>https://example.com/example.js</code>. Pertama, anda <strong>memohon fungsi hash</strong> ke fail itu, kemudian <strong>tambah nilai hash yang dihasilkan</strong> kepada <strong><code>integriti</code> atribut</strong> daripada <strong><code><script></code> tag</strong> that imports <code>example.js</code> to your website.</p> <pre name="code"> <script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script> </pre> <p>Sekarang, bila halaman web laman web anda dengan kod di atas perlu dimuatkan <code>example.js</code>, pelayar <strong>mula menggunakan fungsi hash</strong>, dan beban dan larian <code>example.js</code> hanya apabila ia <strong>nilai hash sepadan dengan <code>integriti</code> nilai</strong>.</p> <p>Jika <strong><code>example.com</code> telah dikompromi</strong> dan <strong><code>example.js</code> telah mengganggu</strong> dengan itu nilai hash daripada <code>example.js</code> tidak akan sepadan dengan <strong><code>integriti</code> nilai</strong>. </p> <p>CDN yang paling biasa sudah disediakan <strong>SRI <code>integriti</code> nilai-nilai</strong>, tetapi anda juga boleh menghasilkan satu di sini.</p> <h4>3. Mengatasi sasaran borang dalam butang hantar</h4> <p>Anda mungkin sudah biasa dengan <strong><code>sasaran</code> atribut</strong>, yang memutuskan <strong>di mana sumber hyperlink terbuka</strong>, misalnya pada halaman yang sama atau dalam tab baru. Anda juga mungkin tahu bahawa perkara yang sama <code>sasaran</code> atribut yang digunakan dalam <code><form></code> tag memutuskan <strong>di mana jawapan dari penyerahan borang ditunjukkan</strong>.</p> <p>Dalam salah satu draf awal HTML5, <code>formtarget</code> telah ditakrifkan bersama empat sifat penyerahan borang yang lain: <strong><code>forma</code>, <code>formenctype</code>, <code>formmethod</code></strong>, dan <strong><code>formnovalidate</code></strong>. </p> <p>Atribut ini boleh <strong>digunakan dengan butang penyerahan</strong>, dan mereka mengatasi sifat masing-masing di dalam <code><form></code> tag yang butangnya dimiliki.</p> <p>Jadi, apabila borang dihantar menggunakan butang yang mempunyai <code>formtarget</code> atribut, yang <strong>tindak balas ditunjukkan mengikut <code>formtarget</code> nilai</strong>, bukannya <code>sasaran</code> nilai <code><form></code>.</p> <pre name="code"> <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> </pre> <p>Dalam kod di atas, apabila borang dihantar menggunakan butang serah terima kedua<code>cetak</code> ), tindak balas akan <strong>muncul dalam konteks penyemakan imbas yang baru</strong>, seperti dalam tab baru.</p> <h4>4. Sembunyikan elemen secara semantik</h4> <p>Apabila ia datang <strong>menyembunyikan elemen</strong>, kita semua melalui pelbagai fasa elemen bersembunyi: menggunakan <strong><code>kelegapan: 0</code>, <code>penglihatan: tersembunyi</code>, <code>ketinggian: 0; lebar: 0</code>, <code>paparan: tiada</code>, <code>teks-indent: -999px</code></strong> dalam fail CSS kami.</p> <p>Setiap kaedah mempunyai tujuannya, tidak satu pun dari mereka yang berlebihan, dan sebagainya tidak satu ini: <strong><code>tersembunyi</code> Atribut HTML</strong>. Sekiranya ada elemen <code>tersembunyi</code> yang dinyatakan di atasnya, ia akan disembunyikan.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Ia berfungsi <strong>cara yang sama seperti <code>paparan: tiada;</code> Peraturan CSS;</strong> unsur dengan <code>tersembunyi</code> atribut <strong>tidak dapat diberikan</strong> pada halaman. Mana-mana skrip di dalam elemen akan dilaksanakan, dan jika ia merupakan kawalan borang, ia akan dihantar bersama-sama <strong>kawalan bentuk lain semasa penyerahan borang</strong>.</p> <p>Walau bagaimanapun, faedah daripada <code>tersembunyi</code> adalah bahawa ia <strong>semantik sesuai</strong>, Lagipun, HTML5 semuanya mengenai semantik dan <code>tersembunyi</code> adalah sebahagian daripada rombongan HTML5!</p> <p>Lebih-lebih lagi, apabila unsur tersembunyi, ia akan menjadi <strong>tersembunyi di semua platform</strong>, bukan hanya dalam pelayar web tetapi dalam skrin skrin, TV, projektor, dan sebagainya.</p> <p>Ia juga <strong>tidak bergantung kepada gaya</strong>, walaupun anda melepaskan CSS pengarang dari halaman, elemen akan tetap tersembunyi. Manakala dalam kes <code>paparan: tiada;</code> itu tidak akan berlaku. Oleh itu, fikirkan <code>tersembunyi</code> sebagai <strong>versi ironclad <code>paparan: tiada;</code></strong>.</p> <h4>5. Tambah pintasan papan kekunci</h4> <p>The <strong><code>kunci akses</code> atribut global</strong> telah ditakrifkan dalam HTML4 dan ia <strong>mewujudkan pintasan papan kekunci</strong> dengan mana pengguna boleh mengendalikan elemen pada halaman.</p> <p>Gabungan utama untuk pintasan akan <strong>bergantung pada dua perkara</strong>:</p> <ol><li>yang <strong><code>kunci akses</code> nilai</strong> yang kita berikan kepada elemen</li> <li>yang <strong>kunci yang telah ditetapkan yang digunakan oleh penyemak imbas</strong> untuk elemen yang sama</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Rangkaian Pemaju Mozilla</figcaption></figure><p>Ambil contoh ini:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Lihat </button> </pre> <p>Di Firefox, jika anda <strong>tekan kekunci utama Alt + Shift + V (atau Alt + Control + V</strong> dalam macOS) anda akan mendapat amaran “Lihat Klik”.</p> <p>Oleh kerana kunci penyemak imbas yang dipratentukan berbeza dengan setiap pelayar dan OS, disyorkan anda <strong>biarkan pengguna mengetahui gabungan utama</strong> digunakan untuk pintasan.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/5-img-css-properties-you-should-know.html"><img src="//savtec.org/img/images/5-img-css-properties-you-should-know.gif" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/5-img-css-properties-you-should-know.html">5 <IMG> Properties CSS Anda Perlu Tahu</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html"><img src="//savtec.org/img/images_5/5-iphone-apps-to-keep-track-of-your-investments_7.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html">5 Aplikasi iPhone untuk Mengesan Pelaburan Anda</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html"><img src="//savtec.org/img/images/5-hard-drive-formatting-and-partitioning-utilities_3.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html">5 Pemacu Cakera Keras dan Pembahagian Utiliti</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artikel seterusnya</div> <div class="post-img"><a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html"> <img src="//savtec.org/img/images_6/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite_5.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html">5 Idea Windows 10 Harus Salin Dari Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artikel sebelumnya</div> <div class="post-img"><a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html"> <img src="//savtec.org/img/images_1/5-html-elements-you-might-not-know-how-to-use.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html">5 Elemen HTML yang Anda Tidak Tahu Cara Penggunaan</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Maklumat berguna dan tips pembangunan web. Pengaturcaraan, reka bentuk web, CSS, HTML, JAVASCRIPT. Konfigurasi dan pasang semula WINDOWS. Penciptaan tapak dan aplikasi dari awal. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>