代码教程

你好啊，欢迎来到代码教程！=)

在这里，你可以发现一些对你编写文档有帮助的代码。如果你运用的好，你可以通过它们使你的文章观感更好！=)

在极为常用的代码处，我们会用红色标题高亮；

在很不常用而仅仅只是略微介绍的代码处，我们会用蓝色标题说明；

在正常的标题处，我们会用青色标题显示。

你可以在你的个人沙盒测试你学到的代码哦！=)

这就是本文的目录：

前言
--

* 代码
* 效果

这句话在前面！<div>这句话在后面，但是由于有div的辅助，它会被移到下一行。</div>

这句话在前面！这句话在后面，但是由于有div的辅助，它会被移到下一行。
代码示例 1-1

* 代码
* 效果

这句话在前面！<span>这句话在后面，虽然有span，但是它仍然不会被移走。</span>

这句话在前面！这句话在后面，虽然有span，但是它仍然不会被移走。
代码示例 1-2

通过这两个示例，我们可以很容易发现`<div>`与`<span>`的区别：`<div>`会给其中的内容自动换行，而`<span>`不会。这是由于，div的主要作用对象为包括文本及其所在的整行背景在内的整体，而span的主要作用对象仅为文本。font标签的作用基本与span相同，也不会使文本间自动换行，故不再举例展示。

选择了合适的属性盒，接下来便需要向属性盒中填充属性标签。

属性标签有很多种，会分别在后面介绍；但你要知道的是，属性标签中的多个内容需要用“`;`”(英文分号)隔开。

#### 属性标签：class

属性标签`class`主要用于显示在社区CSS或JS中导入的内容，例如下面的例子。

* 代码
* 效果

<span class="black">这段话使用了来自萌娘百科的黑幕效果。</span>
##### 　附注

在`<div>`中，这个效果不可用。

这段话使用了来自萌娘百科的黑幕效果。
代码示例 1-3

#### 属性标签：title

属性标签`title`可以设置鼠标悬停在文字上时显示的文字，效果可以见下。

* 代码
* 效果

<span title="看到我了吗？">鼠标悬停在这段文本上试试？</span>

鼠标悬停在这段文本上试试？
代码示例 1-4

#### 属性标签：style

属性标签`style`是在文章创作中**经常被使用**的一个属性标签，可以修改文字的颜色、位置、大小、鼠标悬停样式等。有关属性标签`style`可用的内容，我们会在下方详细讲解。

##### color (文本颜色设定)

你可以通过`color`来设定文本的颜色，具体方法见下：

* 代码
* 效果

<span style="color:red;">色</span><span style="color:blue;">彩</span><span style="color:green;">斑</span><span style="color:gray;">斓</span>

色彩斑斓
代码示例 1-5

我们可以看到，通过`color:颜色英文`就可以设定文本的颜色。实际上，除了输入颜色的英文，还可以通过**十六进制颜色码**(可使用**十六进制的rgb**或**十进制的rgba**)来设定自定义的颜色。下面就是两个例子。

* 代码
* 效果

<span style="color:#FF9900;">自定义的橙色=)</span>
##### 　附注

使用rgb方法来设定自定义颜色时，不要忘记加“#”了。

自定义的橙色=)
代码示例 1-6

* 代码
* 效果

<span style="color:rgba(255,153,0,0.5);">自定义的橙色，而且变浅了=)</span>
##### 　附注

使用时要注意透明度正常情况下是1，用小数来表示透明。
诶？试试用鼠标刮一下右边？特别浅的文字也可以用鼠标刮开！

自定义的橙色，而且变浅了=)
代码示例 1-7

##### font-size (文本大小设定)

`font-size`可以修改文字的大小，一般情况下没什么用，基本可以用`<big>`代替。

* 代码
* 效果

<span style="font-size:20pt;">大号文本</span><span style="font-size:5pt;">小号文本</span><br><big><big><big>还是大号文本</big></big></big><small><small><small>还是小号文本</small></small></small>

大号文本小号文本
还是大号文本还是小号文本
代码示例 1-8

##### cursor (鼠标样式设定)

`cursor`可以修改当鼠标指针悬浮于文字上时，鼠标指针所显示的样式。

以下例子直接使用了Backrooms Wiki中使用的代码：

* 代码
* 效果

<span style="cursor:default">default</span> <span style="cursor:context-menu">context-menu</span><br><span style="cursor:help">help</span> <span style="cursor:pointer">pointer</span><br><span style="cursor:progress">progress</span> <span style="cursor:wait">wait</span><br><span style="cursor:cell">cell</span> <span style="cursor:crosshair">crosshair</span><br><span style="cursor:text">text</span> <span style="cursor:vertical-text">vertical-text</span><br><span style="cursor:alias">alias</span> <span style="cursor:copy">copy</span><br><span style="cursor:move">move</span> <span style="cursor:no-drop">no-drop</span><br><span style="cursor:not-allowed">not-allowed</span> <span style="cursor:grab">grab</span><br><span style="cursor:grabbing">grabbing</span> <span style="cursor:all-scroll">all-scroll</span><br><span style="cursor:col-resize">col-resize</span> <span style="cursor:row-resize">row-resize</span><br><span style="cursor:n-resize">n-resize（可将n替换为e/s/w/ne/nw/se/sw/ew/ns/nesw/nwse，不再展示）</span><br><span style="cursor:zoom-in">zoom-in</span> <span style="cursor:zoom-out">zoom-out</span>
##### 　附注

