book51.ru

Инструменты пользователя

Инструменты сайта

  • Показать страницу
  • История страницы
  • Ссылки сюда
  • Оставить на чай
  • Экспорт в PDF
  • Наверх
    • Вы посетили:
    software:development:web:docs:web:html:global_attributes:data

    Различия

    Показаны различия между двумя версиями страницы.

    Ссылка на это сравнение

    Предыдущая версия справа и слеваПредыдущая версия
    Следующая версия    		Предыдущая версия
    software:development:web:docs:web:html:global_attributes:data [2024/03/03 16:33] – [Синтаксис] vladpolskiysoftware:development:web:docs:web:html:global_attributes:data [2024/03/03 16:52] (текущий) – [Доступность] vladpolskiy
    Строка 17: Строка 17:
     </html> </html>
      
     +В данном примере к элементу <meter> добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content, значением которого как раз и выступает функция attr().
     =====Использование===== =====Использование=====
      
     <WRAP left round info 100%> <WRAP left round info 100%>
     **Примечание**\\   **Примечание**\\  
    -**Нестандартный:** эта функция нестандартна и не входит в стандартную комплектацию. Не используйте его на рабочих сайтах, выходящих в Интернет: он подойдет не каждому пользователю. Между реализациями также может быть большая несовместимость, и поведение может измениться в будущем.+Имя атрибута должно обязательно начинаться с **data-**, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).
     </WRAP> </WRAP>
      
    -<WRAP left round info 100%> + 
    -**Примечание**\\   +Имена атрибутов трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам: 
    -**Устарело:** эта функция больше не рекомендуется. Хотя некоторые браузеры все еще могут его поддерживать, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе удаления или может быть сохранен только в целях совместимости. Избегайте его использования и, если возможно, обновите существующий код; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент. +  * data- удаляется; 
    -</WRAP>+  * любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной; 
     +  * любые другие буквы остаются неизменными. 
     +Например, атрибут **data-date-of-birth** преобразуется в переменную **dateOfBirth.** 
     + 
     + 
     +<code> 
     +data-description превращается в description. 
     +data-full-description превращается fullDescription. 
     +data-description-of-tag превращается descriptionOfTag. 
     +</code>
      
     =====Синтаксис===== =====Синтаксис=====
    Строка 37: Строка 47:
      
     <code> <code>
    -<li contextmenu="changeFont" id="fontSizing">+<div id="user" data-id="1234567890"  
     +       data-user="Вася Пупкин"  
     +       data-date-of-birth="01.04.1990">Пользователь</div>
     </code> </code>
      
    Строка 44: Строка 56:
     =====Значения атрибута===== =====Значения атрибута=====
      
    -  * Значения: В качестве значения указывается идентификатор меню, созданного с помощью тега <menu>.+  * Значения: Определяет значение атрибута (в виде строки)
       * Значение по умолчанию: Нет.   * Значение по умолчанию: Нет.
      
      
      
    -=====Применяется к тегам===== 
      
    -[[software:development:web:docs:web:html:element:a|<a>]],  
    -[[software:development:web:docs:web:html:element:abbr|<abbr>]],  
    -[[software:development:web:docs:web:html:element:address|<address>]], 
    -[[software:development:web:docs:web:html:element:area|<area>]],                        
    -[[software:development:web:docs:web:html:element:b|<b>]],                 
    -[[software:development:web:docs:web:html:element:bdo|<bdo>]],  
    -[[software:development:web:docs:web:html:element:blockquote|<blockquote>]],  
    -[[software:development:web:docs:web:html:element:body|<body>]],                  
    -[[software:development:web:docs:web:html:element:button|<button>]],               
    -[[software:development:web:docs:web:html:element:caption|<caption>]],                
    -[[software:development:web:docs:web:html:element:cite|<cite>]],  
    -[[software:development:web:docs:web:html:element:code|<code>]],  
    -[[software:development:web:docs:web:html:element:col|<col>]],  
    -[[software:development:web:docs:web:html:element:colgroup|<colgroup>]],  
    -[[software:development:web:docs:web:html:element:del|<del>]],   
    -[[software:development:web:docs:web:html:element:dd|<dd>]],                
    -[[software:development:web:docs:web:html:element:dfn|<dfn>]],  
    -[[software:development:web:docs:web:html:element:dir|<dir>]] {{:icons:16:hourglass-select.png?|Устаревший. Не для использования на новых web-сайтах.}},  
    -[[software:development:web:docs:web:html:element:div|<div>]],  
    -[[software:development:web:docs:web:html:element:dl|<dl>]],  
    -[[software:development:web:docs:web:html:element:dt|<dt>]],  
    -[[software:development:web:docs:web:html:element:em|<em>]], 
    -[[software:development:web:docs:web:html:element:embed|<embed>]],  
    -[[software:development:web:docs:web:html:element:fieldset|<fieldset>]],  
    -[[software:development:web:docs:web:html:element:form|<form>]],  
    -[[software:development:web:docs:web:html:element:h1|<h1>]],  
    -[[software:development:web:docs:web:html:element:h1|<h2>]],  
    -[[software:development:web:docs:web:html:element:h1|<h3>]],  
    -[[software:development:web:docs:web:html:element:h1|<h4>]],  
    -[[software:development:web:docs:web:html:element:h1|<h5>]],  
    -[[software:development:web:docs:web:html:element:h1|<h6>|] 
    -[[software:development:web:docs:web:html:element:i|<i>]],           
    -[[software:development:web:docs:web:html:element:iframe|<iframe>]],     
    -[[software:development:web:docs:web:html:element:img|<img>]],         
    -[[software:development:web:docs:web:html:element:input|<input>]],         
    -[[software:development:web:docs:web:html:element:ins|<ins>]],            
    -[[software:development:web:docs:web:html:element:kbd|<kbd>]],            
    -[[software:development:web:docs:web:html:element:label|<label>]],         
    -[[software:development:web:docs:web:html:element:legend|<legend>]],       
    -[[software:development:web:docs:web:html:element:li|<li>]],              
    -[[software:development:web:docs:web:html:element:link|<link>]],              
    -[[software:development:web:docs:web:html:element:map|<map>]],             
    -[[software:development:web:docs:web:html:element:menu|<menu>]],   
    -[[software:development:web:docs:web:html:element:ol|<ol>]],               
    -[[software:development:web:docs:web:html:element:option|<option>]],       
    -[[software:development:web:docs:web:html:element:p|<p>]],            
    -[[software:development:web:docs:web:html:element:pre|<pre>]],             
    -[[software:development:web:docs:web:html:element:q|<q>]],               
    -[[software:development:web:docs:web:html:element:s|<s>]],            
    -[[software:development:web:docs:web:html:element:samp|<samp>]],            
    -[[software:development:web:docs:web:html:element:select|<select>]],           
    -[[software:development:web:docs:web:html:element:span|<span>]],           
    -[[software:development:web:docs:web:html:element:strong|<strong>]],        
    -[[software:development:web:docs:web:html:element:sub|<sub>]],           
    -[[software:development:web:docs:web:html:element:sup|<sup>]],              
    -[[software:development:web:docs:web:html:element:table|<table>]],         
    -[[software:development:web:docs:web:html:element:tbody|<tbody>]],          
    -[[software:development:web:docs:web:html:element:td|<td>]],                
    -[[software:development:web:docs:web:html:element:textarea|<textarea>]],     
    -[[software:development:web:docs:web:html:element:tfoot|<tfoot>]],        
    -[[software:development:web:docs:web:html:element:th|<th>]],             
    -[[software:development:web:docs:web:html:element:thead|<thead>]],   
    -[[software:development:web:docs:web:html:element:tr|<tr>]],             
    -[[software:development:web:docs:web:html:element:ul|<ul>]],        
    -[[software:development:web:docs:web:html:element:var|<var>]]   
    -=====Доступность===== 
    - 
    -Атрибут [[https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu|contextmenu устарел]] и будет удален из всех браузеров. 
      
     =====Ссылки и Дополнения===== =====Ссылки и Дополнения=====
    -  * [[https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu|Стандарт HTML # attr-contextmenu]] + 
    -  * [[https://msiter.ru/references/html-reference/global/contextmenu|msiter.ru - Общий HTML атрибут contextmenu]] +Более подробное руководство по использованию атрибутов данных HTML см. в разделе [[software:development:web:docs:learn:html:howto:use_data_attributes|Использование атрибутов данных]]. 
    -  * [[https://htmlbook.ru/html/attr/contextmenu|htmlbook.ru - Атрибут contextmenu]]+ 
     +  * [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes|Использование атрибутов данных MDN]] 
     +  * [[https://html.spec.whatwg.org/multipage/dom.html#attr-data-*|Стандарт HTML # attr-data-*]] 
     +  * [[https://htmlbook.ru/blog/atribut-data|htmlbook.ru - Атрибут data-*]] 
     +  * [[http://webref.ru/html/attr/data|Описание атрибута data на сайте webref.ru]] 
     +  * [[https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes|data-* в живом стандарте HTML5]]
    software/development/web/docs/web/html/global_attributes/data.1709472799.txt.gz · Последнее изменение: 2024/03/03 16:33 — vladpolskiy