如何用记事本写一篇图文并茂的文章?

我之前曾在公司那台不能上网的计算机上用记事本写过不少文章,虽然挺折腾的,但是也学到不少 HTML 知识。

其实,只要认识几个常用的 HTML 标签,就可以在记事本上写一篇图文并茂的文章了,以下是精博常用到的 HTML 标签:

文字常用的 HTML 标签

一、分段

如果你查看某个网页的源代码,就会发现每一个段落的开头和结尾都是 <p> 和 </p>。所以写文章的时候,我先在记事本上粘帖十几个 “<p></p>”,然后再在 <p> 和 </p> 之间输入文字,从而完美地解决分段的问题。

二、副标题

如果文章的结构层次比较复杂,有时候就会用到 <h2> 或者 <h3> 之类的标签,以区别层次关系。不过用了这些标题标签,就不能用 <p> 标签了。

三、加粗

如果要对某些文字进行加粗,就可以在文字的前后加上 <strong> (或者<b>) 标签。

四、超链接

如果要在文字或者图片上添加超链接,就需要用到 <a> 标签。

格式:

  1. <a href="http://jingpin.org">精品博客</a>

效果:

精品博客

如果是一般的纯文字文章,以上四种 HTML 标签应该够用了,如果要添加图片视频或者表格,就需要多折腾几下:

插入多媒体常用的 HTML 标签

五、插入图片

如果要插入一张图片,我使用以下代码格式:

  1.  

其中:

1、src 表示图片的 URL 地址;

2、title 表示图片的名称,当鼠标移到图片上的时候,title 值就会显示 ;

3、alt 表示图片的替代文字,当图片没有显示的时候,alt 值就会显示;

4、width 表示图片的宽度,height 表示图片的高度,class 表示图片的对齐方式,这些都设置好了,就把图片的位置给定好了,从而有利于提升页面的加载速度;

六、插入视频

这个通常都是把视频的嵌入代码直接复制粘贴下来的。当然,图片 URL 和视频代码都是事前或者事后上网解决的。

插入表格常用的 HTML 标签

七、插入表格

表格比较麻烦,我采用以下的代码格式:

  1. <table width="200" border="1">
  2. <tr>
  3. <td> </td>
  4. <td> </td>
  5. </tr>
  6. <tr>
  7. <td> </td>
  8. <td> </td>
  9. </tr>
  10. </table>

其中:

1、width 表示表格的宽度,可以根据自己的 WordPress 主题适当调整;

2、border 表示表格边框的尺寸;

3、<tr> 表示行,一对 <tr></tr> 表示一行;

4、<td> 表示列,一对 <td></td> 表示一列。

一篇文章常用的 HTML 标签基本上就这些了,你如果有用到更多 HTML 标签,欢迎分享。

相关博文:

  1. 如何在文章中插入表格
  2. 博客导航系列之法律类独立博客
  3. 博客导航系列之财经类独立博客
  4. 博客导航系列之其他类独立博客
  5. 博客导航系列之军事/政治类独立博客

此文发表于 博客技术 以及标签 , , ; 收藏永久链接. 发表评论或者留下引用: 引用链接.
Post comment as twitter logo facebook logo
Sort: Newest | Oldest

@kenneth DIV 是把内容框起来,P 是分段,所以我想没有什么标准不标准的,只是看个人爱好。

对于WP而言,两个种编辑器都不够完美。

  国外有个编辑器小软件,叫HtmlDocEdit,我发现它产生的HTML代码里,没有p标签,通通用div标签。不知道这样的html文件符合不符合标准。
  当然,我是喜欢这样的,因为段落标签产生的空行不符合中国人的习惯。

嗯…… 普及HTML知识
直接上Dreamweaver

@纪小年 哈哈,我经常用 Dreamweaver, 不过有时候嫌它太大个。

还是不去找麻烦了

这种做法估计不常见吧?感觉有些南辕北辙的感觉。
不过这种方法的确锻炼人,能学到不少东西。

HTML我是高手!哇咔咔!

@Estyle 哈哈,好久不见,别来无恙啊?有空过两招 HTML 给我啊。

推荐几个HTML和UBB的编辑器吧,有什么比较好的可视化的UBB编辑器?

@芒果 我的 WordPress 后台是禁用可视化编辑器的,所以在后台写我也要记住前面 4 种标签。@YouKnowMe
我只用过 DreamWeaver 和 WLW.

还是直接后台写吧~比较舒服。