本节讲解文字标签。文字标签是常用的基本标签之一，制作网页离不开文字标签。
文字标签语法如下：<FONT>内容</FONT>（标签语法：指的是标签的表达方式、使用方法。）
<FONT>是文字标签，在这个标签的尖括号内，我们可以给它添加一些内容。添加的这些内容，就是这个标签的属性与属值。</FONT>是文字尾标签。在这两个标签之间的“内容”，就是我们要输入的文字。
文字标签常用的属性有：字体（face）、字号（size）和文字颜色（color）。在这些属性的后面，用等号连接起来的内容，就是属值。属性与属值是添加在文字标签的尖括号里面的，尾标签里不添加任何代码。现将文字标签举例如下：
<FONT color=#ff0000 size=6 face=隶书>“春天没来”欢迎您 </FONT>
在上面的这个文字标签中，FONT是标签名称：文字标签。color是颜色，指文字颜色，是这个文字标签的一个属性；#ff0000 是红色，是属值。size是字号，指文字的大小，是这个文字标签的一个属性；6是指６号字，是属值。face是字体，是这个文字标签的一个属性；隶书是一种字体，是属值。“春天没来”欢迎您是页面显示的文字内容，它的显示效果是这个文字标签的所有属性与属值综合效果的具体体现。
在文字标签中，常用的字体有：隶书、华文行楷、黑体、宋体、幼圆、楷体、微软雅黑等。你可以选择自己喜欢的字体替换到上面的文字标签中。
字号的表示方法有下列几种：
（1）应用样式表示字号：style=font－size：40pt 这种字号的表示方法不能替换到上面的文字标签中。下面的“文字标签表示方法举例”中有例子。
（2）应用<big>标签发大字：
<big>大字</big>；<big><big>大字</big></big>；每加一个<big>标签，字号大一号。这种字号的表示方法不能替换到上面的文字标签中。单独使用即可。用此方法选择文字的字号时，文字字体、文字颜色都是系统默认的字体和颜色。如果要同时选择文字的字体与颜色，可以添加一个文字标签。举例如下：
<big><big><big><big><big><big>
<font style="font-family: 黑体;" color="#0000ff">代码入门
</font></big></big></big></big></big></big>
（3）应用<h>标签发各种字号的字：可选择<h1>至<h7>。这种字号的表示方法不能替换到上面的文字标签中。单独使用即可。用此方法选择文字的字号时，文字字体、文字颜色都是系统默认的字体和颜色。如果要同时选择文字的字体与颜色，可以添加一个文字标签。举例如下：
<h1><font style="font-family: 隶书;" color="#ff0000">
学习代码</font></h1>
（4）应用 size=4属性属值表示字号。
在文字标签中，文字颜色的表示方法有下列三种：（这三种方法，均可在上面的文字标签中使用）
英语颜色名称表示法：color="orange" 把英语颜色名称放入等号后面的双引号内即可。
十六进制颜色表示法：bgcolor="#CCFFCC"
十进制颜色表示法：color="rgb(255,0,0)"
用16进制表示颜色：bgcolor="#CCFFCC" 前两位表示红色的浓度，中间的两位表示绿色的浓度，后面的两位表示蓝色的浓度；# 号代表16进制；某一位上的数值，0——9时：用0——9表示；10——16时：依次用abcdef这些字母表示。
用十进制表示颜色：color= rgb(132,20,180); R值，全称为：RED。指的是：红色值。取值为0——255之间。 G值，全称为：GREEN 。指的是：绿色值。取值为0——255之间。 B值，全称为：BLUE。指的是蓝色值。取值为0——255之间。
常用颜色三种表示方法对照表：
白色：16进制表示为：#FFFFFF；10进制表示为：255，255，255；英语名称表示为：white
黑色：16进制表示为：#000000；10进制表示为：0，0，0；英语名称表示为：black
红色：16进制表示为：#FF0000；10进制表示为：255，0，0；英语名称表示为：red
绿色：16进制表示为：#00FF00；10进制表示为：0，255，0；英语名称表示为：green
蓝色：16进制表示为：#0000FF；10进制表示为：0，0，255；英语名称表示为：blue
黄色：16进制表示为：#FFFF00；10进制表示为：255，255，0；英语名称表示为：yellow
青色：16进制表示为：#00FFFF；10进制表示为：0，255，255；英语名称表示为：cyan
紫色：16进制表示为：#FF00FF；10进制表示为：255，0，255；英语名称表示为：purple
文字标签表示方法举例：
1、<FONT color=#ff0000 size=6 face=隶书>“春天没来”欢迎您 </FONT>
（size=6，这种字号，可以选择1－7号。）
2、<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ff00ff"><strong>
"春天没来"欢迎您</strong></font>
“文字标签表示方法举例2”的注释：
<文字标签 样式＝行与行的间距：默认值；字号：30pt;文字样式：默认值；小型大写字母的字体：默认值；文本的粗细：默认值；文字颜色：紫色；><强调标签，也就是粗体标签>"春天没来"欢迎您</强调尾标签></文字尾标签>
上面的这个标签，设置了一个文字标签，一个强调标签，接下来是文字内容，后面是强调标签与文字标签的尾标签。在文字标签里，有一个属性：样式。后面的内容，都可以看成“样式”的属值。
上面的这个标签,用到了CSS样式，有关CSS样式的内容，我以后再讲。
作业：
1、应用上面提供的两个文字标签（一次只能复制、粘贴一个文字标签！），改变“字体”，观察其效果。（具体方法：把代码复制、粘贴到撰写文章处的代码状态下，点击“预览”按钮观察其效果，或者输入标题以后，点击“发表”按钮，观察其效果。然后“返回”代码状态下，改变字体，再点击“预览”按钮观察其效果或者输入标题以后，点击“发表”按钮，观察其效果。如此反复进行。）
2、按照1题的方法，改变“字号”，观察其效果。
3、按照1题的方法，改变“文字颜色”，观察其效果。
２０１２年１０月４日于北京
第一章 代码基础知识
第七节 图片标签
本节讲解图片标签。
图片标签又叫贴图标签，是网页制作常用的基本标签之一。
图片标签语法如下：
１、简略式：<img src="图片地址"> ２、基本式：<img title="内容" alt="内容" src="图片地址"> 。
在图片标签中，img是标签名称：图片标签。title是标题的意思。它的属值，也就是等号后面的“内容”，是图片的“替换文字”。图片的“替换文字”就是当图片不能显示的时候，我们可以看到的文字内容。alt是图片的文字提示。它的属值，也就是等号后面的“内容”，是当鼠标放到图片上时显示出来的文字内容。这两处的内容，一般是输入图片的标题名称或者是你的图书馆的名称等内容。src是源文件路径，等号后面要输入图片的有效地址。所谓有效地址，是指已经上传到网络中的图片的地址，或者换句话来说，就是指JPEG（jpg）、GIF等格式的图片的地址。
图片标签形式举例：
1、图片标签形式1：
注释：图片标签形式1：有一个属性：src是源文件路径，也就是文章的地址。
2、图片标签形式2：
注释：图片标签形式2：有三个属性：title是标题 alt是图片的文字提示 src是源文件路径，也就是文章的地址。
图片标签形式3：
注释：此形式的属性“样式”中设置了图片的四个外边距（margin）。
“px”的意思是像素，就是指组成图片的那些小圆点。图片都是由许许多多的小圆点组成的。比如：某一个图片，高度为300px，宽度我500px，就是说这个图片的高，是由300个小圆点组成的，宽是由500个小圆点组成的。
图片标签形式4：
注释：此形式的图片标签，在“样式”中设置了图片的“宽度”和“高度”。
图片标签形式5：
注释：此形式设置了图片的边框宽度（border-width）、外边距（margin）、图片的宽度（width）和高度（height）。
border-width：0px（图片边框的宽）
margin是 简写属性：在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
例如：margin:10px 5px 15px 20px;（设置了四个值，其顺序是上外边距、右外边距、下外边距、左外边。）
例如：margin:10px 5px 15px （设置了三个值，其顺序是上外边距、右外边距、下外边距。）
例如：margin:10px 5px ;（设置了两个值，是指上外边距和下外边距为10px、左外边矩和右外边距为5px。）
例如：margin:10px （设置了一个值，所有 4 个外边距都是10px ）
图片标签形式6：
注释：此形式设置了边框的边框线的宽度（BORDER-RIGHT-WIDTH是右边框线宽度、BORDER-TOP-WIDTH是上边框线宽度、BORDER-BOTTOM-WIDTH是下边框线宽度、 BORDER-LEFT-WIDTH是左边框线宽度）、图片的外边距（MARGIN）、图片的宽度（WIDTH）和高度（HEIGHT）。
上面的6种表达形式中，形式1、形式2、形式3是按照“原图片的规格”显示的，形式4、形式5、形式6能够改变原图片的规格，按照“自己需要的规格”显示图片。
在制作网页的时候，我们常常会用到图片，而且是各种不同规格的图片。这就需要解决两个问题：一是怎样寻找图片的地址，二是怎样把图片修改成我们需要的规格。下面我就来谈谈这两个问题。
1、寻找图片地址的方法：
例如下面这个图片：
2009/9/21/88761_6265622_7.jpg就是这个图片的地址。
可能你已经注意到了，在这个图片的“属性”方框中，还有一处标有：维度 186×275 。 这就是这个图片的规格。它所表达的意思是：这个图片的宽度是186px，高度是275px。换句话来说也就是这个图片的宽度是由186个像素组成的，高度是由275个像素组成的。
2、修改图片规格的方法：
常用的修改图片规格的方法有下列三种：
方法1：把图片复制、粘贴到撰写文章处，在代码状态下修改图片的宽度（width）与高度（height）的数值，然后点击“发表”按钮。
方法2、把图片复制、粘贴到撰写文章处，双击图片，先点击一下“固定比例”前面的小方框，消去小方框内的小勾。然后修改宽度与高度的数值（例如：修改为：300×400），修改完成以后，点击“固定比例”前面的小方框，使小方框内划上小勾，接着点击“确定”。再一次点击一下“固定比例”前面的小方框，消去小方框内的小勾。然后修改宽度与高度的数值（修改为：300×400），修改完成以后，点击“固定比例”前面的小方框，使小方框内划上小勾，接着点击“确定”。
经过这样两次的修改以后，就可以点击“发表”按钮了。
方法3：直接把此图片的“图片地址”替换到下面贴图标签的“图片地址”处：
<img style="width: 300px; height: 400px;" src="图片地址">
得到图片标签：
然后点击“发表”按钮。
用以上三种方法都可以得到下面300×400的图片规格。
上图规格：300×400
作业：
1、在下面的括号内填写“贴图标签”的常用“属性”代码。
常用属性如下：
源文件路径（）、标题（）、图片的文字提示（）、样式（）、外边距（）、边框宽度（）、图片的宽度（）、图片的高度（）、右边框线宽度（）、上边框线宽度（）、下边框线宽度（）、左边框线宽度（）。
2、自己找几个图片，复制图片的代码，粘贴到“撰写文章”处的“代码编辑”页面中，“删除”掉多余的代码，只保留“贴图标签的基本形式”如：
_212515645.shtml"> ，
然后点击“发表”按钮，观察其效果。
说明：图片的标题名称：如果你选择的图片是“风景”图片，你可以输入：此处风景最迷人、江山如此多娇等等；如果你选择的图片是“美女”图片，你可以输入：成熟的女人更迷人、女人四十一枝花等等。（不一一列举了）
3、自己找几个图片，复制其地址。
4、自己找几个图片，分别用三种方法修改图片的规格。
