WonderCSS

网站编辑文章中常用 HTML 代码教程

在网站中一篇过硬的文章除了本身原创度高以外,本身的文章结构也是一个重要的参数。可惜很多编辑、文案人员笔杆子过硬但代码方面几乎为零,好似一大厨烹调一手好菜却装到一个掉渣的脏碗盘里,味道虽然不错,但放到顾客面前不免有些掉价。

给文章加上标签有什么好处

常规理解文章是全是由段落构成,但网站里的文章“内容”丰富,使用合适的标签能更直接、形象的将内容呈现给读者,同时也能让搜索引擎更直观的了解你的原意,哪些是标题,哪些是列表,哪些是引述等等。

同时在网站的原创度层面来说,同样的文字在未使用HTML代码规范的情况下,文字内只有“段落”一种元素。如果将原文加注了子标题、段落、引述等元素后,在逻辑性上就已经造成了差异。

wondercss-coder

网站编辑都需要了解多少 Html 标签

其实网站文案人员在发布文章时能涉及到的代码主要是:段落、标题、列表、图片四个方面。所使用的标签并不多,而且很容易使用。

在介绍具体标签时我们必须知道一个标签使用规则,那就是每个标签都需要“闭合”(在代码中闭合通常都是使用斜线 “/” )的,简而言之,你要告诉浏览器和搜索引擎,这个标签从哪开始从哪结束(结束这个标签及闭合这个标签)。如段落标签 p ,段落开始时注明 <p> 意味着段落开始,在段落结束后在加上 </p> 来闭合结束这个段落。如:


<p>某一天,光生陪客户去打自己不喜欢的棒球,回家的路上因为捡球不小心把腰给扭到了。</p>

还有一种情况就是标签本身是一个独有的元素,比如图片,它没有从哪开始从哪结束的逻辑结构,所以它们是本身自我闭合的。如 <img />


<img src="../images/defaultpic.gif" alt="默认图片" />

了解了标签的闭合后,我们来具体了解下文章中常用的标签。

使用 <H1> – <H6> 标签来为标题划分层次

在文章中除了文章名标题以外,在文章内部经常会出现一个或几个子标题,如果你不使用 H 标签来告诉搜索引擎,你子标题文字尺寸就算放的再大搜索引擎也只会将它视为段落或普通文字的。

H 标题标签在 SEO 的角度上来说,一个页面里文字或词句的重要性从 <h1> 到 <h6> 逐次递减。正常发布文章,文字标题默认会设置成 <h1> ,为确保 h1 标签的唯一性,所以在文章中子标题只用到 h2 和 h3 即可( h2 和 h3 不同于 h1 可多次出现)。h2作为h1的子标题,h3作为h2的子标题。通常文章中不会出现太多层次的文本结构。应用如下:


<h2>多吃水果解暑</h2>

<h3>西瓜最好</h3>
<p>又叫寒瓜。颜色是青绿色的,又大又圆,皮上有的有纹路,瓜瓤有白有红,子有黄红黑白。二月下种,七八月份成熟,蔓生,花叶均似甜瓜。</p>

<h3>苹果其次</h3>
<p>落叶乔木,叶子椭圆形,花白色带有红晕。果实圆形,味甜或略酸,是常见水果,具有丰富营养成分,有食疗、辅助治疗功能。</p>

使用 <p> 标签来划分段落

看过上述文字后我想大家都明白了 <p> 的使用方法,需要注意的是有时在文本编辑器里敲出来的回车有时会被定义为 <br />,<br />元素是一个空行元素,它用于在一个段落内部实现回行。正常的分段如下:


<p>文章第一段落文字</p>
<p>文章第二段落文字</p>
<p>文章第三段落文字</p>

因为 <br /> 而形成的错误的分段方式:


<p>文章第一段落文字<br />
文章第二段落文字<br />
文章第三段落文字</p>

这种错误的分段方式也实现了两个回行,但搜索引擎认为这篇文章只有一段文字而不是三段文字,同时如果网站设置了每段文字首行缩进效果,因 <br /> 而回行的文字不会获得首行缩进,因为它们并不是段首。

使用 <blockquote> 标签来声明这是一段引述

在网站的文章中我们难免要引用一些文章以外的内容,比如在文章中引用了外站的文字,那么我们就需要给这句话加上 <blockquote> 标签来注明,这句话是引述。我们来看看效果:

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

