Отличия от HTML 5.2

В спецификации W3C HTML 5.2есть разделПредставляя модификации, внесенные в эту версию, я синтезировал из«Что нового в HTML 5.2?»Описание этой статьи, вот те части, которые для меня важнее.

новые особенности

Родной `<dialog>`элемент

Диалоги часто используются в обычной разработке, спецификация HTML 5.2 обеспечивает<dialog>Элементы для создания диалога.

<dialog>По умолчанию элемент скрыт.

<!-- 默认是隐藏的 -->
<dialog>
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

Добавить кopenотображаются свойства.

<dialog open>

HTMLDialogElementДа <dialog>Представление базового элемента , обеспечивающееshow(),close(),showModal()Метод управления отображением и скрытием диалогового окна.

<button id="open">Open Dialog</button>
<button id="close">Close Dialog</button>

<dialog id="dialog">
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

<script>
const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {
  dialog.close();
});
</script>

show()а также showModal()разница заключается в том,showModal()«Создать» — это модальное окно, и при его открытии содержимое последней страницы не может быть изменено по умолчанию; а такжеshow()Отображается в виде всплывающего окна.

`allowpaymentrequest`Атрибуты

теперь может быть<iframe>Добавить к allowpaymentrequestСвойство режима, чтобы разрешить<iframe>Внутреннее использование ИнтернетаPayment Request API.

<iframe allowpaymentrequest>

`rel="apple-touch-icon"`

Мы используем <link rel="icon">Указывает веб-значок, в дополнение к которому он поддерживает использованиеsizesАтрибуты, которые определяют значки разных размеров для предпочтительного отображения в браузере.

<link rel="icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="icon" sizes="32x32" href="path/to/icon32.png">

До HTML 5.2 устройства Apple iOS не поддерживали<link rel="icon">изsizesсвойства, вместо этого используйтеapple-touch-icon relдля поддержки значков, используемых при отображении веб-страниц или установке веб-приложений (например, PWA) на вашем собственном устройстве.

<link rel="apple-touch-icon" href="/example.png">

Теперь спецификация допускаетapple-touch-iconэтоrelзначение, и поддерживается в этом<link rel="apple-touch-icon">установлен наsizesАтрибуты.

<link rel="apple-touch-icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="apple-touch-icon" sizes="32x32" href="path/to/icon32.png">

новая эффективная практика

несколько`<main>`Этикетка

До HTML 5.2 могла существовать только одна страница.<main>Теги используются для представления уникального содержимого темы страницы. Однако, начиная с HTML 5.2, несколько одновременных<main>Метки, но может отображаться только одна из них, остальные должны использоватьсяhiddenСвойства скрыты.

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

Обратите внимание, что другие не отображаются<main>оба используютhiddenСкрытие атрибута, использованиеdisplay: none;илиvisibility: hidden;Способ сокрытия недействителен.

`<body>`Внутри`<style>`

<style>раньше только в<head>Тем не менее, при росте структуры разработки компонентов, картина стилей сопоставления компонентов, близких к структуре компонентов, стала популярной.

HTML 5.2 позволяет<body>внутреннее использование<style>тег, который определяет стиль структуры рядом.

<body>
    <p>I’m cornflowerblue!</p>
    <style>
        p { color: cornflowerblue; }
    </style>
    <p>I’m cornflowerblue!</p>
</body>

Но лучше этого не делать, и более рекомендуемой практикой является написание стилей. В спецификации упоминаются:

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

который<body>внутри<style>Может привести к изменению макета предыдущего элемента, что приведет к перерисовке страницы. Поэтому старайтесь избегать его использования.

`<legend>`Заголовок можно использовать в

<legend>используется в <fieldset>используется в качестве заголовка на этикетке,<fieldset>используется в<form>, сгруппируйте поля формы.

Ниже приведен пример:

<!-- See: https://www.w3schools.com/tags/tag_fieldset.asp -->
<form action="/action_page.php">
 <fieldset>
  <legend>Personalia:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

До HTML 5.2,<legend>Вы можете использовать только обычный текст, начиная с HTML 5.2, вы можете использовать элемент заголовка.

<fieldset>
    <legend><h2>Basic Information</h2></legend>
    <!-- Form fields for basic information -->
</fieldset>
<fieldset>
    <legend><h2>Contact Information</h2></legend>
    <!-- Form fields for contact information -->
</fieldset>

удалить функцию

<keygen>,<menu>а также<menuitem>элемент
текст<input>из inputmodeа также dropzoneАтрибуты
widow.showModalDialog()метод

новая недействительная практика

`<p>`Недействительный контент в

Следующие три типа элементов не могут использоваться в качестве<p>содержание абзаца.

Встроенные блоки, табличные элементы (Встроенные блоки, встроенные таблицы)
Плавающий элемент (плавал)
Позиционирующий элемент (позиционированные блочные элементы)

strict doctype

Строгий тип документа HTML4 и XHTML1 больше не является допустимым 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">

(Конец текста)

коммерческое время(длительный эффект)

Моя хорошая знакомая владеет питомником, и я здесь, чтобы помочь ей распространить информацию. Теперь все кошки в питомникекукла кошка. Если вы также любите кошек и нуждаетесь в этом, вы можете также отсканировать ее [Xianyu] QR-код. Неважно, если вы не купите его, просто взгляните.

(над)

новые особенности

Родной <dialog>элемент

allowpaymentrequestАтрибуты

rel="apple-touch-icon"