5 HTML функции, които може да не знаете

За език, толкова прост и лесен за научаване, HTML със сигурност предлага неочаквано количество полезни функции, много от които за повечето от нас дори не знаят. Трудно е да се справиш с времето и може да мислиш, че всичко “може би не знаете” статии трябва да са за най-новите тагове, HTML също има някои много полезни функции, които вече съществуват за известно време.

От проверката на правописа до добавянето на клавишни комбинации в тази статия ще ви покажа пет по-малко познати HTML функции.

1. Проверете правописа, докато пишете

Най- проверка на правописа атрибут подканва браузърите да проверяват правописа, докато потребителят въвежда елемент. Този атрибут е глобален, което означава, можете да го добавите към всеки HTML маркер.

Той обаче работи само върху елементи, които могат въвеждане на текст. Това, че е глобално, е полезно, защото може да бъде наследени от детски елементи. Например, добавете го към a

свободен край и всичките му дъщерни елементи, които приемат въвеждане на текст, ще наследят този атрибут.

Проверката на правописа работи цял текст видове: текст, Търсене, URL, и електронна поща. Той също работи </code>, и редактируеми елементи</strong> (елементи с <code>contenteditable</code> атрибут).</p> <p>Неговата стойност може да бъде празен низ, <code>вярно</code>, или <code>фалшив</code>. Празният низ и <code>вярно</code> ще <strong>активирайте проверката на правописа</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Въведете нещо тук </p> </pre> <p>В горния код, <strong>и двете <code><div></code> и <code><p></code> етикетите ще проверяват правописа</strong> когато потребителят въвежда в тях.</p> <p>Ако потребителят има <strong>изключена проверка на правописа</strong> в настройките на браузъра не се проверява правописа, <strong>дори ако <code>проверка на правописа</code> беше добавен</strong>.</p> <h4>2. Бъдете в безопасност от компрометираните ресурси на CDN</h4> <p>Това е доста често за хост ресурси, като скриптове и стилове, чрез <abbr>CDN</abbr>с. Но, ако <strong>CDN се компрометира</strong>, така че правите тези хоствани файлове и ако някой извлечен ресурс е компрометиран на уебсайта ви, прави и сайтът ви!</p> <p>Вижте какво казва Mozilla Developer Network за проблема:</p> <blockquote><p><q>… Използването на CDNs също идва с риск, че ако хакерът придобие контрол върху CDN, нападателят може да инжектира произволно злонамерено съдържание във файлове в CDN (или да замени файловете напълно) и по този начин може да атакува всички сайтове, които извличат файлове от този CDN.</q></p></blockquote> <p>За да предотвратите това, <strong>Подчинена почтеност (SRI)</strong> бе въведена в началото на 2014 г. от W3C. Тази схема <strong>сравнява стойността на хеша</strong> (резултатът от прилагането на хеш функция към входа) <strong>на ресурс</strong> за да я потвърдите.</p> <p>Кажете, че има JavaScript файл в <code>https://example.com/example.js</code>. Първо ти <strong>приложите хеш функция</strong> в този файл <strong>добавете произведената хеш стойност</strong> към <strong><code>интегритет</code> атрибут</strong> от <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>Сега, когато уеб страницата на сайта ви с горния код трябва да се зареди <code>example.js</code>, браузъра <strong>Първо се прилага хеш функцията</strong>, и зарежда и работи <code>example.js</code> само когато <strong>хеш стойността съответства на <code>интегритет</code> стойност</strong>.</p> <p>ако <strong><code>example.com</code> е компрометиран</strong> и <strong><code>example.js</code> беше намеса</strong> с тогава хеш стойността на <code>example.js</code> няма да съответства на <strong><code>интегритет</code> стойност</strong>. </p> <p>Повечето често срещани CDN вече предоставят <strong>SRI <code>интегритет</code> стойности</strong>, но можете да генерирате и тук.</p> <h4>3. Замяна на целите на формата в бутоните за изпращане</h4> <p>Най-вероятно сте запознати с <strong><code>мишена</code> атрибут</strong>, този, който решава <strong>където се отваря ресурс с хипервръзки</strong>, например на същата страница или в нов раздел. Може да знаете същото <code>мишена</code> атрибут, използван в <code><form></code> решава <strong>където се показва отговорът от подаването на формуляра</strong>.</p> <p>В един от ранните проекти на HTML5, <code>formtarget</code> е дефиниран заедно с четири други атрибута за подаване на формуляри: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, и <strong><code>formnovalidate</code></strong>. </p> <p>Тези атрибути могат да бъдат <strong>използва се с бутоните за изпращане</strong>, и те отменят съответните си атрибути в <code><form></code> таг, към който принадлежат бутоните.</p> <p>Така че, когато формуляр е подаден с бутон, който има a <code>formtarget</code> атрибут, <strong>Отговорът е показан в съответствие с <code>formtarget</code> стойност</strong>, вместо <code>мишена</code> стойност на <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>В горния код, когато формулярът е изпратен с втория бутон за изпращане (<code>печат</code> ), отговорът ще <strong>се показват в нов контекст на сърфиране</strong>, като в нов раздел.</p> <h4>4. Скрийте елементи семантично</h4> <p>Когато става въпрос за <strong>скрити елементи</strong>, всички преминахме през различни фази на скриване на елементи: използване <strong><code>непрозрачност: 0</code>, <code>видимост: скрит</code>, <code>височина: 0; ширина: 0</code>, <code>дисплей: няма</code>, <code>текст-тире: -999px</code></strong> в нашия CSS файл.</p> <p>Всеки метод има своята цел, нито един от тях не е излишен, така че не е този: <strong><code>скрит</code> HTML атрибут</strong>. Ако има елемент <code>скрит</code> посочено в него, ще бъде скрито.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Той работи <strong>същия начин като <code>дисплей: няма;</code> CSS правило;</strong> елемента с <code>скрит</code> атрибут <strong>не се визуализира</strong> на страницата. Всеки скрипт вътре в елемента ще бъде изпълнен и ако той е форма за контрол, ще бъде изпратен заедно с него <strong>други форми за контрол по време на подаването на формуляри</strong>.</p> <p>Въпреки това, в полза на <code>скрит</code> е, че е <strong>семантично подходящо</strong>, в крайна сметка, HTML5 е всичко за семантиката и <code>скрит</code> е част от обкръжението HTML5!</p> <p>Освен това, когато даден елемент е скрит, той трябва да бъде <strong>скрити във всички платформи</strong>, не само в уеб браузърите, но и в екранните четци, телевизорите, проекторите и т.н..</p> <p>То е също <strong>не зависи от стила</strong>, дори и да изтриете CSS от автора на страницата, елементът ще остане скрит. А в случая с <code>дисплей: няма;</code> това няма да се случи. Така че, помислете <code>скрит</code> като <strong>желязна версия на <code>дисплей: няма;</code></strong>.</p> <h4>5. Добавете клавишни комбинации</h4> <p>Най- <strong><code>Код за достъп</code> глобален атрибут</strong> вече беше дефинирано в HTML4 и то <strong>създава клавишна комбинация</strong> с който потребителят може да управлява елемент на страницата.</p> <p>Ключовата комбинация за пряк път ще бъде <strong>зависи от две неща</strong>:</p> <ol><li>на <strong><code>Код за достъп</code> стойност</strong> което даваме на елемент</li> <li>на <strong>предварително зададени ключове, използвани от браузъра</strong> за същия елемент</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>ИЗОБРАЖЕНИЕ: Mozilla Developer Network</figcaption></figure><p>Вземете този пример:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> изглед </button> </pre> <p>В Firefox, ако сте <strong>натиснете клавишната комбинация Alt + Shift + V (или Alt + Control + V</strong> в macOS) ще получите сигнал “Изглед е кликнал”.</p> <p>Тъй като предварително дефинираните клавиши на браузъра са различни за всеки браузър и операционна система, препоръчваме ви <strong>нека потребителите знаят за комбинациите от ключове</strong> използвани за преките пътища.</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> CSS Свойства, които трябва да знаете</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 iPhone приложения, за да следите инвестициите си</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 Помощни програми за форматиране и разделяне на твърди дискове</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">Следваща статия</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 Идеи Windows 10 трябва да копирате от Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Предишна статия</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 HTML елемента, които може да не знаете как да използвате</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"> Полезна информация и съвети за уеб разработка. Програмиране, уеб дизайн, CSS, HTML, JAVASCRIPT. Конфигурирайте и инсталирайте отново WINDOWS. Създаване на сайтове и приложения от нулата. </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>