Atributos html globales. Una introducción a los formularios HTML5 y nuevos atributos. La lista y los elementos de la lista de datos

Para ver una descripción y un ejemplo del uso de un atributo global que le interesa, haga clic en él o desplácese hacia abajo en la página hasta su descripción.

llave de acceso

Los navegadores utilizan el atributo de clave de acceso como guía para crear un atajo de teclado que activa o da foco a un elemento.

Nota: antes de HTML5, el atributo de clave de acceso solo se podía usar con las siguientes etiquetas:, , , , ,

y ... Desde la quinta versión de HTML, este atributo se puede utilizar con cualquier etiqueta HTML válida.</p> <p>El atributo de la tecla de acceso debe ser un carácter que se pueda ingresar con solo presionar una tecla. Los caracteres de espacio en blanco no están permitidos como valor de atributo.</p><p>Los atajos de teclado para el atributo de clave de acceso dependen del navegador que esté utilizando:</p> <p>El uso del atributo de clave de acceso en diferentes elementos con el mismo valor ignorará el atributo.</p> <h2>clase</h2> <p>El atributo de clase se utiliza para acceder posteriormente a elementos (a través del nombre de la clase) en CSS y JavaScript.</p> <p>En el atributo de clase, puede especificar no una, sino varias clases como valor, en este caso los nombres de las clases deben estar separados por espacios, el orden de los nombres de las clases no importa:</p><p> <p>Si en bloques de declaraciones de diferentes clases lo mismo <a href="https://gadgets-room.ru/es/css-parametry-ramki-elementa-sozdanie-ramok-v-css-svoistvo-border-vypuklaya/">Propiedades CSS</a> con valores diferentes, el valor que se define debajo del resto en el código CSS se aplicará a la propiedad. Por tanto, el orden de los nombres de las clases en el valor del atributo no importa, ya que en este caso se activa el mecanismo en cascada.</p> <h2>contento</h2> <p>El atributo contenteditable indica si el usuario puede editar el contenido de este elemento. El atributo puede tomar uno de los siguientes valores:</p> <ul><li>Cadena verdadera o vacía (""): el contenido del elemento se puede editar</li> <li>falso: la edición de contenido está prohibida</li> </ul> <bdo dir="ltr">Solo un poco de texto</bdo> <h2>arrastrable</h2> <p>El atributo arrastrable determina si el usuario puede arrastrar un elemento usando la API de arrastrar y soltar. El atributo puede tomar uno de tres valores:</p> <ul><li>verdadero: indica que el elemento se puede arrastrar</li> <li>falso: indica que el elemento no se arrastra</li> <li>auto: indica que arrastrar el elemento dependerá del valor predeterminado establecido en el navegador.</li> </ul><p>Con el atributo id, puede crear enlaces a un elemento específico, y no solo a la página en su conjunto. Dichos enlaces pueden llevar a una sección de esta página oa una sección de otra página. Para vincular a un elemento, agregue un atributo id al cielo. El enlace en sí, en este caso, deberá contener el nombre del identificador del elemento al que hace referencia, precedido por el símbolo #. Si el enlace conduce a una sección de la página actual, solo se puede especificar el nombre del identificador como dirección, si el enlace lleva a una sección de otra página, el nombre del identificador se indica al final de la dirección:</p><h2>lang</h2> <p>El atributo lang le permite especificar qué idioma se usa para el texto dentro de un elemento. Los códigos de idioma se utilizan como valor de atributo:</p><p> <p>Texto en inglés: <span lang="en">"¡Hola Mundo!"</span>.</p> </p><p>El uso de este atributo ayuda a los navegadores a mostrar correctamente algunos caracteres nacionales, los programas de voz determinan el idioma del texto, verifican la ortografía y los programas de revisión gramatical del texto.</p> <p>El atributo lang también se puede utilizar para mejorar la calidad de los resultados del motor de búsqueda para los resultados de búsqueda que se basan en la preferencia lingüística del usuario.</p> <h2>corrector ortográfico</h2> <p>El atributo de revisión ortográfica especifica si se permite verificar el contenido de un elemento en busca de errores ortográficos. El atributo puede tomar uno de los siguientes valores:</p> <ul><li>Verdadero: indica que, si es posible, se debe verificar el contenido del elemento en busca de errores ortográficos.</li> <li>falso: indica que el elemento no debe comprobarse en busca de errores ortográficos.</li> </ul><p>El atributo del corrector ortográfico es enumerable. Esto significa que se requiere una indicación explícita del valor del atributo. Está prohibido agregar un atributo sin un valor:</p><p> <!-- правильное добавление атрибута --> <textarea spellcheck="false"> <!-- неправильное добавление атрибута --> <textarea spellcheck> </p><p>El atributo de corrección ortográfica es solo una recomendación para el navegador: los navegadores no deberían poder comprobar si hay errores ortográficos. Normalmente, los elementos no editables no se comprueban en busca de errores, incluso si el atributo se establece en verdadero y el navegador admite la validación.</p> <h2>estilo</h2> <p>El atributo de estilo se utiliza para agregar estilos CSS a un elemento. Los estilos agregados usando el atributo de estilo tienen prioridad sobre los estilos colocados en el elemento<style> или во внешнем файле.</p> <p>При добавлении стилей в значение атрибута, селектор и фигурные скобки не используются. Каждое объявление должно заканчиваться точкой с запятой, после которой можно писать следующее объявление. Между свойствами и их значениями, так же как и между объявлениями, пробелы ставятся по желанию:</p><p> <span style="color: red; font-weight: bold;">Жирный красный текст</p><h2>tabindex</h2> <p>Атрибут tabindex указывает может ли элемент быть в фокусе и порядок приоритета при переходе фокуса между элементами (при использовании клавиши " tab "). В качестве значения атрибут принимает целое число:</p><p> <textarea tabindex="5"> </p><p>Число 5 означает, что элемент получит фокус после элемента с tabindex="4" и до элемента с tabindex="6" . Но давать последовательные значения не обязательно, в любом случае элементы, имеющие меньшее значение, получат фокус до элементов, имеющих большее значение. Если несколько элементов имеют одинаковые положительные значения, то порядок получения фокуса будет зависеть от порядка их следования в исходном коде документа.</p> <h2>title</h2> <p>Атрибут title используется для указания <a href="https://gadgets-room.ru/es/kak-pravilno-nabirat-mezhdugorodnyi-nomer-s-gorodskogo-mezhdugorodnyaya-svyaz/">дополнительной информации</a> о содержимом элемента (отображается браузерами в виде всплывающей текстовой подсказки при наведении курсора мыши на элемент).</p> <p>Атрибут title часто используется с картинками, для добавления описания картинки:</p><p> <img src='https://i2.wp.com/1.png' loading=lazy loading=lazy> </p><p>Примечание: <a href="https://gadgets-room.ru/es/how-to-find-the-appearance-settings-in-yandex-how-to-configure-the-yandex-browser-for-easy-operation/">внешний вид</a> и размер всплывающей подсказки, шрифт и цвет текста, зависят от браузера и не могут быть изменены с помощью CSS стилей.</p> <p>Последнее обновление: 08.04.2016</p> <p>Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки, кирпичики, из которых состоит веб-страница.</p> <p>Документ HTML5, как и любой <a href="https://gadgets-room.ru/es/osnovnye-pravila-yazyka-html-sintaksis-html-i-struktura-html-dokumenta-gde-pisat-html/">документ HTML</a>, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег, которые заключаются в угловые скобки. Например:</p><p> <div>Текст элемента div</div> </p><p>Здесь определен элемент div , который имеет открывающий тег <div> и закрывающий тег </div> . Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".</p> <p>Элементы также могут состоять из одного тега, например, элемент <br /> , функция которого - перенос строки.</p><p> <div>Текст <br /> элемента div</div> </p><p>Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно, и равнозначно использованию тега без слеша: <br></p> <p>Каждый элемент внутри открывающего тега может иметь атрибуты . Например:</p><p> <div style="color:red;">Кнопка</div> <input type="button" value="Нажать"> </p><p>Здесь определено два элемента: div и input. Элемент div имеет атрибут style . После знака равно в кавычках пишется значение атрибута: style="color:red;" . В данном случае значение "color:red;" указывает, что цвет текста будет красным.</p> <p>Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка) и value (определяет текст кнопки)</p> <p>Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к <a href="https://gadgets-room.ru/es/javascript-udalenie-elementov-iz-massiva-javascript---elementov---udalit-opredelennyi-element-mass/">определенным элементам</a>, как например, type.</p> <p>Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например, у кнопки можно задать атрибут disabled:</p><p> <input type="button" value="Нажать" disabled> </p><p>Атрибут disabled указывает, что данный элемент отключен.</p> <h3>Глобальные атрибуты</h3> <p>В HTML5 есть набор <span>глобальных атрибутов </span>, которые применимы к любому элементу HTML5:</p> <ul><p>accesskey : определяет клавишу для <a href="https://gadgets-room.ru/es/obnovlennye-uvedomleniya-i-menyu-bystrogo-dostupa/">быстрого доступа</a> к элементу</p> <p>class : задает класс CSS, который будет применяться к элементу</p> <p>contenteditable : определяет, можно ли редактировать содержимое элемента</p> <p>contextmenu : определяет <a href="https://gadgets-room.ru/es/sobstvennoe-kontekstnoe-menyu-s-ispolzovaniem-javascript/">контекстное меню</a> для элемента, которое отображается при нажатии на элемент правой кнопкой мыши</p> <p>dir : устанавливает направление текста в элементе</p> <p>draggable : определяет, можно ли перетаскивать элемент</p> <p>dropzone : определяет, можно ли копировать переносимые данные при переносе на элемент</p> <p>hidden : скрывает элемент</p> <p>id : уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов</p> <p>lang : определяет язык элемента</p> <p>spellcheck : указывает, будет ли для данного элемента использоваться проверка правописания</p> <p>style : задает стиль элемента</p> <p>tabindex : определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB</p> <p>title : устанавливает дополнительное описание для элемента</p> <p>translate : определяет, должно ли переводиться содержимое элемента</p> </ul><p>Но, как правило, из всего этого списка наиболее часто используются три: class , id и style .</p> <h3>Пользовательские атрибуты</h3> <p>В отличие от <a href="https://gadgets-room.ru/es/previous-version-of-google-chrome-convenient-download-of-files/">предыдущей версии</a> языка разметки в HTML5 были добавлены <a href="https://gadgets-room.ru/es/the-value-of-the-attribute-we-set-one-attribute/">пользовательские атрибуты</a> (custom attributes). Теперь разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом <i>data- </i>. Например:</p><p> <input type="button" value="Нажать" data-color="red" > </p><p>Здесь определен атрибут data-color , который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует подобного атрибута. Мы его определяем сами и устанавливаем у него любое значение.</p> <h3>Одинарные или двойные кавычки</h3> <p>Нередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:</p><p> <input type="button" value="Нажать"> </p><p>И одинарные, и двойные кавычки в данном случае допустимы, хотя чаще применяются именно двойные кавычки. Однако иногда само значение атрибута может содержать двойные кавычки, и в этом случае все значение лучше поместить в одинарные:</p><p> <input type="button" value="Кнопка "Привет мир""> </p> <p>На HTML5, хотя все современные браузеры уже поддерживают данный стандарт. По состоянию на декабрь 2011 года стандарт все еще находится в состоянии разработки.</p> <p>В HTML5 добавляет много новых синтаксических особенностей – <b><video>, <audio>, <header> и <canvas> </b>. Эти элементы разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как <b><section>, <article>, <header> и <nav> </b> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы).</p> <h3><b>Новые теги HTML5 </b></h3> <ul><li>1. Теги разделов (article, aside, footer, header, hgroup, nav, section)</li> <li>2. Теги группировки контента (figure, figcaption)</li> <li>3. Теги для семантического выделения текста (bdo, mark, time, ruby, rt, rp, wbr)</li> <li>4. Теги для вставки контента (audio, video, canvas, embed, source)</li> <li>5. Теги для элементов форм (datalist, keygen, output, progress, meter)</li> <li>6. Интерактивные элементы (details, summary, command, menu)</li> </ul><table border="1" cellpadding="10" cellspacing="0" style="width: 100%"><tbody><tr><th>Тег </th> <th>Краткое описание </th> </tr><tr class="newtag"><td><article> </td> <td>Определяет статью </td> </tr><tr class="newtag"><td><aside> </td> <td>Определяет контент в стороне от основного контента страницы </td> </tr><tr class="newtag"><td><audio> </td> <td>Определяет аудио контент </td> </tr><tr class="newtag"><td><canvas> </td> <td>Определяет графику </td> </tr><tr class="newtag"><td><command> </td> <td>Определяет командную кнопку </td> </tr><tr class="newtag"><td><datagrid> </td> <td>Определяет данные в упорядоченный список </td> </tr><tr class="newtag"><td><datalist> </td> <td>Определяет выпадающий список </td> </tr><tr class="newtag"><td><datatemplate> </td> <td>Определяет шаблон данных </td> </tr><tr class="newtag"><td><details> </td> <td>Определяет детали элемента </td> </tr><tr class="newtag"><td><dialog> </td> <td>Определяет диалог (разговор) </td> </tr><tr class="newtag"><td><eventsource> </td> <td>Определяет цель события, отправляемого по серверу </td> </tr><tr class="newtag"><td><figure> </td> <td>Определяет группу медиа-контента, и их подписи </td> </tr><tr class="newtag"><td><footer> </td> <td>Определяет нижний колонтитул для раздела или страницы </td> </tr><tr class="newtag"><td><header> </td> <td>Определяет область заголовка раздела или страницы </td> </tr><tr class="newtag"><td><mark> </td> <td>Определяет выделенный текст </td> </tr><tr class="newtag"><td><meter> </td> <td>Определяет измерения в течение заранее определенного диапазона </td> </tr><tr class="newtag"><td><nav> </td> <td>Определяет навигационные ссылки </td> </tr><tr class="newtag"><td><nest> </td> <td>Определяет вложенную точку в шаблоне данных </td> </tr><tr class="newtag"><td><output> </td> <td>Определяет некоторые виды результата </td> </tr><tr class="newtag"><td><progress> </td> <td>Определяет ход выполнения задачи любого рода </td> </tr><tr class="newtag"><td><rule> </td> <td>Определяет правила для обновления шаблонов </td> </tr><tr class="newtag"><td><section> </td> <td>Определяет раздел (секцию) </td> </tr><tr class="newtag"><td><source> </td> <td>Определяет медиа-ресурсы </td> </tr><tr class="newtag"><td><time> </td> <td>Определяет дату/время </td> </tr><tr class="newtag"><td><video> </td> <td>Определяет видео </td> </tr></tbody></table><h3>Неподдерживаемые теги:</h3> <table border="1" cellpadding="10" style="width: 100%;"><tbody><tr><th>Тег </th> <th>Краткое описание </th> </tr><tr class="deprecated"><td><acronym> </td> <td><span>Не поддерживается. </span> Определяет акроним </td> </tr><tr class="deprecated"><td><applet> </td> <td><span>Не поддерживается. </span> Определяет апплет </td> </tr><tr class="deprecated"><td><basefont> </td> <td><span>Не поддерживается. </span> Используетя вместо CSS для задания шрифта </td> </tr><tr class="deprecated"><td><big> </td> <td><span>Не поддерживается. </span> Определяет большой текст </td> </tr><tr class="deprecated"><td><center> </td> <td><span>Не поддерживается. </span> Определяет текст по центру </td> </tr><tr class="deprecated"><td><dir> </td> <td><span>Не поддерживается. </span> Определяет список директорий </td> </tr><tr class="deprecated"><td><frame> </td> <td><span>Не поддерживается. </span> Определяет фрейм </td> </tr><tr class="deprecated"><td><frameset> </td> <td><span>Не поддерживается. </span> Определяет набор фреймов </td> </tr><tr class="deprecated"><td><isindex> </td> <td><span>Не поддерживается. </span> Определяет поисковый индекс в документе </td> </tr><tr class="deprecated"><td><noframes> </td> <td><span>Не поддерживается. </span> Определяет секцию, не поддерживающую фрейм </td> </tr><tr class="deprecated"><td><s> </td> <td><span>Не поддерживается. </span> </td> </tr><tr class="deprecated"><td><strike> </td> <td><span>Не поддерживается. </span> Определяет зачеркнутый текст </td> </tr><tr class="deprecated"><td><tt> </td> <td><span>Не поддерживается. </span> Определяет телетайп текст </td> </tr><tr class="deprecated"><td><u> </td> <td><span>Не поддерживается. </span> Определяет подчеркнутый текст </td> </tr><tr class="deprecated"><td><xmp> </td> <td><span>Не поддерживается. </span> Определяет выровненный текст </td> </tr></tbody></table><h3>Список атрибутов HTML5</h3> <table border="1" cellpadding="10" style="width: 100%;"><tbody><tr><th>Атрибут </th> <th>Значение </th> <th>Краткое описание </th> </tr><tr class="newtag"><td>contenteditable </td> <td>true<br> false </td> <td>Определяет, может ли пользователь редактировать содержимое (контент) </td> </tr><tr class="newtag"><td>contextmenu </td> <td>menu_id </td> <td>Определяет контекстное меню элемента </td> </tr><tr class="newtag"><td>draggable </td> <td>true<br> false<br> auto </td> <td>Определяет, может ли пользователь перетащить элемент </td> </tr><tr class="newtag"><td>irrelevant </td> <td>true<br> false </td> <td>Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается </td> </tr><tr class="newtag"><td>ref </td> <td>URL / id </td> <td>Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено) </td> </tr><tr class="newtag"><td>registrationmark </td> <td>reg_mark </td> <td>Определяет зарегистрированный знак элемента </td> </tr><tr class="newtag"><td>template </td> <td>URL / id </td> <td>Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу </td> </tr></tbody></table><h3>Структура разметки страницы в HTML5</h3> <p>При использовании <b>обычной структуры страницы </b> сайта можно выделить несколько типичных блоков, описываемых тегом div с соответствущим классом (<div class="header">, <div class="nav">, <div class="aside">, <div class="section">, <div class="footer"> и пр.).</p> <p>При использовании <b> с применением HTML5 </b>, эти блоки описываются структурными тегами <header>, <nav>, <aside>, <section>, <footer> и пр., что очень упрощает жизнь разработчикам. Данные теги являются структурными эквивалентами и они делают разметку более наглядной и простой в понимании. Также, по умолчанию, они являются инлайновыми, поэтому их надо cделать блочными с помощью display:block.</p> <p>Данные теги важно применять правильно. Чтобы не запутаться когда и какой применять, в сети существует замечательный ресурс , а также можно воспользоваться следующим алгоритом:</p> <p><b>Все современные браузеры (Опера, Сафари, Хром, Мозила, ИЕ9+) уже имеют поддержку HTML5 </b>. Для браузеров IE8 и меньше следует подключать javascript , который "научит" их понимать новые теги. Код для его подключения ниже:</p><p> <!--> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <!--> </p><p>В верстке макетов при мы перешли на использование нового стандарта HTML5. <b>Если вы хотите заказать сайт или отдельно </b>, можете оставить заявку, написав по любому из адресов, указанных на странице или через форму обратной связи. Будем рады сотрудничеству!</p> <p>Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно - ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.</p> <p>Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:</p> <p> <div id="msglist" class="user_bob"></div></p> <p>Наш JavaScript код будет искать элемент с ID <b>msglist </b>. С помощью скрипта мы будем искать классы, начинающиеся с <b>user_ </b>, а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.</p> <p>Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):</p> <p> <div id="msglist" class="user_bob list-size_5 maxage_180"></div></p> <p>Наш атрибут <b>class </b> очень быстро загромождается - проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.</p> <h2>Data-атрибуты HTML5</h2> <p>К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом <b>data- </b>, например:</p> <p> <div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div></p> <p>Пользовательские data-атрибуты:</p> <ul><li>это строки - в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript</li> <li>должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов</li> <li>относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов</li> </ul><h3>Пример №1 обработки на JavaScript: getAttribute и setAttribute</h3> <p>Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:</p> <p>Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);</p> <p>Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.</p> <h3>Пример №2 обработки на JavaScript: метод data() библиотеки jQuery</h3> <p>Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс <b>data- </b>, так что подобный код будет работать:</p> <p>Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);</p> <p>Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от <b>setAttribute </b>, метод <b>data() </b> физически не заменит атрибут <b>data-list-size </b> - если вы проверите его значение вне jQuery - оно все еще останется равным 5.</p> <h3>Пример №3 обработки на JavaScript: API для работы с наборами данных</h3> <p>И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов <b>data- </b>, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:</p> <table border="0"><tbody><tr><td><b>Имя атрибута </b> </td> <td><b>Имя в API набора данных </b> </td> </tr><tr><td>data-user </td> <td>user </td> </tr><tr><td>data-maxage </td> <td>maxage </td> </tr><tr><td>data-list-size </td> <td>listSize </td> </tr></tbody></table><p>Наш новый код:</p> <p>Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;</p> <p>Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь , но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> </div> <div class="full-place" data-place="article_before_social" data-priority="0" style="width: 100%;"></div> <div class="single-share"> <div class="single-share__top"> <div class="single-share__title">Понравилась статья? <span>Поделитесь с друзьями!</span> </div> <a href="#" onClick="window.open('http://www.facebook.com/sharer.php?s=100&p%5Btitle%5D=https%3A%2F%2Fgadgets-room.ru%2Fglobalnye-atributy-html-vvedenie-v-formy-html5-i-novye-atributy-elementy-list-i%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share__facebook"> <i class="fa fa-facebook-official"></i> <span>Поделиться в <b>Facebook</b> </span> </a> </div> </div> <div class="full-place" data-place="article_above_similar_articles" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_above_similar_articles_2" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_under_social" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="fixed_bottom_right" data-priority="0" style="width: 100%;"></div> <div class="read-more"> <div class="read-more__title">Читайте также</div> <div class="block-row read-more__box"> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/4050045de7b41f876163b90f521774c0.jpg" alt="Кто такой SEO-специалист и чем он занимается?" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/dolzhnostnye-obyazannosti-seo-specialista-kto-takoi-seo-specialist-i-chem-on/">Кто такой SEO-специалист и чем он занимается?</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/18654c78806f2ac4e5104369f687b2cf.jpg" alt="Как на Mac включить «Быстрый просмотр» для любых файлов" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/mac-os-x-prosmotr-izobrazhenii-kak-na-mac-vklyuchit-bystryi-prosmotr-dlya-lyubyh/">Как на Mac включить «Быстрый просмотр» для любых файлов</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/8b63743004e8b5d55f88a965443efc52.jpg" alt="Как выглядят Wi-Fi волны" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/kak-vyglyadit-vai-fai-kak-vyglyadyat-wi-fi-volny-kratkaya-instrukciya-po/">Как выглядят Wi-Fi волны</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/805ceff88a61d4457eb2ee382755c918.jpg" alt="Nokia: взлеты и падения финской компании" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/nokian-gde-proizvodyat-nokia-vzlety-i-padeniya-finskoi-kompanii-novaya-era/">Nokia: взлеты и падения финской компании</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/e92552e1924c562395f60cdc1547c932.jpg" alt="Как маскируют залоченные айфоны при продаже Сломался слот" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/kak-maskiruyut-zalochennye-aifony-pri-prodazhe-kak-maskiruyut/">Как маскируют залоченные айфоны при продаже Сломался слот</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/28cf212926e97430d63d6f1750bf2d92.jpg" alt="Переадресация на другой номер - инструкции для всех операторов" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/kak-perenapravit-zvonok-na-drugoi-nomer-pereadresaciya-na-drugoi-nomer--/">Переадресация на другой номер - инструкции для всех операторов</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/0303b9bf9b2357f84a66f15213691d74.jpg" alt="Что такое переадресация вызова, как работает и для чего она нужна" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/v-kakih-sluchayah-govoryat-zvonok-pereadresovan-chto-takoe-pereadresaciya-vyzova-kak-rabotaet-i-dlya-cheg/">Что такое переадресация вызова, как работает и для чего она нужна</a> </div> </div> </div> <div class="block-column _half"> <div class="row-gui"> <div class="row-gui__image"> <img src="/uploads/06dd839e6e8fc06edfefc026445f4166.jpg" alt="Как на мегафоне скрыть номер?" / loading=lazy loading=lazy> </div> <div class="row-gui__content"> <a class="row-gui__link" href="https://gadgets-room.ru/es/kak-skryt-nomer-antiaon-ot-megafona-kak-na-megafone-skryt-nomer-kak/">Как на мегафоне скрыть номер?</a> </div> </div> </div> </div> </div> <div class="full-place" data-place="article_under_similar_articles" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_under_similar_articles_2" data-priority="0" style="width: 100%;"></div> <style> #mc-container { margin: 0px 30px; } </style> <section class="comments"> <div class="cc mc-c mc-loggedin"> <div class="mc-comments"> </div> </div> </section> <div class="full-place" data-place="article_after_comments" data-priority="0" style="width: 100%;"></div> </div> <div class="full-place" data-place="article_desktop_fixed" data-priority="0" style="width: 100%;"></div> </div> <aside class="sidebar"> <div class="full-place" data-place="articles_sidebar_top" data-priority="1" style="width: 100%;"></div> <div class="sidebar__widget day-sovet"> <h3 class="day-sovet__hd">Consejo del día</h3> <div class="block-gui"> <div class="block-gui__image"> <img src="/uploads/8dcc823d330e1cc7abb3d628d1c2bea9.jpg" alt="Lo que necesita saber sobre los trabajos de verificación de toda Rusia (VPR)" / loading=lazy loading=lazy> </div> <div class="block-gui__content"> <a class="block-gui__link" href="https://gadgets-room.ru/es/v-auditoriyah-provedeniya-vpr-dolzhny-byt-chto-nado-znat-o/">Lo que necesita saber sobre los trabajos de verificación de toda Rusia (VPR)</a> </div> </div> <!-- /next_post --> </div> <div class="sidebar__widget"> <div class="block-title _left">Articulos populares</div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/4d8ccbb30e6345635981e38544441d7c.jpg" alt="Revisa la tableta Digma ¿Qué tableta Digma de 10 pulgadas es mejor?" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="https://gadgets-room.ru/es/digma-planshet-otzyvy-digma-planshet-otzyvy-kakoi-planshet-digma-10/">Revisa la tableta Digma ¿Qué tableta Digma de 10 pulgadas es mejor?</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/9409383c8385373b724a74dcf5bb7292.jpg" alt="¿Qué son los datos personales disponibles públicamente y qué tipo de información se relaciona con ellos?" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="https://gadgets-room.ru/es/obshchedostupnye-dannye-chto-takoe-obshchedostupnye-personalnye-dannye-i-kakie-vidy/">¿Qué son los datos personales disponibles públicamente y qué tipo de información se relaciona con ellos?</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/10a622c97eadb551f544828ad3ad6bc4.jpg" alt="Cómo actualizar una aplicación existente en la App Store Deshabilitar las actualizaciones específicas de la aplicación" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="https://gadgets-room.ru/es/ruchnoe-i-avtomaticheskoe-obnovlenie-prilozhenii-na-iphone-kak/">Cómo actualizar una aplicación existente en la App Store Deshabilitar las actualizaciones específicas de la aplicación</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/279d4c81128c212585fee3b91dd2550b.jpg" alt="Accesorios para fotos de iPhone: fuentes de luz externas" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="https://gadgets-room.ru/es/kak-vklyuchit-vspyshku-kogda-zvonyat-na-aifon-fotoaksessuary-dlya-iphone/">Accesorios para fotos de iPhone: fuentes de luz externas</a> </div> </div> <div class="row-gui _sidebar"> <div class="row-gui__image _sidebar"> <img src="/uploads/ee9710037bbf1a6657968a418987caf4.jpg" alt="¿Debería elegir Time Capsule, AirPort Extreme o AirPort Express?" loading=lazy loading=lazy> </div> <div class="row-gui__content _sidebar"> <a class="row-gui__link" href="https://gadgets-room.ru/es/apple-time-capsule-chto-eto-i-dlya-chego-nuzhno-chto-vybrat-time-capsule-airport-extreme/">¿Debería elegir Time Capsule, AirPort Extreme o AirPort Express?</a> </div> </div> </div> <div class="full-place" data-place="article_sidebar_under_vk_2" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="articles_sidebar_under_vk_widget_3" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="articles_sidebar_4" data-priority="0" style="width: 100%;"> </div> <div class="full-place" data-place="articles_sidebar_under_vk_widget" data-priority="0" style="width: 100%;"></div> </aside> </div> <footer class="footer"> <div class="footer__wrapper"> <div class="footer__left"> <div class="footer__copyright">© 2021.</div> </div> <div class="footer-menu"> <a class="footer-menu__item" data-type="href" href="">SOBRE NOSOTROS</a> <a class="footer-menu__item" data-type="href" href="">CONTACTOS</a> </div> <div class="footer-menu"> <a class="footer-menu__item" data-type="href" href="">PUBLICIDAD EN EL SITIO WEB</a> <a class="footer-menu__item" href="https://gadgets-room.ru/es/sitemap.xml">MAPA DEL SITIO</a> </div> <div class="footer__right"> <div class="social-buttons _footer"> <a class="social-buttons__item _vk" href="" target="_blank">Vkontakte</a> <a class="social-buttons__item _fb" href="https://facebook.com/" target="_blank">Facebook</a> <a class="social-buttons__item _ok" href="" target="_blank">Odnoklassniki</a> <a class="social-buttons__item _pt" href="" target="_blank">Pinterest</a> </div> </div> </div> <div class="full-place" data-place="article_before_footer" data-priority="0" style="width: 100%;"></div></footer> <div class="full-place" data-place="article_consultant" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="common_mobile_sticky_bottom" data-priority="0" style="width: 100%;"></div> <script data-rocketsrc="/assets/sovets-2017/js/app-20180109133831.js" type="text/rocketscript"></script> </main> <div class="scroll-up"> <div id="toTop"><span class="up_b"></span> Arriba</div> </div> <div class="full-place" data-place="article_before_body" data-priority="0" style="width: 100%;"></div> </body> </html>