Подробное объяснение глобальных атрибутов HTML

В MDN перечислены 27 и 33 основных глобальных атрибута соответственно (за исключением xml:langsums xml:base, нескольких aria-*атрибутов и обработчиков событий), среди которых contextmenuатрибуты устарели, а dropzoneнаходятся на экспериментальной стадии. В Can i Соответствующая совместимость не может быть найдена в использовании и официальной совместимости браузера, и MDN не имеет соответствующего содержимого записи, и даже английская версия MDN вообще не перечисляет этот атрибут.

Кроме того, draggableи Popoverатрибуты будут подробно описаны в будущей колонке веб-API. Поэтому эта статья в основном основана на английской версии и объясняет только оставшиеся 30 глобальных атрибутов.

class и id

classАтрибут представляет собой список разделенных пробелами имен классов элемента с учетом регистра . Позволяет CSS и JavaScript выбирать и получать доступ к определенным элементам classчерез такие функции, как селекторы классов или методы DOM .document.getElementsByClassName

idАтрибут определяет идентификатор, который должен быть уникальным во всем документе. Цель состоит в том, чтобы идентифицировать элементы при связывании (с использованием идентификаторов фрагментов), сценариях или стилях (с использованием CSS). Точно так же CSS и JavaScript могут выбирать и получать доступ к определенным элементам idчерез такие функции, как селекторы классов или методы DOM .document.getElementsById

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

<div id='box'>this is a box</div>

<script>
  box.onclick = function (e) {
    console.log(e.target.innerHTML) // this is a box
  }
</script>

Однако не рекомендуется обращаться к элементам таким образом. Фактическая разработка по-прежнему основана на получении элементов, а затем на доступе к ним.

Примечание:

• classНет ограничений на имя класса, но старайтесь использовать значения, описывающие характер содержимого, а не значения, описывающие желаемое представление содержимого. Существует также много широко используемых соглашений об именах CSS, таких как BEM, OOCSS, SMACSS, ACSS и т. д. Выберите подходящее соглашение об именах CSS в соответствии с вашими потребностями, чтобы снизить затраты на разработку и обслуживание.
• idЗначение представляет собой непрозрачную строку, представляющую собой просто идентификатор без какого-либо конкретного значения. Его не следует использовать для передачи семантической информации. Это связано с тем, что idосновная цель атрибутов — однозначно идентифицировать элемент в документе для использования в CSS и JavaScript. Если значение атрибута idan содержит определенное значение, это может привести к путанице и ненужной сложности кода.
• idЗначение может быть любым символом, кроме пробелов. Во избежание случайных ошибок следует использовать только буквы ASCII, цифры, _и -, а idзначение атрибута должно начинаться с буквы.

title

titleАтрибут содержит текст, представляющий рекомендательную информацию, относящуюся к элементу, которому он принадлежит. Например подходит для всплывающих подсказок. В ссылке это может быть заголовок или описание целевого ресурса; на изображении это может быть название изображения или описание изображения; на абзаце это может быть сноска или примечание к тексту; по цитате может быть дополнительная информация об источнике информации; в интерактивном контенте это может быть метка или описание, используемое элементом и т. д.

Конкретная производительность заключается в том, что при наведении мыши на элемент всплывает маленькое поле с текстом.

Примечание:

• В спецификации ясно: Dependency titleproperties в настоящее время не рекомендуется, потому что многие пользовательские агенты не раскрывают свойство доступным образом, как того требует эта спецификация (например, требуют указательного устройства, такого как мышь, для отображения всплывающей подсказки, что исключает использование только пользователей клавиатуры и пользователи, работающие только с сенсорным экраном, например, использующие современные телефоны или планшеты).
• Если titleзначение содержит символы U+000A (в HTML 
), значение будет разделено на несколько строк, где каждый символ U+000A представляет разрыв строки.
• <link>Атрибуты в , , <abbr>и атрибуты имеют дополнительную семантику.<input>title
• MDN сообщает title, что есть проблемы с доступностью:
• Пользователи сенсорных устройств.
• Люди, которые используют клавиатуру для навигации.
• Люди, которые перемещаются с помощью вспомогательных технологий, таких как программа чтения с экрана или увеличительное стекло.
• Людям с нарушениями мелкой моторики.
• люди с когнитивными проблемами. Это связано с непоследовательной поддержкой браузера, а также дополнительным анализом вспомогательных технологий страницы, отображаемой браузером.

style

styleAttributes содержат объявления стилей CSS для применения к элементу . Метод применения стилей к элементам с styleатрибутами называется встроенные стили , и встроенные стили имеют более высокий приоритет, чем внутренние стили и внешние стили, уступая только !important. Однако встроенные стили не могут повторно использовать стили, а широкое использование приведет к тому, что код в HTML-части станет беспорядочным и трудным для отладки, поэтому styleattributes обычно используются только в целях отладки.

