DevSite 页面的顶部标题必须是 <h1>
。网页正文不得包含其他 <h1>
,以免混淆非视觉浏览器。
nbgenerate
工具可将 DevSite HTML 和 Markdown 内容和模板转换为与 Colab 兼容的 Jupyter 笔记本。
尺寸
标题 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>
Markdown
# 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>
Markdown
## 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>
Markdown
## Heading 2 {: data-text='Custom text for the ToC'}
在目录中的表格中添加标题
您还可以在表格标题 (<th>
) 中放置 <h2>
或 <h3>
,以强制将表格添加到目录中。在表格标题中,<h2>
和 <h3>
的样式与普通文本一样,因此读者无法区分。
点击即可复制的链接
在文档页面(而非像大多数着陆页那样的“全宽”页面)上,除了 <h1>
之外的标题还会显示一个用于复制链接的按钮,该按钮仅在您将光标悬停在标题上时才会显示。
如需为特定标题停用此按钮,请对该标题应用 class="no-link"
。
标题 4
标题 5
HTML
<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>
Markdown
## Heading 4 {:.no-link}
### Heading 5 {:.no-link}
如需强制在原本不会显示链接按钮的标题(例如 <h1>
或全宽页面上的任何标题)上显示链接按钮,请向标题添加 class="add-link"
。
标题 1
HTML
<h1 class="add-link">Heading 1</h1>
Markdown
# 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.
Markdown
## 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.
编号的子标题
如需为紧随 <h2>
标题之后的 <h3>
标题添加序列号前缀,请为每个 <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.
Markdown
## 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.
编号标题
由段落、列表、表格、图片、视频、微件组成的复杂内容。
编号的子标题
由段落、列表、表格、图片、视频、微件组成的复杂内容。
编号的子标题
由段落、列表、表格、图片、视频、微件组成的复杂内容。
编号的子标题
由段落、列表、表格、图片、视频、微件组成的复杂内容。