Самый верхний заголовок страницы DevSite должен быть <h1> . Тело страницы не должно содержать еще один <h1> , чтобы не запутать невизуальные браузеры. Инструмент nbgenerate преобразует контент и шаблоны DevSite HTML и Markdown в блокноты Jupyter, совместимые с Colab.
Размеры
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Уценка
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Оглавление
В DevSite <h2> и <h3> автоматически добавляются в оглавление «на этой странице» (ToC).
Скрыть заголовки из оглавления
Чтобы предотвратить добавление заголовка (например, «Заголовок 2» и «Заголовок 3» в приведенном выше разделе, которые не отображаются в оглавлении), примените class="hide-from-toc" .
Заголовок 2
Заголовок 3
HTML
<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>
Уценка
## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}
Настройте текст заголовка в оглавлении
Если вы хотите, чтобы текст в оглавлении отличался от фактического заголовка (как в этом разделе!), установите атрибут data-text для заголовка:
Заголовок 2
HTML
<h2 data-text="Custom text for the ToC">Heading 2</h2>
Уценка
## Heading 2 {: data-text='Custom text for the ToC'}
Включите заголовки в таблицы в оглавлении.
Вы также можете поместить <h2> или <h3> внутри заголовка таблицы ( <th> ), чтобы принудительно включить таблицу в ToC. Внутри заголовка таблицы <h2> и <h3> оформлены как обычный текст, поэтому читатели не смогут этого понять.
Ссылки, которые можно скопировать по клику
На страницах документации (а не на «полноширинных» страницах, как на большинстве целевых страниц) заголовки, кроме <h1> , также имеют кнопку для копирования ссылки, которая появляется только при наведении курсора на заголовок.
Чтобы отключить эту кнопку для определенного заголовка, примените к заголовку class="no-link" .
Заголовок 4
Заголовок 5
HTML
<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>
Уценка
## Heading 4 {:.no-link}
### Heading 5 {:.no-link}
Чтобы кнопка ссылки отображалась в заголовке, который в противном случае не имел бы ее (скажем, <h1> или любой заголовок на полноразмерной странице), добавьте к заголовку class="add-link" .
Заголовок 1
HTML
<h1 class="add-link">Heading 1</h1>
Уценка
# Heading 1 {:.add-link}
Нумерованные заголовки
Чтобы добавить к заголовкам <h2> последовательные номера для обозначения разделов со сложным содержанием как отдельных этапов многоэтапного процесса, добавьте к каждому заголовку нумерованный класс.
Первый нумерованный заголовок
Сложный контент, состоящий из абзацев, списков, таблиц, изображений, видео, виджетов.
Второй нумерованный заголовок
Сложный контент, состоящий из абзацев, списков, таблиц, изображений, видео, виджетов.
Третий нумерованный заголовок
Сложный контент, состоящий из абзацев, списков, таблиц, изображений, видео, виджетов.
HTML
<h2 class="numbered">First numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Second numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Third numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Уценка
## First numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Second numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Third numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Нумерованные подзаголовки
Чтобы задать последовательные номера заголовкам <h3> , которые следуют за заголовками <h2> , добавьте нумерованный класс к каждому заголовку <h3> .
HTML
<h2 class="numbered">Numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Уценка
## Numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Нумерованный заголовок
Сложный контент, состоящий из абзацев, списков, таблиц, изображений, видео, виджетов.
Нумерованный подзаголовок
Сложный контент, состоящий из абзацев, списков, таблиц, изображений, видео, виджетов.
Нумерованный подзаголовок
Сложный контент, состоящий из абзацев, списков, таблиц, изображений, видео, виджетов.
Нумерованный подзаголовок
Сложный контент, состоящий из абзацев, списков, таблиц, изображений, видео, виджетов.