5 функций HTML, о которых вы могли не знать

Для язык так прост и легок в изучении, HTML, безусловно, предлагает неожиданное количество полезных функций, о многих из которых большинство из нас даже не знает. Трудно идти в ногу со временем, и вы можете подумать, что все “ты можешь не знать” статьи должны быть о самых последних тегах, HTML также имеет некоторые довольно полезные функции, которые уже есть некоторое время.

В этой статье я расскажу от проверки правописания до добавления сочетаний клавиш пять менее широко известных функций HTML.

1. Проверьте орфографию при вводе

проверка орфографии атрибут предлагает браузерам проверять правописание, пока пользователь печатает элемент. Этот атрибут является глобальным, что означает, Вы можете добавить его в любой тег HTML.

Тем не менее, он работает только на элементы, которые могут принять текстовый ввод. Глобально это полезно, потому что это может быть наследуется дочерними элементами. Например, добавить его в

тег и все его дочерние элементы, которые принимают ввод текста, унаследуют этот атрибут.

Проверка орфографии работает на весь текст типы: текст, поиск, 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>s. Но если <strong>CDN подвергается риску</strong>, то же самое относится и к размещенным файлам, и если какой-либо извлеченный ресурс скомпрометирован на вашем сайте, то и ваш сайт!</p> <p>Посмотрите, что Mozilla Developer Network говорит о проблеме:</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>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>Таким образом, когда форма отправляется с помощью кнопки, которая имеет <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</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>