200字范文 > 快速学习html css的经典笔记

快速学习html css的经典笔记

时间：2022-06-30 00:04:25

相关推荐

快速学习html css的经典笔记

HTML语言剖析

Html简介-目录

全写：HyperTextMark-upLanguage 译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。 1.Html特点：

►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；

►通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；

►纯文本文件，可以使用各种文本编辑器编写；(Dreamweaver是首选)

►文件扩展名：.htm或.html；

►html文件必须在Web浏览器上运行；（运行环境）

►具有跨平台性。

1.HTML语法结构：

►HTML文件是由一系列的元素和标签（tag）组成的；

►元素：网页中的内容；

►标签：用于规定元素的属性和它在文件中的位置；

►格式：<元素名称属性="值"...>元素资料</元素名称>,<元素名称属性="值"...>

►不区分大小写。

2.HTML文件结构：

►起始标记：<html></html>表示HTML网页的起始；

►文件头部：<head></head>设置初始化文档信息和文档管理标注；

►文件主体：<body></body>设置格式化的浏览器显示的文档（内容）；

►注释部分：可以放在任何位置；

►<!>

※例: <html> <head> <title>Html简介</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> </head> <bodybgcolor="#FFFFFF"text="#000000">  </body> </html>

n标签写法：

►任何标签皆由"<>"所包含，如<b>

►标签名与小于号之间不能留有空白字符。

►某些标签要加上参数，某些则不必。如<fontsize="+2">大家好</font>

►参数只可加于起始标签中。

►在起始标签之标签名前加上符号"/"便是其终结标签，如</font>

►标签字母大小写皆可。

n成对标签与单标签：标签按型态分为成对标签与单标签 1.成对标签顾名思义，它以起始标签及终结标签将文字围住，令其达到预期显示效果。例如HTML源码：<b>我愿意和大家显示成：我愿意和大家一起学好html/css!大家有信心吗？其中<b></b>便称为成对标签。它以起始标签<b>及结尾标签</b>标示文字我愿意和大家一起学好html/css!令它显示成粗体，两者失其一都会发生错误显示。

2.单标签是指标签单独出现，只有起始标签没有终结标签。

※例如HTML源码： Ilovemyhometown.<br>It'sabeautifulplace. 显示成： Ilovemyhometown. It'sabeautifulplace.

其中换行标签<br>便属单标签。它的作用便是将标签后所有东西显示于下一行，可见结尾标签对于它是没意义的，但有些人会为空标签加上终结标签，如果加上结尾标签，对HTML没有影响。便于记忆。

HTML语言剖析

Html标记一览-目录

HTML语言剖析

文件标记-目录

<HTML>；<HEAD>；<TITLE>；<BODY>；<meta>；<base>；<link>；-文件头部标签

nHTML基本架构：

1.以下HTMLSourceCode(源代码)便是一份HTML文件的基本架构： <HTML> <HEAD> <title>HTML超文本标记语言在线教程</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <metaname="author"content="合肥世杰"> <metaname="keywords"content="html,css,asp,jsp,php"> <metaname="description"content="世杰教育网站！"> <metahttp-equiv="refresh"content="10"> <metahttp-equiv="refresh"content="2;url="> <metahttp-equiv="Expires"content="01Jan00:00:00"> <basehref=""target="_blank"> <linkhref="../css.css"rel="stylesheet"type="text/css"> <linkrel="fontdef"src="Amelia.pfr"> </HEAD> <BODY>网页的内容，很多标记都作用于此 </BODY> </HTML>

2.特点解说：

►整个文件处于标记<HTML>与</HTML>之间。<HTML>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

►文件分两部分，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称主体（或者称之为正文）。基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。

►开头部分用以保存重要信息，而只有主体部分会被显示。所以大部分标记会运用于主体部分。

►<TITLE>所标示的是文件的标题。会出现于窗口标题及别人加入收藏时显示的名称，所以每页有不同而明确的标题是有必要的。

上述标记中只有<BODY>具有参数设定。

3.<META>标签相关属性

►文档标题标签：<title>HTML超文本标记语言在线教程</title>

►<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

►作者：<metaname="author"content="合肥世杰">

►关键字：<metaname="keywords"content="html,css,asp,jsp,php">

►描述信息：<metaname="description"content="世杰教育网站！">

►刷新：<metahttp-equiv="refresh"content="10">

►跳转：<metahttp-equiv="refresh"content="2;url=">

►文档过期：<metahttp-equiv="Expires"content="01Jan00:00:00">

►基础地址：<basehref=""target="_blank">为当前文档提供了完整的URL

►链接文件：<linkhref="../css.css"rel="stylesheet"type="text/css"> <linkrel="fontdef"src="Amelia.pfr"> 定义在当前文档和其它文档之间的关系

属性描述：

►页面过渡效果： <metaHTTP-EQUIV="page-enter"CONTENT="revealtrans(duration=5,transition=23)"> <metaHTTP-EQUIV="page-exit"CONTENT="revealtrans(duration=5,transition=23)">

n<BODY>之参数设定：

※例: <BODYtext="#000000"link="#0000FF"alink="#FF0000"vlink="#0000FF"background="bg1.gif"bgcolor="#FFFFFF"leftmargin=2topmargin=2bgproperties="fixed">

►text="#000000" 用以设定文字颜色。#000000代表黑色，亦可以采用颜色的名称，即text="black"。各种颜色的值及名称可参考【调色原理】一节。

►link="#0000FF" 设定一般文字链接颜色。（默认为蓝色）

►alink="#FF0000" 设定鼠标刚按下时文字颜色。

►vlink="#0000FF" 设定链接访问后的颜色。（被点击过）。

►background="bg1.gif" 设定背景图片。GIF或JPEG皆可，可以是绝对途径或相对途径。

►bgcolor="#FFFFFF" 设定背景颜色。当己设定背景图片时会失去作用，除非图片有透明部分。

►leftmargin=2 设置网页的左边距，单位为像素。『只适用于IE』

►topmargin=2 设置网页的上边距。『只适用于IE』

►bgproperties="fixed" 固定背景图片，当滚动条拖动时背景图片不会跟着滚动。『只适用于IE』

注：标记及参数之字母大小都可以。

HTML语言剖析

字体标记-目录

n实体标记与逻辑标记：

实体标记与逻辑标记的区别：

1.实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。例如逻辑标记的<EM>由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加下划线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。

2.多个实体标记也可有效标示同一语句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。例如两个逻辑标记<EM>及<STRONG>同时标示一字句于旧浏览器常失去作用。

►实体标记有： <I><B><U>

►逻辑标记有： <STRONG><EM><VAR><CITE><DFN><ADDRESS><CODE><KBO><SAMP><TT>

注：若要求真确的效果当然以实体标记为佳。

n<STRONG><B>：

两者皆能产生字体加粗的效果，但必须注意的是当文件被设为gb2312Encoding时，两者所标示的中文字不会于NetscapeNetvigator显示粗体效果。

n<I><EM><VAR><CITE><DFN><ADDRESS>：

这些标记于InternetExplorer都产生斜体效果，而只有</DFN>于NetscapeNetvigator失去作用。这些标记中只有<ADDRESS>较为特别，因为它自身具备换行效果所以不需要在它前面加上<BR>标记。

n<TT><SAMP><CODE><KBD><U><STRIKE><BIG><SMALL><SUP><SUB>

►<TT><SAMP><CODE><KBD>可令每字母有相等宽度且每字母之间的距离稍为加宽。但于NC不见得如此。

►<U>是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。

►<STRIKE>加上删除线的标记。

►<BIG>令字体加大。

►<SMALL>令字体变细。

►<SUB>为下标字，<SUP>则为上标字，仅剩的数学标记

n<H1><H2><H3><H4><H5><H6>：

这些是标题标记，由<H1>至<H6>变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。

n<FONT><BASEFONT>：

►<BASEFONT>可以用于文件的开头部分，即<HEAD>与</HEAD>之间的位置，将影响全文字句，是一个空标记，用以改变字体显示的内定值。 <FONT>是应用于文件的内文部分，即<BODY>与</BODY>之间的位置，只影响所标示的字句，是一个围堵标记。

►两标记可同时存在，唯没被<FONT>所标示的字句才直接受<BASEFONT>所影响，而<FONT>本身亦受<BASEFONT>的影响。

<FONT>的参数设定： ※例： <fontface="Arial"size="+2"color="#008000">我把青春献给你</font>

►face="Arial" 设定文字的字形。Arial是常用的一种，请不要使用Window内建字形以外的字形。于没有设定为Gb2312Encoding的中文网页，NetscapeNetvigator不会显示此标记所指明的任何中文字形。

►size="+2" 设定文字的大小。其值可以是绝对或相对，绝对的意思便是标记自己决定文字的大小，不受<BASEFONT>的影响，如 size="5"表示其大小便是5，而html内定值为3，即size="3"和没有设定是一样的。相对的意思便是在内定值3的基础上增加或减少大小级数，如size="+2"便等同绝对表示法的size="5"，但若已设定<BASEFONTsize="n">则其实际大小便是n+2不再是3+2了。<BASEFONT>只有绝对表示法。

►color="#008000" 设定文字的颜色。#008000表示绿色

HTML语言剖析

