代码教程

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

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

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

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

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

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

这就是本文的目录：

前言
--

* 代码
* 效果

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

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

* 代码
* 效果

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

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

还有一些加上后会有特殊效果的属性盒：

* 代码
* 效果

这句话在前面！<li>这句话在后面，由于有li的辅助，它会被移到下一行。并成为无序列表项</li>

这句话在前面！- 这句话在后面，由于有li的辅助，它会被移到下一行。并成为无序列表项

代码示例 1-3

* 代码
* 效果

这句话在前面！<code>这句话在后面，由于有code的辅助，它会变成代码格式</code>

这句话在前面！`这句话在后面，由于有code的辅助，它会变成代码格式`
代码示例 1-4

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

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

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

#### 属性标签：class

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

* 代码
* 效果

后面的内容是<span class="insertusername">你的用户名</span>

##### 　附注

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

后面的内容是你的用户名
代码示例 1-5

#### 属性标签：title

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

* 代码
* 效果

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

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

#### 属性标签：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-7

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

* 代码
* 效果

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

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

自定义的橙色
代码示例 1-8

* 代码
* 效果

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

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

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

##### opacity (透明度)

你可以通过`opacity`来设定文本的透明度，好处是在直接显示时不会因为深色模式和浅色模式的色差显示出现差别（设了白色在日间模式看不太清，夜间模式特明显）。具体方法见下：

* 代码
* 效果

<div style="opacity:70%">你看得清吗？</div><br><div style="opacity:40%">这个更模糊！</div>

你看得清吗？
这个更模糊！
代码示例 1-10

##### 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-11

##### 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-12

##### transform (改变属性)

transform有很多属性：rotate、scale、skew、translate;而这些属性基本可以再分为原点、X轴、Y轴、三模式，有的还支持Z模式。不过，有一个缺点是，这样放大文字等都会造成出框，需要预留空位。

###### rotate (旋转)

* 代码
* 效果

<div style="transform:rotate(20deg)"><br/>'''原点为基点旋转'''</div><<br>

**原点为基点旋转**

代码示例 1-13-1

* 代码
* 效果

<div style="transform:rotateX(40deg)"><br/>'''X轴为基点旋转'''</div>

**X轴为基点旋转**
代码示例 1-13-2

* 代码
* 效果

<div style="transform:rotateY(50deg)"><br/>'''Y轴为基点旋转'''</div><br>

**Y轴为基点旋转**

代码示例 1-13-3

* 代码
* 效果

<div style="transform:rotateZ(20deg)"><br/>'''Z轴为基点旋转，翘起来了！'''</div>

**Z轴为基点旋转，翘起来了！**

代码示例 1-13-4

###### scale (缩放)

* 代码
* 效果

<br><div style="transform:scale(2)"><br/>'''定义缩放为2倍'''</div><br>

**定义缩放为2倍**

代码示例 1-13-5

* 代码
* 效果

<br><div style="transform:scaleX(2)"><br/>'''仅定义水平缩放为2倍'''</div><br>

**仅定义水平缩放为2倍（我好扁）**

代码示例 1-13-6

* 代码
* 效果

<br><div style="transform:scaleY(2)"><br/>'''仅定义垂直缩放为2倍'''</div><br>

**仅定义垂直缩放为2倍（我好高）**

代码示例 1-13-7

###### skew (斜体)

* 代码
* 效果

<br><div style="transform: skewX(20deg)"><br/>'''X轴为基点倾斜，<nowiki>''文本''也可以做到这一点</ nowiki>'''</div><<br>
##### 　附注

使用基本属性与X轴偏斜相同，故不与展示。

**X轴为基点倾斜，''文本''也可以做到这一点**

代码示例 1-13-8

* 代码
* 效果

<br><div style="transform: skewY(-20deg)"><br/>'''Y轴为基点倾斜'''</div><<br>

**Y轴为基点倾斜**

代码示例 1-13-9

###### translate (位移)

* 代码
* 效果

<br><div style="transform:translate(20px)"><br/>'''原点为基点位移'''</div><br>

**原点为基点位移**

代码示例 1-13-10

* 代码
* 效果

<br><div style="transform:translateX(40px)"><br/>'''X轴为基点位移'''</div><br>

**X轴为基点位移**

代码示例 1-13-11

* 代码
* 效果

<br><div style="transform:translateY(-15px)"><br/>'''Y轴为基点位移'''</div><br>

**Y轴为基点位移**

代码示例 1-13-12

* 代码
* 效果

<br><div style="transform:translateZ(20px)"><br/>'''Z轴为基点位移'''</div><br>

**Z轴为基点位移**

代码示例 1-13-13

##### text-decoration (文本加线设定)

“text-decoration”属性规定了文本的修饰线样式。

* 代码
* 效果

<span style="text-decoration: underline overline wavy green .5px;">这是一段上方和下方都有粗0.5px的波浪线修饰的文字</span>
##### 　附注

属性值中的各项应依次为：修饰线位置、修饰线样式、修饰线颜色、修饰线粗细值。其中，修饰线位置可有多个值。在第一个例子中，修饰线有“underline”与“overline”两个值，即上下皆有修饰线。修饰线位置的可取值有underline、overline、line-through，修饰线样式的可取值有solid、double、dotted、dashed、wavy。

这是一段上方和下方都有粗0.5px的波浪线修饰的文字
代码示例 1-14

### 字体

* 代码
* 效果

