各类标签

蟠龙图书馆 2014-04-12

展开全文

一、文字标签：

1、首标签与尾标签：首标签是<FONT> ，文字的尾标签是</FONT> ，文字内容要放在首标签与尾标签之间。其表现方式为：<FONT>要放置的文字内容</FONT>。

2、文字标签属性：包括字体（face）、字号（size）、颜色（color）等。文字标签常用的属性还有：行高（line-height: 1.5em）、字距（letter-spacing: 1px）、背景颜色[background-color: rgb(74, 105, 95)]等属性。

字体（face）：可以选择宋体、黑体、楷体、隶书、微软雅黑等字体。

字号（size）：可选择1—7。1号字最小，7号字最大。如果你错误地把字号size的值输入为比7大的数字，则会按7号字显示。字号的值xxpx里的“px”，是像素的意思，是一种长度单位。

字体颜色（color）：一是用十六进制“#号表示颜色，如<FONT color=#ff0000>；“#”符号的后面有六位数，前两位数表示红色，中间的两位数表示绿色，最后的两位数表示蓝色。每一位上的数字，可以选择16个数字其中之一。0—9，分别用0—9表示，10用a表示，11用b表示，12用c表示，13用d表示，14用e表示，15用f表示。数字选择得越小，其颜色越暗；数字选择得越大，其颜色越亮。二是用十进制颜色表示法：如：<font style="color: rgb(0, 0, 255); >；三是用英语颜色名称表示法：如：<FONT color=red>。

背景颜色[background-color: rgb(74, 105, 95)]

二、图片标签：

1、图片标签：<IMG 图片标签没有尾标签。

2、路径： src 图片的路径，是指图片保存在哪个网站的服务器中。也就是指图片的地址。

3、“地址” ："http: 指图片的地址。

4 、标题： title 在等号后面的双引号内输入标题内容，当用鼠标箭头指向图片的时候，就会显示出这些文字。例如：title="东方女性之魅力"。当用鼠标箭头指向图片的时候，就会显示出“东方女性之魅力”这些文字。

5 、替代文本：alt 作用是当图片无法显示的时候，就会显示出这里的文字内容。

6 、宽度与高度：宽度是 width ，高度是height ，其值用px表示。

360图书馆系统设置的规格，其宽度大约是680px左右，高度是随你放入的网页材料自动调整的。因此，在段落标签中，我们一般不必设置其宽度与高度

7、边框线：

上面的图片标签中添加了宽度为4px的灰色的实线型边框线。要修改边框线的颜色，你就修改上面标签中括号内的数值；要修改边框线的宽度，你就修改“4px”中的“4”；要修改边框线的样式，你就替换solid代码。

边框线的样式有：dotted是点虚线型；dashed是线虚线型；solid是实线型；double是双线型；groove是3D沟槽状；ridge是3D脊状；inset是3D内嵌式；outset是3D外嵌式。

8、对齐方式：

对齐方式有：居左对齐(<p align="left">)、居中对齐(<p align="center" >)、居右对齐(<p align="right">)。

“居左对齐”的段落标签，适用于普通文章的段落；“居中对齐”的段落标签，适用于文章的标题，也适用于诗词类文章；“居右对齐”的段落标签，适用于文章中末尾的作者署名与写作日期。

9、自定义鼠标指针样式：

修改括号内陆址代码即可改变鼠标指针样式

10、外边矩：

添加了外边矩属性，会在图片外围的四周留出一定的空白部位。也可以设置为在图片外围的某一边留出一定的空白部位。

11、绝对定位样式或者相对定位样式：

要把绝对定位样式(absolute)改变为相对定位样式(relative)，只需把absolute修改为 relative即可。

三、段落标签：

段落标签的首标签与尾标签：首标签是<p>，尾标签是</p>。首标签与尾标签之间是要放置的内容。表达方式为：<p>要放置的内容</p>。

1 、“居左对齐”标签是：<p align="left"><font style="color: rgb(0, 0, 255); font-family: 黑体; font-size: 20px;">文字内容</font></p>

2 、 “居中对齐”的标签是：<p align="center"><font style="color: rgb(0, 0, 255); font-family: 黑体; font-size: 20px;">文字内容</font></p>

3 、 “居右对齐”的标签是：<p align="right"><font style="color: rgb(0, 0, 255); font-family: 黑体; font-size: 20px;">文字内容</font></p>

以上联合标签，其顺序是：段落首标签，文字首标签，文字内容，文字尾标签，段落尾标签。

4 、首行缩进代码： <P style="TEXT-INDENT: 2em">

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

5、居左对齐代码：<p align="left">这一段的文字是居左对齐</p>

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

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

6 、 宽度代码：<P style="WIDTH: 620px;

