Оформление
Заголовки
Заголовок 1 уровня <h1>
Заголовок 2 уровня <h2>
Заголовок 3 уровня <h3>
Заголовок 4 уровня <h4>
Заголовок 5 уровня <h5>
Заголовок 6 уровня <h6>
<h1>Заголовок 1 уровня</h1> <h2>Заголовок 2 уровня</h2> <h3>Заголовок 3 уровня</h3> <h4>Заголовок 4 уровня</h4> <h5>Заголовок 5 уровня</h5> <h6>Заголовок 6 уровня</h6> <!-- Применить к тексту стили заголовка можно также с помощью классов: --> <div class="h1"></div> <div class="h2"></div> <div class="h3"></div>
Списки
Маркированные <li>
- Unordered list
<ul> - List element
- Across the sea of space, the stars are other suns.
- Science cuts two ways, of course; its products can be used for both good and evil. But there’s no turning back from science. The early warnings about technological dangers also come from science.
Нумерованные <ol>
- Ordered list
<ol> - List element
- The dreams of yesterday are the hopes of today and the reality of tomorrow.
- Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.
Вложенные
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Смешанные
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Список описаний <dl>, <dt> и <dd>
- Definition term
<dt> - Definition
<dd> - Earth
- A kick-ass planet.
- Pluto
- A kick-ass former planet.
- Space Ipsum
- NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.
Код
Инлайн: <code>inline code<code>
Блок:
<pre>some code...</pre>
Элементы текста
- anchor link
<a> - abbreviation: SASS <abbr>
- citation: A Study in Scarlet <cite>
- Here’s the
<code>element - deleted text:
Episodes I, II, III<del> - definition: The definition element is the element being defined inline. <dfn>
- emphasis <em>
- inserted text <ins>
- keyboard input: control + space <kbd>
- mark element <mark>
- meter:
awesomeness <meter> - progress: <progress>
- quotation (short):
You just gotta believe!
<q> - quotation within a quotation (short):
Yo dawg, I heard you like quotes so I put
<q>this quote
within this quote. - strikethough:
Lance Armstrong remains steroid-free.<s> - sample text: Error <samp>
- small: Hydrogen <small>
- small within small: Hydrogen Hydrogen <small>
- strong: The Hammer <strong>
- subscript: Lower 0123 <sub>
- superscript: I need a good superman joke to go here. 0123 <sup>
- time: <time>
- underline: Never underline anything. <u>
- variable: cat + dog = catdog <var>
Таблицы
Таблица в пользовательском тексте
Не требует специальной разметки, но должна распологаться в блоке контента <div class="b-ugc">
| Наименование | Цена за 100 мм шва |
|---|---|
| Черновая сталь | 9,38 руб. |
| Нержавеющая сталь / алюминий | 12,19 руб. |
<div class="b-ugc"> <div class="b-ugc__table"> <table> <thead> <tr> <th>Наименование</th> <th>Цена за 100 мм шва</th> </tr> </thead> <tbody> <tr> <td>Черновая сталь</td> <td>9,38 руб.</td> </tr> <tr> <td>Нержавеющая сталь / алюминий</td> <td>12,19 руб.</td> </tr> </tbody> </table> </div> </div>
Адаптивные таблицы
| Фамилия | Имя | Отчество |
|---|---|---|
| Пашков | Сергей | Владимирович |
| Лобанов | Петр | Богданович |
| Воронов | Святослав | Владимирович |
<table class="b-tableShort b-tableShort_multiple"> <tr class="b-tableShort__line b-tableShort__line_head"> <th class="b-tableShort__cell b-tableShort__cell_title">Фамилия</th> <th class="b-tableShort__cell b-tableShort__cell_title">Имя</th> <th class="b-tableShort__cell b-tableShort__cell_title">Отчество</th> </tr> <tr class="b-tableShort__line"> <td data-label="Фамилия" class="b-tableShort__cell b-tableShort__cell_option" > <span>Пашков</span> </td> <td data-label="Имя" class="b-tableShort__cell b-tableShort__cell_value" > <span>Сергей</span> </td> <td data-label="Отчество" class="b-tableShort__cell b-tableShort__cell_value" > <span>Владимирович</span> </td> </tr> <tr class="b-tableShort__line"> <td data-label="Фамилия" class="b-tableShort__cell b-tableShort__cell_option" > <span>Лобанов</span> </td> <td data-label="Имя" class="b-tableShort__cell b-tableShort__cell_value" > <span>Петр</span> </td> <td data-label="Отчество" class="b-tableShort__cell b-tableShort__cell_value" > <span>Богданович</span> </td> </tr> <!-- ... --> </table>
Кнопки
Обычные
<div class="b-page__btnRow"> <button class="b-btn b-btn_primary" type="button">Основная</button> <button class="b-btn b-btn_secondary" type="button">Второстепенная</button> <button class="b-btn b-btn_transparent" type="button">Прозрачная</button> <button class="b-btn b-btnLink" type="button">Ссылка</button> </div>