『我们可以很简单就拥有个人主页②』插入各类元素让文章丰富多彩·上

December 10, 2020

声明

本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。

如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于如何利用 Markdown 以及简单的 HTML 语法给文章插入媒体文件等其他元素，参考了 WriteFreely 的官方文档中的「Adding HTML」、GitHub 上的一份「Markdown Cheatsheet」以及 HTML 基础教程的内容。

本篇覆盖内容

插入：表格、列表（使用 HTML）、图片

上一篇：内容是主页的基础 下一篇：插入各类元素让文章丰富多彩·下

『我们可以很简单就拥有个人主页』系列目录

① 内容是主页的基础 ② 插入各类元素让文章丰富多彩·上 ③ 插入各类元素让文章丰富多彩·下 ④ 装修主页吧！·基础篇 ⑤ 装修主页吧！·源代码篇 ⑥ 装修主页吧！·文字篇 ⑦ 装修主页吧！·图像篇 ⑧ 装修主页吧！·技巧篇

表格

如果您想要在文章中插入表格，需要用 | 来将每一列的内容分隔开。第一行的 | 之间的内容为表格每一列的标题，在第二行则需使用 --- 作为 | 之间的填充内容来将第一行的标题和后续几行表格内容分隔开。用这样的方法，表格第一列的标题会自动使用标题的强调效果来进行强调。

一般来说，只需要用 | 作为分隔符来分隔同行但不同列的内容即可。但若为了写作时便于自己阅读，您也可以在最左列的内容左边以及最右列的内容右边加上 | 制作表格左右边框，以及每列内容与 | 之间是否空格不会影响表格的呈现。

当然，增加 - 的数量来进行写作界面的排版对齐是完全可行的，但需要注意的是，每一列的 - 至少要有三个。

✎ 例如

输入：

▼ *简单的表格*

标题1|标题2|标题3
---|---|---
a|1|一
b|2|二

▼ *在写作界面也进行排版对齐*

|Header 1|Header 2|Header 3|
|--------|--------|--------|
|   a    |   1    |   a1   |
|   b    |   2    |   b2   |

▼ 「-」必须要有三个以上

标题1|标题2|标题3
--|--|--
a|1|一
b|2|二

效果： ▼ 简单的表格

标题1	标题2	标题3
a	1	一
b	2	二

▼ 在写作界面也进行排版对齐

Header 1	Header 2	Header 3
a	1	a1
b	2	b2

▼ 「-」必须要有三个以上

标题1|标题2|标题3 —|—|— a|1|一 b|2|二

⚠ 制作表格输入的空格无法达到在显示表格时进行排版对齐的效果。

如果您想要设置表格每列的对齐方式，可以通过在 --- 的前后添加 : 的方式来实现：

左对齐：在 --- 的前面加上 :；
居中：在 --- 的前后都加上 :；
右对齐：在 --- 的后面加上 :。

当然，表格的标题以及内容也可以使用上一篇中提到的 Markdown 的强调标记进行文字强调。

✎ 例如

输入：

*左对齐*|~~居中~~|<u>右对齐</u>
:---|:---:|---:
<u>**_~~强调~~_**</u>一下|增加[链接](https://writee.org/)|增加`代码框`

效果：

左对齐	居中	右对齐
强调一下	增加链接	增加`代码框`

但是，您无法使用 Markdown 的列表标记来在表格的某一格里插入列表，这一功能必须通过 HTML 的列表语法来实现。您可以点击下方的折叠行来阅读使用 HTML 插入列表的内容。

HTML 列表

HTML 里的无序列表需要通过 <ul><li>分点内容</li></ul> 的方式添加，您可以通过在 <ul> 和 </ul> 之间添加多个 <li>分点内容</li> 的方式加入任意数量的分点。如果您想要生成有序列表，则需要使用 <ol><li>分点内容</li></ol>。

每个分点，也就是每个 <li> 和 </li> 之间可以添加您想要的元素，这也包括一个列表。您可以通过在某个列表的某一点里添加一个新列表的方式实现列表中的缩进效果。

✎ 例如

输入：

<ul><li>第一点</li>
<li>第二点</li>
<li>第三点
<ul><li>3.1</li>
<li>3.2</li></ul></li>
<li>第四点</li></ul>

<ol><li>第一点</li>
<li>第二点</li>
<li>第三点
<ol><li>3.1</li>
<li>3.2</li></ol></li>
<li>第四点</li></ol>

效果：

第一点
第二点
第三点
- 3.1
- 3.2
第四点

第一点
第二点
第三点
1. 3.1
2. 3.2
第四点

掌握了 HTML 的列表语法后，您就可以在表格中添加列表了。

值得注意的是，我们在普通文本里生成列表的时候根据每一点的内容进行了换行，但是在生成表格时换行就意味着开始了表格内新一行的内容。因此，我们需要在指令中应该换行的地方插入 <br/> 来表示换行。

这一方法也同样适用于想在表格的某一格内输入复数行文字的情况。

✎ 例如

输入：

标题1|标题2
---|---
<ol><li>第一点<br/><ul><li>1.1</li></ul></li></ol>|第一行字；<br/>第二行字。

效果：

标题1	标题2
第一点 1.1	第一行字；第二行字。

图片

在文章中插入图片可以通过多种方式达成：

Markdown：在想要插入图片的位置输入 ![图片名称](图片链接)；
- 「图片名称」的部分可以不填，保持 [] 即可；
HTML：在想要插入图片的位置输入 <img src="图片链接">。

图片链接需要是以图片文件格式（如「.jpg」、「.png」等）结尾的直链。通常您可以在把图片上传到图床网站后在网站自动生成的分享用链接里找到它，也可以通过对着一张网络图片点击鼠标右键，选择「复制图片地址」来复制到这张图的直链。

✎ 例如

输入：

![Writee.org](https://i.postimg.cc/kXM6Z1B8/Writee.png)
![](https://i.postimg.cc/kXM6Z1B8/Writee.png)
<img src=“https://i.postimg.cc/kXM6Z1B8/Writee.png”>

效果： Writee.org

感谢您的阅览。下一篇教程将会介绍~~或许是 iframe 插入太多导致写意读不了剩下部分的 HTML 和 Markdown 语法所以只能拆开单独放在另一章里的~~在文章中插入视频和音频的方法。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.