帮助:HTML
简单
入门
进阶
复杂
开发
要使用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> |
定义文字的大小、颜色和字体 |
默认字样 |
默认字样 <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 |
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> |
| ||
table-striped |
使表格带有条纹样式，可以和wikitable\table同时使用 | <table class="table table-striped"><tr><th>th</th></tr><tr><td>td</td></tr></table> |
| ||
table-hover |
使表格带有hover效果，可以和wikitable\table同时使用 | <table class="table table-hover"><tr><th>th</th></tr><tr><td>td</td></tr></table> |
| ||
hidden-<屏幕尺寸> |
使元素在预设的屏幕尺寸上被隐藏（display:none） 可选项：hidden-lg/hidden-md/hidden-sm/hidden-xs |
<div class="hidden-xs">123</div> |
123
| ||
visible-<屏幕尺寸>-blockvisible-<屏幕尺寸>-inlinevisible-<屏幕尺寸>-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
引用
来自灰机wiki