Примечание. styleAttributes нельзя использовать для передачи семантической информации. Даже после удаления всех стилей страница должна оставаться семантически правильной. Стиль и семантика — два разных понятия. Стиль относится к внешнему виду и расположению элемента, а семантика относится к тому, что элемент означает и делает. Если styleattributes используются для передачи семантической информации, то при удалении или отключении стилей семантическая информация страницы теряется, что влияет на доступность страницы.

data-*

data-*это класс свойств, известных как пользовательские свойства данных . Используется для хранения пользовательских данных, состояния, комментариев и подобных личных атрибутов или элементов страницы или приложения, для которых нет более подходящего атрибута или элемента .

element.dataset.data*Чтобы получить доступ к пользовательским атрибутам данных в JS, имя пользовательского атрибута данных будет автоматически преобразовано в маленькое имя в верблюжьем регистре. Следует отметить, что имя пользовательского атрибута данных имеет несколько ограничений:

• Имя не должно начинаться с xml (без учета регистра).
• Имя не должно содержать символов двоеточия ( :).
• Имя не должно содержать заглавных букв. Однако все прописные буквы в конечном имени будут автоматически преобразованы в маленькие имена в верблюжьем регистре, что малоэффективно. Но может быть больше одного -символа, data-foo-barтак что это законно.

lang

langАтрибут указывает основной язык для содержимого элемента и атрибутов элемента, содержащих текст . Формат значения определяется тегами (BCP47) документа IETF для определения языков ..

Обычно langсвойства <html>задаются в корневом узле документа. Если не указано или указано значение, соответствующее предпочитаемому языку браузера lang, браузер не будет спрашивать пользователя о переводе. Если он не соответствует предпочтительному языку браузера, браузер спросит пользователя, нужно ли переводить.

Если предположить, что сейчас есть <html lang='en-US'>(предпочтительный язык браузера - упрощенный китайский), и в документе одновременно есть <div lang='zh-CN'>this is a box</div>, то когда браузер будет переводить его на китайский, браузеру будет все равно на это <div>, langи это все равно this is a boxпереведет его в коробку. если оба не установлены translate="no".

Измените приведенный выше пример в исходном коде: <html lang='zh-CN'> (в соответствии с предпочтительным языком), иногда, даже если вы обновите браузер, браузер все равно спросит, хотите ли вы перевести, и вам придется повторно ввести URL-адрес на новой вкладке. страница.

Примечание:

• Если содержимое тега представляет собой пустую строку, язык устанавливается на неизвестный. Если содержимое тега недействительно, оно устанавливается как недействительное в соответствии с BCP47.
• Иногда мы сталкиваемся с такими xml:langатрибутами, xml:известными как пространства имен, которые используются для объявления информации о языке и культуре для элементов в XML. И это четко указано в спецификации: атрибуты в любом пространстве имен langне могут использоваться ни в одном элементе HTML. xml:langимеет langвыше .

translate

translateAttribute используется для указания преобразовывать ли значение атрибута элемента и значение дочернего узла его узла Text при локализации страницы или оставить его без изменений .

translateproperty — перечисляемое свойство, которое принимает строку yes, noили пустую строку. Точно так же пустые строки и truemaps являются truestates; noкарты — это noсостояния; существует также унаследованное состояние, в котором отсутствуют значения по умолчанию и недействительные значения по умолчанию.

Когда элемент находится в состоянии перевода, значения переводимого атрибута элемента и его дочерних узлов Text будут переведены при локализации страницы. Когда элемент находится в состоянии nostate и страница локализована, значения атрибутов элемента и значения его дочерних узлов Text останутся такими, какие они есть.

Спецификация. Каждый элемент (даже элементы, отличные от HTML, такие как элементы XML и элементы SVG) имеет режим перевода, либо перевод включен, либо нет. translateЕсли атрибут элемента HTML находится в состоянии yes, то режим перевода элемента будет в состоянии перевода включен; если translateattribute элемента находится в nostate, то режим перевода элемента будет в no-translatestate. В противном случае либо translateattribute элемента находится в inheritstate, либо элемент не является элементом HTML и, следовательно, не имеет translateattributes (в зависимости от того, поддерживается ли элемент браузером); в обоих случаях режим перевода элемента совпадает с состоянием его родительского элемента (если есть) или в состоянии, в котором перевод включен (если родительский элемент элемента пуст).

пример:

<div translate="no">This is a box</div> // Keep it as it is, it will not be translated by translation tools
<p translate="yes">This is a paragraph</p> // This is a paragraph

accesskey

accesskeyProperty предоставляет подсказки для создания сочетаний клавиш для текущего элемента. Этот атрибут состоит из списка символов, разделенных пробелами.

accesskeyЗначение должно быть упорядоченным уникальным набором лексем, разделенных пробелами, ни одна из которых не идентична другим лексемам, и каждая лексема должна иметь длину ровно в одну кодовую точку (без учета регистра).

MDN:

