Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

HTML первые шаги - урок 8 - Универсальные атрибуты тегов

04/12/2019, by Ivan

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

Атрибут id

Атрибут id показывает уникальное имя тега, такие имена не должны повторятся, потому что это может вызвать проблемы при работе с jQuery или Javascript. Вот несколько примеров использования тега id:

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">привет</li>
  <li id="item4">мир</li>
</ul>
...
<div id="header"></div>

Атрибут id можно будет использовать чтобы задавать CSS-стили оформления отдельно для каждого блока, меню, пункта меню или других тегов. Также id используются в Javascript (jQuery).

Атрибут class

Атрибут class показывает принадлежность к классу тегов, как и id класс можно использовать для задания CSS-стилей только для всех тегов этого класса одновременно. То есть если id один, то класс может быть задан одинаковый для многих тегов сразу:

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">привет</li>
  <li class="item">мир</li>
</ul>

Атрибут style

Атрибут style служит для того чтобы писать CSS стили прямо в теге. Можете пока не сильно вдаваться в подробности этого атрибута, его мы подробно разберем в учебнике CSS. Пока напишу только более менее понятные примеры:

...
<div style="width: 200px; height: 100px; background: #dddddd">
Блок
</div>
...
<p style="font-size: 14px; color: #333333">
Текст
</p>

Первый пример выводит блок шириной 200 пикселей, 100 пикселей, фон #dddddd (где-то около серого). Второй пример это абзац текста размером шрифта в 14 пикселей, цветом #333333 (близко к черному, но нет).

Атрибут title

Применяется для всплывающей подсказки, когда мы наводим на элемент на странице:

...
<img src="./images/image.jpg" alt="photo" title="это я" />
...
<a href="html2.html" title="моя страница">Ссылка</a>
...
<h2 title="заголовок">Привет, Мир!</h2>

Конечно есть еще и другие универсальные атрибуты: accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, tabindex. Я думаю вы с ними столкнетесь позже когда будете заниматься версткой мультиязычных сайтов. А пока будет достаточно знать об основных универсальных атрибутах.