要使用HTML代码,无需额外处理,直接输入HTML标记即可。

HTML与CSS基础

我们强烈推荐您前往以下页面进行基础学习:

另请参见:站点CSS编辑

HTML与CSS的嵌入

在灰机和其他mediawiki搭建的站点中,您可以通过如下几种手段自定义css

  • 页面层:使用{{#css:}}解析器函数 已过时,不再支持
  • 站点层:通过Mediawiki:CSS页面来添加css样式表(需要管理员权限)

灰机允许使用的HTML元素

灰机继承了MediaWiki支持的html元素,总体来说除了<a>标签之外大部分的CSS、CSS3效果您都可以直接在本站使用。 以下是明显被支持的HTML元素(除此之外的元素,尤其是CSS3标准的您可以自行在沙盒测试):

HTML元素 作用 您所看到的 您所输入的
<big>
文字字号加一 正常大小 字号加一
<big>示例</big>
<blockquote>
块状引用文本
这次需要长一点的示例
<blockquote>这次需要长一点的示例</blockquote>
<br>
另起一行 这次需要

长一点的
示例

这次需要<br>
长一点的<br>
示例
<center>
文字居中
示例
<center>示例</center>
<font>
定义文字的大小、颜色和字体

默认字样
文字大小
文字颜色1
文字颜色2
文字字体

默认字样
<font size="150%">文字大小</font>
<font color="red">文字颜色1</font>
<font color="#0000ff">文字颜色2</font>
<font face="楷体">文字字体</font>
<h1><h2><h3><h4><h5><h6>
标题1到标题6字体逐次减小

标题1


标题2


标题3


标题4


标题5

标题6

<h1>标题1</h1><br>
<h2>标题2</h2><br>
<h3>标题3</h3><br>
<h4>标题4</h4><br>
<h5>标题5</h5><br>
<h6>标题6</h6><br>
<p>
定义一个内文段落
<pre>
显示源代码
<small>
文字字号减一 正常大小 字号减一
<small>示例</small>
<strike>或<del>
给文字添加删除线

示例
示例

<strike>示例</strike>
<del>示例</del>
<strong>
文字加粗 示例
<strong>示例</strong>
<sub>
给文字添加下角标 灰机示例
灰机<sub>示例</sub>
<sup>
给文字添加上角标 灰机示例
灰机<sup>示例</sup>
<table>
定义表格
<u>
给文字添加下划线 示例
<u>示例</u>
<tt>
typewriter字体

default font
typewriter font

default font 
<tt>typewriter font</tt>
<!-- ... -->
给其他编辑者的注释,

仅在编辑页面可见

本维基由灰机粉丝共同维护

本维基由灰机粉丝共同维护

<!-- 此处还可以留下QQ群,微博等信息 -->
<div>
定义网页文件的一个区块,让多组文字用同一格式显示。

这组字体都是天蓝色, 居中, 宋体, 小号字体的样式。

<div style="color:#09c; text-align:center; 
font-family:宋体; font-size:small">
这组字体都是天蓝色,
居中,
宋体,
小号字体的样式。
</div>

预设类

预设类指的是集成在灰机皮肤样式表内预定义好样式的“类”(class),可以在页面上直接引用生效,而无需在common.css中定义。

  • 语法:class="<预设1> <预设2>"
  • 在本地common.css可以补充样式,重合部分本地优先级更高,会覆盖皮肤中的预设值。
预设类 解释说明 示例代码 效果
well 内容容器
<div class="well">示例</div>
示例
darken/lighten 内容容器
<div class="darken">示例</div>
示例
bg-<语义颜色> 为元素指定背景色
<div class="bg-primary">示例</div>
<div class="bg-info">示例</div>
<div class="bg-success">示例</div>
<div class="bg-warning">示例</div>
<div class="bg-danger">示例</div>
示例
示例
示例
示例
示例
text-<语义颜色> 为元素指定文字颜色
<div class="text-primary">示例</div>
<div class="text-info">示例</div>
<div class="text-success">示例</div>
<div class="text-warning">示例</div>
<div class="text-danger">示例</div>
示例
示例
示例
示例
示例
border-<语义颜色> 为元素指定边框颜色
<div class="border-primary" style="border-style:solid;border-width:2px;">示例</div>
<div class="border-info" style="border-style:solid;border-width:2px;>示例</div>
<div class="border-success" style="border-style:solid;border-width:2px;>示例</div>
<div class="border-warning" style="border-style:solid;border-width:2px;>示例</div>
<div class="border-danger" style="border-style:solid;border-width:2px;>示例</div>
示例
示例
示例
示例
示例
wikitable 使表格带有默认的维基表格样式(自动插入表格默认带有此类) 参考本表格 参考本表格
table 使表格带有bootstrap的表格样式
<table class="table"><tr><th>th</th><td>td</td></tr></table>
thtd
table-striped 使表格带有条纹样式,可以和wikitable\table同时使用
<table class="table table-striped"><tr><th>th</th></tr><tr><td>td</td></tr></table>
th
td
table-hover 使表格带有hover效果,可以和wikitable\table同时使用
<table class="table table-hover"><tr><th>th</th></tr><tr><td>td</td></tr></table>
th
td
hidden-<屏幕尺寸> 使元素在预设的屏幕尺寸上被隐藏(display:none)
可选项:hidden-lg/hidden-md/hidden-sm/hidden-xs
<div class="hidden-xs">123</div>
visible-<屏幕尺寸>-block
visible-<屏幕尺寸>-inline
visible-<屏幕尺寸>-inline-block
使元素在预设的屏幕尺寸上被显示
同样有可选项[1]:visible-lg-*/visible-md-*/visible-sm-*/visible-xs-*
<div class="visible-xs-block">123</div>
123
badge 使元素带有bootstrap默认的badge样式
<div class="badge bg-primary">123</div>
123
label 使元素带有bootstrap默认的label样式
<div class="label bg-primary">123</div>
123
btn 使元素带有bootstrap默认的btn样式
<div class="btn bg-primary">123</div>
123

除此之外大部分的bootstrap3预设类均可以在灰机直接引用,在此不再一一赘述,可以参考bootstrap3的文档:BOOTSTRAP

通过零件封装类

通过灰机的workshop功能,对于一些常见的样式功能,可以封装成为零件并发布,供其他使用者一键导入到本站

HTML模板与Mustache

参见帮助:Mustache模板

引用

avatar