博客制作代码速学体会（2

博客制作代码速学体会（2-1）

2013-08-23 12:10:56| 分类：HTML代码 | 标签：html代码网易博客装扮 |举报 |字号订阅

博客制作代码速学体会（2-1）

—青云学习笔记—

博客制作代码-这里讲的是一种html标识语言，因为现在的网页制作中绝大部分都是使用HTML标识语言编写的。

其实，在我们所使用的博客系统的编辑器中，系统已经为我们设置好了大部分的自动编辑程序功能，我们只要在编辑器中按序填入文字、图片或多媒体内容就可以了。我们在做好一个博客帖子以后，打开编辑器右上角的<>标记，可以看到里面不再是我们刚才用文字和图片编辑的内容，而是一个用html标识语言编写成的纯文本文件，也就是我们所说的html代码。

我们现在学习这个代码制作，是为了能填补现有的编辑器所没有为我们设置好的编程，为了更精美的打扮和装饰博客中的文字和图片内容，从而来靓人眼球、魅惑人心，最终目的还是为了更好地突出和显示帖子的主题思想。

在博客的代码制作中，我主张和坚持原创作品。我所说的原创：就是要尽量用自己的原创图片和原创文章。因为我们不可能做到完美和完全原创（包括音乐和动态图），但至少应该用自己的文字和图片来制作代码作品；在逐步掌握了代码的运用和规律以后，还应该用自己的编写程序来完成代码制作，这才是比较真正意义上的原创作品。

为了能最快速的掌握代码的制作运用，根据我自己学习的体会，最简易、最简单的介绍一下html代码的结构组成。

1、在html代码的制作运用中，用html标识语言制表格是它的最基本的要素，几乎所有的图文内容都是通过表格来划分区域设置位置的，音画帖里的多层图框也是通过表格的镶嵌来制作的。掌握了表格图框的制作运用，也就掌握了学习代码的基础了。

最基本的表格代码组成：

<TABLE>

<TBODY>

<TR>

<TD>

放置内容

</TD>

</TR>

</TBODY>

</TABLE>

上面的表格代码因为里面没有内容属性，所以也无法显示表格的具体存在，我先给它加上一个表格边框的属性代码：border=n，该属性用来定义表格的边框线粗细，n为零表示该表格没有边框（不显示边框）。

<TBODY>

<TR>

<TD>

放置内容

</TD>

</TR>

</TBODY>

</TABLE>

左边代码生成的格子实例

放置内容

在这个表格代码中，<TD></TD>是显示表格的列（栏、一个格子）代码；<TD>为一列（栏）的开始，</TD>为一列（栏）的结束；<TR>是行代码，为一行开始，</TR>为一行结束；一行里面可以有多个列（栏），也可以只有一列，在音画帖的制作中，一般的也就是一行一个列。我们的文字、图片等等内容就填充在每个列（栏、方格子）的里面。

下面用多行多列代码来实际展示一下：

代码：

<TR><TD>第一行第一格</TD><TD>第一行第二格</TD><TD>第一行第三格</TD></TR>

<TR><TD>第二行第一格</TD><TD>第二行第二格</TD><TD>第二行第三格</TD></TR>

<TR><TD>第三行第一格</TD><TD>第三行第二格</TD><TD>第三行第三格</TD></TR>

</TBODY></TABLE>

代码生成的实例：

第一行第一格第一行第二格第一行第三格

第二行第一格第二行第二格第二行第三格

第三行第一格第三行第二格第三行第三格

2、属性标识语言代码。

它们是用来放置在表格代码中正确安置位置和更好地装饰要素内容的。

具体的表示形式为：属性标识代码单词=属值（或者内容）

borderColor=表格边框的颜色（放置颜色代码）

bgColor=背景颜色（放置颜色代码）

background=背景图片（放置图片地址）

border=n 表格边框线粗细（数字表示）

width=表格宽度（用数字或用"100%"百分比）

height=表格高度（用数字或用"100%"百分比）

cellSpacing=n 边框与内置边框的宽度（n用数值表示）

cellPadding=n 表格内插入文本与表格框的间距（n用数值表示）

align=left （左对齐）、center（居中）、right（右对齐）水平方向属性定位标签

valign=top （靠顶）、bottom（靠底）垂直方向属性定位标签

LEFT: npx （n用数值表示，数值越小，越往左移；越大越往右）横坐标定位标签

TOP:npx （n用数值表示，数值小，朝上靠；越大越往下）竖坐标定位标签

class=" FCK__ShowTableBorders" 或者id=table1 网页的相对样式标签

POSITION: relative 相对定位标签语句

以上的这些属性标识语言代码是html标识语言中用到比较多的基本属性代码，还有其他的一些我们可以在制作使用中逐步的来认识它们。对于这些个代码单词开始学习时可以不懂它的拼写和读音，但要能够看懂它的属性用法，并逐步的熟悉它们。

根据自己制作的实际需要，把需要的属性代码用到表格代码中或者图片、文字、多媒体代码中就可以起到定位、定尺寸大小和装饰具体内容的效果了。

需要指出的是：现在网上流传的一些代码的使用，一些无用的多余的属性代码经常被当作正常代码语言放在表格代码中，比如有的帖子背景图片已经设置为最大尺寸，也没有设置图片的边框，但他还是保留着表格边框的颜色标签代码-borderColor=#000000等，虽然在显示效果的时候也许并没有什么影响，但是它们会浪费我们的使用资源，也会影响到网页的打开速度。

下面是二组分别用颜色背景和图片背景制作的图框代码：（当然，有时候我们为了给文字和图片在网页中定位，也可以做成没有背景颜色和背景图片，也没有边框的空白的图框，然后在中间放进文字或图片，这样显示出来的就只有文字和图片而不显示图框了。）

颜色背景图框实例和代码：

（高度设置：height=100就可以了，因为图框会跟着内容的高度自动延伸的。）

<TR>

<TD>

在此插入内容

</TD>

</TR>

</TABLE>

图片背景图框实例和代码：

（1、宽度和高度尺寸必须和图片的尺寸加上框边的厚度后一样，否则显示的将是不完整画面或者大于图片的重复画面。

2、如果不要图框，把里面红色的代码删去，并把二个红色的数字改为0就可以了。）