5 Можливостей HTML, про які ви не знаєте

Для Мова так проста і легка в освоєнні, HTML, безумовно, пропонує несподівана кількість корисних функцій, багато з яких навіть не знають. Важко йти в ногу з часом, і ви можете подумати, що все “Ви, можливо, не знаєте” статті повинні бути про останні теги, HTML також має деякі цілком корисні функції, які вже існують на деякий час.

Від перевірки орфографії до додавання комбінацій клавіш у цій статті я покажу вам п'ять менш широко відомих функцій HTML.

1. Перевірте правопис під час введення тексту

The перевірка орфографії атрибут підказує браузерам перевіряти написання, поки користувач вводить елемент. Цей атрибут є глобальним, тобто, його можна додати до будь-якого тега HTML.

Однак вона працює тільки на елементах, які можуть введення тексту. Це глобальне корисне, тому що воно може бути успадковуються дочірніми елементами. Наприклад, додайте його до

тег і всі його дочірні елементи, які приймають введення тексту, успадкують цей атрибут.

Перевіряється правопис весь текст типів: текст, пошук, url, і електронною поштою. Він також працює </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. Будьте в безпеці від компрометованих ресурсів CDN</h4> <p>Це досить часто зустрічається на ресурсах хосту, таких як скрипти та файли таблиць стилів, через <abbr>CDN</abbr>s. Але, якщо <strong>CDN отримує компроміс</strong>, так само, як і ці розміщені файли, і якщо якийсь вибраний ресурс скомпрометований на вашому веб-сайті, так само й ваш сайт!</p> <p>Дізнайтеся, що таке мережа розробників Mozilla про проблему:</p> <blockquote><p><q>… Використання CDN також має ризик, оскільки, якщо зловмисник отримує контроль над 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>форма націлювання</code> було визначено разом з чотирма іншими атрибутами подання форми: <strong><code>формування</code>, <code>formenctype</code>, <code>Форма методу</code></strong>, і <strong><code>формально недійсний</code></strong>. </p> <p>Ці атрибути можуть бути <strong>використовується з кнопками надсилання</strong>, і вони перекривають відповідні атрибути в <code><form></code> тег, до якого належать кнопки.</p> <p>Отже, коли форму надсилається за допомогою кнопки, яка має a <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>text-indent: -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>The <strong><code>accesskey</code> глобальний атрибут</strong> вже визначено в HTML4 і в ньому <strong>створює комбінацію клавіш</strong> з яким користувач може керувати елементом на сторінці.</p> <p>Комбінація клавіш для швидкого доступу <strong>залежить від двох речей</strong>:</p> <ol><li> <strong><code>accesskey</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>IMAGE: мережа розробників Mozilla</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>