<big><span style="font-family:ZCOOL XiaoWei;">ZCOOL XiaoWei</span><br><span style="font-family:Ma Shan Zheng;">Ma Shan Zheng</span><br><span style="font-family:Long Cang;">Long Cang</span><br><span style="font-family:Zhi Mang Xing;">Zhi Mang Xing</span><br><span style="font-family:Noto Serif SC;">Noto Serif SC</span><br><span style="font-family:Genshin75W;">Genshin75W</span><br><span style="font-family:Genshin75W;">Genshin55W</span><br><span style="font-family:CangerW02;">CangerW02</span><br></big>
##### 　附注

<br>仅用于换行；部分字体使用时较小，应适当调整字号。

ZCOOL XiaoWei
Ma Shan Zheng
Long Cang
Zhi Mang Xing
Noto Serif SC
Genshin75W
Genshin55W
CangerW02

代码示例 1-15

## 更多基本Wikitext

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

### 添加标题

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

* 代码
* 效果

= 一级标题 =

== 二级标题 ==

=== 三级标题 ===

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

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

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

##### 　附注

由于标题会使文章目录被打乱，因此演示采用<h1>等属性盒，无法进去目录。

由于标题会使文章目录被打乱，因此演示采用<h1>等属性盒
# 一级标题

## 二级标题

### 文本加粗与斜体

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

* 代码
* 效果

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

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

### 链接

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

#### 站内链接

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

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

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

* 代码
* 效果

[[Howeverooms Wiki]] [[Howeverooms Wiki|首页]]

Howeverooms Wiki 首页
代码示例 2-3

#### 站外链接

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

特殊的，如果你要链接到后室Wiki(Backrooms Wiki)的页面，本Wiki提供了专门的模板，可以通过类似站内链接的方法链接至后室Wiki的页面，具体可以见下面示例。

* 代码
* 效果

[https://backrooms.fandom.com/zh/wiki/Backrooms\_Wiki Backrooms Wiki] {{FromBackrooms|Level\_0|Level 0}}
##### 　附注

你可以通过这个方法快捷链接至后室Wiki的页面：`{{FromBackrooms|实际页面名|显示的文字}}`
不过这里的实际页面名中间如果有空格，一定要替换成下划线！

Backrooms Wiki Level 0
代码示例 2-4

### 列表项

列表分为有序列表与无序列表，在实体的“应当与不应”和映层的“入口和出口”等区域需要使用。

* 代码
* 效果

\* 无序列表
<BR>
\* 无序列表
<BR>
# 有序列表

* 无序列表
* 无序列表

1. 有序列表
2. 有序列表

代码示例 2-5

### 导入媒体

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

* 代码
* 效果

[[File:Example.jpg]]

代码示例 2-6

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

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

我们如果直接插入一张图片：
这样就显得太大了，怎么缩小它呢？
我们可以通过一些参数来设定图片的大小与位置：`[[File:Example.jpg|right|thumb|这是一张莲花的图片]]`

   效果就是这样(见右)：

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

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

占位符

占位符

占位符

#### 图片可放大化设置

你还可以使用如下的代码来进行 **图片可放大化设置**（把鼠标移动到图片上，图片会放大）：

````
<div class="right-image">
[[File:图片.png]]
【这里写文字描述】
</div>

````
注意①：**使用图片可放大化设置时**，`[[File:图片.png]]`中请**最好不要使用缩略图**（这会让图片看起来很怪、很小，但你可以使用图片大小设置），也就是不要添加thumb标签。

注意②：**使用图片可放大化设置时**，不要在`[[File:图片.png]]`中添加对图片的描述，这没有用，不会显示。你需要用文字描述替换上面格式里的文字，这样才有效果。

**右边**是一个例子，把鼠标移动到图片上，你会发现图片放大了：

**Forevel 1**的一张图片

这个例子的代码：

````
<div class="right-image">
[[File:Forevel 1.jpg]]
'''Forevel 1'''的一张图片
</div>

````

注意③：虽然这种图片嵌入方法能让你的文高级感骤增，但是它只适用于一些比较大的图片，如果你的图片比较小，使用这种嵌入方法只会适得其反。
注意④：这种图片嵌入方法所添加的图片会自动放置于页面右侧，如果需要置于页面左侧，可以将`class`中的“`right-image`”改为“`left-image`；左下方就是这种效果的演示。

**Forevel 1**的一张图片

占位符

占位符

占位符

### 标签页

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

* 代码
* 效果

<tabber>

标题1=内容1

标题2=内容2

</tabber>

##### 　附注

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

* 标题1
* 标题2
内容1

内容2

代码示例 2-7

### 文本加线

除了前面提到的text-decoration以外，我们还可以简单的召唤下划线和删除线：

* 代码
* 效果

</nowiki>
带删除线的文本
和<u>带下划线的文本</u>

~~带删除线的文本~~和带下划线的文本
代码示例 1

### 文本折叠

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

* 代码
* 效果

##### 　附注

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

展开文字

收回文字

内容文本

代码示例 2-8

### 表格

* 代码
* 效果

{| class="wikitable"

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

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

代码示例 2-9

除此之外，也有其它的表格样式：

* 代码
* 效果

{| class="article-table"

! 标题单元格 !! 标题单元格

表格标题

代码示例 2-10

* 代码
* 效果

{| class="fandom-table"

!单元标题

!单元标题

!单元标题

总标题
 文本

代码示例 2-10