Text

Heading

使用 <h1>Heading</h1> 可以使用标题标签，同理还有 h2, h3 标签

1
2
3
4
<h1>Level 1 title</h1>
<h2>Level 2 title</h2>
<h3>Level 3 title</h3>
<h5>Level 5 title</h5>

其最终效果类似于下面这段文字：

Level 1 title

Level 2 title

Level 3 title

Level 5 title

Paragraph

使用 <p>paragraph</p> 可以表示一段文本

1
<p>This is a paragraph.</p>

Style

可以使用 <strong> 或者 <b> 标签来加粗一段文字；也可以使用 <em> 或者 <i> 标签来强调(斜体)一段内容

1
2
You can use <strong>strong</strong> or <b>b</b> tag to make content blod. You
also can use <em>em</em> or <i>i</i> tag to emphasis content.

其最终效果类似于下面这段文字：

You can use strong or b tag to make content blod.

You also can use em or i tag to emphasis content.

List

可以使用 <ul> 来表示无需列表，也可以使用 <ol> 来表示有序列表。列表内元素使用 <li> 来包裹

1
2
3
4
5
6
7
8
9
10
11
12
<!-- ordered list -->
<ol>
  <li>绝不意气用事</li>
  <li>绝不漏判任何一件坏事</li>
  <li>绝对裁判的公正漂亮</li>
</ol>

<!-- unordered list -->
<ul>
  <li>卡布达</li>
  <li>金龟次郎</li>
</ul>

其最终效果类似于下面这段文字：

  1. 绝不意气用事
  2. 绝不漏判任何一件坏事
  3. 绝对裁判的公正漂亮
  • 卡布达
  • 金龟次郎

可以使用 <a> 标签来表示一个链接，<a> 有如下几个属性:

  • href: url 路径
  • target: 表示已何种方式打开页面，比如 _blank 表示在新标签页打开
1
<p>This is a link <a href="https://www.baidu.com" target="_blank">Baidu</a></p>

其最终效果类似于下面这段文字：

This is a link Baidu

Image

使用 <img> 标签可以插入图片，<img> 有如下几个属性

  • src: 图片路径
  • alt: 对图片的一段说明，当图片无法加载时会显示这段文字
  • width: 图片宽度
  • height: 图片高度
1
<img src="./img/monitor.avif" alt="This description of image" width="500px" />