ПРИМЕЧАНИЕ. В спецификации WHATWG говорится, что вы можете указать несколько символов, разделенных пробелами, и браузер будет использовать первый из них, который он поддерживает. Однако это не работает в большинстве браузеров. IE/Edge без проблем использует первую поддерживаемую команду, если нет конфликтов с другими командами.

Атрибуты недействительны при возникновении конфликта accesskey.

accesskeyКак активируется каждый терминал и каждый браузер

браузерWindowsLinuxMacchromeAlt + keyAlt + keyControl + Alt + keyfirefoxAlt + Shift + keyAlt + Shift + keyFirefox 57+: Control + Option + key/ Control + Alt + key

Firefox 14+: Control + Alt + key

Firefox 13+:Control + keyIE/EdgeAlt + key--SafariAlt + key-Control + Alt + keyOpera 15+Alt + keyAlt + keyCtrl + Alt + keyOpera 12Shift + EscОткрывает accesskeyсписок контента, доступного черезТо же, что и WindowsТо же, что и Windows

проблемы доступности

Помимо плохой поддержки браузерами, accesskeyproperties имеет ряд проблем:

• Значения клавиш доступа могут конфликтовать с сочетаниями клавиш системы или браузера accesskeyили функциями вспомогательных технологий. То, что может работать для одной комбинации операционной системы, вспомогательных технологий и браузера, может не работать для другой.
• Некоторые accesskeyvalues ​​могут не существовать на некоторых клавиатурах, особенно если проблема интернационализации. Поэтому адаптация к определенному языку может вызвать дополнительные проблемы.
• Доверие к accesskeyзначению чисел может сбивать с толку людей, испытывающих когнитивные проблемы, поскольку числа не имеют логической связи с функциями, которые они запускают.
• Сообщите пользователям, что она существует, accesskeyчтобы они знали об этой функции. Если в системе нет способа уведомить пользователя об этой функции, пользователь может случайно активировать ее accesskey.

Из-за этих проблем его использование обычно не рекомендуется для большинства веб-сайтов общего назначения и веб-приложений accesskey.

autocapitalize

autocapitalizeAttribute для управления тем, следует ли и как автоматически использовать заглавные буквы, когда пользователь вводит/редактирует ввод текста.

значение перечисления

keywordsillustrateoff/noneАвтоматическая прописная буква не применяется (по умолчанию все буквы в нижнем регистре).on/sentencesПервая буква каждого предложения по умолчанию в верхнем регистре, все остальные по умолчанию в нижнем регистреwordsПервая буква каждого слова по умолчанию в верхнем регистре, все остальные буквы по умолчанию в нижнем регистреcharactersВсе буквы должны использоваться по умолчанию в верхний регистр.

Примечание:

• Атрибуты можно использовать на хосте редактирования autocapitalizeдля управления поведением автокапитализации редактируемой области хоста, на <input>an или <textarea>элементе autocapitalizeдля управления поведением при вводе текста в этот элемент или на элементе формы autocapitalizeдля управления всем. По умолчанию поведение автозаглавных унаследованных элементов.
• autocapitalizeАтрибуты не влияют на поведение при наборе текста на физической клавиатуре. Влияет на методы ввода, такие как виртуальная клавиатура мобильного устройства и голосовой ввод.
• Следует отметить одну вещь: метод ввода и настройка браузера для использования заглавных букв в английском языке переопределяют значение свойства autocapitalize, например настройку autocapitalize='on', но если метод ввода или браузер отключают использование заглавных букв в английском языке, то это свойство не вступит в силу. Однако при доступе к autocapitalizeзначению элемента через JS эти настройки не повлияют на него.
• Также нужно обратить внимание на возвращаемое значение JS-доступа autocapitalize: offand noneunified return none; onи sentencesединая отдача sentences; возвращаемое значение оставшихся двух значений остается неизменным. Это autocapitalizeсостояния.
• Для элементов с typeатрибутом одного из url, emailили peasswordсостояний <input>, autocapitalizeатрибут никогда не приводит к включению автоматического использования заглавных букв.

spellcheck(экспериментальный)

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

spellcheckЕсть три возможных значения атрибута по умолчанию:

• true-by-default: Если содержимое элемента доступно для редактирования и spellcheckпроверка правописания не отключена явным образом с помощью атрибута, элемент будет проверяться на орфографию и грамматику.
• false-by-default: spellcheckЭлемент никогда не проверяется на орфографию и грамматику, если проверка орфографии явно не включена через атрибут.
• inherit-by-default: поведение элемента по умолчанию такое же, как у его родительского элемента. Элементы без родителя не могут иметь это поведение по умолчанию.

