前言

HTML （超文本标记语言），用于编写网页代码。

BCOI 的 Markdown 编辑器兼容部分 HTML 代码，所以在这里列出来。下面是 BCOI 用于写 blog 、题解、简介等可以使用的语言： Markdown （默认且主要） 、 LaTeX （用于数学公式）、 HTML（这篇 blog ）。

注意： 这篇 blog 讲的是 HTML 部分标签，不是 HTML 语言。

---

标签的概念

HTML 的内容由 标签 编排。标签是类似这样的：

<标签内容></标签内容>

HTML 的标签都有一前一后（可能有些可以省略“后”）。

注意： BCOI 的编辑器不支持 CSS 美化。

段落和换行

换行

类似 Markdown ， HTML 会自动忽略空格和换行。因此需要标签来换行。换行可以使用 <p> 标签。这是 <p> 标签的格式：

<p>这是一行文字</p>

这就可以在新一行中增加文字。这是现实效果：

这是一行文字

空格

HTML 会合并多余的空格。也就是说，你打了 $100$ 个空格也只会显示一个。这是反面例子：

hello        world!

（ $\texttt{hello}$ 和 $\texttt{world}$ 之间有 $8$ 个空格）显示效果如下：

hello world!

这样只会显示一个。但是使用   就不会合并。例如：

hello        world!

显示效果如下：

hello        world!

会显示 $8$ 个空格。

还可以使用 <pre> 标签保留空格。例如：

<pre>hello        world!</pre>

显示效果如下：

hello        world!

标题

类似 Markdown ， HTML也有 $1$ ~ $6$ 级标题，标签分别是 <h1> ~ <h6> 。例如：

<h1>这是 H1 标题</h1>
<h2>这是 H2 标题</h2>
<h6>这是 H6 标题</h6>
<p>这是正文</p>

显示效果如下：

这是 H1 标题

这是 H2 标题

这是 H6 标题

这是正文

⚠警告

不要全文使用标题，或者用标题强调特别多的文字。这会让读者觉得困扰。

强调

HTML 也有对文字的强调。下面是一些内容：

1. 粗体：使用 <srtong> 标签包围；
2. 斜体：使用 em 标签包围；
3. 下划线：使用 <u> 标签包围；
4. 删除线：使用 <del> 标签包围；
5. 高亮：使用 <mark> 标签包围。

例如：

<em><p>em 斜体</em>
<string><p>strong 加粗</string>
<u><p>u 下划线</u>
<del><p>del 删除</del>
<mark><p>mark 高亮</mark>

显示效果如下：

em 斜体

strong 加粗

u 下划线

del 删除

mark 高亮

代码块

大段代码

HTML 中想要显示大段代码，也可以使用 <pre> 标签。但是显示效果没有 Markdown 的好。例如：

<pre>
#include &lt;iostream&gt;
using namespace std;
int main()
{
	
	return 0;
}
</pre>

显示效果如下（ HTML 会自动忽略 < 和 > ）：

#include <iostream>
using namespace std;
int main()
{
	
	return 0;
}

不能显示代码高亮，也不能方便地复制。

小段代码

如果代码只有一句，可以使用 <code> 标签包围。例如：

这行代码可以输出 "hello world" ：<code>cout << "hello world!";</code>

显示效果如下：

这行代码可以输出 "hello world" ：cout << "hello world!";

区块引用

HTML 使用 <blockquote> 实现和 Markdown 一样的区块显示的效果。引用区块内部可以嵌套。例如：

<blockquote>
  <p>HTML 区块引用的方法是用 <code>&lt;blockquote&gt;</code> 标签包围。</p>
  <blockquote>
    <p>引用区块内部可以嵌套，只需要加上不同数量的标签。</p>
    <p><em>我是内部嵌套区块，我可以使用其他 Markdown 语法哦。</em></p>
    <h3>我是引用区块内使用 3 级标题语法。</h3>
    <pre>
//在引用区块内可以加入代码块
import java.net.URL;
import java.util.Arrays;
import java.util.Date;
import java.util.Set;
    </pre>
  </blockquote>
</blockquote>

显示效果为：

HTML 区块引用的方法是用 <blockquote> 标签包围。

引用区块内部可以嵌套，只需要加上不同数量的标签。

我是内部嵌套区块，我可以使用其他 Markdown 语法哦。

我是引用区块内使用 3 级标题语法。

//在引用区块内可以加入代码块
import java.net.URL;
import java.util.Arrays;
import java.util.Date;
import java.util.Set;
    

列表

一、无序列表（对应 MD 的 - 或 *）

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

效果：

• 苹果
• 香蕉
• 橙子

等同于 Markdown：

- 苹果
- 香蕉
- 橙子

---

二、有序列表（对应 MD 的 1.）

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

效果：

1. 第一步
2. 第二步
3. 第三步

等同于 Markdown：

1. 第一步
2. 第二步
3. 第三步

---

三、嵌套列表（对应 MD 的多级缩进）

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ol>
      <li>胡萝卜</li>
      <li>菠菜</li>
    </ol>
  </li>
</ul>

效果：

• 水果
  • 苹果
  • 香蕉
• 蔬菜
  1. 胡萝卜
  2. 菠菜

等同于 Markdown：

- 水果
  - 苹果
  - 香蕉
- 蔬菜
  1. 胡萝卜
  2. 菠菜

链接

在 HTML 中嵌入链接，可以使用 <a> 标签。格式：

<a href="链接">提示</a>

例如：

<a href="https://www.bcoi.cn/">BCOI</a>

显示效果如下

BCOI

图片

在 HTML 中嵌入图片可以使用 <img> 标签。格式：

<img src="来源" (width=大小 px)>图片说明</img>

width 项可选。例如：

<img src="https://www.bcoi.cn/nav_logo_dark.png"></img>

显示效果如下：

（但是这个“图片说明”有点奇怪）

分割线

在 HTML 中，可以通过 <hr> 标签创建分割线。例如：

<hr>

显示效果如下：

---

（以上是显示效果）

---

以上都是 Markdown 可以实现的内容，而且 Markdown 的实现简单得多。 HTML 的优势在于下半部分。

Markdown 不能实现的部分

文本扩展

文本扩展包括字体、颜色、大小等。在 HTML 中，可以使用 <font> 标签来实现。格式：

<font face="字体" size=大小 color="颜色">这是一段文字</font>

注意： <font> 标签在 HTML5 已经过时。但在 BCOI 还能使用。

字体：需要注意电脑是否安装了改字体。

大小：$1$ ~ $7$ 之间的整数。

颜色：颜色英文或是 16 进制颜色。

例如：

<font face="华文楷体" size=7 color="red">权威</font>

显示效果如下：

权威

洛谷中难度 $16$ 进制颜色：

入门：#fe4c61
普及-：#f39c11
普及/提高+：#ffc116
普及+/提高：#52c41a
提高+/省选-：#3498db
省选/NOI-：#9d3dcf
NOI/NOI+/CTSC：#0e1d69

居中显示

只需要使用 <center> 标签包围。例如：

<center>
  <h1>鸡你太美</h1>
</center>

显示效果如下：

鸡你太美

折叠内容

隐藏内容，需要按照下面的格式：

<details>
<summary>提示</summary>
  要隐藏的内容
</details>

例如：

<details>
<summary>hello</summary>
  只因你太美
</details>

显示效果如下：

hello

只因你太美

提示

需要提示的话，可以用 <abbr> 标签。例如：

<abbr title="只因你太美">HTML</abbr>

显示效果如下：

HTML
（鼠标悬停看提示）