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

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

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

Читайте также: 10 новых функций HTML 5.1 и как их использовать в IRL

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

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

<

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

Проверка орфографии работает на весь текст типы: текст, поиск, URL и электронная почта. Это также работает наи редактируемые элементы (элементы с атрибутом contenteditable).</p> <p>Его значение может быть пустой строкой, true или false. Пустая строка и true активируют проверку орфографии.</p><div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> <div id="yandex_rtb_R-A-1243617-2"></div> <script type="litespeed/javascript">window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:'yandex_rtb_R-A-1243617-2',blockId:'R-A-1243617-2'})})</script> </div> <p><input type="text" spellcheck="true" placeholder="Type something here"></p> <p contenteditable="true" spellcheck="true"> <p> Введите что-то здесь </p> <p>В приведенном выше коде оба</p> <p><</p> <p>div> а также</p> <p> Теги будут проверять правописание, когда пользователь вводит их.</p> <p>Если пользователь отключил проверку орфографии в настройках браузера, орфография не будет проверяться, даже если проверка орфографии была добавлена.<br /> 2. Будьте защищены от скомпрометированных ресурсов CDN<br /> Весьма распространено размещать ресурсы, такие как скрипты и файлы таблиц стилей, через CDN. Но если CDN скомпрометирован, то же самое относится и к размещенным файлам, и если какой-либо извлеченный ресурс скомпрометирован на вашем сайте, то и ваш сайт тоже!</p> <p>Смотри что <a rel="nofollow noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Сеть разработчиков Mozilla</a> говорит о проблеме:</p> <p>… Использование CDN также сопряжено с риском, так как если злоумышленник получает контроль над CDN, злоумышленник может внедрить произвольный вредоносный контент в файлы в CDN (или полностью заменить файлы) и, таким образом, потенциально может атаковать все сайты, которые извлекают файлы. из этого CDN.</p> <p>Чтобы предотвратить это, <a rel="nofollow noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Подресурсная целостность (SRI)</a> был введен в <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.w3.org/TR/2014/WD-SRI-20140318/">начало 2014 года от W3C</a>, Эта схема сравнивает значение хеша (результат применения <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.wikiwand.com/en/Cryptographic_hash_function">хэш-функция</a> на вход) ресурса, чтобы проверить его.</p> <p>Скажем, есть файл JavaScript по адресу https://example.com/example.js. Сначала вы применяете хеш-функцию к этому файлу, затем добавляете произведенное хеш-значение к атрибуту целостности <script type="litespeed/javascript">tag that imports example.js to your website.</p><p><script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script></p> <p>Теперь, когда веб-страница вашего сайта с приведенным выше кодом должна загружать example.js, браузер сначала применяет хеш-функцию, а загружает и запускает example.js только тогда, когда его хеш-значение соответствует значению целостности.</p> <p>Если example.com был скомпрометирован, а в example.js было вмешано, то значение хеша example.js не будет соответствовать значению целостности.</p> <p>Большинство распространенных CDN уже предоставляют значения целостности SRI, но вы также можете сгенерировать одно <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.srihash.org/">Вот</a>,<br /> 3. Переопределите цели формы в кнопках отправки.<br /> Скорее всего, вы знакомы с целевым атрибутом, который определяет, где будет открыт гиперссылочный ресурс, например, на той же странице или на новой вкладке. Вы также можете знать, что тот же целевой атрибут, используемый в</p> <p><</p> <p>form> тег решает, где будет показан ответ от отправки формы.</p> <p>В одном из ранних проектов HTML5, <a rel="nofollow noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget">formtarget</a> был определен вместе с четырьмя другими атрибутами представления формы: формация, формактип, формаметод и формновалидат.</p> <p>Эти атрибуты можно использовать с кнопками отправки, и они переопределяют свои соответствующие атрибуты в</p> <p><</p> <p>form> тег, к которому относятся кнопки.</p> <p>Таким образом, когда форма отправляется с использованием кнопки, имеющей атрибут formtarget, ответ отображается в соответствии со значением formtarget вместо целевого значения</p> <p><</p> <p>form>,</p> <form action="/save" target="_self" > <input type="submit" name="save" /><br /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /><br /> </form> <p>В приведенном выше коде, когда форма отправляется с использованием второй кнопки отправки (печать), ответ будет отображаться в новом контексте просмотра, как на новой вкладке.<br /> 4. Скрыть элементы семантически<br /> Когда дело доходит до сокрытия элементов, мы все прошли через различные фазы скрытия элементов: используя непрозрачность: 0, видимость: скрыто, высота: 0; ширина: 0, отображение: нет, текстовый отступ: -999px в нашем файле CSS.</p> <p>Каждый метод имеет свое назначение, ни один из них не является избыточным, и поэтому не этот: <a rel="nofollow noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden">скрытый</a> Атрибут HTML. Если элемент скрыт, указанный на нем, он будет скрыт.</p> <div hidden>...</div> <p>Он работает так же, как дисплей: нет; Правило CSS; элемент со скрытым атрибутом не отображается на странице. Любой скрипт внутри элемента будет выполнен, и если он является элементом управления формой, он будет отправлен вместе с другими элементами управления формой во время отправки формы.</p> <p>Тем не менее, преимущество скрытого заключается в том, что это семантически целесообразно, в конце концов, HTML5 - это семантика, а скрытое - часть антуража HTML5!</p> <p>Более того, когда элемент скрыт, он должен быть скрыт на всех платформах, не только в веб-браузерах, но и в программах чтения с экрана, на телевизоре, проекторах и т. Д.</p> <p>Он также не зависит от стиля, даже если вы удалите авторский CSS со страницы, элемент останется скрытым. Принимая во внимание, что в случае отображения: нет; этого не произойдет. Итак, представьте себе скрытую версию с железной оболочкой: none ;.<br /> 5. Добавьте сочетания клавиш<br /> <a rel="nofollow noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey">ключ доступа</a> Глобальный атрибут уже определен в HTML4, и он создает сочетание клавиш, с помощью которого пользователь может управлять элементом на странице.</p> <p>Комбинация клавиш для сочетания клавиш будет зависеть от двух вещей:</p> <ol> <li>значение accesskey, которое мы даем элементу</li> <li>предварительно назначенные ключи, используемые браузером для того же элемента</li> </ol> <p><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iMjkzIiB2aWV3Qm94PSIwIDAgODAwIDI5MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" decoding="async" alt="Accesskey стол" width="800" height="293" data-src="https://new-html-features/acesskey-table.jpg"><a rel="nofollow noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey">ИЗОБРАЖЕНИЕ: Сеть разработчиков Mozilla</a>Возьмите этот пример:</p> <p><button accesskey="v" onclick="alert('View Click')"></p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'> <div id="yandex_rtb_R-A-1243617-3"></div> <script type="litespeed/javascript">window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:'yandex_rtb_R-A-1243617-3',blockId:'R-A-1243617-3'})})</script> </div> <p>Посмотреть<br /> </button></p> <p>В Firefox, если вы нажмете комбинацию клавиш Alt + Shift + V (или Alt + Control + V в macOS), вы получите предупреждение «View Clicked».</p> <p>Поскольку предопределенные ключи браузера различаются в зависимости от браузера и ОС, рекомендуется информировать пользователей о сочетаниях клавиш, используемых для сочетаний клавиш.</p> <p class="recommended_top"> <p> Читайте также: 10 интересных вещей, которые могут сделать теги HTML </p> <div class='code-block code-block-5' style='margin: 8px 0; clear: both;'> <div id="yandex_rtb_R-A-3332768-2"></div> <script type="litespeed/javascript">window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({"blockId":"R-A-3332768-2","renderTo":"yandex_rtb_R-A-3332768-2","type":"feed"})})</script></div> <div class='code-block code-block-11' style='margin: 8px 0; clear: both;'> <p>Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, <a href="https://t.me/+iju47uXqN9xlMTk6" target="_blank" rel="noopener">в нашем закрытом телеграмм канале - Подписывайтесь:)</a></p></div> </div> <footer class="entry-footer"> </footer> </div> </article> <div class="entry-related alignfull entry-related-style-wide"> <div class="entry-related-inner content-container site-container"> <div class="entry-related-inner-content alignwide"> <h2 class="entry-related-title">Похожие записи</h2> <div class="entry-related-carousel kadence-slide-init splide" data-columns-xxl="2" data-columns-xl="2" data-columns-md="2" data-columns-sm="2" data-columns-xs="2" data-columns-ss="1" data-slider-anim-speed="400" data-slider-scroll="1" data-slider-dots="true" data-slider-arrows="true" data-slider-hover-pause="false" data-slider-auto="false" data-slider-speed="7000" data-slider-gutter="40" data-slider-loop="true" data-slider-next-label="Далее" data-slider-slide-label="Записи" data-slider-prev-label="Назад"> <div class="splide__track"> <div class="splide__list grid-cols grid-sm-col-2 grid-lg-col-2"> <div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-2830 post type-post status-publish format-standard has-post-thumbnail hentry category-general category-bez-rubriki"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://triu.ru/50-unikalnyh-podarkov-dlya-gikov-v-2021-godu-t-2/"> <div class="post-thumbnail-inner"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NjgiIGhlaWdodD0iNjQzIiB2aWV3Qm94PSIwIDAgNzY4IDY0MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" width="768" height="643" data-src="https://triu.ru/wp-content/uploads/2021/02/mic-lock-microphone-blocker-768x643.jpg" class="attachment-medium_large size-medium_large wp-post-image" alt="50 уникальных подарков для гиков в 2021 году, т. 2" decoding="async" data-srcset="https://triu.ru/wp-content/uploads/2021/02/mic-lock-microphone-blocker-768x643.jpg 768w, https://triu.ru/wp-content/uploads/2021/02/mic-lock-microphone-blocker-300x251.jpg 300w, https://triu.ru/wp-content/uploads/2021/02/mic-lock-microphone-blocker-360x301.jpg 360w, https://triu.ru/wp-content/uploads/2021/02/mic-lock-microphone-blocker-545x456.jpg 545w, https://triu.ru/wp-content/uploads/2021/02/mic-lock-microphone-blocker.jpg 1000w" data-sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://triu.ru/50-unikalnyh-podarkov-dlya-gikov-v-2021-godu-t-2/" rel="bookmark">50 уникальных подарков для гиков в 2021 году, т. 2</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-2735 post type-post status-publish format-standard hentry category-web-design category-bez-rubriki"> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://triu.ru/kak-preobrazovat-css-v-sass-i-scss-dlya-veb-dizajnerov/" rel="bookmark">Как преобразовать CSS в Sass и SCSS для веб-дизайнеров</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-2575 post type-post status-publish format-standard has-post-thumbnail hentry category-culture category-bez-rubriki"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://triu.ru/10-sajtov-dlya-poslednih-novostej-kibersporta-i-sovetov-po-professionalnym-igram/"> <div class="post-thumbnail-inner"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NjgiIGhlaWdodD0iNTMzIiB2aWV3Qm94PSIwIDAgNzY4IDUzMyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" width="768" height="533" data-src="https://triu.ru/wp-content/uploads/2020/08/the-esports-observer-768x533.jpg" class="attachment-medium_large size-medium_large wp-post-image" alt="10 сайтов для последних новостей киберспорта и советов по профессиональным играм" decoding="async" data-srcset="https://triu.ru/wp-content/uploads/2020/08/the-esports-observer-768x533.jpg 768w, https://triu.ru/wp-content/uploads/2020/08/the-esports-observer-300x208.jpg 300w, https://triu.ru/wp-content/uploads/2020/08/the-esports-observer-360x250.jpg 360w, https://triu.ru/wp-content/uploads/2020/08/the-esports-observer-545x378.jpg 545w, https://triu.ru/wp-content/uploads/2020/08/the-esports-observer.jpg 1000w" data-sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://triu.ru/10-sajtov-dlya-poslednih-novostej-kibersporta-i-sovetov-po-professionalnym-igram/" rel="bookmark">10 сайтов для последних новостей киберспорта и советов по профессиональным играм</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-3891 post type-post status-publish format-standard has-post-thumbnail hentry category-social-media category-bez-rubriki"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://triu.ru/10-luchshih-instrumentov-twitter-analitiki-dlya-marketologov-v-soczialnyh-setyah/"> <div class="post-thumbnail-inner"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NjgiIGhlaWdodD0iNTAxIiB2aWV3Qm94PSIwIDAgNzY4IDUwMSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" width="768" height="501" data-src="https://triu.ru/wp-content/uploads/2021/04/analytics-by-twitter-768x501.jpg" class="attachment-medium_large size-medium_large wp-post-image" alt="10 лучших инструментов Twitter-аналитики для маркетологов в социальных сетях" decoding="async" loading="lazy" data-srcset="https://triu.ru/wp-content/uploads/2021/04/analytics-by-twitter-768x501.jpg 768w, https://triu.ru/wp-content/uploads/2021/04/analytics-by-twitter-300x196.jpg 300w, https://triu.ru/wp-content/uploads/2021/04/analytics-by-twitter-360x235.jpg 360w, https://triu.ru/wp-content/uploads/2021/04/analytics-by-twitter-545x356.jpg 545w, https://triu.ru/wp-content/uploads/2021/04/analytics-by-twitter.jpg 889w" data-sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://triu.ru/10-luchshih-instrumentov-twitter-analitiki-dlya-marketologov-v-soczialnyh-setyah/" rel="bookmark">10 лучших инструментов Twitter-аналитики для маркетологов в социальных сетях</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-2367 post type-post status-publish format-standard has-post-thumbnail hentry category-coding category-bez-rubriki"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://triu.ru/nastrojka-izobrazheniya-s-pomoshhyu-css-filter-effects/"> <div class="post-thumbnail-inner"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iMzAwIiB2aWV3Qm94PSIwIDAgNTAwIDMwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZlZmVmZiIvPjwvc3ZnPg==" width="500" height="300" data-src="https://triu.ru/wp-content/uploads/2020/06/filter-cover.jpg" class="attachment-medium_large size-medium_large wp-post-image" alt="Настройка изображения с помощью CSS Filter Effects" decoding="async" loading="lazy" data-srcset="https://triu.ru/wp-content/uploads/2020/06/filter-cover.jpg 500w, https://triu.ru/wp-content/uploads/2020/06/filter-cover-300x180.jpg 300w" data-sizes="(max-width: 500px) 100vw, 500px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://triu.ru/nastrojka-izobrazheniya-s-pomoshhyu-css-filter-effects/" rel="bookmark">Настройка изображения с помощью CSS Filter Effects</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-1933 post type-post status-publish format-standard hentry category-web-design category-bez-rubriki"> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://triu.ru/kak-vernut-soobshhestvu-dizajnerov/" rel="bookmark">Как вернуть сообществу дизайнеров</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div> </div> </div> </div> </div> </div> </div> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/5-funkczij-html-o-kotoryh-vy-mogli-ne-znat/#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://triu.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment comment-form-float-label"><textarea id="comment" name="comment" placeholder="Оставить комментарий..." cols="45" rows="8" maxlength="65525" aria-required="true" required="required">Комментарий *

Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.

Δ