部分鼠标指针在一些系统中可能显示为一种或显示为默认指针。若要使用，建议选取通用性更高的指针。

default context-menu
help pointer
progress wait
cell crosshair
text vertical-text
alias copy
move no-drop
not-allowed grab
grabbing all-scroll
col-resize row-resize
n-resize（可将n替换为e/s/w/ne/nw/se/sw/ew/ns/nesw/nwse，不再展示）
zoom-in zoom-out
代码示例 1-9

## 更多基本Wikitext

Wikitext中除了`<div>/<span>/<font>`外，还有许多方便的标签。这一章会介绍一些较为常用的Wikitext代码。

### 添加标题

在Wikitext中，你可以通过在一行中放置多个等号来创建一个标题，或是通过`<h1>`等属性盒创建一个标题；标题将会显示在目录中。

* 代码
* 效果

= 一级标题 =

== 二级标题 ==

=== 三级标题 ===

==== 四级标题 ====

===== 五级标题 =====

====== 六级标题 =====

##### 　附注

由于标题会使文章目录被打乱，因此在此不作实际效果演示。

代码示例 2-1

### 文本加粗与斜体

Wikitext中加入了一种便捷的方法来给文本加粗与加斜体，可以见下面示例。

* 代码
* 效果

''斜体'' '''粗体''' '''''粗斜体'''''

*斜体* **粗体** ***粗斜体***
代码示例 2-2

### 链接

链接包括站内链接与站外链接，而这两种链接Wikitext都支持通过方括号“`[]`”链接。

#### 站内链接

站内链接较为简单，只需要把需要链接到的页面的**实际页面名**放在两对中括号“`[[]]`”中间就行。

实际页面名：如果这个页面的网址是“https://darkrooms.fandom.com/zh/wiki/代码教程”，那么它的实际页面名就是“代码教程”。文章最上面的页面名可以被修改，因此不一定是实际页面名。

如果你想要更详细一点，需要链接到页面中某个标题的部分，你可以在后面加一个井号“`#`”并附上标题名称，这样链接就能详细到标题了。

如果你想要显示的文字与那个页面的实际页面名不同，你可以通过一个分隔符“`|`”隔开页面名，并在右边写上你想要的显示的文字，具体可见下面的例子。

* 代码
* 效果

[[Darkrooms Wiki]] [[Darkrooms Wiki|首页]] [[Ghost 0#描述|描述]]

Darkrooms Wiki 首页 描述
代码示例 2-3

#### 站外链接

如果你要把链接链接在站外，你就需要先复制页面网址，再输入一个空格，最后输入显示的文字就行。

* 代码
* 效果

[https://backrooms.fandom.com/zh/wiki/Backrooms\_Wiki Backrooms Wiki]

Backrooms Wiki
代码示例 2-4

#### 添加分类

类似于站内链接，如果你需要给一个页面添加分类，你可以通过在两对方括号中间插入一个分类名来给页面添加分类；其中的分类名应以“`Category:`”开头，以表示一个分类。如果你需要链接至一个分类，你可以通过在整体页面名的最前面添加一个**英文冒号**“**:**”来链接至分类页面，例如`[[:Category:红票]]`。

### 导入媒体

导入文件的方法与站内链接类似，如我需要在文章中插入一张莲花的图片，我可以像下面这么使用：

* 代码
* 效果

[[File:Example.jpg]]

代码示例 2-5

用同样的方法我也可以导入音频等，方法都是一致的。

#### 图片大小与位置设置

我们如果直接插入一张图片：

这样就显得太大了，怎么缩小它呢？

我们可以通过一些参数来设定图片的大小与位置：`[[File:Example.jpg|right|thumb|这是一张莲花的图片]]`

   效果就是这样(见右)：

我们也可以让图片居左，例如下面：

这样就可以让图片居左了。另外，thumb是缩略图的意思。

### 引用模板

通俗地说，模板就是一个以 `Template:` 开头的界面，同时它可以被其它界面引用；你可以通过在两对花括号“`{{}}`”中间输入模板名称来引用模板。通过插入模板，你可以减少在文中输入代码的量，同时节省文章编辑时的篇幅。你可以在下面的示例中看见模板的基本引用方法，同时如果你想要编写模板，你可以在这里看到相关方法。

* 代码
* 效果

{{Example|壹|贰}}

这是一段测试文本，其第一个参数为壹，第二个参数为贰。
代码示例 2-6

### 标签页

标签页允许在你编写文档时制作一个可以在多个内容间切换的标签，具体可以见下方示例。

* 代码
* 效果

<tabber>

标题1=内容1

标题2=内容2

</tabber>

##### 　附注

其实在这些示例中也使用了标签页~

* 标题1
* 标题2
内容1

内容2

代码示例 2-8

### 表格

* 代码
* 效果

{| class="wikitable"

! 标题文本 !! 标题文本 !! 标题文本

表格总标题
 示例 | 示例 | 示例

代码示例 2-9

作者：Ghtr123、MHG2345321