HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
通过HTML可以表现出丰富多彩的设计风格
图片调用：<IMG SRC="文件名">
文字格式：<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>
通过HTML可以实现页面之间的跳转
页面跳转：〈A HREF="文件路径/文件名"></A>
通过HTML可以展现多媒体的效果
声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
视频：<EMBED SRC="视频文件名" AUTOSTART=true>
上面我们在示例超文本特征的同时，采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字 属性>”来表示。
HTML的基本结构
超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
<HTML>
<HEAD>
头 部 信 息
</HEAD>
<BODY>
文 档 主 体， 正 文 部 分
</BODY>
</HTML>
其中<HTML>在最外层， 表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略<HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY> 标记一般不省略， 表示正文内容的开始。
下面是一个最基本的超文本文档的源代码：
<HTML>
<HEAD>
<title>一个简单的HTML示例</title>
</HEAD>
<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
这是我第一次做主页，无论怎么样，我都会努力做好！
</FONT>
</CENTER>
</BODY>
</HTML>
超文本中的标签
刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。
1. 单标签
某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：
< 标签名称>
最常用的单标签是<BR>, 它表示换行。
2.双标签
另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：
<标签> 内 容</ 标签>
其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中：
<EM>第一：</EM>
3.标签属性
许多单标记和双标记的始标记内可以包含一些属性， 其语法是：
< 标签名字 属性1 属性2 属性3 … >
各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条
水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：
<HR SIZE=3 ALIGN=LEFT WIDTH="75%">
其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，
缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "
号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的
个数，如WIDTH=300），缺省值是"100%"。
标题
一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：
〈H1>…</H1> 第一级标题
〈H2>…</H2> 第二级标题
〈H3>…</H3> 第三级标题
〈H4>…</H4> 第四级标题
〈H5>…</H5> 第五级标题
〈H6>…</H6> 第六级标题
请看下面的例子：
<html>
<head>
<title>标题示例</title>
</head>
<body>
这是一行普通文字<P>
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>
</html>
换行<br>
在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上<br>标签。
请看下面的例子：
<html>
<head>
<title>无换行示例</title>
</head>
<body>
登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</body>
</html>
<html>
<head>
<title>换行示例</title>
</head>
<body>
登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。
</body>
</html>
段落标签<P>
为了排列的整齐、清晰，文字段落之间，我们常用<P></P>来做标记。文件段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结束。
<P>标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。
下面，我们用两个例子来说明这个标签的用法。
<html>
<head>
<title>段落标签</title>
</head>
<body>
<P ALIGN=CENTER>
浣溪沙 <P>一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。<P>无可奈何花落去，似曾相识燕归来。小园香径几徘徊。</P>
</body>
</html>
<html>
<head>
<title>段落标签</title>
</head>
<body>
登鹳雀楼<P>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。</P>
</body>
</html>
文字的大小设置
提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。
请看示例：
<html>
<head>
<title>字号大小</title>
</head>
<body>
<font size=7>这是size=7的字体</font><P>
<font size=6>这是size=6的字体</font><P>
<font size=5>这是size=5的字体</font><P>
<font size=4>这是size=4的字体</font><P>
<font size=3>这是size=3的字体</font><P>
<font size=2>这是size=2的字体</font><P>
<font size=1>这是size=1的字体</font><P>
<font size=-1>这是size=-1的字体</font><P>
</body>
</html>
文字的字体与样式
HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。
<font face="字体">
请看例子：
<HTML>
<HEAD>
<title>字体</title>
</HEAD>
<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>
</HTML>
为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：
<B> </B> 粗体 HTML语言
<I> </I> 斜体 HTML语言
<U> </U> 加下划线 HTML语言
<TT> <TT> 打字机字体 HTML语言
<BIG> </BIG> 大型字体 HTML语言
<SMALL> </SMALL> 小型字体 HTML语言
<BLINK> </BLINK> 闪烁效果 HTML语言
<EM> </EM> 表示强调，一般为斜体 HTML语言
<STRONG> </STRONG> 表示特别强调，一般为粗体 HTML语言
<CITE> </CITE> 用于引证、举例，一般为斜体 HTML语言
现在我们用一个实例来看看效果：
<html>
<head>
<title>字体样式</title>
</head>
<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcom</CITE></P>
</body>
</html>
文字的颜色
文字颜色设置格式如下：
<font color=color_value>…</font>
这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。
Black = "#000000" Green = "#008000"
Silver = "#C0C0C0" Lime = "#00FF00"
Gray = "#808080" Olive = "#808000"
White = "#FFFFFF" Yellow = "#FFFF00"
Maroon = "#800000" Navy = "#000080"
Red = "#FF0000" Blue = "#0000FF"
Purple = "#800080" Teal = "#008080"
Fuchsia = "#FF00FF" Aqua = "#00FFFF"
位置控制
通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：
<DIV ALIGN=#> #＝left／right／center
例：
<html>
<head>
<title>位置控制</title>
</head>
<body>
<div align=left>
你好!<br>
<div align=right>
你好!<br>
<div align=center>
你好!<br>
</body>
</html>
另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。
如：<P ALIGN=#>
<HR ALIGN=#> #＝left／right／center
<H1 ALIGN=#〉
综合示例
前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，
比如：
<FONT COLOR="#" SIZE=#>文字</FONT>
<B><U>文字</U></B>
【例】
<HTML>
<HEAD>
<title>字体样式</title>
</HEAD>
<BODY>
<P>
<B><U><FONT COLOR="#A35252"><FONT SIZE=+1>白居 易</FONT></FONT></U></B>
</P>
<P> 白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡<BR> 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 </P>
<P> 白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到<BR> 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到《赋得古原草送别》中的</P>
<P ALIGN=center><FONT COLOR="#3C7777"><CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”</CITE></FONT></P>
<P>时， 不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 </P>
<P> 白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 </P>
<P> 白居易是继杜甫之后，我国伟大的现实主义诗人。 他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐府运动，创作了大量优秀的现实主义诗篇。 </P>
</BODY>
</HTML>
无序号列表
无序号列表使用的一对标签是<ul></ul>，每一个列表项前使用<LI>。其结构如下所示：
<UL>
<LI>第一项
<LI>第二项
<LI>第三项
</UL>
例：
<html>
<head>
<title>无序列表</title>
</head>
<body>
这是一个无序列表：<P>
<UL>
国际互联网提供的服务有：
<LI>WWW服务
<LI>文件传输服务
<LI>电子邮件服务
<LI>远程登录服务
<LI>其它服务
</UL>
</body>
</html>
序号列表
序号列表和无序号列表的使用方法基本相同，它使用标签<OL></OL>，每一个列表项前使用<LI>。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：
<OL>
<LI>第一项
<LI>第二项
<LI>第三项
</OL>
例：
<html>
<head>
<title>有序列表</title>
</head>
<body>
这是一个有序列表：<P>
<OL>
国际互联网提供的服务有：
<LI>WWW服务
<LI>文件传输服务
<LI>电子邮件服务
<LI>远程登录服务
<LI>其它服务
</OL>
</body>
</html>
定义性列表
定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签<DT>标明，说明性文字使用<DD>表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：
<DL>
<DT>第一项 <DD>叙述第一项的定义
<DT>第二项 <DD>叙述第二项的定义
<DT>第三项 <DD>叙述第三项的定义
</DL>
例：
<html>
<head>
<title>定义性列表</title>
</head>
<body>
这是一个定义性列表：<P>
<DL>
<DT>WWW<DD>WWW是全球信息网(World wide web)的缩写，也有人称之为3W、W3、Web。
<DT>Hyper Text<DD>Hyper Text是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散在各地的数据。
<DL>
</body>
</html>
TABLE表格
表格的基本结构
<table>...</table> 定义表格
<caption>...</caption> 定义标题
<tr> 定义表行
<th> 定义表头
<td> 定义表元(表格的具体数据)
以下是一个简单的例子：
<table border=1>
<tr><th>姓名</th><th>性别</th><th>年龄</th>
<tr><td>王林</td><td>男</td><td>25</td>
</table>
表格的标题
表格的标题
表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。
设置标题位于表格上方：
<caption align=top> ... </caption>
设置标题位于表格下方：
<caption align=bottom> ... </caption>
<table border>
<caption align=top>旅游日程</caption>
<tr>
<th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>
<tr>
<th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>
</table>
<table border>
<caption align=bottom>旅游日程</caption>
<tr>
<th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>
<tr>
<th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>
</table>
表格尺寸设置
表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：
<table width=n1 height=n2>
width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。
下表是一个长为200像素，宽为100像素的表格。<table width="200" height="100">
下表是一个长为屏幕的20%，宽为屏幕的10%的表格。<table width=20% height=10%>
边框尺寸设置
边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。
如：
<table border=10 width=250>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>
格间线宽度
格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：
<TABLE CELLSPACING=#> #表示要取用的像素值
例：
<table border=3 cellspacing=5>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>
内容与格线之间的宽度
我们还可以在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：
<TABLE CELLPADDING=#> #表示要取用的像素值
例：
<table border=3 cellpadding=5>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>
表格内文字的对齐/布局
表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。
<tr align=#>
<th align=#> #=left, center, right
<td align=#>
<tr valign=#>
<th valign=#> #=top，middle，bottom，baseline
<td valign=#>
左右排列
<table border=1 width="200">
<tr>
<th>居左</th><th>居中</th><th>居右</th>
<tr>
<td align=left>A</td> <td align=center>B</td> <td align=right>C</td>
</table>
上下排列
<table border=1 width="250" heith="100">
<tr>
<th>上齐</th><th>居中</th> <th>下齐</th><th>基线</th>
<tr>
<td valign=top>A</td> <td valign=middle>B</td> <td valign=bottom>C</td><td valign=baseline>D</td>
</table>
跨多行、多列的表元
要创建跨多行、多列的表元，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。
跨多列的表元 <th colspan=#> <td colspan=#>
colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。
跨多行的表元 <th rowspan=#> <td rowspan=#>
rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。
跨多列的表元
<html>
<head>
<title>表格TABLE</title>
</head>
</html>
<table border>
<tr><th colspan=3>值班人员 </th>
<tr><th>星期一</th> <th>星期二</th> <th>星期三</th>
<tr><td>李强</td><td>张明</td><td>王平</td>
</table>
跨多行的表元
<html>
<head>
<title>表格TABLE</title>
</head>
</html>
<table border>
<tr><th rowspan=2>值班人员</th>
<th>星期一</th><th>星期二</th> <th>星期三</th></tr>
<tr><td>李强</td><td>张明</td><td>王平</td></tr>
</table>
表格的颜色
在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。
表格的背景色彩 <table bgcolor=#>
行的背景色彩 <tr bgcolor=#>
表元的背景色彩 <th bgcolor=#>或 <td bgcolor=#>
#=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
例：
<html>
<head>
<title><title>
</head>
<table border=2 bgcolor=aqua>
<tr>
<th bgcolor=ffaa00>彩电</th> <th bgcolor=Red>冰箱</th> <th rowspan=2>家电</th>
<tr bgcolor=yellow>
<td>A</td><td>B</td>
</table>
</body>
</html>
文件之间的链接
超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：
<A HREF="资源地址">链接文字</A>
·标签<A>表示一个链接的开始，</A>表示链接的结束；
·属性“HREF”定义了这个链接所指的地方；
·通过点击“链接文字”可以到达指定的文件。
<A HREF="http://www.sjstc.edu.cn">中国山西之窗</A>
链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。
本地链接：
**************
对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。
例如：我们现在正在浏览的这一页的绝对路径是：c:\study\HTML教程\link01.htm
而这一页相对于当前目录即“HTML教程”的相对路径是：link01.htm
如果是浏览HTML教程之外的一页，该文件路径要以两个圆点(..)来表示上一层目录： ../../internet/IP地址
现在我们把这几种路径的表示方法写入链接中：
以绝对路径表示：<A HREF="/c:\study\HTML教程\link01.htm">文件的链接</A>
以相对路径表示：<A HREF="link01.htm">文件的链接</A>
链接上一目录中的文件：<A HREF="../../Internet/IP地址">IP地址</A>
一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，带有C:\的资源地址用户将无法访问到。所以我们最好写成相对路径，避免了重新修改文件资源路径的麻烦。
URL链接
************
如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。
URL链接的形式是： 协议名：//主机.域名／路径／文件名
其中协议包括：
file 本地系统文件
http WWW服务器
ftp ftp服务器
telnet 基于TELNET的协议
mailto 电子邮件
news Usenet新闻组
gopher GOPHER服务器
wais WAIS服务器
例如，我们这样来表达一个URL地址：
http://www.sjstc.edu.cn/
ftp://ftp.sjstc.edu.cn
telnet://bbs.xanet.edu.cn
写在HTML文件中，链接其他主机上的文件时，格式如下：
<A HREF="http://www.sjstc.edu.cn/default.htm">中国山西之窗</A>
<A HREF="telnet://bbs.xanet.edu.cn">西北网络中心兵马俑站</A>
目录链接
**************
前面所谈的资源地址，只是单纯的指向一份文件，但是，对于直接指到某文件上部、下部或是中央部分，以上方法却是无法做到的。然而，我们要这样做，也并不是毫无办法。我们可以是使用目录链接。
制作目录链接方法是：
·首先把把某段落设置为链接位置，格式是：〈A NAME="链接位置名称"></A>
·在调用此链接部分的文件，定义连接：<A HREF="文件名＃链接位置名称">链接文字</A>
如果是在一个文件内跳转，文件名可以省略不写。
例：
<html>
<head>
<title>链接举例</title>
</head>
<body>
<font color=blue>
我们的HTML教程已经进行到“文件之间的链接”部分，其中，我们学习了<A href="link01.htm#n1">本地链接<A>、<A href="link01.htm#n3">目录链接</A>和<A href="link01.htm#n2">URL链接</A>。之前，我们还介绍了<A href="4.htm">文字的设计</A>、<A href="table.htm">TABLE表格</A>、<A href="list01.htm">列表</A>等内容。也许很多人理解起来比较吃力，这是很正常的，每个人在刚刚接触它的时候往往要度过很长的一段接受时期。<P>
除了我们的这个教程外，网上也有很多的站点介绍了HTML文件的制作方法，在这里，我来推荐几个做得相当不错的站点：<P>
<A href="http://www.dlc.sjtu.edu.cn/courseware/html_learning/hrefsrcci.htm">HTML语言参考</A><br>
<A href="http://www.gzsums.edu.cn/webclass/html/html_design.html">HTML语言教程</A><br>
<A href="http://www.netease.com/~feng/html/index.htm">HTML程序员手册</A><P>
</body>
</html>
插入图形
超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。
基本格式
超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。
插入图象的标签是<IMG>，其格式为：
<IMG SRC="图形文件地址">
SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。
例： <IMG SRC="images/ball.gif">
IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：
例：
<IMG SRC="flowers0.jpg">
<IMG SRC="flowers0.jpg" width="200" heigth="100">
图形与文字的对齐排列：
由IMG中的ALIGN属性来设置图文的对齐方式，有以下几种：
ALIGN=top 〈IMG SRC="love.gif" ALIGN=top>
ALIGN=middle 〈IMG SRC="love.gif" ALIGN=middle>
ALIGN=buttom 〈IMG SRC="love.gif" ALIGN=buttom>
ALIGN=texttop 〈IMG SRC="love.gif" ALIGN=textop>
ALIGN=baseline 〈IMG SRC="love.gif" ALIGN=baeline>
ALIGN=left 〈IMG SRC="love.gif" ALIGN=left>
ALIGN=right 〈IMG SRC="love.gif" ALIGN=right>
图文之间的距离设置：
在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。
<IMA SRC="love.gif" > 美丽的心灵
<IMA SRC="love.gif" HSPACE=30> 美丽的心灵
<IMA SRC="love.gif" VSPACE=30> 美丽的心灵
图形按钮：
图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知识就可以完成了。其基本格式如下：
<A HREF="资源地址"><IMG SRC="图形文件地址"></A>
例：
<A HREF="index.htm"><IMA SRC="html.gif"></A>
播放音乐
HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。
点播音乐
将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：
<A HREF="音乐地址">乐曲名</A>
例如：播放一段MIDI音乐：
<A HREF="midi.mid">MIDI音乐</A> MIDI音乐
播放一段AU格式音乐：
<A HREF="you.au">同桌的你-AU音乐</A> 同桌的你-AU音乐
把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中，已经有人这样做了，你一定已经遇到很多，而且自己也可以试着去做了！
自动载入音乐
前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法：
<EMBED SRC="音乐文件地址">
属性有：
SRC="FILENAME" 设定音乐文件的路径
AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE
LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。
STARTIME="分:秒" 设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20
VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。
WIDTH HEIGHT 设定控制面板的大小
HIDDEN=TRUE 隐藏控制面板
CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样子
例：
*************************************
<html>
<head>
<title>播放音乐</title>
</head>
<body>
<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>
作为背景音乐来播放。
</body>
</html>
例：
*************************************
<html>
<head>
<title>播放音乐</title>
</head>
<body>
<EMBED SRC="midi.mid" loop=true width=145 height=60>
<P> 出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。</P>
<／body>
</html>
IE中的背景音乐
另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到。
<bgsound src="音乐文件地址" loop=#>
#=循环数
例：
<bgsound src="sound.wav" loop=3>
播放视频
用浏览器可以播放的格式有：MOV格式、AVI格式。
多窗口页面(Frames)
使用Frames结构设计的HTML文件，能够将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，令人高兴的是，每个窗口是可以相互沟通的。有时用得恰到好处，感觉真是好极了。
这是一个非常好用的技巧，不过，学习内容也不少，我们一起从基本语法学起吧！
Frames结构的基本格式
<frameset>
<frame src="url">
<frame src="url">
...
</frameset>
在有Frames结构的HTML文件中，Frames文件的整体结构为：
<HTML>
<HEAD>
<title></title>
</HEAD>
<FRAMESET>
<FRAME SRC="url">
<FRAME SRC="url">
......
</FRAMESET>
</HTML>
Framees结构中的每个URL值指定了一个文件（这个文件必须事先做好），这个文件将载入相应的窗口。
链接一个视频文件
将视频文件做成一个链接的方法：
<A HREF=" 视频地址">视频名称</A>
例如：播放一段视频：
<A HREF="welcome.avi">WINDOWS95</A> WINDOWS95
自动载入视频
与音乐的播放一样，我们可以使用EMBED标签播放视频，
<EMBED SRC="视频文件地址">
属性有：
SRC="FILENAME" 设定文件的路径
AUTOSTART=TRUE/FALSE 是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE
LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。
STARTIME="分:秒" 设定开始播放时间，如20秒后播放写为STARTIME=00:20
VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。
WIDTH HEIGHT 设定控制面板的大小
例：
*************************************
<html>
<head>
<title>播放视频</title>
</head>
<body>
<B><font size=4>播放视频WINDOWS95</font></B>
<P>
<EMBED SRC="welcome.avi" autostart=false loop=false width=350 height=250>
</P>
</body>
</html>
各窗口的尺寸设置
我们将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现。
<frameset cols=#> 例：<frameset cols="100,200,300">
<frameset rows=#> 例：<frameset rows="10%,20%,70%">
#的值为一对用引号括起来的字符串，字符串中的数字表示每个分窗口所占的尺寸，数字中间用逗号隔开，有几个数字就表示分出了几个窗口。当然，这其中的任何一个数字也可以由“*”来代替，这样表示由浏览器自动设置其大小。
如：<frameset cols="100,200,*">
<frameset cols="100,*,*"> 将100像素以外的窗口平均分配
<frameset cols="*,*,*"> 将窗口分为三等份
纵向排列多个窗口：
********************************
<frameset cols=30%,20%,50%>
<frame src="frame/A.html">
<frame src="frame/B.html">
<frame src="frame/C.html">
</frameset>
横向排列多个窗口：
********************************
<frameset rows=25%,25%,50%>
<frame src="frame/A.html">
<frame src="frame/B.html">
<frame src="frame/C.html">
</frameset>
纵横排列多个窗口：
********************************
<frameset cols=20%,*>
<frame src="frame/A.html">
<frameset rows=40%,*>
<frame src="frame/B.html">
<frame src="frame/C.html">
</frameset>
</frameset>
各窗口间相互操作
由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化，这就提高了Frames的利用价值。为了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字，这个名字用属性Name来定义。
窗口标识(Frame Name)
<frame src=url name=“窗口名”> 例如： <frame src="frame/a.html" name=“left”>
定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称，也可以是以下四类值：
<a href=url target=_blank> 显示一个新窗口
<a href=url target=_self> 显示在同一个窗口
<a href=url target=_parent> 显示在Frameset的前一份文件的窗口
<a href=url target=_top> 显示在整个浏览器窗口
例：
<frameset cols=50%,50%>
<frame src="frame/left.htm" name="left">
<frame src="frame/right.htm" name="right">
</frameset>
Frame 的其它属性
<frame frameborder=#> #=yes, no 各窗口边框的设置，yes表示有边框，no表示没有边框
<frame marginwidth=# marginheight=#>
#的值为像素点 设置各窗口的上下左右边界宽度，如果不设置，由浏览器自动决定。
<frame scrolling=#> #=yes, no, auto 滚动条设置，yes 表示有，no表示没有，auto表示由浏览器自动设置，#=缺省值是 auto
<frame noresize> noresize属性来设置不可变动的框边
各窗口边框的设置举例：
<frameset rows=30%,*>
<frame src="Acol.html" frameborder=1>
<frameset cols=30%,*>
<frame src="Bcol.html" frameborder=0>
<frame src="Ccol.html" frameborder=0>
</frameset>
</frameset>
示例(A 有边框，B、C 没有)
页面空白举例：
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html"
marginwidth=50
marginheight=50>
</frameset>
总复习
前面所讲的内容已经可以满足作网页的要求了，在最后的复习阶段，我们要举一个比较复杂的例子，它基本上涵盖了我们所学的重要内容，我们要通过它来进一步巩固一下已经掌握或者还没有完全掌握的知识。
示例
看到了一个图文并茂的页面，喜欢吗。请打开源文件，一句一句地去读，再对照页面上呈现出的效果，体会一下每一句具体的作用。读懂了吗，好极了，相信你已经合格了。
在上例的<BODY>标签中，我们看到一个我们没有见过的属性BACKGROUND，它是为整个文本添置背景图案的。添加背景图案往往可以使一个并不很出色的页面蓬壁生辉，方法是：
<BODY BACKGROUND="图片地址">
当然我们也可以仅仅为文本选择一种颜色来作背景，与前面的文字相配得当，有时也会有很出彩的效果，方法是：
<BODY BGCOLOR="#">
其实在我们真正制作网页的过程中，我们常常会借助于“所见即所得”得网页编辑器来完成，例如Netscape Editor、FrontPage98等来完成，不过编辑器有些动作不知怎么总是不到位，这时，打开源文件修描却能使你如鱼得水。另外，格式页的大部分工作恐怕还需要在源文件中进行调整。
学习HTML的方法：
根据我自己的学习体验，我总结了几点学习方法供大家参考：
1.对于难记的属性不必强行记忆，在用到的时候翻一下语法手册，多用几次就会熟练掌握了。
2.刚开始，可以先选择几个不错的网页形式加以模仿，照猫画虎的完成自己的Homepages.
3.看到好的网页，可以在浏览器的“编辑”菜单中选择“源文件”，这时我们就可以看到源程序，
学习别人制作网页的一些方法和技巧了，有时候通过这种办法可以学到书本上没有的东西，一些
新出现的功能也可以率先出现在你的网页中了。
使用 ASP Request 对象，您可以创建一个简单而功能强大的脚本来收集和处理 HTML 表格数据。在本主题中，您将不仅学会如何创建基本的表格处理脚本，而且还将获得用于验证 Web 服务器和用户浏览器上的表格信息的一些有用技术。
关于 HTML 表格
HTML 表格是收集 Web 信息最常用的方法，是在 Web 页上提供用户界面控件的特殊的 HTML 标记的排列。文本框、按钮和复选框都是典型的控件，这些控件使用户和 Web 页实现交互，并且将信息提交给 Web 服务器。
下面的 HTML 示例产生一个表格，在表格中，用户可以输入姓名、年龄并包含一个将这些信息提交给 Web 服务器的按钮。该表格也包含了一个隐含的控件（Web 浏览器不显示），可以用该控件向 Web 浏览器传递附加信息。
<FORM METHOD="POST" ACTION="myfile.asp">
<INPUT TYPE="text" NAME="firstname">
<INPUT TYPE="text" NAME="lastname">
<INPUT TYPE="text" NAME="age">
<INPUT TYPE="hidden" NAME="userstatus" VALUE= "new">
<INPUT TYPE="submit" VALUE="Enter">
</FORM>
处理 ASP 输入的表格
在表格向 Web 服务器提交信息时，用户的 Web 浏览器请求用 HTML <FORM > 标记的 ACTION 属性所指定的 .asp 文件（在前面的例子中，该文件被称为 Myfile.asp）。.asp 文件包含了处理表格值（如显示结果表或从数据库查询信息）的脚本。
可以通过三种途径用 .asp 文件收集 HTML 表格的值
静态的 .htm 文件可以包含一个将其数值邮送给 .asp 文件的表格。
.asp 文件可以创建一个将其信息邮送给另一个 .asp 文件的表格。
.asp 文件可以创建一个将其信息邮送给自身的表格，即包含该表格的文件。
前两个方法的操作方式相同，当表格与网关程序交互时，除 ASP 之外，可以包含读取和响应用户选择的命令。
创建一个包含表格定义且传送信息给自身的 .asp 文件较复杂，但却是有很强功能的处理表格的方法。这一过程在 验证表格输入 中演示。
获得表格输入
ASP Request 对象提供了两种集合，在很大程度上简化了检索附加在 URL 请求上的表格信息的任务。
QueryString 集合
QueryString 集合获取作为跟在请求的 URL 的问号后面的文本传递给 Web 服务器的值。通过使用 HTTP GET 方法或手工将表格的值添加到 URL，表格的值可以被附加在请求的 URL 之后。
例如，如果先前的表格示例使用 GET 方法 (ACTION = "GET") 且用户键入 Jeff、Smith 和 30，那么下面的 URL 请求将被发送给服务器：
http://scripts/Myfile.asp?firstname=Jeff&lastname=Smith&age=30&userstatus=new
Myfile.asp 包含下面的表格处理脚本：
Hello, <%= Request.QueryString("firstname") %> <%= Request.QueryString("lastname") %>.
You are <%= Request.QueryString("age") %> years old.
<%
If Request.QueryString("userstatus") = "new user" then
Response.Write"This is your first visit to this Web site!"
End if
%>
在这种情况下，Web 服务器将返回下面的文本给用户的 Web 浏览器：
Hello, Jeff Smith. You are 30 years old. This is your first visit to this Web site!
QueryString 集合有一个可选参数，可用来访问显示在请求正文中的多个值中的一个。也可以使用 Count 属性计算一个特殊类型的值的出现次数。
例如，表格包含一个多项目的列表框可以提交下面的请求：
http://list.asp?food=apples&food=olives&food=bread
您也可以使用下面的命令去对多个值计数：
Request.QueryString("food").Count
如果想显示多个值的类型，List.asp 应包含下面的脚本；
<%Total = Request.QueryString("food").Count%>
<%For i = 1 to Total%>
<%= Request.QueryString("food")(i) %> <BR>
<%Next%>
上述脚本将显示：
apples
olives
bread
Form 集合
当使用 HTTP GET 方法去向 Web 服务器传递长而复杂的表格值时，将可能丢失信息。大多数的 Web 服务器倾向于严格控制 URL 查询字符串的长度，以便用 GET 方法传送的冗长的表格值被截断。如果您需要从表格发送大量信息到 Web 服务器，就必须使用 HTTP POST 方法。此法用于在 HTTP 请求正文中发送表格数据，而且发送的字符的个数可以无限多。也可以使用 ASP Request 对象的 Form 集合检索用 POST 方法发送的值。
Form 集合与 QueryString 集合存储数值的方式相同。例如，如果用户用一长串名称填充表格，您就可以用下面的脚本检索这些名称：
<% For i = 1 to Request.Form.Count %>
<% =Request.Form("names")(i) %>
<% Next %>
验证表格输入
一个好的表格处理脚本在处理数据前，应先验证输入表格的信息是否有效。验证脚本可以检验用户输入到表格的信息类型是否正确。例如，如果您的 Web 站点包含一个表格，该表格允许用户计算财务信息，那么在处理结果之前，需要验证用户确实输入了数值信息而不是文本。
一个非常方便的验证表格输入的方法是创建一个向自身传递信息的表格。在这种情况下，.asp 文件包含可获取信息的表格。例如，下面的脚本通过向自身传递信息来验证用户是否在 "age" 表格字段中输入了数值：
<% If Isnumeric(Request.QueryString("Age")) then %>
<p>Hello, your age is <%=Request.QueryString("age")%>
<%Else %>
<p>Please enter a numerical age.
<%End If %>
<FORM METHOD= "POST" ACTION="verify.asp" >
Name: <INPUT TYPE="text" NAME="Name" >
Age: <INPUT TYPE="text" NAME="Age" >
<INPUT TYPE="submit" VALUE="Enter">
</FORM>
在这个例子中，脚本也在包含表格的同一 Verify.asp 文件中。表格通过在 ACTION 属性中指定 Verify.asp 向自身传送信息。
您也可以创建客户端脚本来检验用户是否输入了有效的信息。验证用户在 Web 浏览器上的输入除了更迅速地向用户提示表格项错误外，还可以减少 Web 服务器的网络流量。下面的脚本运行在用户的 Web 浏览器上，在将信息提交到 Web 服务器之前，验证用户信息。
<SCRIPT LANGUAGE="VBScript">
<!--
Sub btnEnter_onClick
Dim TheForm
Set TheForm = Document.MyForm
If IsNumeric(TheForm.Age.Value) Then
TheForm.submit
Else
Msgbox "Please enter a numerical age."
End if
End Sub
//-->
</SCRIPT>
<FORM METHOD= "POST" NAME= MyForm ACTION="myfile.asp" >
Name: <INPUT TYPE="text" NAME="Name" >
Age: <INPUT TYPE="text" NAME="Age" >
<INPUT TYPE="button" NAME="btnEnter" VALUE="Enter">
</FORM>
简单实用的HTML代码
弹出相当于按F11效果的窗口：window.open('','','fullscreen=1')
window.open('','','channelmode=1')
FLASH弹出窗口
javascript:window.open('http://www.0668.com/guest/mmql/dyjlb/index.htm','','width=580,height=400,scrollbars=1');void(0)
FLASH动态导入外部文本
loadVariables("text.txt", "_root.mcname");
有没有可能用层来遮住FLASH？
1.在flash的parameters里加入 <param name="wmode" value="transparent">
2.<body onblur=self.focus()>
----------------------弹出窗口-------------------------------
<script language="javascript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=300,height=225,resizable=1,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = 'http://home.lufeng.net/huangyx/xsc1/pop.htm';
}
// -->
</script>
---------------------------
如何让表格并排？ 首先在第一个表里应该这样写： "<table border=0 cellpadding=1 cellspacing=1 align=left>" 这table里最为关键是"align=left"这一句。 然后在第二个表里也应该加上align=left 这样，你的目的就达到了。
---------------------------------------------------------------------
如何让两个form表单行距之间不出现空格？ 这样写 <TABLE><FORM><TR>.......</TR></FORM></TABLE>
-----------------------------------------------------------------------------
关闭窗口<a href="javascript:self.close();">关闭窗口</a>
----------------------------------------------------------
如何在我的页面中加入背景音乐？
IE: <bgsound src="/*.mid" loop=infinite>
NS:<embed src="/*.mid" autostart=true hidden=true loop=true>
------------------------------------------------------------------
FLASh透明：<param name="wmode" value="transparent">
FLASh居下层：<param name=wmode value=opaque>
FLASh全屏fscommand(fullscreen, true)
flash屏蔽右键:
在flash浏览器中，fscommand ("showmenu", "false");
在ie浏览器中，Stage.showmenu=false
iframe背景可以透明:<body bgcolor=transparent>
<marquee height=100% width=95% direction=up onMouseOut=this.start()
onMouseOver=this.stop() scrollamount=1 scrolldelay=1> 我是 </font></marquee>
-----------------------------------------
平方米:M<sup>2</sup>
----------------------------------------
框架
<iframe style='height:98%; width:100%; ' leftmargin=0 scrolling=no framespacing=0 frameborder=0 src=../web/hyforum/index3.php?index=1></iframe>
<IFRAME border=0 name=msghtml marginWidth=0
frameSpacing=0 marginHeight=0 src="/sitemap.files/msg.htm" frameBorder=0
noResize width=150 scrolling=no height=230 vspale="0"></IFRAME>
----------------------------------
层的绝对固定:
.layer-k { position: relative; clip: rect( )}
定位层的时候把层放在单元格里面。然后在所在的单元格里面用：
<td class=layer-k >即可！
---------------------------------------------------------------
一）、设为首页
<a href=# onMouseOver=this.style.behavior="url(#default#homepage)";this.setHomePage("http://www.jsshow.com/");>设为首页</a>
（二）、收藏本站
onclick="window.external.addFavorite('http://ivwsky.126.com','天空工作室')"
href="">
（三）、在窗口的状态栏显示滚动信息
(1) 在BODY中加入代码:
<script language="javascript">
var msg="欢迎访问建站资源网，在这里有你会有所收获的!";
var i=1
function scroll()
{
mess=msg.substring(i,msg.length)+" "+msg.substring(0,i)
window.status=mess
i++;
if (i>=msg.length) i=1; //设置不停滚动
setTimeout("scroll()",200); //设置滚动速度
}
</script>
白色无阴影的滚动条样式
<style>
BODY {SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCCC; SCROLLBAR-SHADOW-COLOR: #CCCCCC; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #CCCCCC; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; }
</style>
防横向滚动条:
这可能是你的网站尺寸做得过于紧张，
现有几种方法可不出现横拉：
1. 以 800*600 设计为标准的，你最好把表格定为 766*426，这是没错的。
2. 你可以用代码使横拉永远不出现：
style="OVERFLOW-Y: hidden; OVERFLOW-X: hidden"
好明显 OVERFLOW-Y: hidden 为隐藏横拉，
OVERFLOW-X: hidden 为竖拉。
网页设计常用代码荟萃 （转）
2003-2-13 闪客天堂 双击自动滚屏；单击停止
禁止页面正文选取
<body foo1 ="return false" foo1 ="return false" foo1 ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()">
消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">
防止点击空链接时，页面往往重置到页首端。
代码“javascript:void(null)”代替原来的“#”标记
如何避免别人把你的网页放在框架中
<script language=“javascript”><!--if (self!=top){top.location=self.location;} -->< /script>
页面定时刷新
<meta http-equiv="Refresh" content="秒" >
页面定时转向新的地址
<meta http-equiv="refresh" content="秒;URL=url">
显示日期
<script language="javascript"><!--
today=new Date();
var week; var date;
if(today.getDay()==0) week="星期日"
if(today.getDay()==1) week="星期一"
if(today.getDay()==2) week="星期二"
if(today.getDay()==3) week="星期三"
if(today.getDay()==4) week="星期四"
if(today.getDay()==5) week="星期五"
if(today.getDay()==6) week="星期六"
date=(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"+" "
document.write("<span style='font-size: 9pt;'>"+date+week+"</span>");
// -->
</script>
设为首页
<A href=# onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('url');">设为首页</A>
添加收藏
<A href="javascript:window.external.AddFavorite('url','title')"> 加入收藏夹</A>
网页效果集合
网页效果集合
1。忽视右键
<body oncontextmenu="return false">
或
<body style="overflow-y:hidden">
2。加入背景音乐
IE:<bgsound src="/*.mid" loop=infinite>
NS:<embed src="/*.mid" autostart=true hidden=true loop=true>
</embed>
*.mid你的背景音乐的midi格式文件
3。简单的window.open方法
<a href="#"
onclick="javascript:window.open(文件路径/文件名,newwindow,
toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
width=400,height=300);">文字或图片</a>
参数解释：
<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
文件路径/文件名 弹出窗口的文件名；
newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替；
width=400 窗口宽度；
height=300 窗口高度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和*动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束
4。简单的页面加密
<script LANGUAGE="javascript">
<!--
function loopy(){
var sWord ="";
while(sWord!="login"){sWord=prompt("请输入你的登陆密码");}
alert("登陆成功！");
}
loopy()
//-->
</script>
5。拉动页面时背景图不动
<style>
body{background-image:url(/logo.gif);
background-repeat:no-repeat;background-position:center}
</style>
6。让浏览器在保存页面时保存失败
<NOSCRIPT><iframe src="/*.html"></iframe></NOSCRIPT>
7。随机替换图片
<script>
document.write(<img src="img/+parseInt(Math.random()*(5))
+.gif"height="40" width="50">)
</script>
图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif
8。窗口定时关闭
先将如下代码网页文件的区：
<script language="javascript">
function closeit() { setTimeout("self.close()",10000) //毫秒 }
</script>
然后再在<body>标内加入如：<body onload="closeit()">
9。网页自动关闭
<html>
<head>
<object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body onload="window.setTimeout(closes.Click(),10000)">
这个窗口会在10秒过后自动关闭,而且不会出现提示.
</body>
</html>
10。网页自动刷新
在head部记入
<META HTTP-EQUIV="Refresh" content="20">
其中20为20秒后自动刷新，你可以更改为任意值。
11。网页自动转页
<META HTTP-EQUIV="Refresh" CONTENT="时间(秒);URL=地址">
12。保持layer在最前面，而不被Iframe、Object所覆盖
在Layer中再插Iframe 或 Object 设z-Index值
<div z-Index:2><object ***></object> ＃ 前面
<div z-Index:1><object ***></object> ＃ 后面
<div id="Layer2" style="position:absolute; top:40;width:400px;
height:95px;z-index:2"> height=100% width=100%>
<iframe width=0 height=0></iframe>
</div>
<div id="Layer1" style="position:absolute; top:50;width:200px;
height:115px;z-index:1">
<iframe height=100% width=100%></iframe>
</div>
13。返回上一页
<a href="/javascript:history.back"(1)>『返回上一页』</a>
14。关闭窗口
<a href="/javascript:self.close"()>『关闭窗口』</a>
15。关于iframe的透明背景
<IFRAME ID="iFrame1" src="/iframe.htm"
allowTransparency="true"
style="background-color: green"></IFRAME>
----------------------------------------------------
让弹出窗口只打开一次
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents \.cookie.length > 0) {
offset = documents \.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents \.cookie.indexOf(";", offset);
if (end == -1)
end = documents \.cookie.length;
returnvalue=unescape(documents \.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents \.cookie="popped=yes"
}
}
</script>
<body onload="loadpopup()">
-----------------------------------------------------------------------------
如何让浏览器在保存页面时保存失败？
<NOSCRIPT>
<IFRAME src="/*.html">
</IFRAME>
</NOSCRIPT>
---------------------------------------
如何在不刷新页面的情况下刷新css?
<style>
button{ color:#000000;}
</style>
<button onclick=document.styleSheets[0].rules[0].style.color='red'>点击按钮直接修改style标签里button选择符使按钮改为红色</button>
----------------------------------------------------------------------------------------
图片不显示虚线边框
onFocus="this.blur()"
解决iframe在页面中无法自适应
[ 2004-09-10 1:10:33 PM | Author: siyizhu | From: Blueidea ]
iframe是一个比较特殊的控件。他的height只能是一个绝对值，不允许使用百分比。但是你可以用javascript输出一个iframe的HTML。但是这个相对值只能是当页面加载后赋给的。如果你resize。控件大小仍然是当初加载的高度。这个时候除了你在刷新。高度值才会重新加载。
这里我就想到了一个解决的方法。就是在body的标签中加上一个onResize事件；当你onload的时候触发写好的JS函数。然后在onResize的时候同样出发这个函数。从而解决上述问题。
演示代码如下：
<html>
<body bgcolor="#000000" onload="resizeHeight();" onResize="resizeHeight();">
<script language="javascript">
function resizeHeight()
{
document.getElementById("web".style.height = parseInt(document.body.clientHeight-50);
}
</script>
<iframe name="web" id="web" width="100%" scrolling="NO" frameborder=0 src="/about:blank"></iframe>
</body>
</html>
HTML代码实际应用
一个完整的HTML帖子应该是：
美贴＝背景＋文章＋插图＋收尾
原代码如下： <TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>
帖子的文章加图片
</TD></TR></TBODY></TABLE>
注意：前边用了多少<table......><tr><td>后面就要有多少</td></tr></table>收尾。多收和少收都会使帖子出错哦 ：）
常用的参数设定及注解：
<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">
width="400" 表格宽度，接受绝对值（如 500）及相对值（如 80%）。 border="10" 表格边框的厚度。 cellspacing="2" 表格格线的厚度 cellPadding=5 表格格线内厚度 align="CENTER" 表格的摆放位置（水平），可选值为：左： left, 右： right, 居中： center valign="TOP". 表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。 background="背景图片网址" 表格的背景图片，与 bgcolor 不要同用。 bgcolor="#0000FF" 表格的底色，与 background 不要同用 bordercolor="#CF0000" 表格边框颜色 bordercolorlight="#00FF00" 表格边框向光部分的颜色 bordercolordark="#00FFFF" 表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
二.文字应用
1.文字基本设制
基本代码如下：
<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>
<P align=center>表示居中，<P align=left>表示居左，<P align=right>表示居右。
face=字体 常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等 size=字体大小，这里的最大值为7 取值越大文字就越大 另一种贴法： <font style=font:40pt face=新宋体 color=#ff0000>插入文字</font> font:40pt 数值越大文字就越大。 color=颜色代码。
三.贴图
1.基本代码：
<img src=图片网址 width=图片宽度 height=图片长度>
注意：设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）。图片的居中，居左，居右上面已经介绍了，这里不再重复。。。。。
2.给图片加边框
基本代码：
<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://web.cn898.net/haoran/tp/lu/lu10.jpg width=500 height=375></td></table>
说明：
border="6" 表格边框的厚度，不同浏览器有不同的内定值。
cellspacing="2" 表格格线的厚度
cellPadding=1 表格格线内厚度
borderColor=#841A00 边框色彩
3.图片朦胧
A.圆形效果
代码： <IMG src="图片" width=500 height=375 style="filter:Alpha(opacity=100,style=2);">
B.方形效果
代码： <IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=375 ALGIN="MIDDLE">
四.透明FLAH的应用
1.常用代码如下：
<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片><TBODY><TD><EMBED src=透明网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>
注意：长和宽的设定要根据图片的实际大小来设定效果
|
