表达式

彩虹的绚丽 2015-08-01

展开全文

《第四节》文字标签的表达方式即为：<font color="#ff0000" size="7" face="华文行楷"> 要输入的文字内容</font>

上面的文字表达式可以解析为：<文字标签文字颜色＝“红色” 字号＝“7号” 字体＝“华文行楷”>

还可以应用css样式表示，即：<font style="color: rgb(0, 0, 255); font-family: 黑体; font-size: 30px;">

<文字标签 css样式＝“文字颜色：十进制颜色（蓝色）；字体：黑体；字号：30px;”>

《第五节》图片标签一般的表达方式为：<IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450 height=673>

图片标签解析：<图片标签路径＝“地址” 宽度＝450 高度＝673>

图片标签用css样式表示。例如： <img style="width: 300px; height: 450px;" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">

添加了标题属性与替代文本属性的图片标签：

图片标签还可以添加边框线的属性：

图片标签还可以添加对齐方式属性：（DISPLAY: block属性不可省略）

图片标签还可以添加自定义鼠标指针样式：

图片标签还可以添加外边矩属性：

可以将图片放置到你想放置的任意地方：<IMG style="POSITION: absolute; WIDTH: 450px; TOP: 1200px; LEFT: 0px" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_15.jpg" width=450>

上面的图片标签添加了css的绝对定位样式，要添加css的相对定位样式，把absolute修改为 relative即可。

《第六节》段落标签的表达方式为：<p>要放置的内容</p>。

一、设置了对齐方式的段落标签：

1、设置了“居左对齐”的段落标签：

<p align="left">这一段的文字是居左对齐</p>

2、设置了“居中对齐”的段落标签：

<p align="center" >我是居中对齐</p>

3、设置了“居右对齐”的段落标签：

<p align="right">我是居右对齐</p>

二、设置了宽度与高度的段落标签：

<P style="WIDTH: 620px; HEIGHT: 100px">“居左对齐”的段落标签，适用于普通文章的段落；“居中对齐”的段落标签，适用于文章的标题，也适用于诗词类文章；“居右对齐”的段落标签，适用于文章中末尾的作者署名与写作日期。</P>

<P style="WIDTH: 620px; HEIGHT: 30px">“居左对齐”的段落标签，适用于普通文章的段落；“居中对齐”的段落标签，适用于文章的标题，也适用于诗词类文章；“居右对齐”的段落标签，适用于文章中末尾的作者署名与写作日期。</P>

三、设置了背景颜色的段落标签：

<P style="BACKGROUND-COLOR: #ffffaa">我有米黄色的背景颜色了。</P>

首标签解析：<段落标签 css样式＝“背景颜色：米黄色”>

四、设置了背景颜色和外边距的段落标签：

<P style="BACKGROUND-COLOR: #ffffaa; MARGIN: 30px">我有米黄色背景颜色和30px的外边距</P>

五、设置了首行缩进的段落标签：

<P style="TEXT-INDENT: 2em">这是一段文字，首行文字空了两格。为什么空了两格呢？因为设置了首行缩进的样式。你看看这段代码：TEXT-INDENT: 2em就知道了，这就是首行空两格的代码。</P>

首标签解析：<段落标签 css样式＝“文字首行缩进：2em”> 这里的2em，可以理解为：两个文字的宽度。

首标签解析：<段落标签 css样式＝“背景颜色：米黄色；外边距：30px”>

六、设置了滚动条的段落标签：

<P style="WIDTH: 400px; HEIGHT: 100px; OVERFLOW: auto">文章内容</P>首标签解析：<段落标签 css样式＝“宽度：400px；高度：100px；OVERFLOW: auto代码即为：设置滚动条”>

七、设置了边框线的段落标签：

<P style="BORDER-BOTTOM: rgb(153,253,255) 4px solid; BORDER-LEFT: rgb(153,253,255) 4px solid; BORDER-TOP: rgb(153,253,255) 4px solid; BORDER-RIGHT: rgb(153,253,255) 4px solid">这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。 </P>首标签解析：<段落标签 css样式＝“下边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px 边框线样式为实心线；左边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px 边框线样式为实心线；上边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px 边框线样式为实心线；右边框：十进制颜色（红色值为153，绿色值为253，蓝色值为255）边框线宽度为4px 边框线样式为实心线；”>

八、设置了背景图片的段落标签：

<p style="BORDER-BOTTOM: red 5px solid; BORDER-LEFT: red 5px solid; BACKGROUND: url(http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg); BORDER-TOP: red 5px solid; BORDER-RIGHT: red 5px solid">这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。</p>

首标签解析：<段落标签 css样式＝“下边框：红色 5px 实心线；左边框：红色 5px 实心线；背景图片：地址（http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg）；上边框：红色 5px 实心线；右边框：红色 5px 实心线；下边框：红色 5px 实心线；左边框：红色 5px 实心线；”>

九、设置了竖排版样式的段落标签：

<P style="WRITING-MODE: tb-rl; WIDTH: 200px; HEIGHT: 350px">这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。</P>

首标签解析：<段落标签 css样式＝“排版样式：竖排版；宽度：200px；高度：350px”>

十、设置了绝对定位样式与背景颜色的段落标签：

