【原】代码入门教程（8）

春天没来 2012-10-22

展开全文

第二章　　标签应用

第一节文字标签的应用

第一章讲解了代码基础知识。在第一章中，简单介绍了什么是代码，如何学习代码，认识标签、认识标签名称以及常用标签的属性与属值。这部分知识，比较枯燥，但是，它是学习代码的基础，不懂这些知识，既不能分析别人的作品代码，更不能制作网页。而撰写文章处，是学习代码的风水宝地，离开了这个风水宝地，学习代码就是一句空话。因此，我们必须熟悉撰写文章处的两种页面，要充分应用这个风水宝地；我们一定要认真学习、反复巩固第一章的代码基础知识，在以后各章节的学习和应用中，要不断地返回第一章，参阅有关内容，把你制作网页的体会记好笔记，设置一个专门的文件夹保存起来。

第二章讲解各种标签的应用，下面先讲解文字标签的应用。

文字标签语法：<FONT>内容</FONT> （标签语法：指的是标签的表达方式、使用方法。）

文字标签常用的属性：字体（face）、字号（size）和文字颜色（color）。

常用的字体（face）有：宋体、黑体、隶书、楷体、幼圆、华文行楷、微软雅黑等等。它们的显示效果如下：

宋体：“春天没来”欢迎您黑体：“春天没来”欢迎您

隶书：“春天没来”欢迎您楷体：“春天没来”欢迎您

幼圆：“春天没来”欢迎您华文行楷：“春天没来”欢迎您

微软雅黑：“春天没来”欢迎您

在这些字体中，“宋体、隶书、幼圆”并没有多大的区别，“隶书”，也不是“书法”作品中的隶书。

字号（size）一般有两种表示方法：（1）应用字体属值表示字号。如：size=4 （2）用应用css样式表示字号；如：style=font－size：40pt 　

在这里我要说明的是：这里的字号（size）与360doc图书馆在撰写文章处提供的字号是两码事。这里的字号（size），1号字体最小，7号字体最大；而360doc图书馆在撰写文章处提供的字号，6号最小，初号最大。

文字颜色（color）一般有三种表示方法：（1）英语颜色名称表示法。如：color="orange"；（2）十六进制颜色表示法。如：bgcolor="#CCFFCC" （3）十进制颜色表示法。如：color="rgb(255,0,0)"

文字标签基本的表达方法有两种：

（1）<font style="font-family: 楷体; font-size: 32px;" color="#ff0000">“春天没来”欢迎您</font>
（2） <font color="#ff0000" size="6" face="楷体">“春天没来”欢迎您</font>

文字标签的应用，就是在文字标签中添加一至三种属性，并且变换它们的属值，从而达到不同文字效果的制作过程。例如：你可以在文字标签中只添加“颜色”的属性与属值，代码如下：<font color="#ff0000" >“春天没来”欢迎您</font> 。你也可以在文字标签中只添加“字号”的属性与属值，代码如下：<font size="6" >“春天没来”欢迎您</font> 。

在系统默认的情况下，文字字体（face）是宋体，字号（size）是小四，文字颜色（color）是黑色。

文字标签的应用，在大多数的情况下，还是与其它标签（例如：图片标签、移动标签、表格标签等标签）联合起来应用的。例如：在表格标签中设置一个闪光的背景图片，在表格的单元格中输入文字标签，就会制作出美丽的闪光文字来。

文字标签与其它标签联合应用举例：

代码1：

<font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal;

font-weight: normal;" color="#ff0000" face="华文行楷"><b>“春天没来”欢迎您

</b></font></div>

代码2：

<TABLE border=2 background=http://image53.360doc.com/DownloadImg/

2012/07/1017/25421788_2.jpg align=center>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#0000FF)" align=center>

<FONT style="FONT-SIZE: 50pt" color=#336699 face=隶书><B>春天没来欢迎您

</B></FONT></TD></TR></TBODY></TABLE>

代码3：

<TABLE border=4 background=http://image53.360doc.com/DownloadImg/

2012/07/1017/25421788_6.jpg align=center>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#000000)" align=center>

<B>“春天没来”欢迎您</B></FONT></TD></TR></TBODY></TABLE>
代码4：

<font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal;

font-weight: normal;" color="#ffff00" face="迷你简秀英">
<div align="left">
<marquee style="width: 798px; height: 421px;" behavior="alternate">

“春天没来”欢迎您

</marquee></div></font></div></div>
文字标签与其它标签的联合应用，我将在以后的相关章节中进行讲解。

作业：

1、熟记文字标签语法。

2、熟记文字标签的三种常用属性。

3、熟悉常用的几种字体。

4、认识文字颜色的三种表达方式。熟悉其中的十进制颜色和十六进制颜色的表达方式。

5、熟悉字体的两种表达方式。

6、把“文字标签与其它标签联合应用举例”的四种代码分别粘贴到“撰写文章处”发表观察其效果。

２０１２年１０月2 3 日于北京

第二章　　标签应用

第二节移动文字（1）

在移动标签中，移动方向和移动速度是最基本的属性。本节我们先来熟悉一下不同的移动方向和移动速度的实际效果。

        移动标签语法：<marquee>内容</marquee>
        移动标签的属性：移动方向（direction）、移动速度（scrollamount）。
        移动方向的属值：left（向左移动）、 right（向右移动）、up（向上移动）、down（向下移动）。默认为left （向左移动）。

移动方向的表示方法如：direction=up （等号后面的方向可替换）

移动速度的属值是数字。

移动速度的表示方法：scrollamount=4 (等号后面的数字可替换）

请浏览下面的代码，观察它们的实际显示效果：

“向左行”代码：
<marquee direction="left"><font style="line-height: normal; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff">我在向左行</font></marquee>

效果：

我在向左行

“向右行”代码：

<marquee direction="right"><font style="line-height: normal; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff">行右向在我</font></marquee>

效果：

行右向在我

“向上行”代码：

<marquee direction="up"><font style="line-height: normal; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff">我在向上行</font></marquee>

效果：

我在向上行

“向下行”代码：

<marquee direction="down"><font style="line-height: normal; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff">我在向下行</font></marquee>

效果：

我在向下行

移动速度为“1”的代码：
<marquee scrollAmount="1"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 20pt; FONT-WEIGHT: normal" color=#ff00ff>我慢如老牛</FONT></marquee>

效果：

我慢如老牛

移动速度为“3”的代码：

<marquee scrollAmount="3"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 20pt; FONT-WEIGHT: normal" color=#ff00ff>我的速度正常</FONT></marquee>
效果：

我的速度正常

移动速度为“8”的代码：

<marquee scrollAmount="8"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 20pt; FONT-WEIGHT: normal" color=#ff00ff>我快步如飞</FONT></marquee>

效果：

我快步如飞

移动速度为“20”的代码：

效果：

我快极了

移动速度为“80”的代码：

效果：

我如火箭

移动速度为“440”的代码：

效果：

我如闪电

作业：

1、熟练掌握“移动标签语法”。

2、学会在移动标签中添加“移动方向”和“移动速度”的属性。

3、学会联合应用移动标签和文字标签。

请注意，顺序必须是：<移动标签><文字标签>文字内容<文字尾标签><移动尾标签>

4、根据上面文章中提供的代码，自己制作几篇移动文章。要不断改变移动方向和移动速度的数值，观察其效果。

代码入门教程(1)	代码入门教程(2)	代码入门教程(3)
代码入门教程(4)	代码入门教程(5)	代码入门教程(6)
代码入门教程(7)	代码入门教程(8)	代码入门教程(9)