|
第四节 文字标签 前面的三节教程，第一节讲了学习方法，第二节讲了使用编辑器，第三节讲了认识代码。这三节的内容虽然简单，但是，非常重要，因为它们是学习代码知识的基础之基础。如果没有好的学习方法，学习代码将会事倍功半；如果不会切换编辑器的两种页面，用代码制作网页只是一句空话；如果不懂得代码的基本结构，以后讲解的各种标签很难理解与接受。因此，希望朋友们把前面的三节教程一定要学好，不要因为内容简单而不为。
从本节开始讲解常用的各种标签。这一节讲解的内容是文字标签。
制作网页，离不开文字，因此，文字标签是最基本的标签之一。我们必须把文字标签弄懂，学好。
文字标签是一对标签。文字的首标签是：<FONT> ，文字的尾标签是：</FONT> ，文字内容，要放在首标签与尾标签之间。这里的文字内容，可以是几个文字，也可以是一大段文字。
文字的首标签<FONT>中可以添加许多属性与属值。添加的属性属值与标签名称之间要用一个空格隔开，各个属性之间也要用一个空格隔开，属性与属值之间要用等号连接起来，属值要用双引号引起来。
文字标签常用的属性有：字体（face）、字号（size）、颜色（color）等属性。
把这些属性连同它们的属值添加到文字的首标签中即为：
<font color="#ff0000" size="7" face="华文行楷">
再添加上文字的尾标签与你要输入的文字内容，整套文字标签的表达方式即为：
<font color="#ff0000" size="7" face="华文行楷"> 要输入的文字内容</font >
在配套使用的标签中，首标签对内容起修饰、限制的作用，首标签中的属性属值就像汉语语法中的定语对主语和宾语修饰、限制那样，对其管辖的内容进行修饰、限制，它告诉浏览器应该怎样显示这些内容。而尾标签，则起收尾、闭合的作用，它告诉浏览器，这一套标签到这里就收尾了，闭合了。如果缺少了尾标签，这一套标签管辖的内容就不能照常显示了。
在上面的文字表达式中，字母是不区分大写与小写的，也就是说，字母大写或者小写都不会影响文字的显示效果的。
上面的文字表达式可以解析为：<文字标签 文字颜色＝“红色” 字号＝“7号” 字体＝“华文行楷”>
上面的文字表达式，文字颜色的值是用十六进制颜色表示的。“#”是十六进制颜色的标志；“#”符号的后面有六位数，前两位数表示红色，中间的两位数表示绿色，最后的两位数表示蓝色。每一位上的数字，可以选择16个数字其中之一。0—9，分别用0—9表示，10用a表示，11用b表示，12用c表示，13用d表示，14用e表示，15用f表示。数字选择得越小，其颜色越暗；数字选择得越大，其颜色越亮。
红色与绿色混合在一起是黄色：color="#ffff00"，红色与蓝色混合在一起是粉红色：color="#ff00ff"，绿色与蓝色混合在一起是天蓝色：color="#00ffff"。
表示每一种颜色的两位数，前一位的1等于后一位的16。
字号size的值，可选择1—7。1号字最小，7号字最大。如果你错误地把字号size的值输入为比7大的数字，则会按7号字显示。
字体face的值，可以选择：宋体、黑体、楷体、隶书、微软雅黑等字体。
文字标签的属性属值，还可以应用css样式表示，即：
<font style="color: rgb(0, 0, 255); font-family: 黑体; font-size: 30px;"> css样式，在以后的教程中我再做讲解，这里先认识一下就行了。
上面的文字标签可以解析为：
<文字标签 css样式＝“文字颜色：十进制颜色（蓝色）；字体：黑体；字号：30px;”>
上面的文字标签，css样式，可以看作是这个文字标签的属性；等号后面双引号中的内容可以看作是“css样式”的值。而这个值，又包括三部分：文字颜色、字体与字号。这里的文字颜色（括号内的数），由三个数组成，三个数之间，用逗号隔开。第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。各种颜色的数值，可选择0—255其中之一。数值越小，颜色越暗；数值越大，颜色越亮。
字号的值30px里的“px”，是像素的意思，是屏幕上显示数据的最基本的点。它是一种长度单位，是相对长度单位，没有绝对的大小。谁能说出一个“点”有多大呢？换句话来说，你也可以这样理解：如果你使用的电脑是大屏幕的台式电脑，这个点就变大了；如果你使用的电脑是小屏幕的笔记本电脑，这个点就变小了。
表示字号的长度单位还有pt、em等等。它们之间的进率是：1px=3/4pt, 1px=1/16em。
文字标签常用的属性还有：行高（line-height: 1.5em）、字距（letter-spacing: 1px）、背景颜色[background-color: rgb(74, 105, 95)]等属性。
这些属性需要用css样式添加到文字的首标签中。如下：
<FONT style="LINE-HEIGHT: 1.2em; BACKGROUND-COLOR: rgb(0,240,230); LETTER-SPACING: 1px; FONT-FAMILY: 黑体; COLOR: rgb(250,0,0); FONT-SIZE: 30px">
文字的行高，你可以简单地理解为：文字的行与行之间的距离；文字的字距，就是字与字之间的距离。
文字内容，可以用一套文字标签控制，也可以用几套文字标签控制。用几套文字标签控制文字内容举例如下：
<FONT color=#ff0000><FONT size=7><FONT face=华文行楷>文字内容</FONT></FONT></FONT>
用几套文字标签控制文字内容，如果使用了重复的文字标签，则靠近文字内容的文字标签起作用，另一个文字标签则成为多余的标签了。下面的文字标签中，重复使用了文字字号，第一个文字标签多余了，应该“删除”掉：
<FONT size=7> <FONT color=#ff0000> <font style="font-size: 25pt;" face="华文行楷">
在“文字图片编辑页面”中输入文字以后修改字号时，往往会发生这种现象。
文字颜色可用三种方法表示：十六进制颜色表示法：如：<FONT color=#ff0000>；十进制颜色表示法：如：<font style="color: rgb(0, 0, 255); >；英语颜色名称表示法：如：<FONT color=red>。
在制作网页时，不建议使用英语名称表示颜色。因为颜色的英语名称，大部份人不懂，不便于修改文字颜色。
十六进制颜色与十进制颜色可以相互转换，其方法为：
1、十六进制颜色转换为十进制颜色的方法：
用十六进制颜色值左边的一位数字乘以16的积，再加上十六进制颜色值右边的一位数字所得的和，就是所求的十进制颜色的值。
举例1： 把十六进制颜色值88转换为十进制颜色值： 16×8＋8＝136 转换为十进制颜色值为：136 举例2： 把十六进制颜色值F5转换为十进制颜色值： 16×15＋5＝245 转换为十进制颜色值为：245 举例3： 把十六进制颜色值EA转换为十进制颜色值。 16×14＋10＝234 转换为十进制颜色值为：234 2、十进制颜色转换为十六进制颜色的方法：
用十进制颜色值除以16，商为十六进制颜色值左边一位的数值，余数为十六进制颜色值右边一位的数值。
举例1：把十进制颜色值149转换为十六进制颜色值。 149÷16＝9……5 转换为十六进制颜色值为：95 举例2：把十进制颜色值169转换为十六进制颜色值。 169÷16＝10……9 转换为十六进制颜色值为：A9 举例3：把十进制颜色值250转换为十六进制颜色值。 250÷16＝15……10 转换为十六进制颜色值为：FA 各种颜色的名称对照，请你参阅我的这篇文章：
作业：
1、认识文字的首标签与尾标签，懂得文字内容必须输入在文字的首标签与尾标签之间。
2、认识本节讲解的文字标签的几种常用属性与属值，懂得它们所表示的意义，学会它们的用法。
3、认识文字标签的表达方式，并把它保存下来。
4、学会十六进制文字颜色与十进制文字颜色的相互转换。
5、撰写一段文章，试着修改字体、字号、颜色、行高、字距、背景颜色，并仔细观察其效果。（本题要反复练习）
“春天没来”编撰
2014年3月31日于北京 |
|
|