spellcheckЕсть три варианта значения атрибута: пустая строка, trueи false(это атрибут перечисления, а не логический атрибут, поэтому значение необходимо указать явно), где пустая строка и оба trueсопоставляются с trueсостоянием , указывая на то, что элемент должен быть максимально проверен на орфографию Error; и falsemap как falsestatus. Кроме того, есть третье состояние, которое является состоянием по умолчанию (обратите внимание, что состояние по умолчанию отличается от значения по умолчанию, не путайте его), то есть отсутствующее значение по умолчанию и недопустимое значение по умолчанию , указывающее, что элемент будет работать в соответствии с поведением по умолчанию, возможно, на основе статуса проверки правописания самого родительского элемента для

Примечание:

• При изменении spellcheckзначения атрибута (то есть при наличии значения) оно должно быть либо установлено на true, либо установлено на false и не может быть пустой строкой.
• Этот атрибут является лишь подсказкой для браузера: браузер не заставляет его проверять наличие орфографических ошибок, и обычно нередактируемые элементы не проверяются на наличие орфографических ошибок, даже если для его атрибута установлено значение и браузер поддерживает правописание spellcheckchecking true.
• На spellcheckатрибуты, похоже, autocapitalize влияют некоторые настройки точно так же, как и на атрибуты. Если браузер не включает проверку орфографии, атрибут недействителен. Эффект от включения проверки орфографии следующий (среда браузера Chrome):

• Кроме того, проверка орфографии не поддерживает некоторые языки (например, китайский), и даже браузер напрямую не позволяет включить проверку орфографии.

enterkeyhint

enterkeyhintproperty — это свойство перечисления, которое определяет метку действия (или значок), отображаемую для клавиши Enter на виртуальной клавиатуре. <input>Конкретный эффект аналогичен свойствам компонентов апплета WeChat confirm-type.

допустимые значения

keywordsdescribeenterОбычно вставляется новая строка.doneОбычно означает, что другого входного содержимого нет и редактор метода ввода (IME) закрывается.goОбычно предназначен для перехода пользователя к цели введенного текста.nextОбычно переводит пользователя к следующему полю который будет принимать текст.previousОбычно переводит пользователя в предыдущее поле, которое будет принимать текст.searchОбычно переводит пользователя к результатам поиска введенного текста.sendОбычно передает текст в его цель.

Примечание. Точное действие этого атрибута зависит от пользовательского агента и языка пользователя. Совместимость каждого браузера в Могу ли я использовать для этого атрибута следующая:

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

inputmode

inputmodeAttributes подсказывают типы данных, которые пользователь может вводить при редактировании элемента или его содержимого . Это позволяет браузеру отображать соответствующую виртуальную клавиатуру. Стоит отметить, что вы можете отладить этот атрибут на стороне ПК, просто включите сенсорную клавиатуру, которая идет в комплекте с компьютером, например, в настройках, inputmode='numeric'focus в поле ввода, и сенсорная клавиатура будет отображаться следующим образом:

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

допустимые значения

autofocus

autofocusСвойство, указывающее, должен ли элемент быть сфокусирован на загрузке страницы или на отображении <dialog>куда принадлежит элемент .

Примечание:

• Никакие два элемента с одним и тем же ближайшим предком корневого элемента autofocusscope не могут одновременно указывать атрибут autofocusthe. Если применить к нескольким элементам, только первый элемент получит фокус.
• Элементы управления формы с автофокусом могут сбить с толку людей с нарушениями зрения и когнитивных функций, которые используют технологии чтения с экрана. При назначении autofocus средства чтения с экрана будут отправлять своих пользователей к элементу управления формы без предварительного предупреждения.
• Применяя autofocusattributes, тщательно учитывайте доступность. Автоматическая фокусировка на элементах управления может привести к прокрутке страницы во время загрузки. Фокус также может привести к отображению динамической клавиатуры на некоторых сенсорных устройствах. В то время как средства чтения с экрана объявляют метку, на которую фокусируется элемент управления формы, средство чтения с экрана не объявляет никакого содержимого, предшествующего метке, и зрячие пользователи на небольших устройствах аналогичным образом пропустят контекст, созданный предшествующим содержимым.

contenteditable

contenteditableAttribute, указывающий, должен ли пользователь редактировать элемент. Если это так, браузер изменяет свой виджет, чтобы разрешить редактирование .

contenteditableВ настоящее время допустимыми значениями для truefalseplaintext-only атрибута являются / , пустая строка и . где , trueи пустые строки сопоставляются с truestates; и plaintext-onlykeywords сопоставляются с состояниями обычного текста; falseсопоставляются с falseсостояниями. Кроме того, существует четвертое состояние наследования, в котором отсутствует значение по умолчанию и недопустимо значение по умолчанию. При доступе к атрибуту элемента в JS contenteditable будет возвращено соответствующее состояние.

Кроме того, contenteditableсвойства имеют еще три значения ключевых слов: caret, , eventsи typing. На момент написания этой статьи эти три значения все еще находятся на стадии реализации, и в документации и спецификации MDN нет соответствующего контента. Нечего сказать.

