网页上的内容需要使用 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 像素的外边距。同样我们为第二块内容也添加一条这样的样式...
然后点击 更新 …
查看文章 …
现在,文章的排版就比较完美了。