html语法指南

文字样式

文章中常用的文本样式如下，在页面编辑器中输入语法栏所示内容呈现效果将如成品栏所示。请作者根据自身需求选择适合的文字样式。

语法	成品
//倾斜文本//	倾斜文本
加粗文本	加粗文本
__下划线文本__	下划线文本
--删除线文本--	删除线文本
{{等宽English}}	`等宽English`
^^上标文本^^	^上标文本
,,下标文本,,	_下标文本
[!-- 代码注释，不可见 --]

多种文本样式也可以叠加套用，所示效果如下。

语法	成品
//斜体加粗//	斜体加粗
__--删除下划--__	删除下划
,,^^为什么要把上下标加在一起呢^^,,	_{^{为什么要把上下标加在一起呢}}

彩色文本样式有两种常用代码格式如下。

语法	成品
[[span style="color: red;"]]自定义 span 文本[[/span]]	自定义 span 文本
##blue\|颜色英文## 或 ##44FF88\|十六进制颜色代码## 颜色	颜色英文或十六进制颜色代码颜色

你可以通过该拾色工具查询颜色代码

你还可以通过span对文字进行以下各种处理。

语法	成品
[[span style="filter: blur(3px)"]]模糊文本，代码中数字表模糊程度[[/span]]	模糊文本，代码中数字表模糊程度
[[span class="ruby"]]文字标示[[span class="rt"]]wénzìbiāoshì[[/span]][[/span]]	文字标示wénzìbiāoshì
[[span style="font-family:Microsoft YaHei"]]中文等宽[[/span]]	中文等宽

你可以在页面中引入更多模块版式来获取更多文本样式。
维基点本身不支持部分元素的文字效果，但你可以通过html代码实现对应效果，具体示例如下。

[[html]]
<span 属性="赋值">你要输入的文字内容。</span>
[[/html]]

例如输入如下代码

[[html]]<span contenteditable="true">读者可编辑的代码内容</span>[[/html]]

会得到如下结果。

部分常用或不常用的属性效果如下：
文本位置代码（p元素表示文字内容单独成段）

[[html]]
<p style="text-align: right">文本置右</p>
<p style="text-align: left">文本置左</p>
<p style="text-align: center">文本置中</p>
[[/html]]

效果如下

文本大小

改变文字大小的代码如下，其中“size+百分比”较常用与文字表现。

语法	成品
[[size smaller]]较小号文本[[/size]]	较小号文本
[[size larger]]较大号文本[[/size]]	较大号文本
[[size 80%]]80%大小文本[[/size]]	80%大小文本
[[size 100%]]100%大小文本[[/size]]	100%大小文本
[[size 150%]]150%大小文本[[/size]]	150%大小文本
[[size 0.8em]]0.8大小文本[[/size]]	0.8大小文本
[[size 1em]]1.0大小文本[[/size]]	1.0大小文本
[[size 1.5em]]1.5大小文本[[/size]]	1.5大小文本
[[size xx-small]]极小号文本[[/size]]	极小号文本
[[size x-small]]超小号文本[[/size]]	超小号文本
[[size small]]小号文本[[/size]]	小号文本
[[size large]]大号文本[[/size]]	大号文本
[[size x-large]]超大号文本[[/size]]	超大号文本
[[size xx-large]]极大号文本[[/size]]	极大号文本
[[size 10px]]10像素文本[[/size]]	10像素文本

原始文本

在文本两侧同行不带空格地包裹上两个 @ 符号即可转义解析并渲染出原始文本，也就是可以精准显示出你在 @ 符号之间放的文本。这一点在显示出被用作 Wikidot 语法样式的符号，或者展示如何自定义文本时非常好用。

语法	成品
@@//转义//@@	//转义//

这也可以用作转义解析换行符并阻止 Wikidot 将空行折叠到一起，只需在一行内放下四个 @ 符号即可。

这个代码：

缺口！
@@@@
@@@@
@@@@
缺口！

会变成这个文本：

缺口！

缺口！

另一种转义解析的方法就是在文本两侧放上 @< 和 >@。这是一种更加高级的方法，且同时可被用于插入 HTML 字符。

这个代码：

会变成这个文本：

Hello world @@ !!!!

这是唯一一个转义 @@ 的方法，因为用两个 @ 符号的方法来转义 @ 符号并不会起作用。