段落标记-目录

；<P>；<BR>；<HR>；<CENTER>；<PRE>；<DIV>；<NOBR>；<WBR>

n：

►为文中不同部份加上说明，方便日后修改。 ※例：

n<P>：

<P>称为段落标记。作用：在文字、图、表格之间增加一空白行。原来<P>是一成对标记，标于一段落的头尾，但从HTML2.0开始己不需要</P>作结尾。<P>的常用参数：如：<palign="center">

►align="center" 可选值：right,left,center。内定值：align="left"

n<BR>：

<BR>称为换行标记。作用：使文字、图、表格等显示于下一行。

由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。

※例：错误示范：（邮局不会接受一行过的地址）

正确例子：

n<HR>：

<HR>称为水平线。作用：插入一条水平线。 <HR>之参数修改：以：<HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade>为例。

►align="LEFT" 设定线条置放位置，可选择：left；right；center三种设定值。

►size="2" 设定线条高度，以像素作单位，默认为2。

►width="70%" 设定线条长度，可以是绝对值（以像素作单位）或相对值，默认为100%。

►color="#0000FF"『只适用于IE』设定线条颜色，默认为黑色（#000000）。#0000FF代表蓝色，亦可以采用颜色的名称，即text="blue"。双引号可以省略

►noshade 设定线条为平面显示，若删去则具阴影或立体，这是默认值。即默认水平线是具备阴影效果，如加上noshade，则水平线实现为一个二维的黑线，不具备三维效果。

n<CENTER>：

<CENTER>称为居中标记。作用：使文字、图片、表格等显示于中间。

这标记原先是Netscape所定义，后来其它浏览器都支持它，但你会发现很多标记已有align="CENTER"的参数，<CENTER>似乎多余了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有align="CENTER"参数的<TABLE>标记亦要不厌其烦地加上居中标记，因有许多浏览器不支持<TABLE>标记中的align="CENTER"参数。

※例： <CENTER>滚滚长江东逝水</CENTER> <CENTER>这几天心里颇不宁静</CENTER> <CENTER>这几天心里颇不宁静</CENTER>

n<PRE>：

<PRE>称为预设格式标记。作用：令文字按照原始的排列方式显示。

这标记允许保留你于原始码中输入的空白。细看以下例子你便可体会到此标记的威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。

n<DIV>：

<DIV>称为区域标记。作用：设定文字、图片、表格等的摆放位置。

<DIV>应用于StyleSheet（样式表）方面功能会更显得强大，它最终目的是给设计者另一种组织能力，有Class;Style;title;ID等属性，在CSS部分详细讲解，这处只介绍一个属性设定。 ※以<DIValign="center">为例：

►align="center" 可选值：center;left;right。决定字、画、表格等居中、靠左或靠右。 <DIValign="center">的作用和居中标记<CENTER>一样，前者是由HTML3.0开始的标准，后者是通用己久的标示法。

n<NOBR>：

<NOBR>称为不折行标记。作用：某些文字因太长而分开，以显示于同一行或下一行。它对网址、数学公式、一行数字、程序代码等尤为有用。

n<WBR>：

<WBR>称为建议折行标记。作用：预设折行部位。它没有抵触到<BR>的格式规范，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。

HTML语言剖析

列表标记-目录

n<OL><LI>:

<OL>称为有序列表标记。<LI>则用以标示列表项目。所谓有序列表就是在每一项前面加上1,2,3...等数目，又称编号列表。

1.<OL>的参数设定（常用）： ※例： <oltype="i"start="4"></ol>

►type="i" 设定数目样式，其值有五种，请参考右表，内定为type="1"。

►start="4" 设定开始数目，不论设定了哪一数目样式，其值只能是1,2,3..等整数，默认为start="1"。

2.<LI>的参数设定（常用）： ※例： <litype="square"value="3">

►type="square" 只适用于非顺序列表，设定符号款式，其值有三种，如下，内定为type="disc"：符号是当type="disc"时的列项符号。符号是当type="circle"时的列项符号。符号是当type="square"时的列项符号。

►value="3" 只适用于顺序列表，设定该一项的数目，其后各项将以此作为起始数目而递增，但前面各项则不受影响，其值只能是1,2,3..等整数，没有内定值。

n<UL>：

<UL>称为无序列表标记。所谓无序列表就是在每一项前面加上、、等符号，故又称符号列表。

<UL>的参数设定（常用）：

※例：<ULtype="square">

►type="square" 设定符号款式，其值有三种，如下，内定为type="disc"：符号是当type="disc"时的列项符号。符号是当type="circle"时的列项符号。符号是当type="square"时的列项符号。

注意：由于<UL>及<LI>都有type这个参数，两者尽可能选用其一。

n<DL><DT><DD>:

<DL>称为定义列表标记。<DT>用以标示定义条目，<DD>则用以标示定义内容。所谓定义列表就是一种分二层的项目列表，其不顾符号及数目。

三个标记都没有常用的参数。而<DT><DD>可以独立使用，只是一些旧的浏览器并不支援，如IE3.0。常用的如<DD>标记可用以制造段落第一个字前面的空白。

※例： <dl> <dt>古典文学 <dd>《三国演义》 <dd>《水浒传》 </dl>

HTML语言剖析

表格标记-目录

n<TABLE><TR><TD>：

这三个标记是定义表格的最重要的标记，<TABLE>是一个定义一个表格标记，用以声明这是表格而且其他表格标记只能在他的范围内才适用，属于表格标记的还有其它。 <TR>用以表示表格列（row） <TD>用以表示表格单元格（cell）

3.<TABLE>的参数设定（常用）：

※例： <tablewidth="400"border="1"cellspacing="2"cellpadding="2"align="CENTER"valign="TOP"background="myweb.gif"bgcolor="#0000FF"bordercolor="#FF00FF"bordercolorlight="#00FF00"bordercolordark="#00FFFF"cols="2">

►width="400" 表格宽度，接受绝对值（如80）及相对值（如80%）。

►border="1" 表格边框宽度，不同浏览器有不同的设置值，使用时请指出。

►cellspacing="2" 表格格线宽度，

►cellpadding="2" 文字与单元格距离（填充），

►align="CENTER" 表格的摆放位置（水平），可选值为：left,right,center，

►valign="TOP". 表格内文字图片等的摆放位置（垂直），可选值为：top,middle,bottom。

►background="myweb.gif" 表格背景图片，与bgcolor不能同时使用。

►bgcolor="#0000FF" 表格背景颜色，与background不能同时使用

►bordercolor="#FF00FF" 表格边框颜色，NC与IE有不同的效果

►bordercolorlight="#00FF00" 表格亮（外）边框部分的颜色。『只适用于IE』

►bordercolordark="#00FFFF" 表格暗（内）边框部分的颜色，使用bordercolorlight或bordercolordark时注注意：bordercolor将会失效。『只适用于IE』

►cols="2" 表格跨行数目，让浏览器在下载表格前先画出整个表格

►frame边框

►表格的边框有4个：左边框、右边框、上边框、下边框。这四个边框都可以设置为显示或者隐藏。设置表格边框显示状态的基本语法如下：显示整个表格边框<tableframe="box"> 不显示表格边框<tableframe="void"> 只显示表格的上下边框<tableframe="hsides"> 只显示表格的左右边框<tableframe="vsides"> 只显示表格的上边框<tableframe="above"> 只显示表格的下边框<tableframe="below"> 只显示表格的左边框<tableframe="lhs"> 只显示表格的右边框<tableframe="rhs">

►表格中分隔线的显示同样可以进行各种设置，设置表格中分隔线的显示状态的基本语法如下：显示所有分隔线<tablerules="all"> 只显示组与组的分隔线<tablerules="groups"> 只显示行与行的分隔线<tablerules="rows"> 只显示列与列的分隔线<tablerules="cols"> 所有分隔线都不显示<tablerules="none">

4.<TR>的参数设定（常用）： ※例： <tralign="RIGHT"valign="MIDDLE"bgcolor="#0000FF"bordercolor="#FF00FF"bordercolorlight="#808080"bordercolordark="#FF0000">

►align="RIGHT" 该一列内文字图片等的摆放位置（水平），可选值为：left,center,right。

►valign="MIDDLE" 该一列内文字图片等的摆放位置（垂直），可选值为：top,middle,bottom。

►bgcolor="#0000FF" 该一列背景颜色，

►bordercolor="#FF00FF" 该一列边框颜色『只适用于IE』

►bordercolorlight="#808080" 该一列边框亮（外）边框部分的颜色，『只适用于IE』

►bordercolordark="#FF0000" 该一列边框暗（内）边框部分的颜色，使用bordercolorlight或bordercolordark时bordercolor将会失效。『只适用于IE』

5.<TD>的参数设定（常用）： ※例： <tdwidth="48%"height="400"colspan="5"rowspan="4"align="RIGHT"valign="BOTTOM"bgcolor="#FF00FF"bordercolor="#808080"bordercolorlight="#FF0000"bordercolordark="#00FF00"background="myweb.gif">

►width="48%" 该一单元格宽度，接受绝对值（如80）及相对值（如80%）。

►height="400" 该一单元格高度。

►colspan="5" 该一单元格向右打通的栏数。

