代码教程

你好啊，无名的流浪者，欢迎来到代码教程！

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

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

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

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

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

以下为本文的目录：

前言
--

* 代码
* 效果

这句话在前面！<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>`等属性盒创建一个标题；标题将会显示在目录中。

* 代码
* 效果

= 一级标题 =

== 二级标题 ==

=== 三级标题 ===

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

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

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

# 一级标题

## 二级标题

### 文本加粗与斜体

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

* 代码
* 效果

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

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

### 链接

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

#### 站内链接

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

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

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

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

* 代码
* 效果

[[Confusionrooms Wiki]] [[Confusionrooms Wiki|首页]] [[Level 11c#描述|描述]]

Confusionrooms 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|壹|贰}}

Template:Example
代码示例 2-6

#### 文本折叠

在MediaWiki中其实本来已经内置了一个文本折叠的功能，但为了简化复杂的代码，本Wiki(与其它许多Wiki)制作了`{{Collapse}}`模板，旨在简化文本的折叠。你可以在下面的示例中看到`{{Collapse}}`模板的使用方式：

* 代码
* 效果

##### 　附注

其中的num为指示，一般使用只需要知道每次给num填写不同的内容就行，内容任意。

展开文字
收回文字
内容文本
代码示例 2-7

### 标签页

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

* 代码
* 效果

<tabber>

标题1=内容1

标题2=内容2

</tabber>

##### 　附注

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

* 标题1
* 标题2
内容1

内容2

代码示例 2-8

### 表格

* 代码
* 效果

{| class="wikitable"

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

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

代码示例 2-9

### 密码框

一些隐藏内容页面时常包括一个假的"登录"框，提示用户输入密码。但其实不需要真正的输入(当然如果你想创造一个权限不足的页面来气气读者你只要把自动填入的部分换成“Permission Error”就行了，但不建议你这么做)，因为点击该框将显示下一节内容并自动填充密码。以下为普通密码框的代码示例：

```
<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
</div>

```

在实践中，这段代码会产生这样的结果：

输入密码[填入密码]

[填入内容]
显示解析 (若对此不感兴趣可直接跳过)
收回解析
实际上，这种折叠框就是对于折叠的进阶运用。如果你探讨过`{{Collapse}}`的实现原理，你应该可以发现带有相同num值的两个折叠会同时收回与开启。现在看回密码框的代码，实际上就是两个相同num的折叠，一个放在div框内，另一个放在框外；而这个div框在实践中就会显示为类似输入密码用的白底黑框。而为了使显示的内容不处在框内，这里就使用了另一个放在框外且没有initial与final的折叠进行显示。如果你已经完全学会了这个密码框的代码，你实际上也可以通过略微修改进行改善这个密码框哦！
### 伪代码框

其实就是一个方框加一堆折叠，但会让文章看起来非常的富有神秘感或科技感，当然，这得看你怎么用了。

使用方式如下：
`<div style="background: #000000;color: #007D00;border:2px solid #007D00;">
“您已进入程序页面，请执行指令”

<br>
“正在读取数据……”
<br>
“[页面内容]”
}}
</div>`

效果：

“您已进入程序页面，请执行指令”

“User\_active=view pages”
“VIEW PAGES”

“正在读取数据……”

“[页面内容]”

### 嵌入CSS

你可以通过在页面中直接嵌入CSS模板来嵌入CSS，格式为`{{CSS|实际页面名}}`。更多有关页面CSS的内容可以参照CSS使用指导进行进一步学习。