第四节：HTML代码和WordPress主题的短代码如何使用？

回到目录：WordPress快速建站之系列教程

在认识和学习HTML代码和主题短代码前，我们得先了解一下所见即所得编辑器，如图1所示，编辑器上方有很多类似Word里的按钮，用以排版内容，注意在右上角有可视化/文本选项。

虽然主题短代码在可视化状态下是可以看见的，但HTML代码必须在文本状态下才可以看到，如图2所示。

1，HTML代码

由于种种原因，在可视化状态下编辑内容有时候会出现错位等问题，所以我们不得不切换到文本状态下检查HTML代码是否正确。HTML代码是以”<“和”>”左右尖括号包围的，同时以带“/”来结束的。

加粗代码：
<strong>内容</strong>
斜体代码：
<em>内容</em>
链接代码：
<a href="https://www.kalated.com" target="_blank">卡拉科技</a>

我们可以将HTML代码理解为一个容器，那么大容器里是可以放小容器的，下面的代码是正确的。

<p>这儿是一些内容，对我<strong>加粗</strong></p>

事实上容器是不可以交叉的，如下面的代码就是错误的。

<p>这儿是一些内容，对我<strong>加粗</p></strong>

通常情况下在后台添加和编辑内容并不需要我懂得一丁点儿HTML代码，但上面讲到的这个错误示例经常会遇到，大家需要注意一下。

2，主题定义的短代码

主题定义的短代码其实是一个个函数，只是避免让用户直接面对太多源码而简化的结果。短代码通常是以“[”和“]”包围的，并以“/”结束（有些没有）。由于主题的不同，各自短代码的含义也是不同的，所以在拿到新的主题时，需要对短代码进行详细了解。同样的，上面提到的HTML错误示例也适用这里，短代码也是不允许交叉的，更不允许HTML代码和短代码交叉。

以下代码是错误的：
[list]这儿是一些内容，对我<strong>加粗[/list]</strong>
[list]这儿是一些内容，对我用[red]红色[/list][/red]

以下代码是正确的：
[list]这儿是一些内容，对我<strong>加粗</strong>[/list]
[list]这儿是一些内容，对我[red]<strong>加粗</strong>[/red][/list]

在页面排版中，短代码的使用是非常必要的，也是必须掌握的基本知识。做网站无非是做好框架，填充图片和文字内容，这些都会用到短代码。

更改与说明：在视频中讲到“列”短代码时，由于没有详细查看主题分列规则的说明，所以造成了一定的误区，大家在理解这个主题的分列规则可以通过主题自带的页面说明来理解，请看http://centum.purethemes.wpengine.com/full-width/

无法观看视频时，请跳转到优酷查看，http://v.youku.com/v_show/id_XNjc5ODMyNzky.html