5 funkcji HTML, o których nie możesz wiedzieć

Dla język tak prosty i łatwy do nauczenia, HTML z pewnością oferuje nieoczekiwana ilość przydatnych funkcji, wiele z których większość z nas nawet nie wie. Trudno nadążyć za czasami i możesz myśleć, że wszystko “możesz nie wiedzieć” artykuły muszą dotyczyć najnowszych tagów, HTML także ma kilka całkiem pomocne funkcje, które są już od jakiegoś czasu.

Od sprawdzenia pisowni po dodanie skrótów klawiaturowych, w tym artykule pokażę ci pięć mniej znanych funkcji HTML.

1. Sprawdź pisownię podczas pisania

The sprawdzanie pisowni atrybut monituje przeglądarki, aby sprawdzały pisownię, gdy użytkownik wpisuje element. Ten atrybut ma charakter globalny, możesz dodać go do dowolnego tagu HTML.

Działa jednak tylko na elementach, które mogą weź tekst. Posiadanie go globalnego jest przydatne, ponieważ może być dziedziczone przez elementy potomne. Na przykład dodaj go do

etykietka a wszystkie jego elementy potomne pobierające dane tekstowe dziedziczą ten atrybut.

Sprawdzanie pisowni działa cały tekst typy: tekst, Szukaj, url, i e-mail. Działa również na </code>, i edytowalne elementy</strong> (elementy z <code>zadowalający</code> atrybut).</p> <p>Jego wartość może być pustym łańcuchem, <code>prawdziwe</code>, lub <code>fałszywy</code>. Pusty ciąg i <code>prawdziwe</code> będzie <strong>włącz sprawdzanie pisowni</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Wpisz coś tutaj </p> </pre> <p>W powyższym kodzie, <strong>oboje <code><div></code> i <code><p></code> tagi sprawdzą pisownię</strong> kiedy użytkownik je wpisuje.</p> <p>Jeśli użytkownik ma <strong>wyłączone sprawdzanie pisowni</strong> w ustawieniach przeglądarki pisownia nie będzie sprawdzana, <strong>nawet jeśli <code>sprawdzanie pisowni</code> zostało dodane</strong>.</p> <h4>2. Bądź bezpieczny przed zagrożonymi zasobami CDN</h4> <p>Jest to dość powszechne dla zasobów hosta, takich jak skrypty i pliki arkuszy stylów, poprzez <abbr>CDN</abbr>s. Ale jeśli <strong>CDN zostaje naruszone</strong>, więc te pliki hostowane, a jeśli jakikolwiek pobrany zasób zostanie naruszony na twojej stronie, to twoja strona również!</p> <p>Zobacz, co Mozilla Developer Network mówi o problemie:</p> <blockquote><p><q>… Korzystanie z CDN wiąże się z ryzykiem, ponieważ jeśli atakujący przejmie kontrolę nad CDN, atakujący może wprowadzić dowolną szkodliwą zawartość do plików w CDN (lub całkowicie zastąpić pliki), a tym samym potencjalnie zaatakować wszystkie witryny pobierające pliki z tego CDN.</q></p></blockquote> <p>Aby temu zapobiec, <strong>Integralność zasobów (SRI)</strong> został wprowadzony na początku 2014 r. przez W3C. Ten schemat <strong>porównuje wartość skrótu</strong> (wynik zastosowania funkcji mieszającej na wejściu) <strong>zasobu</strong> potwierdzić to.</p> <p>Powiedz, że istnieje plik JavaScript <code>https://example.com/example.js</code>. Najpierw ty <strong>zastosuj funkcję skrótu</strong> do tego pliku <strong>dodaj wytworzoną wartość skrótu</strong> do <strong><code>integralność</code> atrybut</strong> z <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>Teraz, gdy strona internetowa Twojej witryny z powyższym kodem musi zostać załadowana <code>example.js</code>, przeglądarka <strong>najpierw stosuje funkcję skrótu</strong>, i ładuje i biegnie <code>example.js</code> tylko gdy jest <strong>wartość skrótu odpowiada <code>integralność</code> wartość</strong>.</p> <p>Jeśli <strong><code>example.com</code> został naruszony</strong> i <strong><code>example.js</code> został zakłócony</strong> następnie wartość skrótu <code>example.js</code> nie pasuje do <strong><code>integralność</code> wartość</strong>. </p> <p>Większość popularnych sieci CDN już zapewnia <strong>SRI <code>integralność</code> wartości</strong>, ale możesz także wygenerować tutaj.</p> <h4>3. Zastąp cele formularza w przyciskach wysyłania</h4> <p>Najprawdopodobniej znasz <strong><code>cel</code> atrybut</strong>, ten, który decyduje <strong>gdzie otwiera się zasób hiperłącza</strong>, na przykład na tej samej stronie lub w nowej karcie. Możesz również wiedzieć, że to samo <code>cel</code> atrybut użyty w <code><form></code> tag decyduje <strong>gdzie pokazana jest odpowiedź z formularza</strong>.</p> <p>W jednym z pierwszych szkiców HTML5, <code>cel formalny</code> został zdefiniowany wraz z czterema innymi atrybutami przesyłania formularza: <strong><code>formacja</code>, <code>formenctype</code>, <code>Formmethod</code></strong>, i <strong><code>formnovalidate</code></strong>. </p> <p>Te atrybuty mogą być <strong>używane z przyciskami wysyłania</strong>, i zastępują ich odpowiednie atrybuty w <code><form></code> znacznik, do którego należą przyciski.</p> <p>Tak więc, gdy formularz jest przesyłany za pomocą przycisku, który ma <code>cel formalny</code> atrybut, <strong>odpowiedź jest pokazana zgodnie z <code>cel formalny</code> wartość</strong>, zamiast tego <code>cel</code> wartość <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>W powyższym kodzie, gdy formularz jest przesyłany za pomocą drugiego przycisku przesyłania (<code>wydrukować</code> ), odpowiedź będzie <strong>pojawiają się w nowym kontekście przeglądania</strong>, jak w nowej karcie.</p> <h4>4. Ukryj elementy semantycznie</h4> <p>Jeśli chodzi o <strong>elementy kryjące</strong>, wszyscy przeszliśmy przez różne fazy ukrywania elementów: używanie <strong><code>krycie: 0</code>, <code>widoczność: ukryta</code>, <code>wysokość: 0; szerokość: 0</code>, <code>Nie wyświetla się</code>, <code>wcięcie tekstu: -999px</code></strong> w naszym pliku CSS.</p> <p>Każda metoda ma swój cel, żadna z nich nie jest zbędna, więc nie jest to jedna z nich <strong><code>ukryty</code> Atrybut HTML</strong>. Jeśli element ma <code>ukryty</code> określony na nim, będzie ukryty.</p> <pre name="code"> <div hidden>… </div> </pre> <p>To działa <strong>tak samo jak <code>Nie wyświetla się;</code> Reguła CSS;</strong> element z <code>ukryty</code> atrybut <strong>nie jest renderowane</strong> na stronie. Każdy skrypt wewnątrz elementu zostanie wykonany, a jeśli jest to formant, zostanie przesłany wraz z <strong>inne formanty podczas składania formularza</strong>.</p> <p>Jednak korzyści <code>ukryty</code> to jest to <strong>semantycznie odpowiedni</strong>, w końcu HTML5 dotyczy semantyki i <code>ukryty</code> jest częścią otoczenia HTML5!</p> <p>Ponadto, gdy element jest ukryty, ma być <strong>ukryty na wszystkich platformach</strong>, nie tylko w przeglądarkach internetowych, ale w przeglądarkach ekranowych, telewizorach, projektorach itp.</p> <p>To także <strong>nie zależy od stylu</strong>, nawet jeśli usuniesz CSS autora ze strony, element pozostanie ukryty. Ale w przypadku <code>Nie wyświetla się;</code> to się nie stanie. Więc pomyśl <code>ukryty</code> jak <strong>wersja ironclad <code>Nie wyświetla się;</code></strong>.</p> <h4>5. Dodaj skróty klawiaturowe</h4> <p>The <strong><code>klucz dostępu</code> atrybut globalny</strong> został już zdefiniowany w HTML4 i tym <strong>tworzy skrót klawiaturowy</strong> za pomocą którego użytkownik może obsługiwać element na stronie.</p> <p>Będzie to kombinacja klawiszy dla skrótu <strong>zależą od dwóch rzeczy</strong>:</p> <ol><li> <strong><code>klucz dostępu</code> wartość</strong> które dajemy elementowi</li> <li> <strong>wstępnie przypisane klucze używane przez przeglądarkę</strong> dla tego samego elementu</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Mozilla Developer Network</figcaption></figure><p>Weź ten przykład:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Widok </button> </pre> <p>W Firefoksie, jeśli <strong>naciśnij kombinację klawiszy Alt + Shift + V (lub Alt + Control + V</strong> w macOS) otrzymasz alert “Wyświetl kliknięcie”.</p> <p>Ponieważ predefiniowane klucze przeglądarki różnią się w zależności od przeglądarki i systemu operacyjnego, jest to zalecane <strong>powiadomić użytkowników o kombinacjach klawiszy</strong> używane do skrótów.</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> Właściwości CSS, które powinieneś wiedzieć</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 aplikacji na iPhone'a do śledzenia twoich inwestycji</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 Formatowanie dysku twardego i narzędzia do partycjonowania</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">Następny artykuł</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 pomysłów Windows 10 powinien skopiować z Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Poprzedni artykuł</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 elementów HTML, których nie możesz wiedzieć</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"> Przydatne informacje i wskazówki dotyczące tworzenia stron internetowych. Programowanie, projektowanie stron internetowych, CSS, HTML, JAVASCRIPT. Skonfiguruj i zainstaluj ponownie WINDOWS. Tworzenie witryn i aplikacji od podstaw. </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>