圆黑体字体转换器-代码学习群简单教程（四）

第 4 节 文本标签

前面三篇教程，第一节讲了学习方法，第二节讲了编辑器的使用，第三节讲了认识代码。 这三部分的内容虽然简单，但是非常重要，因为它们是学习代码知识的基础。 如果没有好的学习方法，学习代码就会事倍功半； 如果不能在编辑器的两个页面之间切换，那么用代码制作网页就是一句空话； 如果不了解代码的基本结构圆黑体字体转换器，后面解释的各种标签就会很难理解接受。 所以，希望小伙伴们一定要学好前面的三个教程，不要因为内容简单就不去做了。

从本节开始解释常用的各种标签。 本节是关于文本标签的。

制作网页离不开文字，所以文字标签是最基本的标签之一。 我们一定要理解文字标签，学好它。

文本标签是一对标签。 文本的第一个标签是： ，文本的最后一个标签是： ，文本内容应放在第一个标签和最后一个标签之间。 这里的文字内容可以是几个字，也可以是一大段文字。

许多属性和值可以添加到文本的第一个标签中。 添加的属性值和标签名称应以空格分隔，每个属性也应以空格分隔。 属性和属性值要用等号连接，属性值要用双引号括起来。 。

文本标签常用的属性有：字体（face）、字体大小（size）、颜色（color）等属性。

将这些属性及其值添加到文本的第一个标签中：

然后添加文本的结束标签和要输入的文本内容，整组文本标签的表达方式为：

要输入的文字内容

在匹配的标签中，第一个标签修饰和限制内容，第一个标签中的属性值修饰和限制其管辖的内容，就像中文语法中的定语修饰和限制主语和宾语一样，告诉浏览器如何做以显示内容。 尾部标签起到结束和结束的作用。 它告诉浏览器这组标签到此结束并关闭。 如果缺少尾部标签，则这组标签所管辖的内容将无法正常显示。

上述文本表达中，不区分字母的大小写，也就是说字母的大小写都不会影响文本的显示效果。

上面的文字表达式可以解析为：

在上面的文本表达式中，文本颜色的值以十六进制颜色表示。 “#”是十六进制颜色符号； “#”符号后面有六位数字，前两位代表红色，中间两位代表绿色，最后两位代表蓝色。 对于每个数字，您可以从 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。

字体大小值可以从 1 到 7 之间选择。大小 1 最小，大小 7 最大。 如果您错误地将字体大小的值输入为大于 7 的数字，则会以字体大小 7 显示。

字体的值，可以选择：宋、黑、楷、隶书、微软雅黑等字体。

文本标签的属性值也可以应用css样式来表示，即：

css样式，我会在以后的教程中讲解，在这里熟悉一下就可以了。

上面的文字标签可以解析为：

上面的文本标签，css样式，可以看成是这个文本标签的属性； 等号后面双引号内的内容可以视为“css style”的值。 而这个值包括三个部分：文字颜色、字体和字号。 此处的文本颜色（括号中的数字）由三个以逗号分隔的数字组成。 第一个数字代表红色，第二个数字代表绿色，第三个数字代表蓝色。 各种颜色的值，可以选择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 样式的文本的第一个标签中。 如下：

您可以简单地将文本的行高理解为：文本行之间的距离； 文本的字距调整是单词之间的距离。

文本内容可以由一组文本标签或多组文本标签控制。 使用多组文本标签来控制文本内容的示例如下：

文字内容

使用多组文本标签来控制文本内容。 如果使用重复的文本标签，则靠近文本内容的文本标签将起作用，而其他文本标签将变得多余。 在以下文本标签中，重复使用文本字体大小。 第一个文本标记是多余的表情包设计，应该“删除”：

在“文字图片编辑页面”中输入文字后修改字体大小时，经常会出现这种现象。

文本颜色可以用三种方式表示： 十六进制颜色表示：如： ； 十进制颜色表示法：如：。

制作网页时，不建议使用颜色的英文名称。 由于大多数人不了解颜色的英文名称，因此不方便修改文字颜色。

十六进制颜色和十进制颜色可以相互转换，方法是：

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日，北京