►rowspan="4" 该一单元格向下打通的列数。

►align="RIGHT" 该一单元格内字画等的摆放位置（水平），可选值为：left,center,right。

►valign="BOTTOM" 该一单元格内字画等的摆放位置（垂直），可选值为：top,middle,bottom。

►bgcolor="#FF00FF" 该一单元格底色，

►bordercolor="#808080" 该一单元格边框颜色，『只适用于IE』

►bordercolorlight="#FF0000" 该一单元格边框亮（外）边框部分的颜色『只适用于IE』

►bordercolordark="#00FF00" 该一单元格边框暗（内）边框部分的颜色使用bordercolorlight或bordercolordark时bordercolor将会失效。『只适用于IE』

►background="myweb.gif" 该一单元格背景图片，与bgcolor任用其一。

n<TH>：

<TH>与<TD>同样是标示一个单元格，不同的是<TH>所标示的单元格中的文字是加粗且居中。通常用于表格第一列以标示栏目。用法是取代<TD>的位置便可以，其参数设定请参考<TD>。当然若为<TD>所标示的单元格中的文字加上粗体标记<B>便等如<TH>的效果。

n<CAPTION>：

<CAPTION>的作用是为表格标示一个标题列，就像是在表格上方加上一没格线的打通列。当然亦可置于下方，通常用以存放该表格的标题。

<CAPTION>的参数设定（常用）： ※例：<captionalign="TOP"valign="TOP"></caption>

►align="TOP" 该表格标题列相对于表格的摆放位置（水平），可选值为：left,center,right,top,middle,bottom，若align="bottom"的话标题列便会出现对表格的下方，不管你的原始码中把<caption>放在<table>中的头部或尾部。

►valign="TOP" 该表格标题列相对于表格的摆放位置（上下），可选值为：top,bottom。和align="TOP"或align="BOTTOM"相同。只有标题列置于下方及向右或向左贴，此参数值就可发挥作用。当只用一个参数时，首选align，valign是由HTML3.0才开始的参数。

HTML语言剖析

链接标记-目录

n<A>:

<A>称链接标记，由<A>与</A>所围的文字、图片等等可以成为一个链接。

<A>的一般参数设定:

6.页面链接

※例：<ahref="index.html"name="hello"target="_top">

►href="index.html" 这参数不能与name同时使用，使用这参数才能生成可点击的链接。

o当作为一外部链接时：href所设定的是该链接所要连到的文件名称，若该文件与此html档不是同在一目录请加上适当的路径，相对绝对皆可。

o当作为一内部链接时：href所设定的是该链接所要连到的同文件内锚点或指定文件之锚点，且不要其他标签只加上结束标示</a>便可以，例如<ahref="#there"></a>、<ahref="index.html#there"></a>及<ahref=".hk/~chris55/index.html#there"></a>其中there便是锚点，并与其前加上符号#以作识别，参考点由下一个参数name。

►name="hello" 这参数是为文件设置锚点，作为被链接，不会被显示。所以说构成一个内部链接要使用两次<A>链接标记。一次使用参数name先在文件中插入一个锚点，另一个使用参数href链接到这个锚点。

►target="_top" 设定链接被点击的结果所要显示的窗口。可选值为：_blank,_parent,_self,_top,打开方式名称。

otarget="打开方式名称" 这只运用与框架中，若被设定则链接结果将显示与该“打开方式名称”之框架中，框架名称是事先由框架标记所命名。

otarget="_blank"或target="new" 将链接的窗口内容，开在新的浏览器中打开。

otarget="_parent" 将链接的画面内容，当成文件的上一个画面。

otarget="_self" 将链接的画面内容，显示在目前的视窗中。(默认值)

otarget="_top" 将框架中链接的画面内容，显示在没有框架的窗口中。（即除去了框架)

7.文件链接

8.锚点链接先在页面上插入一个锚点，然后在页面上设一个链接（href=＂路径#锚点名＂）到这个锚点上。大致格式：<aname="锚点名"></a>;<ahref="路径#锚点名"></a>

9.空链接<ahref="#"></a>

10.脚本链接 javascript:self.print() javascript:self.close()

11.电子邮件链接： <amailto="邮件地址？cc=抄送地址&subject=主题&body=内容"></a>

n<BASE>：

<BASE>是一个链接基准标记，用以改变文件中所有链接标记的参数内定值。它只能应用与文件的开头部分，即标记<HEAD>与</HEAD>之间。

<BASE>的一般参数设定：

※例：<basehref="/"target="_top">

►href="/" 设定该页网页中所有HTTP文件及图形（包括相对路径链接及<IMG>图形标记等）的默认路径，其他如ftp://及gopher://等则不受影响。这个参数只可填入一个相对或绝对的路径，不必填入文件名称。一般相对路径链接及<IMG>图形标记等是内定以该页网页所在的目录作为起点，若依这例子，该文件中所有链接将会以/作为起点，若其中有链接如<ahref="index.html">BacktoMainPage</a>，那末它不会连到自已目录下的index.html，它将会连到Microsoft的首页，这是因为相对路径己给<BASE>转成绝对的了。

►target="_top" 设定该页网页中所有链接被点击之结果所要显示的视窗，免得分别为所有链接加上target参数，常应用于框架中。其设定与<A>链接标记中target参数相同。

HTML语言剖析

表单标记-目录

表单的用处很多，在网上无处不见，当然是配合ASP，JSP，ASP使用为佳，所以使用或学习动态网页的话，表单设计是必需的，表单的标记不多，但其参数变化很多。一份表单的基本架构是：在<FORM>标记的包围下加上一种或多个的表单输入方式及一个或多个的按键。

表单有三个基本组成部分：

►表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

►表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

►表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<FORM><INPUT> INPUT的种类：Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。 <SELECT><OPTION> <TEXTAREA>

n<FORM><INPUT>：

<form>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。

<form>的参数设定（常用）： ※例：<formaction="http://localhost/example.asp"method="POST">

►action="http://localhost/example.asp" 表单通常是与动态网页设计语言配合使用的，参数action便是用以指明该动态语言页面的位置，这样此表单所填的资料才能正确传给动态页面或者数据库作处理。可设定此参数为ACTION="mailto:your@"那样该表单所填的资料将会寄至此电邮地址（红色部分）。

►method="POST" 传送资料给数据库或者动态网页的的方式，可选值为POST,GET。请注意POST允许传送大量资料，但GET则只接受低于1K的资料，所以你若看过别人的表单原代码的话，你会发现申请表单用的是POST而搜索用的是GET。

<INPUT>的参数设定（常用）：由于其第一个参数type己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。

►type="Text" 可选值为Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。

12.Text（单行文本字段）

※例：<inputtype="Text"name="age"value="20"align="MIDDLE" size="2"maxlength="255"disabled>

►type="Text" 输入方式为Text，能产生一单行文本字段，上限为255字符。

►name="age" 此一单行文本字段名称，这是最重要的一个，方便动态网页辨认由表单传来的资料，可随便命名，但通常动态页面及数据库中都有指定名称，若转用其它名称便需要修改该动态页面和数据库字段了，名称可为空白或者特别符号的英文或数字，有大小写的分别，可以写成Your_Age，若有访客于此表单此一文本字段填入40的话，那传给动态页面的值字串便是Your_Age=40。

►value="20" 此一单行文本字段默认值。若不填写则文本字段是空白的，等待访客亲自键入，若value="20"的话，20便会出现在文本字段中，当然访客可以修改之。

►align="MIDDLE" 可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle.没太大用处。

►size="2" 此一单行文本字段显示的长度，若采用Big5编码的中文网页便要小心，同size的文本字段NC会显示得比IE冗长。

►maxlength="255" 此一单行文本字段可输入字符的上限，为方便编排资料或避免错输入等，宜设定上限，例如输入电话或QQ号码可设为9，年龄为2等。

►disabled：不发生作用

13.Radio（单选）

※例:<inputtype="Radio"name="gender"value="female"align="MIDDLE"checked>

►type="Radio" 输入方式为Radio，能产生一单选按钮，以供点选。

►name="gender" 此一Radio名称，参考Text部分的说明。

►value="female" 默认值。每一个radio必须及仅有一个value，通常有同时采用两个或以上同name不同value的Radio输入方式，可让使用使任选其一。

►align="middle" 可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。

►checked 设该Radio为默认被选。同name的各个Radio中只能有一个使用，或全不使用这参数。

14.Checkbox（复选按钮）

※例：<inputtype="Checkbox"name="idol"value="Leon"align="RIGHT"checked>

►type="Checkbox" 输入方式为Checkbox，能产生一复选按钮，以供复选。

►name="idol" 此一Checkbox名称，参考Text部分的说明。

►value="Leon" 默认值。每一个Checkbox有切只有一个value，当被选择时这值便会传给动态页面，例如所传字串idol=Leon。

►align="RIGHT" 可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。

►checked 设该Checkbox为默认被选。每个Checkbox都是独立的，所以每一个都可使用这参数，不像Radio。

15.Password（密码框）

※例：<inputtype="Password"name="pw"value="999"align="MIDDLE"size="5"maxlength="9">

►Password的其他参数和Text是完全相同的，请参考Text的介绍。两者作用不同，Password所输入的字元全以*号表示。