高度代码：HEIGHT: 100px">

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

8、 外边距代码：MARGIN: 30px">我有米黄色背景颜色和30px的外边距</P>

9 、 滚动条代码：<P style="WIDTH: 400px; HEIGHT: 100px; OVERFLOW: auto">内容</P>

标签解析：<段落标签 css样式＝“宽度：400px；高度：100px；OVERFLOW: auto代码即为：设置滚动条”>

10、 边框线代码： <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 边框线样式为实心线；”>

11、 背景图片代码：<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 实心线；”>

12 、 竖排版样式代码：<P style="WRITING-MODE: tb-rl; WIDTH: 200px; HEIGHT: 350px">内容</P>

13、 绝对定位样式与背景颜色的代码：<P style="POSITION: absolute; BACKGROUND-COLOR: rgb(10,255,0); TOP: 100px; LEFT: 0px" >内容</P>

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

14 、 诸多文字属性的代码：<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、块区标签<div>：

1)块区标签的首标签是：<div>，块区标签的尾标签是：</div>。其表达方式为：<div>要放置的内容</div>。

2)对齐方式：

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

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

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

制作文字网页时，常常把块区标签与文字标签组合起来应用。

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

2、行内块区标签：<span> 与段落标签<p>、块区标签<div>的用法基本相同，只要把标签名称替换一下就行了。

块区标签与行内块区标签，在一般情况下不设置其宽度与高度。

不设置宽度与高度（也就是采用系统“默认”的宽度与高度）有什么优点呢？不设置宽度与高度，系统就可以按照你放入网页内容的多少自行调节其宽度与高度。

段落标签、块区标签与行内块区标签都是块级标签，三种标签一起使用，会形成一个“块”，也就是一个方框。在这个“块”（即方框）中可以放置你要放入的网页内容。它们之间区别有三：

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

<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>

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

<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>

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

<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>

段落标签中可以包裹块区标签与行内块区标签。

块区标签中可以包裹段落标签与行内块区标签。

行内块区标签中不能够包裹段落标签与块区标签。

五、移动标签：

1、首标签是<marquee>，尾标签是</marquee>

移动标签的表达式为：<marquee>内容</marquee>

2、移动标签常用的属性：移动方向（direction）、移动速度（scrollamount）、移动方式（behavior）、延时属性（scrolldelay）、对齐方式（aligh）、移动屏幕的宽（width）和高（height）等属性。

移动方向（direction）：left（向左移动）、 right（向右移动）、up（向上移动）、down（向下移动）。默认为left （向左移动)

移动速度（scrollamount）：移动速度的属值是大于等于1的数字，数字越大移动速度越快。速度取值的大小要看你制作网页的需要而确定。一般取值为3－4。表示方法为：scrollamount=4。

移动方式（behavior）：slide（由一端快速滑动到另一端）、alternate（来回滚动）。表示方法：behavior="slide" 表示由一端快速滑动到另一端；behavior=alternate表示来回滚动。

移动屏幕的宽和高:width（宽）、height（高）。表示方法：width="?" height="?" （？处输入数值）。

对齐方式：aligh=left （居左对齐）或者align=right（居右对齐）或者align=center （居中对齐）。用css样式表示：

style="TEXT-ALIGN: left" （居左对齐） style="TEXT-ALIGN: center" （居中对齐）style="TEXT-ALIGN: right" （居右对齐）。

六、标签解析：

1、<p align="center">

解析：<段落标签对齐方式＝居中对齐

2、<p align="right">

解析：<段落标签对齐方式＝居右对齐

3、<P style="WIDTH: 620px; HEIGHT: 100px">

解析：<段落标签 css样式＝宽度：620px;高度100px">

4、<P style="BACKGROUND-COLOR: #ffffaa; MARGIN: 30px">

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

5、<P style="TEXT-INDENT: 2em">

解析：<段落标签css样式＝“文字首行缩进：2em”>

6、<img style="width: 300px; height: 450px;" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">

解析：<图片标签="宽度： 300px;高度：450px;" 路径="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">

7、<img style="width: 300px; height: 450px;" title="东方女性之魅力" alt="“春天没来”欢迎您" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">

解析：<图片标签="宽度： 300px;高度：450px;"标题="东方女性之魅力"替代文本="“春天没来”欢迎您" 路径="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">

8、<font color="#ff0000" size="7" face="华文行楷">

解析：<文字标签颜色=红色字号="7"号字体="华文行楷">

9、<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=0);" >

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

10、<P style="POSITION: absolute; BACKGROUND-COLOR: rgb(10,255,0); TOP: 100px; LEFT: 0px" >

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

11、<P style="WRITING-MODE: tb-rl; WIDTH: 200px; HEIGHT: 350px">

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