编辑器的文本模式

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

🎉 8 周年订阅优惠

网页上的内容需要使用 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 像素的外边距。同样我们为第二块内容也添加一条这样的样式...

然后点击 更新 …

查看文章 …

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

编辑器的文本模式《 WordPress 基础 》

统计

11440
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点