<P style="POSITION: absolute; BACKGROUND-COLOR: rgb(10,255,0); TOP: 100px; LEFT: 0px" >这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。</P>

首标签解析：<段落标签 css样式＝“定位方式：绝对定位；背景颜色：十进制颜色（红色值10，绿色值255，蓝色值0）；居上：100px；居左：0px”>

十一、设置了诸多文字属性的段落标签：

<p style="width: 99%; color: rgb(0, 200, 0); line-height: 150%; letter-spacing: 10px; font-family: 黑体; font-size: 26pt; filter: glow(color=yelow, strength=5);" >这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。</P>

首标签解析：<段落标签 css样式＝“宽度：99％；文字颜色：十进制颜色（绿色）；行高：150％；字距：10px；字体：黑体；字号：26pt；滤镜：光晕滤镜（颜色＝黄色，强度＝5）；”>

《第七节》制作文字网页时，常常把块区标签与文字标签组合起来应用:

1、制作“居左对齐”的文字，应使用：

2、制作“居中对齐”的文字，应使用：

3、制作“居右对齐”的文字，应使用：

制作图片网页时，则只用块区标签就可以了。

这是“居左对齐”的图片代码：

这是“居中对齐”的图片代码：

</div>

这是“居右对齐”的图片代码：

1、几个段落标签连用，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。举例如下：

<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是段落标签，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。你观察一下，我们之间的空白区域是否是两行呢？</P>
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是段落标签，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。你观察一下，我们之间的空白区域是否是两行呢？</P>
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是段落标签，各段文字自成一段，浏览器会在各段之间留出两行的空白区域。你观察一下，我们之间的空白区域是否是两行呢？</P>

2、几个块区标签连用，各段文字自成一段，浏览器会在各段之间留出一行的空白区域。举例如下：

<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000"> 这些文字使用的都是块区标签，各段文字自成一段，浏览器会在各段文字之间留出一行的空白区域。你观察一下，我们之间的空白区域是否是一行呢？ </DIV>
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是块区标签，各段文字自成一段，浏览器会在各段文字之间留出一行的空白区域。你观察一下，我们之间的空白区域是否是一行呢？</DIV>
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是块区标签，各段文字自成一段，浏览器会在各段文字之间留出一行的空白区域。你观察一下，我们之间的空白区域是否是一行呢？</DIV>

3、几个行内块区标签连用，浏览器只会分行，不能分段，各个行内块区之间没有空行。举例如下：

<SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是行内块区标签，浏览器不给我们分段了。你观察一下，我们都跑到一个段落中了。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是行内块区标签，浏览器不给我们分段了。你观察一下，我们都跑到一个段落中了。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">这些文字使用的都是行内块区标签，浏览器不给我们分段了。你观察一下，我们都跑到一个段落中了。</SPAN>

制作文字网页。设置的标签代码如下：

在代码编辑页面，把这一小段代码“粘贴”了若干次，每一小段代码所控制的文字内容，只是一个数字“2”（你也可以改用任意的数字、字母或者文字），然后，切换到“文字图片编辑”页面中，“删除”掉这个数字“2”，输入你的文章内容。

如果你想制作“居中对齐”的文字段落时，你就把style="TEXT-INDENT: 2em"替换为：align="center"

如果你想制作“居右对齐”的文字段落时，你就把style="TEXT-INDENT: 2em"替换为：align="right"

要放入图片的地方，使用下面的代码即可（只需替换图片标签）：

《第八节》1、向左移动的文字代码：

<MARQUEE><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">这是向左移动的文字</FONT></MARQUEE>或者：

<MARQUEE direction=left><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">这是向左移动的文字</FONT></MARQUEE>

它们的应用顺序是：移动首标签→文字首标签→文字内容→文字尾标签→移动尾标签。

2、向右移动的文字代码：

<MARQUEE direction=right><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">这是向右移动的文字</FONT></MARQUEE>

3、向上移动的文字代码：

<MARQUEE direction=up><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">这是向上移动的文字</FONT></MARQUEE>

4、向下移动的文字代码：

<MARQUEE direction=down><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">这是向下移动的文字</FONT></MARQUEE>

二、认识移动速度：

代码1：

<MARQUEE scrollAmount=1><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">我的移动速度为1</FONT></MARQUEE>

代码2：

<MARQUEE scrollAmount=10><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">我的移动速度为10</FONT></MARQUEE>

三、把握移动标签的延时属性：

代码：

<MARQUEE scrollAmount=15 scrollDelay=800><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">我的移动速度为15，为什么我还是跑得这样慢呢？</FONT></MARQUEE>

如果你已经弄清楚了移动“次数”的概念，你就会懂得，移动内容实际的移动速度不只与“移动速度”有关，而且与移动的“延时属性”也有很大的关系。懂得网页内容的实际“移动速度”与移动标签中设置的“移动速度”和移动的“延时属性”都有很大的关系

四、认识移动屏幕：

移动标签是一种块级标签。

所谓块级标签，就是说，这种标签会形成一个“块”，也就是会形成一个方框。

代码：

<marquee direction="left" height="150" width="480" scrollAmount="3" scrollDelay="10"><FONT style="FONT-FAMILY: 黑体; COLOR: rgb(0,0,255); FONT-SIZE: 25px">世上无难事只怕有心人</FONT></MARQUEE>