Tiêu đề trên cùng của trang DevSite phải là <h1>
. Phần nội dung trang không được chứa <h1>
khác để tránh gây nhầm lẫn cho các trình duyệt không hình ảnh.
Công cụ nbgenerate
chuyển đổi nội dung và mẫu HTML và Markdown của DevSite thành sổ tay Jupyter tương thích với Colab.
Kích thước
Tiêu đề 1
Tiêu đề 2
Tiêu đề 3
Tiêu đề 4
Tiêu đề 5
Tiêu đề 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
Mục lục
Trong DevSite, <h2>
và <h3>
sẽ tự động được thêm vào mục lục "trên trang này" (ToC).
Ẩn tiêu đề khỏi mục lục
Để ngăn việc thêm tiêu đề (như "Tiêu đề 2" và "Tiêu đề 3" trong phần trên, không xuất hiện trong mục lục), hãy áp dụng class="hide-from-toc"
.
Tiêu đề 2
Tiêu đề 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}
Tuỳ chỉnh văn bản tiêu đề trong mục lục
Nếu bạn muốn văn bản trong mục lục khác với tiêu đề thực tế (như phần này!), hãy đặt thuộc tính data-text
trên tiêu đề:
Tiêu đề 2
HTML
<h2 data-text="Custom text for the ToC">Heading 2</h2>
Markdown
## Heading 2 {: data-text='Custom text for the ToC'}
Đưa tiêu đề vào các bảng trong mục lục
Bạn cũng có thể đặt <h2>
hoặc <h3>
vào trong tiêu đề bảng (<th>
) để buộc bảng đó vào mục lục. Bên trong tiêu đề bảng, <h2>
và <h3>
được tạo kiểu như văn bản thông thường, vì vậy, người đọc sẽ không thể phân biệt được.
Đường liên kết nhấp để sao chép
Trên các trang tài liệu (không phải trang "đầy đủ chiều rộng" như hầu hết các trang đích), các tiêu đề khác ngoài <h1>
cũng có một nút để sao chép đường liên kết. Nút này chỉ xuất hiện khi bạn di chuột qua tiêu đề.
Để tắt nút này cho một tiêu đề cụ thể, hãy áp dụng class="no-link"
cho tiêu đề đó.
Tiêu đề 4
Tiêu đề 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}
Để buộc nút đường liên kết xuất hiện trên một tiêu đề không có nút đường liên kết (ví dụ: <h1>
hoặc bất kỳ tiêu đề nào trên trang có chiều rộng đầy đủ), hãy thêm class="add-link"
vào tiêu đề đó.
Tiêu đề 1
HTML
<h1 class="add-link">Heading 1</h1>
Markdown
# Heading 1 {:.add-link}
Tiêu đề được đánh số
Để thêm tiền tố cho tiêu đề <h2>
bằng số tuần tự nhằm chỉ định các phần có nội dung phức tạp dưới dạng các bước riêng biệt trong một quy trình nhiều bước, hãy thêm một lớp được đánh số vào mỗi tiêu đề.
Tiêu đề được đánh số đầu tiên
Nội dung phức tạp bao gồm các đoạn văn, danh sách, bảng, hình ảnh, video, tiện ích.
Tiêu đề thứ hai được đánh số
Nội dung phức tạp bao gồm các đoạn văn, danh sách, bảng, hình ảnh, video, tiện ích.
Tiêu đề thứ ba được đánh số
Nội dung phức tạp bao gồm các đoạn văn, danh sách, bảng, hình ảnh, video, tiện ích.
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.
Tiêu đề phụ được đánh số
Để thêm tiền tố cho các tiêu đề <h3>
theo sau tiêu đề <h2>
bằng số thứ tự, hãy thêm một lớp được đánh số vào mỗi tiêu đề <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.
Tiêu đề được đánh số
Nội dung phức tạp bao gồm các đoạn văn, danh sách, bảng, hình ảnh, video, tiện ích.
Tiêu đề phụ được đánh số
Nội dung phức tạp bao gồm các đoạn văn, danh sách, bảng, hình ảnh, video, tiện ích.
Tiêu đề phụ được đánh số
Nội dung phức tạp bao gồm các đoạn văn, danh sách, bảng, hình ảnh, video, tiện ích.
Tiêu đề phụ được đánh số
Nội dung phức tạp bao gồm các đoạn văn, danh sách, bảng, hình ảnh, video, tiện ích.