Примечание. Когда элемент доступен для редактирования, он не становится <input>таким элементом, но имеет похожий стиль (конечно, вы можете изменить его самостоятельно) и некоторые функции, когда получает фокус, а также может запускать события такие как ввод и фокус. Кроме того, tabindexзначение элемента автоматически устанавливается равным -1, и элемент может Tabбыть сфокусирован клавишей (при условии, что он не зажат между другими элементами, tabindexбольше или равными ему 0).

tabindex

tabindexАтрибуты позволяют разработчикам делать элементы HTML доступными для фокусировки, разрешать или запрещать их последовательную фокусировку и определять их относительный порядок для последовательной навигации по фокусу . Как правило, на странице есть два способа сфокусировать элемент: с помощью клавиши Tab, чтобы выделить элемент, и последовательно перейти к следующему элементу, на который можно сфокусироваться (переводя фокус на следующий элемент); по щелчку мыши/касанию мобильного устройства Фокус на элементе.

tabindexАтрибут получает числовое значение, возможны 3 случая:

• Значение › 0: указывает, что элемент должен находиться в фокусе при последовательной навигации с помощью клавиатуры, порядок которой определяется числовым значением. Максимальное значение 32767.
• Значение = 0: указывает, что элемент должен быть сфокусирован при последовательной навигации с помощью клавиатуры, но после любого значения tabindexpositive .
• Значение ‹ 0: указывает, что к элементу нельзя получить доступ с помощью последовательной навигации с помощью клавиатуры. Если элемент имеет tabindexa значение -1 и находится между другими элементами tabindex со значением больше или равным 0to , этот элемент никогда не будет Tabфокусирован ключом.
• Точно отрицательные значения не требуются при установке отрицательных значений, обычно это -1.

Примечание:

• Если есть несколько элементов tabindex с одинаковым значением, их порядок зависит от их положения на странице.
• Если атрибут tabindexthe включен без установленного значения, пользовательский агент должен определить, можно ли сфокусировать элемент.
• Атрибуты не должны <dialog>использоваться в элементах tabindex. Но может использоваться на элементах внутри него.
• MDN: рекомендуется использовать только 0и -1как tabindexзначения. Избегайте значений больше 0чем tabindex и свойств CSS, которые могут изменить порядок элементов HTML, на которые можно сделать фокус. Это может затруднить навигацию и управление содержимым страницы для людей, использующих клавиатуру для навигации или вспомогательных технологий. Вместо этого документы, содержащие элементы, должны быть написаны в логическом порядке.
• Интерактивные компоненты, созданные с использованием неинтерактивных элементов, не отображаются в дереве специальных возможностей. Это предотвращает переход вспомогательных технологий к этим компонентам и управление ими. Вместо этого контент должен быть семантически описан с использованием интерактивных элементов ( <a>, <button> и т. д.). <input>Эти элементы имеют встроенные роли и состояния, которые сообщают о состоянии функциям специальных возможностей, которыми в противном случае пришлось бы управлять ARIA.

inert

inertattribute указывает браузеру игнорировать элемент. Когда установлено значение true, все потомки элемента плоского дерева (такие как модальные блоки <dialog>) будут установлены агентом пользователя как инертные. Это также заставит браузер игнорировать события ввода, отправленные пользователем, и элемент не будет реагировать на события, связанные с мышью, перетаскиванием и клавиатурой.

inertВыполните следующие действия:

• Предотвращает срабатывание событий щелчка, когда пользователь щелкает элемент.
• Предотвращает событие фокуса, не позволяя элементу получить фокус.
• Скройте элемент и его содержимое от вспомогательных технологий, исключив элемент и его содержимое из дерева специальных возможностей.

Примечание:

• Как правило, вместо использования свойств в отдельныхinert элементах управления формами свойства более подходят для отключения элементов управления формы disabled. Если вы хотите отключить всю форму, вы можете <form>использовать inertатрибут элемента.
• При использовании inertattributes учитывайте проблемы доступности и четко указывайте активные части контента и ленивые части контента. Пользователи, использующие программы для чтения с экрана, пользователи небольших устройств или луп, или даже пользователи с особенно маленькими Windows могут не увидеть активную часть страницы, если инертная часть не выглядит инертной.
• В спецификации: Авторы не должны обозначать элементы как инертные, за исключением случаев, когда представляемый ими контент каким-либо образом визуально скрыт (например, за пределами экрана).

Для inert более интуитивно понятным приложением является запрет пользователям копировать текст, потому что с элементами нельзя взаимодействовать, поэтому, естественно, их нельзя выбрать. Конечно, если пользователи знают F12, они не могут inertуправлять ею.

Кроме того, для применения диалоговых окон, теоретически, диалоговые окна не должны очень хорошо использовать inertатрибуты, потому что, если это модальное диалоговое окно, элементы за пределами области модального диалогового окна inertпочти такие же, как установка атрибутов, и невозможно реагировать на эти события. Другое дело немодальные диалоги и диалоги, имитируемые другими элементами.

dir