16.Submit（提交）及Reset（重写）

这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。

※例：<inputtype="Submit"name="other_funtion"value="确定"align="MIDDLE"> <inputtype="Reset"value="清除"align="MIDDLE">

►type="Submit" 设定输入方式为Submit或Reset。

►name="other_funtion" Submit的功能随name的不同而不同，须和动态语言配合。若只需要普通的提交键，则是其默认，不必用此参数。

►value="确定" 这个值不是输给动态语言的，而是显示在按键上，可以不用，传送键的内定值为SubmitQuery，重写键的默认值为Reset。

►align="MIDDLE" 可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。

17.Image（图片按键）

通常用以取代Submit及Reset两个按键，因为由程式产生的按键并不漂亮，这Image参数便允许采用自已制作的按键。

※例：<inputtype="Image"name="submit"align="bottom"src="ex_icon.gif">

►type="Image" 输入方式为Image。

►name="submit" 所要代表的按键，可以是submit,reset,或其它。

►align="bottom" 可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。

►src="new017.gif" 按键图片来源，若此图片文件不与该html文件在同一目录下，请加上相对或绝对路径。

18.File

※例：<inputtype="File"name="upload"align="BOTTOM"size="20"maxlength="100"accept="text/html">

►inputtype="File" 输入方式为Image。通常用以传输文件。

►name="upload" 这文件传输的名称，用以识别之用。

►align="BOTTOM" 可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。

►size="20" 所显示文本字段的长度。

►maxlength="100" 可输入字符的上限。

►accept="text/html" 所接受的文件类别，有二十六种选择，但可不设定。

19.Hidden

※例：<inputtype="Hidden"name="ID"value="6618">

►type="Hidden" 输入方式为隐藏或默认。它不会显示任何输入介面，而是一个默认值随表单一起传给ASP，列如由ASP产生的会员号码，或传入可更改的参数以调整ASP而避免修改ASP原代码。

►name="ID" 这文件传输的名称，用以识别之用。

►value="6618" 内定值，会以如ID=6618形式传给ASP。

20.Button

<inputtype="Button"name="useless"value="Back">

►type="Button" 输入方式为一般按键。常配合JavaScript作为其启动按键。

►name="useless" 这文件传输的名称，用处不大。

►value="Back" 按键显示名称。

n<SELECT><OPTION>：

<SELECT>是列表选单标记，每一选项皆由<OPTION>所标示，把它当作围堵标记或空标记使用都可以。

<SELECT>的参数设定（常用）： ※例：<selectname="where"size="6"multiple>

►name="where" 这列表选择项的名称，作识别之用，将会传及ASP。

►size="6" 这列表选择项的列数，即其高度，请自行修改。若使用此参数则不会有PopUp效果。

►multiple 令这列表选择项容许多重选择。

<OPTION>的参数设定（常用）： ※例：<optionvalue="tw"selected>

►value="tw" 这选项的值，将会传及ASP。请自行修改，但不同选项必须有不同的值。

►selected 设该选项为内定被选。一个单选列表选择项只能有一项或零可默认被选。

n<TEXTAREA>：

<TEXTAREA>是表单文字区块标记，常用于bugreport,feedback等需要填写大量资料的用途。

<TEXTAREA>的参数设定（常用）： ※例：<textareaname="comments"cols="40"rows="4"wrap="virtual">

►name="comments" 这文字区块的名称，作识别之用，将会传及ASP。

►cols="40" 这文字区块的宽度，单位是单个字符宽度。

►rows="4" 这文字区块的列数，即其高度，单位是单个字符宽度。

►wrap="VIRTUAL" 设定其折行问题，可选值为：off,physical,virtual。off表示不使用此属性，physical时则会强迫刘览器在送资料到ASP（Web服务器端）必须将实№文字中的换行一并送出，设为virtual时则送出连续成串的字（除非使用者按了键盘的RETURN/ENTER）。

★Css样式在表单中的应该：

CSS层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等。

21.字体样式的应用：字体样式包括：字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font)

►文本框里的文字是加粗的，大小是9pt，字体是宋体，代码：＜inputtype="text"name="formExam"size="10"maxlength="10"value="加粗"＞

►口令框文字是红色的，代码：＜inputtype="password"name="formExam3"size="8"maxlength="8"＞

►下拉框文字颜色是红色的，字体是Verdana，大小是9pt，代码：＜selectname="select"size="1"＞＜optionvalue="2"selected＞＜/option＞＜optionvalue="1"＞＜/option＞＜/select＞

►多行文本框了的字体是Verdana，有下划线，大小是9pt，代码：＜TEXTAREAname="formExam2"cols="30"rows="3"align=right＞underlinecssstyle＜/TEXTAREA＞

22.背景颜色和图像样式的应用

背景颜色利用background-color属性，背景图像利用background-image属性

►文本框背景是黑色的，字体是白色的，代码：＜inputtype="text"name="RedFld"size="10"maxlength="10"＞

►口令框背景是灰色的，代码：＜inputtype="password"name="RedFld3"size="10"maxlength="10"＞

►单选和复选按钮的背景是红色的，代码：＜inputtype="checkbox"name="checkbox"value="checkbox"＞＜inputtype="radio"name="radiobutton"value="radiobutton"＞

►下拉选择框的选项是丰富多彩的背景，代码：＜selectname="select2"size="1"＞＜optionselected＞＜/option＞＜option＞＜/option＞＜option＞＜/option＞＜option＞＜/option＞＜option＞＜/option＞＜/select＞

►多行文本框的背景是一个图像，代码：＜TEXTAREAname="RedFld2"cols="25"rows="3"wrap="VIRTUAL"＞＜/TEXTAREA＞

►submit1按钮的背景是黄色的，代码：＜inputtype="submit"name="Submit3"value="Submit1"＞

►submit2按钮的背景是一个图像，代码：＜inputtype="submit"name="Submit22"value="Submit2"＞

23.边框样式的应用

和边框有关的属性有：边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-color、边框宽度border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框border

►文本框有8种类型边框样式，即border-style： none：无边框，与任何指定的border-width值无关；dotted：点线；dashed：虚线；solid：实线边框；double：双线边框，两条单线与其间隔的和等于指定的border-width值；groove：3D凹槽；ridge：边框突起；inset：3D凹边；outset：3D凸边边框宽度的设置有一个规律： border-width:[thin|medium|thick|＜长度＞]{1,4} 边框宽度用一到四个值来设置元素的边框宽度，它们分别被应用于上、右、下和左边框宽度。如果只给出一个值，它被应用于所有边框宽度。如果两个或三个值给出了，省略了的值与对边相等例如：＜inputtype="text"name="RedF"＞边框颜色的设置有一个规律： border-colr:＜颜色＞{1,4} 边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了，它们分别被应用于上、右、下和左边框颜色。如果只给出一个值，它被应用于所有边框颜色。如果两个或三个值给出了，省略了的值与对边相等。

►对于多行文本框以及按钮，设置边框的方法和文本框一样；

►由于下拉选择框Select不支持边框的设置，所以对其设置无效；

►单选按钮和复选按钮的边框，设置的效果不十分协调，所以建议不要对它们设置；

★表单的提交

表单是用来采集用户输入的数据，就应该保证用户的数据被准确地提交到预定的地点，也就是说，我们在表单提交的时候，应该对用户的数据进行检验，一来可以避免用户误输数据，二来可以避免用户输入非法的，或者说不合格的数据；检验合格以后，还要保证用户的数据提交到特定的程序。

1.数据的检验

数据的检验，通常有两种程序：客户端检验和服务器端检验。客户端检验，比较快，服务器端检验，相对来说比较慢，为了确保安全，通常同时采用，这样就可以避免用户刻意破坏。不管采用什么方式，数据检验的原理都是一样的，一旦用户输入的数据不符合规定，就报错，要求用户重新输入，客户端检验常使用Javascrip脚本，服务器端的视系统而定。下面举个简单例子说明一下：

►给表单添加了onSubmit事件，通过onSubmit="returnCheckDate()"指定提交前，必须通过函数CheckDate()来检验，如果不合格，返回输入数据；

