模板测试文本 Markdown

这是一篇主题样式测试文章,将涵盖 header/link/img/footnotes/hr/code/pre code/blockquote/bold/italic/table/list/toc 的样式。这篇文章的作者是水八口,一个根正苗红的好人

这是二级标题

二级标题通常用于文章内部的结构梳理,除此之外还有三级至六级标题1。而一级标题一般情况下会是文章标题,所以文章内部最好不要使用一级标题,以防与文章标题重叠,产生不美观的结构。

这是三级标题

二级标题所描述的内容中,若还需要细分,可以使用三级标题,甚至四级标题。

这是四级标题

一般来说我只使用二级和三级标题,能用到四级标题的情况非常少,更别说五级和六级标题了。如果开启了 TOC 功能,这些级别的标题就会自动生成目录,显示在页面的某处,方便读者快速掌握文章脉络和跳步阅读。

图片

如果说博客中最常见的是文字(段落),那么第二重要的应该要数图片了。成语里有个词叫做“图文并茂”,看来非常有必要测试一下图片的显示样式了。

通常写法

![这是 alt](https://i.imgur.com/ob1lPK4.jpg '这是可写可不写的 title')

这是 alt

figure 写法

<figure>
    <img src="https://i.imgur.com/ob1lPK4.jpg" alt="这是 alt" />
    <figcaption>这是可写可不写的 figcaption</figcaption>
</figure>
这是 alt
这是可写可不写的 figcaption

来看看 w3schools 是如何定义 figurefigcaption 的。

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element.
-- w3school

由于 figure 写法在 css 上更有发挥空间,加上 figcaption 的助攻,让图片显示更加友好,所以再很早之前我就全部统一为这种写法2

表格

标题一 标题二 标题三
1.1 1.2 1.3
2.1 2.2
3.1 3.3

列表

这是一个无序列表


这是一个有序列表

  1. 项目一
    • 子项目
  2. 项目二
  3. 项目三
    1. 子项目

这是一个 to-do list


  1. 五级标题和六级标题并不常用。  

  2. 由于 title="" 可写可不写,所以在有 figcaption 的情况下完全被我省略了。如果写了 title="",默认样式是鼠标悬停图片时看到的说明。