dirАтрибут определяет направление текста элемента . Рекомендуется использовать это свойство при настройке ориентации текста, а не использовать CSS directionproperties, поскольку пользовательские агенты могут отключить стили CSS. Если стиль CSS включен, это directionбудет unicode-bidiпереопределять это свойство.

Допустимые значения:

• ltr, слева направо, для языков, написанных слева направо (например, английский).
• rtl, справа налево, для языков с написанием справа налево (например, арабский).
• auto, как определено пользовательским агентом. Он использует базовый алгоритм для анализа символов внутри элемента, пока не найдет символ с сильной направленностью, а затем применяет эту направленность ко всему элементу.

Каждое значение соответствует своему состоянию.

Примечание. dirАтрибут изменяет только положение начального края текста, и порядок текста в тексте не будет располагаться в прямом или обратном порядке. Если вы хотите изменить прямой и обратный порядок текста, используйте его вместо этого и используйте атрибут <bdo>элемента <bdo>256_. Некоторые элементы dirattributes имеют дополнительную семантику.

hidden

hiddenAttribute, указывающий, что содержимое элемента не должно отображаться пользователю.

Допустимые значения:

• Пустая строка / hidden: переводит элемент в скрытое состояние. сопоставляется с Hiddenstate.
• until-found: сопоставлено с Until foundstate. Когда атрибут элемента находится в этом состоянии, это означает, что элемент hiddenскрыт, как и состояние, но доступ к содержимому элемента может быть доступен с помощью функции поиска на странице (Ctrl + F) или фрагментная навигация (например, якорные ссылки). Когда эти атрибуты пытаются прокрутить до цели в поддереве элемента, пользовательские агенты удалят атрибут, чтобы содержимое отображалось перед прокруткой к нему.

Когда скрытый атрибут элемента указывает, что элемент еще не имеет или больше не имеет прямого отношения к текущему состоянию страницы, или он используется для объявления контента, который будет повторно использоваться другими частями страницы, а не напрямую доступен пользователю. .

В Until foundstate веб-браузеры будут использовать content-visibility: hiddenвместо display: none, элемент будет иметь следующее описание:

hiddenЗначения, которые можно переопределить в CSS через некоторые свойства, например display:block.

Также в этом состоянии, пока атрибут hiddenthe не будет удален, элемент может активировать beforematchevents, поскольку пользователь нашел контент с помощью функций поиска на странице или с помощью фрагментной навигации:

html
<body>
   <a href="#test">go to test box</a>
   <div class="a"></div> <!-- has a certain height -->
   <div id="test" >test box</div>
   <script>
     test. addEventListener("beforematch", () => {
       console.log('show') // After clicking the link, jump to the position of the test box and print the show.
     })
   </script>
</body>

Примечание:

• Простая прокрутка для поиска элемента, у которого он есть, hidden="until-found"не вызовет beforematchсобытия, он может реагировать только на обнаружение элемента с помощью функции поиска на странице или через фрагмент навигация .
• Это событие находится на экспериментальной стадии, и совместимость относительно плохая.

Другие соображения:

• Хотя hiddenit является глобальным атрибутом, в некоторых ситуациях вам следует стараться не использовать его:
• В спецификации четко указано: hiddenproperties нельзя использовать для сокрытия контента, который на законных основаниях может отображаться в другом представлении. hiddenНапример, некорректно использовать для скрытия панелей в диалоговом окне с вкладками, потому что интерфейс с вкладками — это просто представление переполнения — также возможно отображать все элементы управления формы на одной большой странице с полосами прокрутки. Кроме того, неправильно использовать этот атрибут для скрытия содержимого только для одного представления — если что-то помечено как скрытое, оно будет скрыто от всех представлений (включая программы чтения с экрана, например).
• Скрытые элементы не могут быть связаны с нескрытыми элементами ( Until foundза исключением состояний). Например, <label>атрибуты for, <a>атрибуты href и т. д. Если контент неприменим или неактуален, нет причин ссылаться на него. Однако можно использовать ARIA aria-describedbyattributes для ссылки на само описание.hidden
• Браузер display: none реализует состояние входа элемента средствами Hidden; и то, как браузер реализует Until foundсостояние, упомянутое выше, в этом случае элемент по-прежнему будет занимать место в потоке содержимого, а поля, границы, внутренние поля и фон элемента по-прежнему будут отображаться.
• hidden="until-found"В настоящее время он находится в экспериментальной стадии, пожалуйста, обратите внимание на совместимость при его использовании.

nonce

nonceAttributes — это атрибут повышения безопасности, который можно использовать для указания случайной строки, используемой для проверки происхождения определенных ресурсов. При использовании атрибута noncethe сервер генерирует случайную строку и включает ее в директиву Content-Security-Policy (CSP) в заголовке ответа HTTP. Когда браузер загружает ресурс, он проверяет nonceсоответствие атрибута ресурса значению в инструкции CSP nonce. Если оно совпадает, ресурс разрешается загружать, в противном случае он блокируется.