blockquote 在使用上和 p 相似,不过在这里我们涉及到代码的嵌套。代码的嵌套规则是内外成双闭合,正确的如 <blockquote> <p> </p> </blockquote> 错误的如 <blockquote> <p> </blockquote> </p>

下面我们以在文章中引用孔子的话来举例:


<p>《论语》中有记载:</p>
<blockquote><p>子在川上曰:逝者如斯夫!不舍昼夜</p></blockquote>

使用 <li> 标签来区分这是一个有序或无序的列表

有时我们的文档里会出现列表类的内容,如全面检查肝病有3项:1 血常规 2 尿常规 3 乙肝两对半。如果使用列表标签的话我们可以这么写:


<ol>
<li>血常规</li>
<li>尿常规</li>
<li>乙肝两对半</li>
</ol>

ul-ol-style

每一个 <li> 代表着每一条列表内容,在所有列表外面必须使用 <ol><ul> 来嵌套上以示意这是一个列表项目。而 OL 与 UL 的区别在于: OL 是有序列表,默认情况下每一个 li 前面会自动出现1234……数字序号,无需编辑人员手动添加。而 UL 是无序列表,不会显示出数字序号,通常都是用一个显示出一个圆点效果。

了解 <img> 图片标签在文章中的应用

<img> 元素向网页中嵌入一幅图像。从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签有两个必需的属性:src 属性(嵌入图片的链接地址) 和 alt 属性(替代文本,如图片被删除,无法获取图片便显示此文字。)

比如我们在图片中插入了一个人物的照片,那么 alt 标签便可写上这个人物的名字。


<img src="../images/libai.jpg" alt="唐朝诗人李白" />

既然要在文章中插入一张图片,那么就涉及到图文混排的布局问题了。如何让图片在段落内排在一侧与文字结合在一起,如下:

image-float-code

要想让图片和文字混排在一起,就需要为图片添加一个样式 Style 属性 Float 。让图片浮动在段落的左面或右面:


<p><img style="float:left;" src="../images/libai.jpg" alt="唐朝诗人李白" />父亲平时喜欢教孩子看书作诗,父亲在酝酿起名之时,同母亲商量好了,就在庭院散步时考考儿子作诗的能力。</p>

其中的 float:left; 就是让这张图片靠左,如果写成 float:right; 便是靠右。

以上便是网站编辑人员对文章机构处理的基础代码,主要注意的是没必要刻意去为文章“创建格式”,该是段落就是段落,该是列表就是列表,让文章实现出该有的样貌即可。

在编写习惯上建议直接在文本编辑器的“源码”状态下录下文章,虽然前期会让发布文章的速度变慢,但熟练了之后就会很容易很速度地写出硬质量文章了。

By 于湛 发布于 2013.03.22 7,806 次浏览

网站编辑文章中常用 HTML 代码教程》上有6条评论

  1. 华康推广专员

    哈哈,这个强!不过缺少超链接的介绍。图片标签也缺少title哦

    回复
    1. YuZhan 文章作者

      锚链接确实忘了写。汗!图片中的 title=”” 不算是正规html属性,出于安全考虑最好别加!尤其是在文章详细页面内。

      回复
  2. 宇晨

    好文章~不过我想知道,如果不使用<blockquote>如何实现段落的层次结构(增加、减少段落缩进)?

    回复
    1. 于湛 文章作者

      blockquote 为引述标签,当文章中没有引述的情况下也没必要刻意加。把文章的内容如实的提交给搜索引擎即可。

      回复
  3. 宇晨

    可是,有时我想对段落进行缩进操作以突出层次,但是这种层次又没有到需要用标签的程度。
    编辑器一般默认Tab键缩进当前段落,体现在html源代码上则是将当前段落放在<blockquote>标签中,缩进越多,嵌套越多。
    我想知道的是,在这种情况下,用什么方法实现段落的缩排?

    回复
    1. 于湛 文章作者

      若单纯的想在段落上做些变化的话,最简单的是给段落<p>标签加个样式。这会需要你了解一些CSS知识,如你所需,可以在代码模式中这样:

      <p style=”padding-left:2em;”>需要缩进的段落</p>

      这样就可以在段落左侧拉开距离,2em意味着两个字数的距离。希望对你有些帮助!

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注