语法	成品	注释
[[[entities]]]	entities	展示与其创建时完全相同的页面名称。但如果此页面不存在，则文本会显示为橘红色（默认版式下）。
[[[entities\|文本]]]	文本	在你想要显示不同于页面名称的文本时非常好用。
[[[region-0]]]	region-0	跟第一个示例一样，只是用了带横杠的页面名称。
[[[Region 0]]]	Region 0	这里用了页面标题来创建链接。
http://www.wikidot.com	http://www.wikidot.com	直接输入网址，网址会自动变成链接。
[http://www.wikidot.com wikidot]	wikidot	一个有命名的链接，显示了自定义的文本。

图片

由神秘用户拍摄Region 0的第一张照片。

推荐写手使用组件的图片代码。
组件图片的显示效果如右图所示，代码如下，其中两行内容所表示的意义已列出。
{name}（名称） - 你图片的名称。应该包含有文件的扩展名，比如 “.jpg”、“.png” 等等。如果该图片并未上传到维基页面之中，那就应该是末尾带有图片扩展名的一条网址。
{caption}（说明文字） - 图片的说明文字。这里的文本可以用 Wikidot 语法来自定义。
默认情况下图片会出现在页面的右侧，如果要让图片居左，将代码中的“component:image-block”改为“left-image-block”即可，若改为“component:image-block-base”效果将会是占满整个页面的大图片。

[[include component:image-block
|name=http://backroomssandboxcn.wikidot.com/local--files/wuze/re0_pic1.png
|caption=由神秘用户拍摄Region 0的第一张照片。
]]

若需使用默认的 Wikidot 图片样式，那么可使用以下代码。注意如果你使用这条代码那么将不会有说明文字区域。不推荐没有经验的写手使用。
{图片来源} - 图片的来源，大概相当于维基的图片标记里的 name（名称）。
{属性} - 附加于图片上的属性，用于修改比如大小、css 样式之类的东西，或者让图片链接到某个网址上。

[[image 图片来源 属性 1="值 1" 属性 2="值 2" ……]]

音频

这是环境音组件的代码，自带评分模块。
{audio}（名称） - 你音频的名称。应该包含有文件的扩展名，比如 “.mp3”、“.ogg” 等等。

[[div style="position: relative; text-align: right; height: 1.5rem;"]]
[[html style="position: absolute; top: 0; left: 0; max-width: 30vw; width: 100vw; height: min-content;"]]
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
</head>
<style>
@import url(https://backrooms-wiki.wdfiles.com/local--code/component%3Atheme/1);
@import url(https://backrooms-wiki.wdfiles.com/local--code/theme%3A{$theme}/1);
@import url(https://backrooms-wiki.wdfiles.com/local--code/theme%3A{$theme}/2);

      div { transition: 0.5s }
      div .rate-points:before {
        margin-right: 0.6em;
        content: "volume_down ";
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
      }

      div:hover {
        filter: brightness(110%);
        cursor: pointer;
      }
      div .rate-points:hover:before {
        content: "volume_down ";
      }
      div.disabled {
        opacity: 0.5;
        pointer events: none;
        filter: brightness(60%);
      }
      div.disabled .rate-points:before {
        content: "volume_up ";
      }

</style>
<div class="page-rate-widget-box" id="disable" onclick="disable(); AudioSource.play(); $(this).addClass('disabled');" "> <span class="rate-points">播放环境音</span></div>
<script>
var AudioSource = new Audio("音频url");
AudioSource.loop = true;
function disable() {
   document.getElementById("disable").classList.add("disabled")
}
</script>
[[/html]]
[[div style="float: right; [[#ifexpr {$norate} == 1 |  display: none; ]]" ]]
[[module rate]]
[[/div]]
[[/div]]
[[iftags +组件]]
本组件修改自英文维基[[[http://backrooms-wiki.wikidot.com/component:ambiance|组件]]]
+ 使用方法
[[div class="code"]]
@@[[include :cr-universe:component:ambient-sound@@
|audio=音频url
@@]]@@
[[/div]]
需注意的是该模块包含了评分模块，加入此模块后不需要重复加入评分模块。另外，难蚌的是本站不允许上传附件，所以请自己寻找音频文件托管网站或去别的沙盒站存放文件。
[[/iftags]]

效果如此。

如果你想单独在页面中插入一段独立的音频，你可以使用另一个组件，代码如下。

[[div class=“audio-content”]]
[[html]] <audio controls preload=“auto” src=文件url></audio> [[/html]]
[[/div]]
[[iftags +组件]]
++ 使用教程：
[[div class="code"]]
@@[[include :cr-universe:component:radio@@
|file=文件url
@@]]@@
[[/div]]
[[/iftags]]

效果如此。

如果你想在页面中增加音乐，你可以使用网易云音乐的外链功能，如下是一个实例，音乐的外链可通过网易云音乐的生成外链播放器来获取。

[[html]]
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1965295134&auto=1&height=66"></iframe>
[[/html]]

视频

此处视频专指视频平台上发布的视频，由于视频文件体积通常较大，不推荐作者将视频文件储存在网站上。如下是引用bilibili的视频内容的一个实例，引用视频只需替换其中的连接部分。

[[div style="position: relative; padding: 30% 45%;"]]
[[html]]
@iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=114514&bvid=BV1p6YTevEWL&page=1&as_wide=1&high_quality=1&danmaku=1" frameborder="no" scrolling="no"></iframe@
[[/html]]
[[/div]]

html5播放器

你可以通过该播放器在页面内引入音频和视频，其中type一栏表示文件种类，填入“audio”表示你将引用一个音频文件，而填入“video”表示你将引用一个视频文件。

[[include :snippets:html5player
| type=audio / video
| url=文件地址
]]

其他组件

你可以在“侧栏-写作资源-组件中心”中找到许多有用的组件资源，通过include代码将其引入到自己的文字页面中，这样会使你的文章版式看起来更高级。

一行必须以	双竖杠开始	并以其结尾
单元格要被	双竖杠分割	什么都没有
你可以使用	多个分隔符
使得单元格	能跨越多列
使用下划线换行

语法	成品	注释
[[user Cr-Wu_Ze]]	CR-Wu_Ze	不会显示用户的个人头像或者业力等级。
[[*user Cr-Wu_Ze]]	CR-Wu_Ze	可以显示用户的个人头像以及业力等级。

教程性

Cr宇宙档案馆

潜身于虚妄之中

文字样式

文本大小

原始文本

链接

图片

音频

视频

html5播放器

其他组件

标题

内容列表

列表

自定义 Div

折叠块

表格

脚注

分页

页面迭代