HTML5.2 должен знать каждый фронтенд-инженер

HTML

Появление HTML5.2

Как правило, в W3C. Выпуск версии проходит четыре этапа: рабочий проект (WD), альтернативная рекомендация (CR), рекомендация-предложение (PR) и окончательная официальная рекомендация W3C (REC). Когда спецификация достигает стадии REC, она означает, что он был официально одобрен членами W3C и рекомендован для развертывания пользовательскими агентами и использования интерфейсными инженерами.

   Теперь, 14 декабря 2017 г., W3C выпустилСпецификация HTML 5.2 Обновление, в этой версии есть некоторые добавления и удаления по сравнению с предыдущей версией.Эти изменения вы можете найти вHTML 5.2 Changesна этой странице, и ниже я опишу некоторые из этих изменений.

Добавлен элемент диалога

   Добавлен тег диалога в HTML5.2, чтобы помочь нам быстро реализовать диалоговое окно. До HTML5.2 мы хотели реализовать функцию диалогового окна. Примерный метод реализации:div, сначала поставьdisplay: noneСпрячьте это, а затем говорите об этом там, где вам это нужно.displayустановлен вblock, Это управляет отображением и скрытием диалога.В HTML5.2 вам нужно только написать:

<dialog id="dialog">
    <h2>我是对话框标题</h2>
    <p>我是对话框内容</p>
</dialog>

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

<dialog id="dialog" open>
    <h2>我是对话框标题</h2>
    <p>我是对话框内容</p>
</dialog>

Кроме того, вы можете получить этоdialogэлемент, затем вызовите егоshow()способ показать ему

<dialog id="dialog" open>
    <h2>我是对话框标题</h2>
    <p>我是对话框内容</p>
</dialog>

<script>

const dialog = document.querySelector('#dialog').show();

</script>

Точно так же, если вы хотите, чтобы диалоговое окно было скрыто, просто вызовите этоdialogэлементальclose()метод

Кроме того, если вы хотите иметь маскирующий слой при отображении диалогового окна, вы можете использоватьshowModal()Этот метод. Он будет отображать слой маски на верхнем уровне вашей страницы при отображении диалогового окна, чтобы вы не могли работать с другими элементами, кроме диалогового окна. Еще один момент, который следует отметить, это то, чтоopenсвойства иshowModal()Нельзя использовать одновременно, иначе будет сообщено;Untitled-1.html:28 Uncaught DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element already has an 'open' attribute, and therefore cannot be opened modally.эта ошибка

НаконецdialogСовместимость следующая:

API запроса платежа --- allowpaymentrequest

До HTML5.2. API для платежных запросов нельзя было выполнять в iframe. Поэтому каждый раз, когда мы совершаем мобильный платеж, нам нужно переходить на другую платежную страницу, чтобы завершить платеж. Теперь используйтеallowpaymentrequestсвойства применяются кiframeначальство

<iframe allowpaymentrequest>

Таким способом можноiframeиспользоватьPayment Request APIтем самым позволяя

Страницы со встроенным сторонним контентом могут контролировать, может ли сторонний контент запрашивать учетные данные для оплаты у пользователя, позволяя встраиваемым инструментам корзины покупок использовать API запроса платежа.

Брендан Миллер из Forrester подробно остановился на преимуществах API запроса платежа, заявив: «Новый стандарт позволяет разработчикам создавать упрощенную страницу оформления заказа, на которой пользователи могут повторно использовать сохраненную платежную и адресную информацию, чтобы ускорить оформление заказа и уменьшить количество ошибочного ввода.

Совместимость API запроса платежа:

Используйте несколько на странице одновременноmainЭтикетка

Основной элемент HTML<main>документ визуализируется<body>или часть тела приложения. Основная часть состоит из контента, который имеет непосредственное отношение к документу, либо распространяется на центральную тему документа, основную функциональную часть приложения. Эта часть контента должна быть уникальной в документе и не содержать контента, который повторяется в ряде документов, например боковые панели, ссылки панели навигации, информация об авторских правах, логотип веб-сайта, окно поиска (если окно поиска не является основной функцией). документа).

Выше приведен абзац на MDN для<main>Введение в этикетки.<main>Содержимое тега должно соответствовать тематике документа и быть уникальным, поэтому небольшое примечание после введения.В документе не может быть более одного<main>Этикетка

Теперь, с ростом популярности одностраничных приложений (SPA), эта функция больше не соответствует текущей реальности, поэтому в HTML5.2 несколько страниц отображаются одновременно.<main>Теги разрешены, но только по одному<main>Ярлыки выводятся наружу, все остальноеhiddenАтрибуты могут быть скрыты

<main>...</main>
<main hidden>...</main>
<main hidden>...</main>

Также обратите внимание, что скрыто<main>Метод тега должен использоватьhiddenАтрибуты. Другие:display: none, прозрачный до 0 и т. д. методы не будут работать.Это сделает<main>Теги теряют свою семантику и роль.

Удаленные атрибуты и элементы

удаленный элемент

  • keygen: открытый ключ, используемый для создания формы

  • меню и пункт меню: для создания навигационных или контекстных меню

удаленный атрибут

  • Window.showModalDialog(): создает и отображает модальное окно, содержащее указанный HTML-документ.

  • API подключаемых модулей: предоставляет информацию о подключаемых модулях браузера.

Устаревшее объявление заголовка HTML

Следующие два объявления заголовков HTML устарели в HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Выше приведено поверхностное изложение моего HTML5.2, надеюсь, оно будет всем полезно.Если в тексте есть какие-то неуместности, пожалуйста, исправьте, спасибо.

использованная литература

Мой личный URL: wangyiming.info

Категории