卡尼尔美业(武汉)科技有限公司-代码入门教程(8)
你的位置:卡尼尔美业(武汉)科技有限公司 > 资质荣誉 > 代码入门教程(8)
代码入门教程(8)
发布日期:2022-08-17 11:12    点击次数:196

图片

第二章  标 签 应 用第一节  文字标签的应用

图片

第一章讲解了代码基础知识。在第一章中,简单介绍了什么是代码,如何学习代码,认识标签、认识标签名称以及常用标签的属性与属值。这部分知识,比较枯燥,但是,它是学习代码的基础,不懂这些知识,既不能分析别人的作品代码,更不能制作网页。而撰写文章处,是学习代码的风水宝地,离开了这个风水宝地,学习代码就是一句空话。因此,我们必须熟悉撰写文章处的两种页面,要充分应用这个风水宝地;我们一定要认真学习、反复巩固第一章的代码基础知识,在以后各章节的学习和应用中,要不断地返回第一章, 李商隐无题诗参阅有关内容,把你制作网页的体会记好笔记,设置一个专门的文件夹保存起来。第二章讲解各种标签的应用,下面先讲解文字标签的应用。文字标签语法:<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:<div style="width: 560px; filter: shadow(color=#00ff00, strength=10);"><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><FONT style="FONT-SIZE: 50pt" color=#336699 face=隶书><B>“春天没来”欢迎您</B></FONT></TD></TR></TBODY></TABLE>代码4:<div align="center"><div style="width: 769px; height: 106px; filter: shadow(color= #FF4500, strength=60);"><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、把“文字标签与其它标签联合应用举例”的四种代码分别粘贴到“撰写文章处”发表观察其效果。

图片

图片

图片

图片

图片

图片

2012年10月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”的代码:<MARQUEE scrollAmount=20><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 20pt; FONT-WEIGHT: normal" color=#ff00ff>我快极了</FONT></MARQUEE>效果:我快极了移动速度为“80”的代码:<MARQUEE scrollAmount=80><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 20pt; FONT-WEIGHT: normal" color=#ff00ff>我如火箭</FONT></MARQUEE>效果:我如火箭移动速度为“440”的代码:<MARQUEE scrollAmount=440><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 20pt; FONT-WEIGHT: normal" color=#ff00ff>我如闪电</FONT></MARQUEE>效果:我如闪电作业:1、熟练掌握“移动标签语法”。2、学会在移动标签中添加“移动方向”和“移动速度”的属性。3、学会联合应用移动标签和文字标签。请注意,顺序必须是:<移动标签><文字标签>文字内容<文字尾标签><移动尾标签>4、根据上面文章中提供的代码,自己制作几篇移动文章。要不断改变移动方向和移动速度的数值,观察其效果。代码入门教程(1)代码入门教程(2)代码入门教程(3)代码入门教程(4)代码入门教程(5)代码入门教程(6)代码入门教程(7)

图片

2012年10月2 3 日于北京

相关资讯