5 ХТМЛ функција о којима можда не знате

За језик тако једноставан и лак за учење, ХТМЛ сигурно нуди неочекивана количина корисних функција, многи од којих већина нас чак и не зна. Тешко је држати корак са временом и можда мислиш да је све то “можда не знате” чланци морају бити о најновијим ознакама, ХТМЛ такође има неке веома корисне функције које су већ присутне неко време.

Од провере правописа до додавања пречица на тастатури, у овом чланку, показат ћу вам пет мање познатих ХТМЛ функција.

1. Проверите правопис док куцате

Тхе провера правописа аттрибуте тражи од претраживача да проверавају правопис док корисник уноси елемент. Овај атрибут је глобални, што значи, можете га додати било којој ХТМЛ ознаци.

Међутим, ради само на елементима који могу унос текста. Имати га глобално је корисно јер може бити наслеђују дечји елементи. На пример, додајте га у а

таг и сви његови подређени елементи који узимају унос текста ће наследити овај атрибут.

Провера правописа ради алл тект врсте: текст, Претрага, урл, и емаил. Он такође ради </code>, и елементи за уређивање</strong> (елементс витх <code>цонтентедитабле</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. Будите сигурни од угрожених ЦДН ресурса</h4> <p>То је прилично уобичајено за хост ресурсе, као што су скрипте и датотеке стила, преко <abbr>ЦДН</abbr>с. Али, ако <strong>ЦДН постаје компромитована</strong>, тако и оне хостоване датотеке, и ако је било који дохваћени ресурс компромитован на вашем веб сајту, исто важи и за ваш сајт!</p> <p>Погледајте шта Мозилла Девелопер Нетворк каже о проблему:</p> <blockquote><p><q>... употреба ЦДН-а такође долази са ризиком, јер ако нападач добије контролу над ЦДН-ом, нападач може да убаци произвољан злонамерни садржај у датотеке на ЦДН-у (или потпуно замени датотеке) и тако може потенцијално напасти све локације које дохваћају датотеке из тог ЦДН-а.</q></p></blockquote> <p>Да то спречите, <strong>Субресоурце интегритет (СРИ)</strong> је представљен почетком 2014. од стране В3Ц. Ова шема <strong>упоређује хеш вредност</strong> (резултат примене хасх функције на улаз) <strong>ресурса</strong> да бисте је потврдили.</p> <p>Рецимо, постоји ЈаваСцрипт датотека на <code>хттпс://екампле.цом/екампле.јс</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>екампле.јс</code>, прегледач <strong>прво примењује хасх функцију</strong>, и терети и трчи <code>екампле.јс</code> само када је <strong>хасх валуе одговара <code>интегритет</code> вредност</strong>.</p> <p>Ако <strong><code>екампле.цом</code> био компромитован</strong> и <strong><code>екампле.јс</code> је ометано</strong> са тада хеш вредност од <code>екампле.јс</code> неће одговарати <strong><code>интегритет</code> вредност</strong>. </p> <p>Најчешћи ЦДН-ови већ пружају <strong>СРИ <code>интегритет</code> вредности</strong>, али можете и генерисати овде.</p> <h4>3. Надјачавање циљева форми у дугмадима за слање</h4> <p>Вероватно сте упознати са <strong><code>таргет</code> аттрибуте</strong>, онај који одлучује <strong>где се отвара хипервезирани ресурс</strong>, на пример на истој страници или на новој картици. Исто тако можете знати <code>таргет</code> атрибут који се користи у <code><form></code> таг одлучи <strong>где је приказан одговор од слања обрасца</strong>.</p> <p>У једном од првих нацрта ХТМЛ5, <code>формтаргет</code> дефинисан је заједно са још четири атрибута за слање образаца: <strong><code>формацтион</code>, <code>форменцтипе</code>, <code>формметход</code></strong>, и <strong><code>формновалидате</code></strong>. </p> <p>Ови атрибути могу бити <strong>користи се са дугмади за слање</strong>, и они надјачавају своје атрибуте у <code><form></code> ознака којој припадају дугмад.</p> <p>Дакле, када се образац достави помоћу дугмета које има а <code>формтаргет</code> атрибут, <strong>одговор је приказан према <code>формтаргет</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>тект-индент: -999пк</code></strong> у нашој ЦСС датотеци.</p> <p>Свака метода има своју сврху, ниједна од њих није сувишна, па није ни ово: <strong><code>сакривен</code> ХТМЛ аттрибуте</strong>. Ако неки елемент има <code>сакривен</code> наведен на њему, биће сакривен.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Она ради <strong>исто као и <code>дисплаи: ноне;</code> ЦСС руле;</strong> елемент са <code>сакривен</code> аттрибуте <strong>не добија се</strong> на страници. Свака скрипта унутар елемента ће бити извршена, а ако је контрола форме она ће бити послата заједно са <strong>друге форме контроле током подношења обрасца</strong>.</p> <p>Међутим, корист од <code>сакривен</code> да је то <strong>семантички одговарајући</strong>, на крају крајева, ХТМЛ5 је све о семантици и <code>сакривен</code> је део ХТМЛ5 окружења!</p> <p>Штавише, када је неки елемент скривен, то ће бити <strong>скривено у свим платформама</strong>, не само у веб претраживачима, већ иу читачима екрана, ТВ-у, пројекторима итд.</p> <p>То је такође <strong>не зависи од стила</strong>, чак и ако уклоните ЦСС аутора са странице, елемент ће остати скривен. Док у случају <code>дисплаи: ноне;</code> то се неће догодити. Па, смисли <code>сакривен</code> као <strong>иронцлад версион <code>дисплаи: ноне;</code></strong>.</p> <h4>5. Додајте пречице на тастатури</h4> <p>Тхе <strong><code>Тастери</code> глобал аттрибуте</strong> је већ дефинисан у ХТМЛ4 и то <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>СЛИКА: Мозилла Девелопер Нетворк</figcaption></figure><p>Узмите овај пример:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Поглед </button> </pre> <p>У Фирефок-у, ако сте <strong>притисните комбинацију тастера Алт + Схифт + В (или Алт + Цонтрол + В</strong> у мацОС-у) добићете упозорење “Виев Цлицкед”.</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 <ИМГ> ЦСС својства која треба да знате</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 иПхоне апликација за праћење инвестиција</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 идеја Виндовс 10 треба копирати из Мац ОС Кс Иосемите</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 ХТМЛ елемената које не знате како да користите</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"> Корисни савети и савети за развој веба. Програмирање, веб дизајн, ЦСС, ХТМЛ, ЈАВАСЦРИПТ. Конфигуришите и поново инсталирајте ВИНДОВС. Израда сајтова и апликација од почетка. </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>