Использование nonceattributes является эффективным способом предотвращения атак с использованием межсайтовых сценариев (XSS), поскольку злоумышленник не может подделать правильное значение noncevalue. В то же время nonceattributes также можно использовать для ограничения выполнения встроенных скриптов, что еще больше повышает безопасность. В HTML его можно применять к таким элементам, как <script>, <style> и <iframe>.

nonceЗначение обычно генерируется и используется серверной частью, в качестве примера возьмем Express.js:

const express = require('express');
const crypto = require('crypto');
const app = express();
app. use((req, res, next) => {
   // Generate a random base64 encoded nonce value
   const nonce = crypto.randomBytes(16).toString('base64');
   // Add the nonce value to the Content-Security-Policy header
   res. setHeader(
     'Content-Security-Policy',
     `script-src 'nonce-${nonce}'; style-src 'nonce-${nonce}'`
   );
   // Add the nonce value to the response object for use in templates
   res.locals.nonce = nonce;
   next();
});
app.get('/', (req, res) => {
   // Render HTML using the nonce value
   res. send(`
     <!DOCTYPE html>
     <html>
       <head>
         <style nonce="${res.locals.nonce}">
           body { background-color: lightblue; }
         </style>
       </head>
       <body>
         <h1>Hello, World!</h1>
         <script nonce="${res.locals.nonce}">
           console.log('Hello, World!');
         </script>
       </body>
     </html>
   `);
});
app.listen(3000, () => {
   console.log('Server is running on port 3000');
});

Конкретный метод использования зависит от потребностей вашего проекта.

MDN: используйте, только если нельзя избежать небезопасного встроенного скрипта или содержимого стилей nonce. Если он вам не нужен, не используйте его. Если сценарий статичен, также можно использовать хэш CSP. Всегда старайтесь в полной мере использовать защиту CSP, по возможности избегая nonceили небезопасных встроенных сценариев.

virtualkeyboardpolicy

virtualkeyboardpolicyСвойства управляют поведением виртуальной клавиатуры на экране на таких устройствах, как планшеты, мобильные телефоны и другие устройства, где аппаратная клавиатура может быть недоступна.

virtualkeyboardpolicyАтрибут является перечисляемым атрибутом, и допустимые значения:

• auto/пустая строка: Браузер автоматически решает, отображать ли виртуальную клавиатуру в соответствии с макетом и содержимым страницы. Когда пользователь нажимает на поле ввода или другой редактируемый элемент, автоматически появляется виртуальная клавиатура. Когда пользователь покидает поле ввода или другой редактируемый элемент, виртуальная клавиатура автоматически скрывается.
• manual: Виртуальная клавиатура будет отображаться только при ручном запуске пользователем. Пользователь должен нажать определенную кнопку или жест, чтобы открыть виртуальную клавиатуру. Этот режим обычно используется в приложениях, требующих от пользователя ввода конфиденциальной информации, таких как банковские приложения или менеджеры паролей.

Примечание. virtualkeyboardpolicyДействительно только на мобильных устройствах. Сенсорная клавиатура на стороне ПК не будет реагировать на этот атрибут. Когда элемент не в фокусе, сенсорная клавиатура будет закрыта. Этот атрибут не влияет на него.

itemscope, itemtype, itemprop, itemidиitemref

Эти свойства называются свойствами микроданных. Микроданные (модель) – это язык разметки для публикации структурированных данных в Интернете, также известный как формат встроенных метаданных. Это часть спецификации HTML5, которая позволяет владельцам веб-сайтов размещать данные на веб-страницах в структурированном формате, облегчающем поисковым системам и другим автоматизированным инструментам понимание и классификацию их контента.

Модель микроданных состоит из групп пар «имя-значение», называемых элементами. Каждая группа называется элементом . Каждый элемент может иметь тип элемента, глобальный идентификатор (если словарь, заданный типом элемента, поддерживает глобальные идентификаторы для элементов) и список пар "имя-значение". Каждое имя в паре имя-значение называется атрибутом, и каждый атрибут имеет одно или несколько значений. Каждое значение является либо строкой, либо представляет собой набор пар "имя-значение" (элемент). Имена неупорядочены по отношению друг к другу, но имеют относительный порядок, если для определенного имени имеется несколько значений.

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

itemscopeAttribute используется для определения того, что текущий элемент представляет новый объект и является логическим атрибутом.

пример:

<div itemscope itemtype="http://schema.org/Person">
  ...
</div>

В примере определяется новая сущность о людях, где тип сущности, представленный текущим элементом, определяется атрибутом itemtypeattribute, обычно с использованием URL-адреса в качестве значения, и этот URL-адрес указывает на документ, представляющий тип сущности (дополнительную информацию см. сущности тип ).

Примечание:

• itemtypeЗначение атрибута должно быть неупорядоченным (с учетом регистра) набором уникальных токенов, каждый из которых является действительным абсолютным URL , и все они определены для использования одного и того же словаря. Значение атрибута должно иметь хотя бы один тег.
• Все типы материалов должны быть типами, определенными в применимой спецификации (например, schema.org), и все они должны быть определены для использования одного и того же словаря.
• itemtypeАтрибуты можно указывать только для элементов, для которых они указаны itemscope.
• Точное значение глобального идентификатора определяется спецификацией словаря. Имея дело с несколькими элементами с одним и тем же идентификатором, разрешено ли иметь несколько элементов с одним и тем же глобальным идентификатором (будь то на одной странице или на разных страницах) и каковы правила обработки для этого словаря, посредством чего спецификация класса определять.

Затем добавьте описание для этого объекта:

<div itemscope itemtype="http://schema.org/Person">
  <h2 itemprop="name">Jack</h2>
  <span itemprop="age">18</span>
  <span itemprop="gender">man</span>
</div>

Здесь <h2>, <span>элементы принадлежат этому типу сущности. Отдельные свойства типа объекта itempropопределяются атрибутами (имя выше, возраст и пол и т. д.). Обычное itempropvalue — это строка, описывающая конкретное имя свойства.

MDN:

Значения атрибутов для пар "имя-значение" обрабатываются как первое совпадение в следующем списке:

• Если элемент имеет itemscopeattributes, значением является элемент, созданный элементом.
• Если элемент является <meta>элементом, значением является contentзначение атрибута элемента.
• Если элемент является элементом <audio>, <embed>, <iframe>, <img>, <source>, <track>или <video>, значением является строка URL, полученная в результате синтаксического анализа атрибута srcэлемента.
• Если элемент <a>an <area>или <link>element, значением является строка URL-адреса, которая hrefявляется результатом анализа значения атрибута элемента относительно документа узла элемента, когда атрибут установлен.
• Если элемент является элементом <object>an, значением является строка URL-адреса, полученная в результате синтаксического анализа значения атрибута данных элемента относительно документа узла элемента, когда атрибут установлен.
• Если элемент представляет собой воксель <data>a, значением является значение атрибута value элемента.
• Если элемент является <meter>элементом, значением является valueзначение атрибута элемента.
• Если элемент является <time>элементом, значением является datetimeзначение элемента.
• В противном случае значением является текстовое содержимое элемента. Если значением атрибута является URL-адрес, атрибут должен быть указан с помощью элемента атрибута URL. Элементы атрибута URL включают элементы <a>, <area>, <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source>, <track>и <video>.

itempropПримечание. Несколько атрибутов в объекте не имеют порядка, но если есть несколько itempropатрибутов с одинаковыми значениями, то itempropесть порядок этих атрибутов с одинаковыми значениями.

Согласно спецификации микроданных, itemidattributes можно использовать для указания уникального идентификатора для уникальной идентификации элемента и ссылки на него. Атрибуты также можно использовать для связывания itemrefсвойств других элементов с элементом с уникальным идентификатором (например, атрибутом itemidan). В документе можно ссылаться на различные элементы из нескольких источников и объединять их в единый объект. Значение этого атрибута может быть любой строкой или URL-адресом и должно быть достаточно уникальным, чтобы не конфликтовать с другими элементами.

itemidAttributes часто используются в сочетании с другими атрибутами микроданных (например, itemprop) для указания конкретных сведений об элементе. Он также может быть связан с элементами других веб-ресурсов, которые могут иметь другие доменные имена или работать на разных веб-серверах.

Официальный пример туберкулеза:

< div itemscope
     itemtype="http://www.vocab.example.net/book"
     itemid="urn:isbn:0-330-34032-8
     itemref='name price publishinghouse'></div>
<p id='name'>Configuration</p>
<p id='price'>￥30.00</p>
<p id='publishinghouse'>xxxbookmark</p>

Примечание:

• itemidAttributes можно указывать только для элементов, для которых указаны атрибуты itemscopean и itemtypean. Их можно itemscopeзадавать только для элементов с атрибутами, itemtypeопределяющими словари, которые не поддерживают глобальные идентификаторы элементов.
• В определении Whatwg.org указано, что itemidit должен быть URL-адресом. Но можно использовать и реальные URN. Это несоответствие может отражать несовершенство микроспектра.
• itemrefАтрибуты могут быть указаны только itemscopeдля указанного элемента. И это не часть модели микроданных. Это просто семантическая структура, помогающая авторам добавлять аннотации к страницам, где аннотированные данные не соответствуют удобной древовидной структуре. Например, он позволяет авторам размечать данные в таблицах, чтобы каждый столбец определял отдельную запись, сохраняя при этом атрибуты в таблице.

slot, is, part(экспериментальная) и exportparts(экспериментальная)

Эти свойства связаны со свойствами веб-компонентов. Подробнее см. в предыдущем разделе HTML — веб-компоненты. Я не буду здесь вдаваться в подробности.

role

Подробнее читайте в другой моей статье Веб-доступность.

Рекомендации

глобальные атрибуты

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .