Типографика

:construction: Страница не закончена. Редактировать

Цитаты

UserName Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
<blockquote>
    <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</blockquote>

<blockquote>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</blockquote>

Figure

Описание картинки
Описание картинки
<figure>
    <img src="https://imgholder.ru/300" alt="Описание картинки">
    <figcaption>Описание картинки</figcaption>
</figure>

Заголовоки

Заголовок h1 с мелким текстом и ссылкой

Заголовок h2 с мелким текстом и ссылкой

Заголовок h3 с мелким текстом и ссылкой

Заголовок h4 с мелким текстом и ссылкой

Заголовок h5 с мелким текстом и ссылкой
Заголовок h6 с мелким текстом и ссылкой
<h1>Заголовок h1 <small>с мелким текстом</small> и <a href="#">ссылкой</a></h1>
<h2>Заголовок h2 <small>с мелким текстом</small> и <a href="#">ссылкой</a></h2>
<h3>Заголовок h3 <small>с мелким текстом</small> и <a href="#">ссылкой</a></h3>
<h4>Заголовок h4 <small>с мелким текстом</small> и <a href="#">ссылкой</a></h4>
<h5>Заголовок h5 <small>с мелким текстом</small> и <a href="#">ссылкой</a></h5>
<h6>Заголовок h6 <small>с мелким текстом</small> и <a href="#">ссылкой</a></h6>
Блок с классом h1 с мелким текстом и ссылкой
Блок с классом h2 с мелким текстом и ссылкой
Блок с классом h3 с мелким текстом и ссылкой
Блок с классом h4 с мелким текстом и ссылкой
Блок с классом h5 с мелким текстом и ссылкой
Блок с классом h6 с мелким текстом и ссылкой
<div class="h1">Блок с классом h1 <small>с мелким текстом</small> и <a href="#">ссылкой</a></div>
<div class="h2">Блок с классом h2 <small>с мелким текстом</small> и <a href="#">ссылкой</a></div>
<div class="h3">Блок с классом h3 <small>с мелким текстом</small> и <a href="#">ссылкой</a></div>
<div class="h4">Блок с классом h4 <small>с мелким текстом</small> и <a href="#">ссылкой</a></div>
<div class="h5">Блок с классом h5 <small>с мелким текстом</small> и <a href="#">ссылкой</a></div>
<div class="h6">Блок с классом h6 <small>с мелким текстом</small> и <a href="#">ссылкой</a></div>

Списки

Ненумерованный список

  • Пункт 01
  • Пункт 02
  • Пункт 03
    • Подпункт 01
    • Подпункт 02
      • ПодПодпункт 01
      • ПодПодпункт 02
  • Пункт 04
  • Пункт 05
<ul>
    <li>Пункт 01</li>
    <li>Пункт 02</li>
    <li>
        Пункт 03
        <ul>
            <li>Подпункт 01</li>
            <li>
                Подпункт 02
                <ul>
                    <li>ПодПодпункт 01</li>
                    <li>ПодПодпункт 02</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Пункт 04</li>
    <li>Пункт 05</li>
</ul>

Нумерованный список

  1. Пункт 01
  2. Пункт 02
  3. Пункт 03
    1. Подпункт 01
    2. Подпункт 02
      1. ПодПодпункт 01
      2. ПодПодпункт 02
  4. Пункт 04
  5. Пункт 05
<ol>
    <li>Пункт 01</li>
    <li>Пункт 02</li>
    <li>
        Пункт 03
        <ol>
            <li>Подпункт 01</li>
            <li>
                Подпункт 02
                <ol>
                    <li>ПодПодпункт 01</li>
                    <li>ПодПодпункт 02</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Пункт 04</li>
    <li>Пункт 05</li>
</ol>

Unstyled

  • Пункт 01
  • Пункт 02
  1. Пункт 01
  2. Пункт 02
<ul class="unstyled">
    <li>Пункт 01</li>
    <li>Пункт 02</li>
</ul>
<ol class="unstyled">
    <li>Пункт 01</li>
    <li>Пункт 02</li>
</ol>

Исходный код

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

pre>code

<html>
    <head>
    </head>
    <body>
        <div class="comeclass"> текст <div>
    </body>
</html>
<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>

<pre><code>&lt;html>
    &lt;head>
    &lt;/head>
    &lt;body>
        &lt;div class="comeclass"> текст &lt;div>
    &lt;/body>
&lt;/html></code></pre>

Строчные теги

Тег: a

Тег: abbr и abbr с заголовком

Тег: b

Тег: cite

Тег: code

Тег: em

Тег: del

Тег: dfn и dfn с тултипом

Тег: i

Тег: ins

Тег: kbd

Тег: mark

Тег: q

Тег: q с цитатаой

Тег: s

Тег: samp

Тег: small

Тег: span

Тег: strong

Тег: sub

Тег: sup

Тег: u

Тег: var

<p>Тег: <a href="#">a</a></p>
<p>Тег: <abbr>abbr</abbr> и <abbr title="Аббревиатура">abbr</abbr> с заголовком</p>
<p>Тег: <b>b</b></p>
<p>Тег: <cite>cite</cite></p>
<p>Тег: <code>code</code></p>
<p>Тег: <em>em</em></p>
<p>Тег: <del>del</del></p>
<p>Тег: <dfn>dfn</dfn> и <dfn title="Текст заголовка">dfn с тултипом</dfn></p>
<p>Тег: <i>i</i></p>
<p>Тег: <ins>ins</ins></p>
<p>Тег: <kbd>kbd</kbd></p>
<p>Тег: <mark>mark</mark></p>
<p>Тег: <q>q</q></p>
<p>Тег: <q>q <q> с </q> цитатаой</q></p>
<p>Тег: <s>s</s></p>
<p>Тег: <samp>samp</samp></p>
<p>Тег: <small>small</small></p>
<p>Тег: <span>span</span></p>
<p>Тег: <strong>strong</strong></p>
<p>Тег: <sub>sub</sub></p>
<p>Тег: <sup>sup</sup></p>
<p>Тег: <u>u</u></p>
<p>Тег: <var>var</var></p>