►数据检验的函数如下：＜script＞ functionCheckDate(){ //取得输入的数据 userName=document.RedForm.userName.value; userEmail=document.RedForm.userEmail.value; //如果没有输入姓名 if(userName==""){ alert("请输入姓名"); document.RedForm.userName.focus(); returnfalse; }else{ //如果没有输入Email，或者Email地址错误(不含@) if((userEmail=="")||(userEmail.indexOf("@")==-1)){ alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); returnfalse; }elsereturntrue; } } ＜/script＞

2.表单的分支提交

有些情况，表单需要根据用户的选择，提交到不同的程序，需要通过脚本来检测用户的选择分支，从而向不同的程序提交表单，如下面的例子：

►这里首先用到的是form的onSubmit="TwoSubmit(this)"然后根据选择的分支，来分别递交到不同的程序，TwoSubmit()函数如下：

►＜script＞ functionTwoSubmit(form){ if(form.Ref[0].checked){ form.action="cop.asp";//这里是分之一 }else{ form.action="ind.asp";//这里是分之二 } form.submit(); } ＜/script＞

3.用任何元素提交表单

除了用按钮或者图片按钮提交表单，其实任何页面元素都可以提交表单，不过都是通过脚本来完成的。

例如用链接来代替Submit按钮：通过onClick="document.form.submit()"来提交表单；用onClick="document.form.reset()"来复位表单，这样一来，任何一个元素都可以实现提交表单了。

★表单的常用技巧

下面这些常用的技巧，基本上都是和事件以及脚本联系在一起，注重功能，对脚本不加细述。常见的技巧有：下拉跳转菜单，表单内容的聚焦。

4.下拉跳转菜单

例如：基于表单的下拉跳转菜单

►这里用到了一个函数，用于向选择的地址跳转，＜scriptlanguage="JavaScript"＞ functionFormMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if(restore)selObj.selectedIndex=0; } ＜/script＞

►然后，给下拉选择框赋予一个事件onChange="FormMenu('parent',this,0)"，就可以了。

5.表单内容的聚焦

常用的是：点击之后默认值自动消失onFocus="this.value=''"，自动选择的是onMouseOver="this.select()"

6.去掉表格和表单间的空隙把＜form＞标签放到＜tr＞和＜td＞中间，对应的＜/form＞放在＜/td＞和＜/tr＞中间！

示例代码：＜tablewidth="100%"border="1"cellspacing="1"cellpadding="1"＞＜tr＞＜formname="form3"method="post"action=""＞＜td＞＜inputtype="text"name="textfield2"＞＜br＞＜inputtype="submit"name="Submit22"value="Submit"＞这里没有空隙＜/td＞＜/form＞＜/tr＞＜/table＞

7.用Email提交表单(只适合Outlook用户，不适合Foxmail用户)

格式如下：＜formname="..."action="mailto:xxxxx@xxx.xxx?Subject=表单反馈"enctype="text/plain"method="post"＞...＜/form＞这里的mailto:后面加上要接受信息的地址，?Subject是设置默认的Email标题，enctype="text/plain"是必要的，表示信息以文本方式提交，没有任何加密，所以这种方法常用于没有Asp/Php/cgi支持的空间，也只是一个代用的方法，用户必须安装Outlook，并且是默认的邮件程序，才能顺利执行提交，据说TheBat!也可以。

HTML语言剖析

图形标记-目录

<img>

n<img>

<IMG>称图形标记，主要用以插入图片于网页中，另外IMG标签还可以配合如配合影片文件等的播放及影像地图（ImageMap或称一图多连结）请看【影像地图】及【其他标记】。

<IMG>的一般参数设定：

※例：<imgsrc="logo.gif"width=100height=100hspace=5vspace=5 border=2align="top"alt="LogoofPenPalsGarden"lowsrc="pre_logo.gif">

►src="logo.gif" 图片来源，接受.gif,.jpg及.png格式，若图片文件与该html文件同处一目录则只写上文件名，否则必须加上正确的路径，相对或者是绝对路径都可以。

►width="100"height="100" 设定图片大小，此宽度、及高度一般采用pixels（像素）作单位。通常只设为图片的真实大小以免失真，若要改变图片大小最好事先使用图像编辑工具。如photoshop

►hspace="5"vspace="5" 设定图片四周空白，以免文字或其它图片过于贴近。hspace是设定图片左右的空间，vspace则是设定图片上下的空间，高度采用pixels（像素）作单位。

►border="2" 图片边框粗细。

►align="top" 调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：top,middle,bottom,left,right，默认为botom。Netscape还支持texttop,baseline,absmiddle,absbottom， texttop表示图片和文字依顶线对， baseline表示图片对到目前文字行底线值， absmiddle表示图片对到目前文字行绝对中央， absbottom表示图片对到目前文字行绝对底部，（绝对底部意指它考虑到比方y、g、q等字的下缘）。

►alt="这里是一张图片" 这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字也会显示。

►lowsrc="pre_logo.gif" 设定先显示低质量图片，若所加入的是一张很大的图片，下载时很长，这张低质量图片会先被显示以免浏览者失去兴趣，通常是原图片的灰度模式版本。

n热区:

※例： <mapname="Map"> <areashape="circle"coords="17,19,10"href="#"target="_blank"alt="这是圆形热区！"> <areashape="rect"coords="54,40,146,105"href="#"target="_blank"alt="这是矩形热区！"> <areashape="poly"coords="159,141,227,162,204,114"href="#"target="_blank"alt="这是多边形热区！"> </map>

HTML语言剖析

框架标记-目录

n框架概念：

所谓框架便是网页画面分成几个框窗，同时取得多个URL。只要<FRAMESET><FRAME>即可，而所有框架标记要放在一个总起的html里，这个html只记录了该框架是如何划分，不会显示任何资料，所以不必放入<BODY>标记，浏览这框架必须读取这html而不是其它框窗的档案。<FRAMESET>是用以划分框窗，每一框窗由一个<FRAME>标记所标示，<FRAME>必须在<FRAMESET>范围中使用。

※例： <framesetcols="50%,*"><framename="hello"src="up2u.html"><framename="hi"src="me2.html"> </frameset> 此例中<FRAMESET>把画面分成左右两相等部分，左便是显示up2u.html，右边则会显示me2.html这档案，<FRAME>标记所标示的框窗永远是按由上而下、由左至右的次序。

n<FRAMESET><FRAME>：

<FRAMESET>称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。 <FRAME>则只是设定某一个框窗内的参数属性。

►COLS="90,*" 垂直切割画面(如分左右两个画面)，接受整数值、百分数，*则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如COLS="30,*,50%"可以切成三个视窗，第一个视窗是30pixels的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗後剩下的空间，第三个视窗则占整个画面的50%宽度为一相对分割。您可自己调整数字。

►ROWS="120,*" 就是横向切割，将画面上下分开，数值设定同上。唯COLS与ROWS两参数尽量不要同在一个<FRAMESET>标记中，因Netacape偶然不能显示这类形的框架，尽采用多重分割。

►frameborder="0" 设定框架的边框，其值只有0和1，0表示不要边框，1表示要显示边框。（避免使用yes或no）

►border="0" 设定框架的边框厚度，以pixels为单位。

►bordercolor="#008000" 设定框架的边框颜色。

►framespacing="5" 表示框架与框架间的保留空白的距离。

►SRC="a.html" 设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。你可使用绝对路径或相对路径，有关此两者详见於【连结进阶】。

►NAME="top" 设定这个框窗的名称，这样才能指定框架来作连接，必不可少，可以任意命名。

►frameborder=0 设定框架的边框，其值只有0和1，0表示不要边框，1表示要显示边框。（避免使用yes或no）

►framespacing="6" 表示框架与框架间的保留空白的距离。

►bordercolor="#008000" 设定框架的边框颜色。颜色值请参考【HTML剖析】。

►scrolling="Auto" 设定是否要显示卷轴，YES表示要显示卷轴，NO表示无论如何都不要显示，AUTO是视情况显示。

►noresize 设定不让使用者可以改变这个框框的大小，如果没有设定此参数，使用者可以很随意地拉动框架，改变其大小。

►marginhight=5 表示框架高度部份边缘所保留的空间。

►marginwidth=5 表示框架宽度部份边缘所保留的空间。

n<NOFRAMES>：

当别人使用的浏览器版本太低，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用<NOFRAMES>这个标记，当使用者的浏览器看不到框架时，他就会看到<NOFRAMES>与</NOFRAMES>之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。

应用方法：在<frameset>标记范围加入</NOFRAMES>标记，以下是一个例子： <framesetrows="80,*"><noframes> <body> 有时候，使用的浏览器不支持框架功能，请转用新的浏览器。 </body> </noframes><framename="top"src="a.html"><framename="bottom"src="b.html"></frameset>

若浏览器支持框架，那它不会理会<noframes>中的东西，但若浏览器不支持框架，由於不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在<noframes>范围内的文字会被显示。

n<IFRAME>：

这标记只适用于IE。它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记，但围堵的字句只有在浏览器不支持iframe标记时才会显示，就像<noframes>一样，可以放些提醒字句之类。通常iframe配合一个辨认浏览器的JavaScript会较好，若JavaScript认出该浏览器并非InternetExplorer便会切换至另一版本。

►src="iframe.html" 欲显示於此框窗的文件来源处档案名称，必要加上相对或绝对路径。

►name="test" 此框窗名称，这是连结标记的target参数所要的，

►align="MIDDLE" 可选值为left,right,top,middle,bottom，作用不大

►width="300"height="100" 框窗的宽及长，以pixels为单位。

►marginwidth="1"marginheight="1" 该插入的文件与框边所保留的空间。

►frameborder="1" 使用1表示显示边框，0则不显示。（可以是yes或no）

►scrolling="Yes" 使用Yes表示容许卷动（内定），No则不容许卷动。

HTML语言剖析

多媒体标记-目录

n<BGSOUND>：

<BGSOUND>是用以插入背景音乐，但只适用於IE，其参数设定不多。如下所示： <BGSOUNDsrc="your.mid"autostart=trueloop=infinite>

►src="your.mid" 设定midi档案及路径，可以是相对或绝对路径。

►autostart=true 是否在音乐档传完之後，就自动播放音乐。true是，false否(内定值)。

►loop=infinite 是否自动反覆播放。LOOP=2表示重复两次，Infinite表示重复多次。

n<img>：

<img>--嵌入视频文件（.avi）标签：

<imgsrc=...dynsrc=...start="fileopen|mouseover"loop=...>

n<MARQUEE>：

<MARQUEE>只适用於IE，译为「跑马灯」如StatusBar的那种，意指走动或卷动的文字，其参数设定较多。我先举些例子，然後再列出各参数。使用<marquee>标签可以简便地实现文字的移动，以达到动感十足的视觉效果。<marquee>是一个成对标签，它有direction、behavior、loop、scrollamount、scrolldelay、align、bgcolor、height、width、hspace和vspace等属性。其语法如下：<marqueedirection=参数值behavior=参数值loop=循环次数scrollamount=数值scrolldelay=数值、align=参数值、bgcolor="#"height=数值width=数值hspace=数值vspace=数值>要滚动的文字</maruqee>

►<marqueebehavior="SCROLL"direction="LEFT"bgcolor="#0000FF"height="30"width="150"hspace="0"vspace="0"loop="INFINITE"scrollamount="30"scrolldelay="500">behavior="SCROLL"> 决定文字的卷动方式，可选值为： SCROLL一般卷动，是内定值。 SLIDE如幻灯片，一格格的，效果是文字一接触左边便全部消失。 ALTERNATE文字向左右两边撞来撞去。

►direction="LEFT" 设定文字的卷动方向，LEFT表示向左，是内定值，RIGHT表示向右。

►bgcolor="#0000FF" 设定文字卷动范围的背景颜色。

►height="30"width="150" >设定文字卷动范围，可采用相对或绝对，如30%或30等，单位为像素。

►hspace="0"vspace="0" 设定文字的水平及垂直空白位置。

►loop="INFINITE" 设定文字卷动次数，其值可以是正整数或INFINITE，INFINITE是内定值，表示无限次。

►scrollamount="30" 每「格」文字之间的间隔，单位是像素。

►scrolldelay="500" 文字卷动的停顿时间，单位是毫秒。

►Hello</marquee>

n<object><param>--控件对象/参数标签：FlashRealMediaJavaApplet

►<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"width="594"height="394"> <paramname="movie"value="swf/enigma.swf"> <paramname="quality"value="high"> <embedsrc="swf/enigma.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"width="594"height="394"></embed> </object>

►<objectclassid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"width="300"height="240"> <paramname="SRC"value="video/videotest.rm"> <paramname="CONTROLS"value="ImageWindow"> <paramname="CONSOLE"value="cons"> <paramname="autostart"value="true"> <embedsrc="video/videotest.rm"width="300"height="240"autostart="true"controls="ImageWindow"console="cons"type="audio/x-pn-realaudio-plugin"></embed> </object>

►<objectclassid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"width="300"height="32"> <paramname="SRC"value="video/videotest.rm"> <paramname="CONTROLS"value="ControlPanel|PlayOnlyButton|PauseButton|StopButton"> <paramname="CONSOLE"value="cons"> <embedsrc="video/videotest.rm"width="300"height="32"controls="ControlPanel"console="cons"></embed> </object>

n<EMBED>：

<EMBED>是用以插入各种多媒体，格式可以是Midi、Wav、AIFF、AU等等，Netscape及新版的IE都支援。其参数设定较多。如下： <EMBEDsrc="your.mid"autostart="true"loop="true"hidden="true">

►src="your.mid" 设定midi档案及路径，可以是相对或绝对路径。

►autostart=true 是否在音乐档传完之後，就自动播放音乐。true是，false否(内定值)。

►loop="true" 是否自动反覆播放。LOOP=2表示重复两次，true是，false否。

►HIDDEN="true" 是否完全隐藏控制画面，true为是，no为否(内定)。

►STARTTIME="分:秒" 设定歌曲开始播放的时间。如STARTTIME="00:30"表示从第30秒处开始播放。

►VOLUME="0-100" 设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。

►WIDTH="整数"和HIGH="整数" 设定控制画面的宽度和高度。(若HIDDEN="no")

►ALIGN="center" 设定控制画面和旁边文字的对齐方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom。

►CONTROLS="smallconsole" 设定控制画面的外貌。预设值是console。 console一般正常的面板 smallconsole较小的面板 playbutton只显示播放按钮 pausecutton只显示暂停按钮 stopbutton只显示停止按钮 volumelever只显示音量调整钮

CSS样式剖析

1.CSS简介： CSS--CascadingStyleSheets，层叠式样式表。该技术始于1996年，1998年5月，level2(水平)成为了W3C的新标准。CSS扩展了HTML的功能，CSS与HTML、脚本相结合，可以更加有效的实现对网页元素的布局、排版和显示效果的控制。

2.CSS特点： (1)标识语言，纯文本，可以使用各种文本编辑器编写；(Dreamweaver是首选) (2)CSS可以灵活的方式与HTML和脚本相结合； (3)易用性、高效率、一致性、可靠性、可维护性、可移植性； (3)CSS文件扩展名：css； (5)CSS文件亦需在Web浏览器上解释执行；（运行环境） (6)具有跨平台性。

3.CSS语法规则：（selector）选择器 (1)tag{property:value;...}//标签，属性：值 (2)tag.Classname{property:value;...}//Class-selector，关联选择符 (3).Classmate{property:value;...}//Class-selector，独立选择符 (4)tag#IDname{property:value;...}//ID-selector，关联选择符 (5)#IDname{property:value;...}//ID-selector，独立选择符 (6)归类规则： h1,p{font-family:"黑体"} (7)继承规则： <b>b标签设定的样式<i>i标签内的元素将予以继承</i></b>；如果不继承，若要采用独立的样式用<span> (8)情景选择规则：格式：情景标签标识符{属性：值；...} 例： <html> <head> <title>带情景选择的样式表实例</title> </head> <styletype="text/css"> pi{font-size:30pt;color:red} </style> <bodybgcolor=lightblue> <center> <h1>这是一个<i>样式表</i>实例</h1> <p>这是一个<i>样式表</i>实例</p> </center> </body> </html>

4.CSS与HTML结合方式： (1)内联：<tag>[</tag>] (2)嵌入： <STYLEtype="text/css">  </STYLE> (3)链接外部样式表文件： <linkhref="../mycss.css"rel="stylesheet"type="text/css"> (4)导入外部样式表文件： <STYLEtype="text/css">  </STYLE> (5)外部样式表文件：扩展名：.css 不能包含任何HTML标签遵循CSS语法规则

5.CSS应用： (1)<tag>[</tag>] (2)<tag>[</tag>] (3)<tagclass="Classname">[</tag>] (4)<tagid="IDname">[</tag>] (5)优先顺序：(后定义的优先)内联样式最高；其它，按层次处理。

lfont

Ø字体属性：font-family

<html> <styletype="text/css">  </style> <head> <title>font-family属性</title> </head> <bodybgcolor=lightyellow> <center> <fontsize=5color=red>font-family属性的应用效果</font> </center> <p> 将按照幼圆、隶书、宋体的顺序对字体进行设置 </p> </body> </html>

Ø字体风格：font-style 字体风格通常指字型，主要有正常，斜体，和偏斜体，分别对应值为normal,italic,oblique

<html> <styletype="text/css">  </style> <head> <title>font-style属性</title> </head> <bodybgcolor=lightyellow> <center> <fontsize=5color=red>font-style属性的应用效果</font> <fontsize=5> <pclass=p1>这是normal风格</p> <pclass=p2>这是italic风格</p> <pclass=p3>这是oblique风格</p> </center> </body> </html>

Ø字体变形：font-variant 字体变形具备如下属性：正常和小型大写字母两种，主要对英文字母有效果。对应值为normal,small-caps

Ø字体加粗：font-weight 默认，粗体，特粗，细体和具体的值，分别对应

<html> <styletype="text/css">  </style> <head> <title>font-variant属性</title> </head> <bodybgcolor=lightyellow> <center> <fontsize=5color=red>font-weight属性的应用效果</font> <tableborder=2> <tralign=center> <tdid=w-ligher>lighter</td> </tr><tr> <tdid=w-normal>normal</td> </tr><tr> <tdid=w-bold>bold</td> </tr><tr> <tdid=w-bolder>bolder</td> </tr> <tr> <tdid=w-1>字体粗细为100</td> </tr><tr> <tdid=w-2>字体粗细为900</td> </tr> </table> </center> </body> </html>

Ø字号：font-size 语法格式：font-size:<绝对尺寸>|<关键字>|<相对尺寸>|<比例尺寸> ⑴ 绝对尺寸举例：

<html> <head> <title>使用绝对尺寸控制字号的大小</title> </head> <bodybgcolor=lightyellow> <font>字号为5em</font><br> <font>字号为5ex</font><br> <font>字号为0.5in</font><br> <font>字号为1cm</font><br> <font>字号为10mm</font><br> <font>字号为25pt</font><br> <font>字号为25px</font><br> <font>字号为2pc</font><br> </body> </html>

(2) 关键字和相对尺寸举例：

<html> <head> <title>使用关键字和相对尺寸控制字号大小</title> </head> <bodybgcolor=lightyellow> 这是浏览器默认的字号<br> <font>关键字为xx-small</font><br> <font>关键字为x-small</font><br> <font>关键字为small</font><br> <font>关键字为medium</font><br> <font>关键字为large</font><br> <font>关键字为x-large</font><br> <font>关键字为xx-large</font><br> <font>相对尺寸为smaller</font><br> <font>相对尺寸为larger</font><br> </body> </html>

(3) 比例尺寸举例

<html> <head> <styletype="text/css">  </style> <title>使用比例尺寸控制字号大小</title> </head> <body> <p>风格<b>风格</b></p> </body> </html>

Ø文字的更改：text-transform 方便网页设计者控制字母的大小写。

<html> <head> <title>文字的更改</title> </head> <bodybgcolor=puer> <font>uppercase:使所有字母大写显示</font><br> <font>LOWERCASE：使所有字母小写显示</font><br> <font>capitalize：词首字母大写</font><br> <font>none：字母以正常形式显示</font><br> </body> </html>

Ø文字的修饰：text-decoration 格式：text-decoration:underline|overline|line-throungh|blink|none

<html> <head> <title>text-decoration属性</title> </head> <styletype="text/css">  </style> <bodybgcolor=lightyellow> <center> <fontsize=5color=red>text-decoration属性的应用效果</font> </center> <pid=under>此行文字加下划线</p> <pid=over>此行文字加顶线</p> <pid=through>此行文字加删除线</p> </body> </html>

Ø字体属性font：{font：字体风格||字体变形||字体加粗||字号/行高||字体} 格式：font:font-family||font-style||font-variant||font-weight||font-size 说明：字体属性主要用于不同字体属性的略写；可以同时设置多种属性；属性与属性之间必须利用分号隔开。 p{font:italicsmall-capsbold22pt/54px隶书,宋体}

l控制图文布局

Ø字距：letter-spacingword-spacing letter-spacing用于设置英文字母之间距离;word-spacing设置英文单词之间距离

<html> <head> <title>word-spacing和letter-spacing属性</title> </head> <styletype="text/css">  </style> <bodybgcolor=lightyellow> <center> <fontsize=5color=red>word-spacing和letter-spacing属性的应用效果</font> <tableborder=4> <tr> <td>字母间距为4pt</td> <tdid=letter1>CSS的英文全称为CascadingStyleSheets</td> </tr> <tr> <td>字母间距为正常</td> <tdid=letter2>CSS的英文全称为CascadingStyleSheets</td> </tr> <tr> <td>单词间距为10pt</td> <tdid=word1>CSS的英文全称为CascadingStyleSheets</td> </tr> <tr> <td>单词间距为正常</td> <tdid=word2>CSS的英文全称为CascadingStyleSheets</td> <tr> </table> </center> </body> </html>

Ø行距：line-height 数字行距：p{font-size:12pt;line-height:2;}//12pt*2 单位行距：p{line-height:9pt;} 比例行距：p{font-size:10pt;line-height:140%;}//10pt*140%

Ø文本对齐格式：text-align：left|right|center|justify vertical-align：top|bottom|text-top|text-bottom|baseline|middle|sub|super 说明：text-align属性用于文字水平对齐，但这个属性只用于整块内容，如：<p><h1>~<h6><u1>等;vertical-align属性用于控制文字或其它网页对象相对于母体对象的垂直位置。 <HTML> <HEAD> <TITLE>vertical-align垂直对齐属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODYBGCOLOR=lightyellow> <CENTER> <FONTSIZE=5COLOR=RED>vertical-align垂直对齐属性的应用</FONT> <TABLEBORDER=2HEIGHT=200> <TRBGCOLOR=LIGHTGREENalign=center> <TD>设置vertical-align属性</TD><TD>显示结果</TD> <TD>设置vertical-align属性</TD><TD>显示结果</TD></TR> <TR> <TD>vertical-align:sub</TD> <TD>C+O<FONTID=sub>2</FONT>-->CO<FONTID=sub>2</FONT></TD>  <TD>vertical-align:super</TD> <TD>a<FONTID=sup>2</FONT>+b<FONTID=sup>2</FONT> =c<FONTID=sup>2</FONT></TD>  </TR> <TR> <TDID=top>vertical-align:top</TD> <TDID=top><IMGSRC="logo.gif"></TD>  <TDID=t-top>vertical-align:text-top</TD> <TDID=t-top><IMGSRC="logo.gif"></TD>  </TR> <TR> <TDID=mid>vertical-align:middle</TD> <TDID=mid><IMGSRC="logo.gif"></TD>  <TDID=base>vertical-align:baseline</TD> <TDID=base><IMGSRC="logo.gif"></TD>  </TR> <TR> <TDID=bot>vertical-align:bottom</TD> <TDID=bot><IMGSRC="logogriph"></TD>  <TDID=t-bot>vertical-align:text-bottom</TD> <TDID=t-bot><IMGSRC="logo.gif"></TD>  </TR> </TABLE> </CENTER> </BODY> </HTML>

Ø首行缩进 text-indent:数字|百分比 <html> <head> <title>text-indent属性</title> <styletype="text/css"> .indent1{text-indent:30pt} </style> </head> <bodybgcolor=lightyellow> <center> <fontsize=5color=red>text-indent属性的应用效果</font> </center> <fontsize=4color=blue>首行不缩进效果:</font> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <fontsize=4color=blue>首行缩进30pt:</font> <pclass=indent1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </body> </html>

l颜色及背景

Ø颜色属性：color h1{color:red} h2{color:#000080}

Ø背景颜色属性：background-color（默认为透明transparent） body{background-color:while} h1{background-color:#000080}

Ø背景图像属性：background-image 格式：background-image:url(图像文件名)|none(无) <HTML> <HEAD> <TITLE>background-image属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODYID=bc-1> <CENTER> <FONTSIZE=5COLOR=lightyellow>background-color属性的应用</FONT> <PID=bi-1> 春望<BR> 国破山河在，城春草木深。<BR> 感时花溅泪，恨别鸟惊心。<BR> 烽火连三月，家书抵万金。<BR> 白头搔更短，浑欲不胜簪。<BR> </P> </CENTER> </BODY> </HTML>

Ø背景图片重复属性：background-repeat 格式：background-repeat:repeat|repeat-x|repeat-y|no-repeat <HTML> <HEAD> <TITLE>background-repeat属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODYID=bi> <CENTER> <FONTSIZE=4COLOR=blue>background-repeat属性设置背景图片横向重复</FONT> </CENTER> </BODY> </HTML>

Ø固定背景图片属性：background-attachment 格式：backfround-attachment:scroll|fixed <HTML> <HEAD> <TITLE>background-attachment属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODYID=bi> <CENTER> <FONTSIZE=3COLOR=yellow> background-attachment固定背景图片属性的应用 </FONT> </CENTER> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </BODY> </HTML>

Ø背景图片位置属性格式：background-position:<百分比>|<长度>|<关键字> 按百分比定位格式：background-position:x%y% 按长度定位格式：background-position:xy 按关键字定位格式：background-position:top|center|bottomleft|center|right p{background-position:70%50%;repeat-y;url(..\pic\sky.jpg)} p{background-position:70px50px;url(..\pic\sky.jpg)} p{background-position:righttop;url(..\pic\sky.jpg)}

Øbackground属性格式：{background:背景颜色||背景图像||背景重复||背景附件||背景位置} body{background:#000080url(tree.jpg)no-repeatbottomright}

l列表样式

格式： list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none; list-style-image:url(图像文件名); list-style-position:inside|outside; list-style属性：{list-style:type值||image值||position值} .item{list-style:url(IMAGES/ITEM.GIF)inside}

l美化网页与超链接的设置

Ø网页链接属性anchor语法

<HTML> <HEAD> <TITLE>anchor属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODYBGCOLOR=yellow> <CENTER> <FONTSIZE=4COLOR=RED> </FONT> </CENTER> <UL> <LI><Ahref="">新浪网</A> <LI><Ahref="">网易</A> <LI><Ahref="">雅虎</A> </UL> </BODY> </HTML>

Ø光标属性：cursor <HTML> <HEAD> <TITLE>多变鼠标</TITLE> </HEAD> <BODYbgcolor=lightgreen> <H3>鼠标显示效果</h1> <p>请把鼠标移动到下面文字上</p> <div> <p><tablewidth=300border="0"cellspacing="1"cellpadding="0"bgcolor=Black> <tr> <tdbgcolor=#FEF7ED><span>手的形状</span></td> <tdbgcolor=#FEF7ED><span>反方向</span></td> </tr> <tr> <tdbgcolor=#FEF7ED><span>移动</span></td> <tdbgcolor=#FEF7ED><span>求助</span></td> </tr> <tr> <tdbgcolor=#FEF7ED><span>十字形</span></td> <tdbgcolor=#FEF7ED><span>移动到文本上的那种效果</span></td> </tr> <tr> <tdbgcolor=#FEF7ED><span>等待</span></td> <tdbgcolor=#FEF7ED><span>向右箭头</span></td> </tr> <tr> <tdbgcolor=#FEF7ED><span>向上箭头</span></td> <tdbgcolor=#FEF7ED><span>向右上箭头</span></td> </tr> <tr> <tdbgcolor=#FEF7ED><span>向左上箭头</span></td> <tdbgcolor=#FEF7ED><span>向左箭头</span></td> </tr> <tdbgcolor=#FEF7ED><span>向左下箭头</span></td> <tdbgcolor=#FEF7ED><span>由系统自动给出效果</span></td> <tr> <tdbgcolor=#FEF7ED><span>向右下箭头</span></td> <tdbgcolor=#FEF7ED></td> </tr> </table> </p> </div> </BODY> </HTML>

Ø滚动条属性：scrollbar scrollbar-3dlight-color:color 说明：设置或检索滚动条亮边框颜色,对应的脚本特性为scrollbar3dLightColor. div{scrollbar-3dlight-color:threedhighlight;} scrollbar-highlight-color:color 说明：设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色,对应的脚本特性为scrollbarHighlightColor。 div{scrollbar-highlight-color:threedhighlight;} scrollbar-face-color：color 说明：设置或检索滚动条3D表面(ThreedFace)的颜色，对应的脚本特性为scrollbarFaceColor。 div{scrollbar-face-color:threedface;} scrollbar-arrow-color:color 说明：设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。对应的脚本特性为scrollbarArrowColor。 div{scrollbar-arrow-color:buttontext;} scrollbar-shadow-color：color 说明：设置或检索滚动条3D界面的暗边(ThreedShadow)颜色。对应的脚本特性为scrollbarShadowColor. div{scrollbar-shadow-color:ThreedDarkShadow;} scrollbar-darkshadow-color:color 说明：设置或检索滚动条暗边框(ThreedDarkShadow)颜色。对应的脚本特性为scrollbarDarkShadowColor. div{scrollbar-darkshadow-color:threeddarkshadow;} scrollbar-base-color:color 说明：设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。对应的脚本特性为scrollbarBaseColor. div{scrollbar-base-color:buttonface;} scrollbar-track-color:color 说明：设置或检索滚动条的拖动区域(TrackBar)颜色。对应的脚本特性为scrollbarTrackColor. div{scrollbar-track-color:ThreedDarkShadow;}

<HTML> <HEAD> <TITLE>scrollbar属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODYBGCOLOR=lightyellow> <CENTER> <FONTSIZE=4COLOR=RED> 制作立体的滚动条效果</FONT><BR> <IMGsrc="dog.jpg"> </CENTER> </BODY> </HTML>

lDIV.span

Ø<div>-图层标签： <div>标签：用于定义网页上一个相对独立的区域（文本、图形、表格、媒体、窗体、<div>等）。格式： <divid=IDname>...</div> <divclass=Classname>...</div> <divid=name>...</div> 图层： <divid="Layer">...</div>

Ø<span>-标签： <span>和<div>的区别：<div>使上下文自动换行。格式： <spanid=IDname>...</span> <spanclass=Classname>...</span> <spanid=name>...</span>

注：<span>主要用于样式的应用。

l边框、边界、填充样式

Ø边框属性：border-widthborder-colorborder-style 格式： border-width:thin|medium|thick|数值[thin|medium|thick|数值..] border-top-width:数值 border-bottom-width:数值 border-left-width:数值 border-right-width:数值 border-color:#rrggbb[#rrggbb..]/*按顺时针分配*/ border-top-color:#rrggbb border-bottom-color:#rrggbb border-left-color:#rrggbb border-right-color:#rrggbb border-style:dotted|dashed|solid|double|groove|ridge|inset|outset border-top-style: border-bottom-style: border-left-style: border-right-style: <HTML> <HEAD> <TITLE>border-style属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY> <CENTER> <h4>设置边框线样式属性border-style</h4> <TABLEborder=2> <TR><TDid=bs1>边框线样式为小点虚线</TD></TR> <TR><TDid=bs2>边框线样式为大点虚线</TD></TR> <TR><TDid=bs3>边框线样式为实线</TD></TR> <TR><TDid=bs4>边框线样式为双直线</TD></TR> <TR><TDid=bs5>边框线样式为3D凹线</TD></TR> <TR><TDid=bs6>边框线样式为3D凸线</TD></TR> <TR><TDid=bs7>边框线样式为3D框入线</TD></TR> <TR><TDid=bs8>边框线样式为3D隆起线</TD></TR> </TABLE> </CENTER> </BODY> </HTML>

Øborder属性：{border:宽度||样式||颜色} body{border:12pxsolidred}

Ø边界属性：margin 格式：margin:auto|length margin-top:宽度|百分比|auto margin-right:宽度|百分比|auto margin-bottom:宽度|百分比|auto margin-left:宽度|百分比|auto margin:宽度|百分比|auto[宽度|百分比|auto..] <HTML> <HEAD> <TITLE>margin属性</TITLE> <STYLETYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY> <CENTER> <h4>利用margin属性设置边界的值</h4> </CENTER> 花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。<br> 或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。而美丽苦短的花期却是那最后悲伤的秋风挽歌中的瞬间插曲。 </BODY> </HTML>

lCSS滤镜（Filter）

分类：视觉滤镜（VisualFilters）和转换滤镜（TransitionFilters）

ØAlpha滤镜：透明和渐变透明效果格式： filter:alpha(opacity=*,finishopacity=*,style=*,startx=*,starty=*,finishx=*,finishy=*) Opacity/finishopacity：开始/结束透明度（0--100） style:渐变的形状。0代表统一形状、1代表线形、2代表放射状、3代表长方形 STARTXSTARTY:代表渐变透明效果的开始X和Y坐标(度量单位为图片宽/高度的百分比） FINISHXFINISHY:代表渐变透明效果的结束X和Y的坐标(度量单位同上)

ØBlur滤镜：模糊效果格式： filter:blur(add=0|1,direction=*,strength=*) add：0---不显示原图，1---显示原图（默认） direction：设置模糊的方向(00---垂直向上,依顺时针,45°递增,默认:2700） strength：代表有多少像素的大小将受到模糊影响，默认是5px

ØDropshadow滤镜：阴影效果格式： filter:dropshadow(color=#rrggbb,offx=*,offy=8,positive=0|1)} color：阴影的颜色 offxoffy：X方向和Y方向阴影的偏移量，px（±） positive：阴影的透明效果（0---透明，1---不透明）

ØGlow滤镜：光晕效果格式： filter:glow(color=#rrggbb,strength=*) color：边缘光晕的颜色 strength：边缘光晕的强度大小（1--255）

ØShadow滤镜：渐变阴影效果格式： filter:shadow(color=#rrggbb,direction=*) color：阴影的颜色 direction：设置阴影的方向（00---垂直向上，依顺时针，450递增，默认：2250）

ØWave滤镜：垂直的波浪效果格式： add：0---不显示原图（默认），1---显示原图 freq：出现在对象上的波浪数目（以正数设置） lightstrength：波浪上光的照射强度（0--100） phase：正弦波的起始位置0—100，(相当于将360°划分为100个等分) strength：波浪的振幅大小（px）

ØGray,Invert,Xray滤镜 Gray:将对象中的颜色除去,变成黑白效果. Invert:将颜色饱和度及亮度值反转,类似底片效果. Xray:让对象显示轮廓加亮,类似X光片的效果. 格式:

ØFlipH和FlipV滤镜 FlipH:设置对象产生水平翻转效果. FlipV:设置对象产生垂直翻转180°的效果. 格式:

ØMask滤镜:设置对像的屏蔽效果,如同印章一样印出模型的模样. 格式：

ØChroma滤镜：主要用于指定对象中的某个颜色,变为透明效果. 格式：

ØLight滤镜：光照效果格式: ①AddAmbient加入包围的光源： filters.Light[(n)].AddAmbient(R,G,B,strength) ②AddCone加入锥形光源： filters.Light[(n)].addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread) ③AddPoint加入点光源： filters.Light[(n)].addPoint(x,y,z,R,G,B,strength) ④Changcolor改变光的颜色： filters.Light[(n)].ChangeColor(lightnumber,r,g,b,fAbsolute) ⑤Changstrength改变光源的强度： filters.Light[(n)].ChangeStrength(lightnumber,strength,fAbsolute) ⑥Clear清除所有的光源： ⑦MoveLight移动光源： filters.Light[(n)].MoveLight(lightnumber,x,y,z,fAbsolute)

ØBlendTrans滤镜：淡入淡出效果格式：

ØRevealTrans滤镜：形状渐变效果格式： filter:revealtrans(duration=秒,transition=代码) 代码描述

0Boxin矩形缩小 1Boxout矩形扩大 2Circlein圆形缩小 3Circleout圆形扩大 4Wipeup向上擦除 5Wipedown向下擦除 6Wiperight向右擦除 7Wipeleft向左擦除 8Verticalblinds垂直百页 9Horizontalblinds水平百页 10Checkerboardacross棋盘状通过 11Checkerboarddown棋盘状向下 12Randomdissolve随机融化 13Splitverticalin垂直向内分开 14Splitverticalout垂直向外分开 15Splithorizontalin水平向内分开 16Splithorizontalout水平向内分开 17Stripsleftdown左下条状 18Stripsleftup左上条状 19Stripsrightdown右下条状 20Stripsrightup右上条状 21Randombarshorizontal随机的水平栅栏 22Randombarsvertical随机的垂直栅栏 23Randomeffect(anyoftheother23)随机任意的上述一种效果

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。