网页上的内容需要使用 HTML 标签来标记，浏览器在显示内容的时候，会根据标记内容的标签来判断如何去显示内容。在前面的视频里我们使用内容编辑器的可视化模式编辑了一篇文章，在可视化模式下面，我们只需要选中想要修改的内容，然后点击对应的按住就可以了。

实际上，点击编辑器上的这些按钮就相当于输入了某些 HTML 标签。点击编辑器上的 文本，我们可以切换到 文本 模式 …

在这里你会发现一些 HTML 标签 … 不过在文本模式下并没有显示全部的 HTML 标签，比如段落文字上应该使用 <p> 标签来标记，但是这里并没有显示。

这应该是 WordPress 编辑器的特点，每段文字之间添加一个空行，就相当于使用 <p> 标签标记了这段文字 … 在内容真正输出的时候， WordPress 会自动为每个段落文字加上 <p> 标签。

婚礼上的音乐 这行文字使用 <h2> 标签标记，这就表示这行文字是标题二 … 下面使用的是 <ul> 标签，表示这是一个无序列表内容，每个列表项目都会使用一组 <li> 标签标记，列表项目前会用 <li> ，列表项目结尾使用 </li> 。在所有内容的结尾处会使用一个 </ul> 。表示这个列表内容到这里就结束了。

在下面你还可以看到一段使用 <blockquote> 标记的内容，表示这是一段引用文字。

你可以使用 可视化 模式编辑内容，然后经常切换到编辑器的文本模式下面看一下，看看你所做的修改真正发生的事儿，这样你能学到一些常用的 HTML 标签的用法。这对排版复杂的文章的时候非常有用。

下面我们可以做一个简单的演示，比如我们想让前面这两段文字分成两栏显示在一排。

我们可以先分别用一组 <div> 标签包围住这两段文字 …

然后在每个 <div> 标签上使用内嵌的方法添加一些自定义的 CSS 样式。

<div style="width:300px;float:left;margin-right:20px">

style 后面的引号之间里的内容就是我们添加的样式，width 设置了这块内容的宽度是 300px ，然后浮云到左边显示，然后使用 margin-right 属性，为内容块的右边添加了一个20像素的外边距。

再修改下第二块内容 …

<div style="width:300px;float:left">

同样使用 width 设置了这块内容的宽度为 300px，然后浮动到左边显示，这样这两块内容会显示在一排。

点击 更新… 查看文章 …

你会看到两块显示在一排的内容 … 不过内容跟下面的标题距离比较近，我们可以再修改一下 …

找到第一块内容的代码，添加一个 margin-bottom:20px ，这样会在这块内容的下边添加一个 20 像素的外边距。同样我们为第二块内容也添加一条这样的样式...

然后点击 更新 …

查看文章 …

现在，文章的排版就比较完美了。