Hakkında Bilmeyeceğiniz 5 HTML Özelliği

Bir için dil çok basit ve öğrenmesi kolay, HTML kesinlikle bir sunar beklenmedik miktarda yararlı özellik, Birçoğumuz hakkında bile bilmiyoruz. Zamana ayak uydurmak zor ve hepsini düşünebilirsiniz. “bilemeyebilirsin” makaleler en son etiketlerle ilgili olmalı, HTML’de zaten bir süredir var olan oldukça yararlı özellikler.

Yazımı denetlemekten klavye kısayolları eklemeye, bu makalede size göstereceğim daha az bilinen beş HTML özelliği.

1. Yazarken yazımı denetleyin

yazım denetimi nitelik kullanıcılardan bir öğe yazarken tarayıcılardan yazım denetlemelerini ister. Bu özellik küresel, anlam, Herhangi bir HTML etiketine ekleyebilirsiniz.

Ancak, yalnızca yapabilen öğeler üzerinde çalışır. metin girişi al. Küresel olmak faydalıdır çünkü olabilir. alt öğeler tarafından miras alınır. Örneğin, bir

etiket ve metin girişi alan tüm alt öğeleri bu özelliği devralacak.

Yazım denetimi üzerinde çalışıyor tüm metinler türleri: Metin, arama, url, ve E-posta. Aynı zamanda çalışır </code>, ve düzenlenebilir öğeler</strong> (ile elemanlar <code>contenteditable</code> özellik).</p> <p>Değeri boş bir dize olabilir, <code>doğru</code>, veya <code>yanlış</code>. Boş dize ve <code>doğru</code> irade <strong>yazım denetleyicisini etkinleştir</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Buraya bir şey yaz </p> </pre> <p>Yukarıdaki kodda, <strong>ikisi de <code><div></code> ve <code><p></code> etiketler yazımları kontrol edecek</strong> Bir kullanıcı onlara yazarken.</p> <p>Kullanıcı varsa <strong>engelli yazım denetimi</strong> tarayıcı ayarlarında yazım denetimi yapılmayacak, <strong>Bile <code>yazım denetimi</code> eklendi</strong>.</p> <h4>2. Ödün verilmiş CDN kaynaklarından korunma</h4> <p>Komut dosyaları ve stil sayfası dosyaları gibi kaynakları barındırmak oldukça yaygındır. <abbr>CDN</abbr>s. Ancak, eğer <strong>CDN tehlikeye girer</strong>, bu barındırılan dosyaları da yapın ve eğer getirilen herhangi bir kaynak web sitenizde tehlike altındaysa, siteniz de!</p> <p>Mozilla Developer Network'ün sorun hakkında neler söylediğini görün:</p> <blockquote><p><q>… CDN'lerin kullanılması, bir saldırganın CDN kontrolünü ele geçirmesi durumunda saldırganın CDN'deki dosyalara keyfi olarak kötü niyetli içerik enjekte etmesi (veya dosyaları tamamen değiştirmesi) ve dolayısıyla dosyaları alan tüm sitelere saldırma olasılığı da vardır. o CDN'den.</q></p></blockquote> <p>Bunu önlemek için, <strong>Alt Kaynak Bütünlüğü (SRI)</strong> 2014 yılının başında W3C tarafından tanıtıldı. Bu şema <strong>karma değerini karşılaştırır</strong> (bir girdiye bir karma işlevi uygulamanın sonucu) <strong>bir kaynağın</strong> doğrulamak için.</p> <p>Diyelim ki, adresinde bir JavaScript dosyası var. <code>https://example.com/example.js</code>. İlk sen <strong>karma işlevi uygulama</strong> o dosyaya, sonra <strong>üretilen karma değeri ekle</strong> -e <strong><code>bütünlük</code> nitelik</strong> arasında <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>Şimdi, ne zaman sitenize bir web sayfası yukarıdaki kod ile yüklemek zorunda <code>example.js</code>, tarayıcı <strong>ilk önce karma işlevini uygular</strong>, ve yükler ve koşar <code>example.js</code> sadece ne zaman <strong>karma değeri <code>bütünlük</code> değer</strong>.</p> <p>Eğer <strong><code>example.com</code> tehlikeye atıldı</strong> ve <strong><code>example.js</code> müdahale edildi</strong> o zaman ile karma değeri <code>example.js</code> eşleşmeyecek <strong><code>bütünlük</code> değer</strong>. </p> <p>En yaygın CDN'ler zaten sağlar <strong>SRİ <code>bütünlük</code> değerler</strong>, ama burada bir tane de üretebilirsin.</p> <h4>3. Gönder düğmelerindeki form hedeflerini geçersiz kıl</h4> <p>Büyük olasılıkla aşina olduğunuz <strong><code>hedef</code> nitelik</strong>, karar veren <strong>köprülü bir kaynağın açıldığı yer</strong>, örneğin aynı sayfada veya yeni bir sekmede. Aynı şeyi biliyor olabilirsiniz <code>hedef</code> kullanılan özellik <code><form></code> etiket karar verir <strong>form gönderiminden gelen yanıtın gösterildiği yer</strong>.</p> <p>HTML5'in ilk taslaklarından birinde, <code>formtarget</code> diğer dört form gönderme özelliği ile birlikte tanımlandı: <strong><code>FORMACTION</code>, <code>formenctype</code>, <code>formmethod</code></strong>, ve <strong><code>formnovalidate</code></strong>. </p> <p>Bu özellikler olabilir <strong>Gönder düğmeleriyle kullanılır</strong>, ve onlar kendi ilgili niteliklerini geçersiz kılar. <code><form></code> düğmelerin ait olduğu etiket.</p> <p>Bu nedenle, bir form bir düğmeyi kullanarak gönderildiğinde <code>formtarget</code> özellik, <strong>göre verilen cevap <code>formtarget</code> değer</strong>, onun yerine <code>hedef</code> değeri <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>Yukarıdaki kodda, form ikinci gönder düğmesi kullanılarak gönderildiğinde (<code>baskı</code> ), cevap olacak <strong>yeni bir tarama bağlamında görünmek</strong>, yeni bir sekmedeki gibi.</p> <h4>4. Öğeleri anlamsal olarak gizleme</h4> <p>Gelince <strong>gizleme elemanları</strong>, hepimiz elementlerin gizlenmesinin farklı aşamalarından geçtik: kullanma <strong><code>opaklık: 0</code>, <code>görünürlüğü: gizli</code>, <code>Yükseklik: 0; en: 0</code>, <code>görüntü yok</code>, <code>text-indent: -999px</code></strong> CSS dosyamızda.</p> <p>Her yöntemin bir amacı vardır, hiçbiri gereksiz değildir ve bu böyle değildir: <strong><code>gizli</code> HTML özelliği</strong>. Bir eleman varsa <code>gizli</code> belirtilen, gizli olacak.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Çalışır <strong>aynı <code>görüntü yok;</code> CSS kuralı;</strong> ile eleman <code>gizli</code> nitelik <strong>oluşturulmaz</strong> sayfada. Öğenin içindeki herhangi bir komut dosyası yürütülür ve bir biçim denetimi olması durumunda birlikte gönderilir <strong>form teslimi sırasındaki diğer form kontrolleri</strong>.</p> <p>Ancak, faydası <code>gizli</code> öyle mi <strong>anlamsal olarak uygun</strong>, sonuçta, HTML5 anlam bilimi ile ilgilidir ve <code>gizli</code> HTML5 entourage'ın bir parçasıdır!</p> <p>Dahası, bir element gizlendiğinde, olması gereken <strong>tüm platformlarda gizli</strong>, Sadece web tarayıcılarında değil ekran okuyucularda, TV'de, projektörlerde vb..</p> <p>O da <strong>stile bağlı değil</strong>, Yazar CSS'sini bir sayfadan ayırsanız bile, öğe gizli kalacaktır. Oysa <code>görüntü yok;</code> bu olmayacak. Öyleyse, düşün <code>gizli</code> olarak <strong>ironclad versiyonu <code>görüntü yok;</code></strong>.</p> <h4>5. Klavye kısayolları ekleyin</h4> <p> <strong><code>erişim anahtarı</code> genel özellik</strong> HTML4'te zaten tanımlanmış ve bu <strong>klavye kısayolu oluşturur</strong> Kullanıcının sayfada bir öğe çalıştırabileceği.</p> <p>Kısayol için tuş birleşimi <strong>iki şeye bağlı</strong>:</p> <ol><li> <strong><code>erişim anahtarı</code> değer</strong> bir elemana verdiğimiz</li> <li> <strong>tarayıcı tarafından kullanılan önceden atanmış tuşlar</strong> aynı eleman için</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>GÖRÜNTÜ: Mozilla Geliştirici Ağı</figcaption></figure><p>Bu örneği ele alalım:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Görünüm </button> </pre> <p>Firefox’ta <strong>Alt + Shift + V (veya Alt + Control + V) tuş bileşimine basın</strong> macOS'ta) uyarı alırsınız “Tıklananları Görüntüle”.</p> <p>Önceden tanımlanmış tarayıcı tuşları her tarayıcıya ve işletim sistemine göre değiştiğinden, size tavsiye edilir <strong>Kullanıcılara tuş kombinasyonlarını bildirme</strong> kısayollar için kullanılır.</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> Bilmeniz Gereken CSS Özellikleri</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">Yatırımlarınızı İzlemeniz için 5 iPhone Uygulaması</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 Sabit Sürücü Biçimlendirme ve Bölme Yardımcı Programları</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">Bir sonraki makale</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 Fikirler Windows 10 Mac OS X Yosemite'den Kopyalamalı</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Önceki makale</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">Nasıl Kullanılacağını Bilmeyeceğiniz 5 HTML Öğesi</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"> Yararlı bilgi ve web geliştirme ipuçları. Programlama, web tasarımı, CSS, HTML, JAVASCRIPT. WINDOWS'u yapılandırın ve yeniden yükleyin. Sıfırdan site ve uygulama oluşturma. </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>