网页制作HTML代码全攻略

来源：互联网发布：网络运维编辑：程序博客网时间：2024/06/06 09:18

网页制作HTML代码全攻略

第一章：HTML 语言的结构

　　 html文件是标准的ASCII文件，它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件。从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。元素的起始标记叫做起始标注(start tag)，元素结束标记叫做结尾标注(end tag)，在起始标注和结尾标注中向的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标注内标明。比如体元素(body)

This is my firsthtml file. <p>

</body>

　　第一行是体元素的起始标注，它标明体元素从此开始。因为所有的标注都具有相同的结构，所以我们将仔细分析这个标注的各个部分，以便读者对标注的写法

有一大概了解。

　　 < 起始标注开始

　　 body 元素名称，由于元素和标注一一对应，所以元素名也叫标注名。需要注意的是<和body之间不能有空格。元素名称不分大小写。

　　 background属性名。一个元素可以有多个属性，属性及其属性值不分大小写。本属性指明用什么方法来填充背景。

　　＝指明属性值

　　 “background.gif”属性值，表示用background.gif文件来填充背景。

　　属性名,＝,属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。

　　 >　起始链接链结束。

　　第二行和第三行是body元素的元素体，最后一行是body元素的结尾标注。结尾标注用</开始，随后是元素名，然后是大于号>。

　　从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。(上例中第二行的标题元素<h2>…</h2>和第三行的分段元素<p>。实际上，html文件仅由一个html元素组成，即文件以<html>开始，以</html>结尾，文件其部分都是 html的元素体。html元素的元素体由

两大部分，即头元素<head>..</head>和体元素<body>…</body>和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说，一个html文件应具有下面的结构：

　　 <html>　　html文件开始

　　 <head> 文件头开始

　　文件头

　　 </head>　文件头结束

<body> 文件体开始

　　文件体

　　 </body> 文件体结束

　　 </html>　　 html文件结束

　　需要说明的是，html是一门发展很快的语言，早期的html文件并没有如此严格的结构，因而现在流行的浏览器(如Netscape,Mosaic等)为保持对早期html文件的兼容性,也支持不按上述结构编写的html文件。还需要说明的是，各种浏览器对html元素及其属性的解释也不完全一样，本书中所讲的元素，元素的属性及其输出是以Netscape2.0 浏览器为准的，作者将尽量给出别的浏览器对某一元素的解释。

　　一般来讲，html的元素有下列三种表示方法：

　　 1)<元素名>文件或超文本<／元素名>

　　 2)<元素名　属性名＝“属性值…>文本成超文本<／元素名>

　　 3)<元素名>

　　第三种写法仅用于一些特殊的元素,比如分段元素P，它仅仅通知www浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾标注。htlm3.0标准中，也定义了</p>标注，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。

　　注意:HTML并非大小写敏感. <title>和<TITLE>或者<TiTlE>是一样的.

　　 html文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。

第二章：构成网页的基本元素

　 2.1标题(TITLE)

　　 Title元素是文件头中唯一一个必须出现的元素，它也只能出现在文件头中。title元素的格式为：

　　 title标明该html文件的标题，是对文件内容的概括。一个好的标题应该能使读者从中判断出该文件的大概内容。文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。除了标识窗口外，当将某一 homepage 存入书签或文件时，title还用作书签名或缺省的文件名。

　　 title的长度没有限制，但过长的标题会导致折行，一般情况下它的长度不应超过64个字符。由于title的作用是标明文件内容，所以太短的title也是不可取的，比如：introduction这个标题，读者不可能根据它判断出本文介绍的是什么。一个好的例子是：

　　 <title>　AnIntroduction to HTML </title>

　　在头元素中还可以出现其他元素，如<isindex>，<meta>等等。这些元素都不是必须的，而且也不常用。这些元素的用法和它们的含义可以参考有关文献。

下面是一个最简单的html 文件

<html>

<title>thesimplest html file</title>

This is my firsthtml file.

</html>

　§2.2 标题(hn)

　　标题元素有6种，分别为h1, h2,…h6，用于表示文章中的各种标题。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释：

　　 h1 黑体，特大字体，居中，上下各有两行空行。

　　 h2 黑体，大字体，上下各有一到两行空行

　　 h3 黑体(斜体)，大字体，左端微缩进，上下空行

　　 h4 黑体，普通字体，比h3更多缩进，上边一空行

　　 h5 黑体(斜体)，与h4相同缩进，上边一空行

　　 h6 黑体，与正文有相同缩进，上边一空行

　　 Netscape 对hn的解释为，一律黑体，字体越来越小。

　　 hn可以有对齐属性，align＝#， #表示

left标题居左

center标题居中

right 标题居右

　　例: <h2 align=center>Chapter2 </h2>

<h1>标题元素！</h1> 标题元素！

<h2>标题元素！</h2> 标题元素！

<h3>标题元素！</h3> 标题元素！

<h4>标题元素！</h4> 标题元素！

<h5>标题元素！</h5> 标题元素！

<h6>标题元素！</h6> 标题元素！

　§2.3 分段<P>

　　 html的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素<P>。比如下面两段源文件有相同的输出。

<h2>This is alevel Two Heading </h2>

paragraph one<p>paragraph two <p>

… … … … … … … … … …

<h2>This Is aLevel Two Heading</h2>

paragraph one<p>

paragraph Two<p>

　　 <p>也可以有多种属性，比较常用的属性是：

　　 aligh＝#， #可以是left,center,right,其含义同上文。

　　例　<p align=center>This is a centeredparagraph <／p>

　　当 html文件中有图形，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。这时，不带clear属性的<p>可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方，可使用clear属性。clear属性的含义为：

clear=left 下一段显示在左边界处空白的区域

clear=right 下一段显示在右边界处空白的区域

clear=all 下一段的左右两边都不许有别的内容

　　 §2.4 列表List

　　列表用于列举事实，常用的列表有3种格式，即无序列表(unordered List)，有序列表(ordered list)和定义列表(definition list)

　 2.4.1 无序列表(ul)

　　无序列表用(ul)开始，每一个列表条目用<li>引导，最后是</ul>，注意列表条目不需要结尾标注</Li>。输出时每一列表条目缩进，并且以黑点标示。

例：

　 <ul>

　 <li>Today

　 <li>Tommorow

　 </ul>

输出为

　●Today

　●Tommorow

　 2.4.2 有序列表<ol>

　　有序列表与无序列表相比，只是在输出时列表条目用数字标示，下面是一个例子及其输出：

　　例：

　　　 <ol>

　　　 <li>Today

　　　 <li>Tommorow

　　　 </ol>

　　输出为：

　　 1.Today

　　　 2.Tommorow

　　 2.4.3 定义列表<dl>

　　定义列表用于对列表条目进行简短说明的场合，用<dl>开始，列表条目用<dt>引导，列表条目的说明用<dd>引导。

<dl>

<dt>Item 1

<dd>The definition of item 1

<dt>Item 2

<dd>Definition or explaination of item 2

</dl>

输出为：

Item 1

　　 The definition of item 1

Item 2

　　 Definiton or explaination of item 2

　 2.4.4 改变条目标记

　　 1.改变无序列表条目标记

　　无序列表输出时，每一条目前都有一个黑色圆点，用户可以用type序性修改条目的标记。type可以是disc实心圆点　cirde圆圈 square实心方点

<ul>

<li type=disc>ONE

<li type=circle>TWO

<litype=square>THREE

</ul>

输出为：

●ONE

○TWO

■THREE

　　 2.改变有序列表条目标记

　　有序列表条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为：

Li= A, 大写字母

a, 小写字母

I, 大写罗马数字

i, 小写罗马数字

l, 缺省,阿拉伯数字

<ol><litype=A>ONE-ONE

输出为：

A.ONE-ONE

B.ONE-TWO

<ol><litype=a>ONE-ONE

输出为：

a.ONE-ONE

b.ONE-TWO

<ol><litype=I>ONE-ONE

输出为：

Ⅰ.ONE-ONE

Ⅱ.ONE-TWO

<ol><litype=i>ONE-ONE

输出为：

i.ONE-ONE

ii.ONE-TWO

<ol><litype=1>ONE-ONE

输出为：

1.ONE-ONE

2.ONE-TWO

　 3.改变有序列表条目的起始数字

　　有序列表的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。方法为<ol start=#> #是条目起始号

<litype=A>ONE-ONE

<li>ONE-TWO

<li>TWO-ONE

<litype=i>TWO-ONE

</ol></ol>

输出为：

E.ONE-ONE

F.ONE-TWO

10.TWO-ONE

xi.TWO-TWO

　　 2.4.5 列表的嵌套

　　各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。每嵌套一层，列表条目的输出就会有更大的缩进。请参照上面的例子。

　　 §2.5 预格式化文本<pre>

　　 html的输出是基于窗口的，因而html文件在输出时都是要重新格式化的，若确实不需要重新格式化的内容，可以用<pre>…<／pre>通知浏览器。浏览器在输出时，对这部分内容几乎不做修改地输出，输出的字体电传打字机字体。早期的html规范规定在预格式化区内不能出现格式化输出的元素。如hn等，Netscape在遇到预格式化元素时，允许其中有其他元素。

<pre>

please use yourcard.

VISA Master

<b>Here is anorder form.</b>

<ul><li>Fax

</pre>

输出为：

please use yourcard

VISA Master

Here is an orderform.

●Fax

●Air Mail

　　 §2.6 块引用<BLOCKQUOTE>

　　块引用用<BLOCKQUOTE>标注，使屏幕显示单独的一块。大多数的浏览器采用缩进编排的方式，使这一块和其他部分的文本区分开来，上下各有一空行。

块引用(Blockquote)<blockquote>...</blockquote>

Her Song:

When I was young, Ilistened to the radio

waiting for myfavorite songs....

</blockquote>

Her Song:

When I was young, Ilistened to the radio waiting for my favorite songs....

　　 §2.7 居中

　　很多元素都有对齐方式属性，如hn 、p等。也可以直接用居中标注<center>…<／center>

<h3align=center>Wonderful!!</h3>

<center>Thismust be my dream.</center>

输出为：

Wonderful!!

This must be mydream.

第三章：超文本链接指针

　　超文本链接指针是html最吸引人们优点之一。链接指针可以使读者在整个Internet网上方便地链接。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，而每一个链接指针正好代表了作者或者读者的思维跳跃，这更加符合人类的思维方式。因而组织得好的链接指针有助于理解作者的意图。

　　一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。

　　 §3.1 统一资源定位器URL

　　统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中，定位一个文件需要路径和文件名，对于遍布全球的Internet网，显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为：

　　 protocol:// machine.name[:port]／directory／filename

　　其中protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：　http 超文本传输协议，该资源是html文件file 文件传输协议,用ftp访问该资源ftp 文件传输协议,用ftp访问该资源gophergopher协议,该资源是gopher文件news 表明该资源是网络新闻

　　 madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如sun.ihep.ac.cn port端口号，是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。只有当服务器所使用的端口号不是缺省的端口号时才指定。

　　 directory和filename是该资源的路径和文件名。

　　一个典型的URL为:http://www.ihep.ac.cn它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。

　　与单机系统绝对路径，相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为http://www.inep.ac.cn/index.html的文件，如果想看同一个目录下的另一个文件china.html，你可以直接使用china.html，这时china.html就是一个相对url，它的绝对url为http://www.ihep.ac.cn/china.html

　　 §3.2 指向一个目标<a>

　　在html文件中用链接指针指向一个目标。其基本格式为：

　　 <a href="/url">字符串

　　 href属性中的统一资源定位器(url)是被指向的目标，随后的“字符串”在html文件中充当指针的角色，它一般显示为蓝色。当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。例如：

　　 IHEP CHINA homepage

　　用户用鼠标点取IHEP china homepage，即可看到高能所编写的关于中国情况的介绍。在这个例子中，充当指针的是IHEP china homepage，下面我们将看到用图象做为指针的例子。

　　在编写html文件时，需要知道目标的url。如何才能得到目标的url呢？对于自己主机内的文件，它的url 可以根据该文件的实际情况决定。对于Interner上的资源，我们在用浏览器观看时，它的url会在浏览器的Location一栏中显示出来，把它抄下来写到你的html文件中即可。

　　在编写html文件时，对有能确定关系的一组资源(比如在同一个目录中)应采用相对url，这不仅简化你的html文件，而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时，用相对url写的html文件用不看更新其中的url(只要它们的相对关系没有改变)。但如果你用绝对url编写html，你就不得不逐字修改每个链接指针中的url，这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系，比如你的html文件是介绍各大学情况的，它所指向的目标分布在全球的主机中，这时你就只能用绝对url了。

　　在本章的末尾，作者给出一个完整的html文件，该文件使用了前三章介绍的全部元素，以便于读者理解。

　　 §3.3 标记一个书签

　　上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件，从头到尾地读很浪费时间，能不能在同一文件的不同部分之间也建立起链接，使用户方便地在上下方之间跳转呢？答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。对于一个完整的文件，我们可以用它的url来唯一地标识它，但对于同一文件的不同部分，我们怎样来标识呢？下面的内容将介绍链接指针元素的另外的一个用途，标识书签。

　　标识一个书签的方法为：

name属性将放置该标记的地方标记为“name”，name是一个全文唯一的标记串，text部分可有可无。这样，我们就把放置标记的地方做了一个叫做“name”的标记。

　　做好标记后，可以用下列方法来指向它，

　　 <a href="url#name">text

url是放置标记的html文件的url name是标记名，对于同一个文件，可以写为

　　 <ahref="#name">text

这时就可以点取text跳转到标记名为name的部分了。

　　 §3.4 目标窗口

　　如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。

　　 <ahref="/url" target="window-name">text

将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。

　　 §3.5 图象链接指针

　　图象也可以做为链接指针。格式为：

　　可以看出，上例中用<img src="/url">取代了链接指针中text的位置。

　　 <img src="/url">是图象元素，它表明显示url代表的图象文件，参见图象一章。

　　下面是一个简单的图象链接指针:

　　 <ahref="/www.ihep.ac.cn">China home page<imgsrc="flag.gif">

　　边框　<img border=#> #=value

<ahref="/URL">

<imgsrc="/URL" border=15>

§3.6 图象地图(imagemap)

　　上一节介绍的图象链接指针每幅图只能指向一个地点，而图象地图可以把图象分成多个区域，每个区域指向不同的地点。你可以用图象地图编出很漂亮的html文件。

　　使用图象地图稍微复杂一点。图象地图不仅需要在html文件中说明，它还需要一个后缀为.map的文件，用来说明图象分区及其指向的url的信息。在.map文件中说明分区信息的格式如下：

　　 rect url 左上角坐标，右下角坐标

　　 poly url 各顶点坐标

　　 circle url 直径两端点坐标

　　 default url

　　 rect指定一个矩形区域，该区域的位置由左上角坐标和右下角坐标说明。poly 指定一多边形区域，该区域的位置由各顶点坐标说明。circle 指定一圆形区域，该区

域的位置由垂直通过圆心的直径与该圆的交点坐标说明。default 指定图象地图其它部分的url。坐标的写法为：x,y ，各点坐标之间用空格分开。下面是一个完整的说明文件，

　　 default http://www.ihep.ac.cn

　　 rect http://www.ibm.com 140,20 280,60

　　 poly http://www.microsoft.com 180,80200,140

　　 circle http://www.yahoo.com 80,140 80,100

　　图象地图需要一个特殊的处理程序 imagemap，imagemap放在/cgi-bin 中。在html 文件中引用图象地图的格式为：

　　 <ahref="/cgi-bin/imagemap/mymap.map">

　　可以看出这是一个包含图象元素的链接指针元素。图象元素指明用于图象地图的图象的url，并用Ismap属性说明。需要说明的是链接指针中的href属性，它由两部分组成，第一部分是/cgi-bin/imagemap ，它指出用哪个程序来处理图象地图，它必须原样写入，第二部分才是图形地图的说明文件mymap.map。/cgi-bin/imagemap/mymap.map绝不表示mymap.map在/cgi-bin/imagemap目录中。在netscape扩展中，图象地图可以用一种比较简化的方式来表示，这就是客户端图象地图。用户端地图可以将图象地图的说明文件写在html文件中，而且不需要另外的程序来处理。这就使html作者可以用同别的元素相一致的写法来写图象地图。客户端图象地图还有一个优点，当鼠标指向图象地图的不同区域时，浏览器能显示出各个区域所指向的url。但目前只有netscape2.0以上版本才支持这一扩展。

　　用户端图象地图的格式为：

　　 src="/url" 指定用作图象地图的图象

　　 usemap属性指明这是客户端图象地图

　　 "#mymap"是图象文件说明部分的标记名，浏览器寻找名字为mymap的<map>元素并从中得到图象地图的分区信息。客户端图象地图的分区信息用<map name=mapname>元素说明，name属性命名<map>元素。图象地图的各个区域用<areashape="形状" coords="坐标" href="/url">说明，形状可以是：rect矩形，用左上角，右下角的坐标表示，各个坐标值之间用逗号分开； poly多边形，用各顶点的坐标值表示；circle圆形，用圆心及半径表示，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。

href="/url"，表示该区域所指向的资源的url，也可以是nohref，表示在该区域鼠标点取无效。客户端图象地图各个区域可以重叠，重叠区以先说明的条目为准，下面是一个例子：

源程序：

<imgsrc="mapimg.gif" usemap="#Face>

<mapname="Face">

<!TextBOTTON> 此行是注释

<areashape="rect"

href="page.html"

coords="140,20,280,60">

<!TriangleBOTTON>

<areashape="poly"

href="/image.html"

coords="100,100,180,80,200,140">

<!FACE>

<areashape="circle"

href="/nes.html"

coords="80,100,60>

</map>

第四章：版面风格控制

　　 §4.1　字体大小

　　 html有七种字号，1号最小，7号最大。缺省字号为3，可以用<basefontsize=字号>设置缺省字号。

　　设置文本的字号有两种办法，一种是设置绝对字号，；另一种是设置文本的相对字号；。用第二种方法时“＋”号表示字体变大，“－”号表示字体变小。

　　 §4.1.2 字体风格

　　字体风格分为物理风格和逻辑风格。

　　物理风格直接指定字体，物理风格的字体有：<b>黑体，<i>斜体，<u>下划线，<tt>打字机体。

　　逻辑风格指定文本的作用：<em>强调<srrony>特别强调 <code>源代码<samp>例子 <kbd>键盘输入<var>变量 <dfn>定义<cite>引用 <small>较小<big>较大 <sup>上标<sup>下标

物理风格(Physical Style):

<b>今天天气真好！</b> 今天天气真好！

<i>今天天气真好！</i> 今天天气真好！

<u>今天天气真好！</u> 今天天气真好！

<tt>今天天气真好！</tt> 今天天气真好！

<sup>今天天气真好！</sup> 今天天气真好！

<sub>今天天气真好！</sub> 今天天气真好！

<s>今天天气真好！</s> 今天天气真好！

<strike>今天天气真好！</strike> 今天天气真好！

逻辑风格(Logical Style):

<em>今天天气真好！</em> 今天天气真好！

<strong>今天天气真好！</strong> 今天天气真好！

<code>今天天气真好！</code> 今天天气真好！

<samp>今天天气真好！</samp> 今天天气真好！

<kbd>今天天气真好！</kbd> 今天天气真好！

<var>今天天气真好！</var> 今天天气真好！

<dfn>今天天气真好！</dfn> 今天天气真好！

<cite>今天天气真好！</cite> 今天天气真好！

<small>今天天气真好！</small> 今天天气真好！

<big>今天天气真好！</big> 今天天气真好！

　　 §4.1.3 字体颜色

　　字体的颜色用...指定

　　 xxxxxx可以是6位16进数，分别指定红、绿、兰的值，也可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua 之一。

　　字体风格

　　 §4.1.4 闪烁

　　 <blink>文本</blink>使文本闪烁，闪烁频率为１秒钟一次。

　　 §4.2 标尺线(hr)

　　标尺线，一般用于分隔同一文体的不同部分。在窗口中划一条标尺线非常简单，只要写一个<hr>即可。标尺线的宽度用<hrsize=n>指定，width=#>指n是线宽，单位是象素。例：<hr size=10>。 <hr 定标尺线长度，可以指定绝对线长，也可以指定标尺线长度占窗口宽度的百分比。例<hr width=50> 、<hr width=50%>。

　　标尺线的位置用<hr align=#>指定。

　　 #是left成right之一，left表示左端与左边界对齐，right是右端与右边界对齐，缺省，标尺线出现在窗口正中。

<hr>

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

<hrwidth=50%>

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：

Black, Olive, Teal,Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White,Green, Purple, Silver, Yellow, Aqua

　　 4.3　行间图象

　　行向图象使你的页面更加漂亮，但是行向图象会导致网络通讯量急剧增大。使访问时间延长。所以在主页(homepage)，不宜采用很大的图象。如果确实需要一些大图象，最好在主页中用一个缩小的图象指向原图，并标明该图的大小。这样读者可以快速地访问您的主页，自己选择看还是不看那些图象。

　　图象的基本格式为：

　　　 <img src="/image-url">或<img src="/image-urd"alt="text">image-url是图象文件的url。目前，大部分浏览器支持 .gif 和 .xbm文件，netscape还支持jpeg文件。alt属性告诉不支持图象的浏览器用text代替该图。

　　 4.3.2 图象与文本的对齐方式

　　图象在窗口中会占据一块空间，在图象的左右可能会有空白，不加说明时，浏览器将随后的文本显示在这些空白中，显示的位置由align属性指定。

<imgsrc="/URL" align=top> My face!

My Face!

<imgsrc="/URL" align=middle> My face!

My Face!

<imgsrc="/URL" align=bottom> My face!

My Face!

4.3.3 图象在页面中的对齐方式／布局（Floating Image)

<imgalign=left>

<imgsrc="/URL" align=left>My Face!<br>

It isalways<br>

smiling.<br>

Hahaha....<br>

My Face!

It is always

smiling.

Hahaha....

<imgalign=right>

My Face!

It is always

smiling.

Hahaha....

<imgsrc="/URL" align=left>My Face!<br>

It is always

<brclear=all>

smiling.<br>

Hahaha....<br>

My Face!

It is always

smiling.

Hahaha....

<img vspace=#hspace=#> #=value

<imgsrc="/URL" align=left vspace=10 hspace=20>My Face!<br>

It is always<br>

smiling.<br>

Hahaha....<br>

My Face!

It is always

smiling.

Hahaha....

　　 4.4 分行<BR>和禁止分行<nobr>

　　 <Br>表示在此处分行，<nobr>....</nobr>叫通知浏览器，其中的内容在一行内显示，若一行内显示不了，则超出部分被裁剪掉。

　　 <br clear=#>clear属性标明下一行的情况，如clear=left，表示下一行从左边界处开始。#可以是left，right，all之一。例:

　　 §4.5 背影和文本颜色

　　窗口背景可以用下列方法指定

　　 <bodybackground="/image-url">

　　前者指定填充背景的图象，如果图象的大小小于窗口大小，则把背景图象重复，直到填满窗口区域。

　　后者指定的是16进制的红、绿、兰分量。

bgcolor 背景颜色

Text 文本颜色

Link 链接指针颜色

alinik 活动的链接指针颜色

vlinik 已访问过的链接指针颜色

　　例 <body bgcolor=FFoooo>大红背景色.

　　注意，此时体元素必须写完整，即用<body>结束

　　 4.6　转义字符与特殊字符

　　 html中< ， >，&有特殊含义，(前两个字符用于标注，&用于转义)，不能直接使用。使用这三个字符时，应使用它们的转义序列。

　　 & 的转义序列为 &amps 或 & #38；

　　 < 的转义序列为 &Lt; & #60；

　　 > 的转义序列为 > & #62；

　　前者为字符转义序列，后者为数字转义序列。

　　例如　& Lt; font &Lgt;显示为<font>若直接写为<font>则被认为是一个标注。

　　需要说明的是：

a. 转义序列各字符间不能有空格；

b. 转义序列必须以“；”结束；

c. 单独的&不被认为是转义开始。

　　如“ & Lt； ”被解释为 “& Lt；”而不是<“&# 62 ；”被解释为 “& # 60；”而不是>另一个需要转义的字符是引号，它的转义序列为"""或"""，例如<imgsrc="/image.gif"alt="A &quol; real " example">。html使用的字符集是ISO &859 Larin-1字符集，该字符集中有许多标准键盘上无法输入的字符。对这些特殊字符只能使用转义序列。

　主题：Re:网页制作HTML代码全攻略

第五章：表格(Table)

　　 §5.1 表格的基本形式

　　一个表由<table>开始，</table>结束，表的内容由<tr>,<th>和<td>定义。<tr>说明表的一个行，表有多少行就有多少个<tr>；<th>说明表的列数和相应栏目的名称，有多少个栏就有多少个<th>；<td>则填充由<tr>和<th>组成的表格。是否用表格线分开为部分内容用border属性说明，下面是一个有表格线和一个元表格线的表及其输出。

带边框的表格：

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food Drink Sweet

A B C

不带边框的表格：

<table>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food Drink Sweet

A B C

　　 5.2 有通栏的表

　　 1、有横向通栏的表用<thcolspan=#>属性说明：colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。

跨多列的表元 <th colspan=#>

<tr><thcolspan=3> Morning Menu</th>

<tr><th>Food</th><th>Drink</th> <th>Sweet</th>

</table>

Morning Menu

Food Drink Sweet

A B C

　　 2、有纵向通栏的表用rowspan=#属性说明：rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用</tr>明确给出一横向栏目结束,这是和表的基本形式不同的。

跨多行的表元

<throwspan=#>

<tr><th rowspan=3>Morning Menu</th>

<tr><th>Drink</th><td>B</td></tr>

<tr><th>Sweet</th><td>C</td></tr>

</table>

Morning Menu Food A

Drink B

Sweet C

　　 5.3 表格属性

　　 1、表的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以象素为单位的整数。

表格尺寸设置：

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food Drink Sweet

A B C

　　 2、边框宽度由border=#说明，#为宽度值，单位是象素。

<tableborder=#>

边框尺寸设置：

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food Drink Sweet

A B C

　　 3、表格间距即划分表格的线的粗细用cellspacing=#表示，#的单位是象素，下面的例子将表格间距定义为10个象素，它看起来象用很粗的线划分的表格。

表元间隙设置：

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food Drink Sweet

A B C

　　 5.4 表中文本的输出

　　 1、文本与表框的距离用cellpadding=#说明。下面的例子使表的内容与表框离开10个象素。

表元内部空白设置：

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food Drink Sweet

A B C

　　 2、表格的后度大于其中的文本后度时，文本在其中的输出位置用align=#说明。#是 left，center和right三者之一，分别表示左对齐，居中和右对齐，align属性可修饰<tr>,<th>和<td>标注。

<th align=#>#=left, center, right

<tr>

<th>Food</th><th>Drink</th><th>Sweet</th>

<tr>

<tdalign=left>A</td>

<tdalign=center>B</td>

<tdalign=right>C</td>

</table>

Food Drink Sweet

A B C

　　 3、表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是top,middle,bottom,baseline四者之一。分别表示上对齐，文本中线与表格中线对齐，下对齐，文本基线与表格中线对齐，特别注意的是baseine对齐方式，它使得文本出现在网格的上方而不是相象中的下半部。同样，valign可以修饰<tr>,<th>,<td>中的任何一个。

<th valign=#>#=top, middle, bottom, baseline

<tr>

<th>Food</th><th>Drink</th>

<th>Sweet</th><th>Other</th>

<tr>

<tdvalign=top>A</td>

<tdvalign=middle>B</td>

<tdvalign=bottom>C</td>

<tdvalign=baseline>D</td>

</table>

Food Drink SweetOther

A B C D

　　 5.5 浮动表格

　　所谓浮动表格是指表与文件中重中内容对齐时，若在现在位置上不能满足其对齐方式，表格含上下移动，即“挤开”一些内容，直到满足其对齐要求。

　　浮动属性一般由align=left或right指定。

　　下面的例子也可以看出，cllign=left时把字符串“挤到”了表的右边。当右边空间不够时，该字符串会显示在表的下在边，看起来象是表“浮”到了字符串上。

<tablealign=left>

<tablealign="left" border>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Myfavorites...<br>

cookies,chocolates, and more.

Food Drink Sweet

A B C

My favorites...

cookies,chocolates, and more.

<tablealign=right>

Food Drink Sweet

A B C

　　 5.6 表格颜色

　　表格的颜色用bgcolor=#指定。

　　 #是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称，参见文本颜色。

Food</th>

<thbgcolor=whit>Drink</th>

</table>

Food Drink

A B

第六章：帧结构 Frame

　　 6 .1 帧结构的基本格式

　　帧结构将流览器的窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容，比如可以将索引放在一个区域，文件内容显示在另一个区域。

帧结构的基本结构如下

<html>

<head>

</head>

</frameset>

</html>

　　 <noframes>...</noframes>中的内容显示在不支持帧结构的浏览器窗口中,因而这里指向一个普通版本的html文件，以便使用不支持帧结构浏览器的用户阅读。

　　帧结构由<frameset>指定，并且可以嵌签，分区中种部分显示的内容用<framre>指定。

　　可以将窗口横向分成几个部分，也可以分成纵向几个部分，还可以混和帧结构。

　　 6.2 横向帧结构

　　横向帧结构用<frameser rows=#>指定，#可以是一个百分数，也可以是一整数。前者规定各帧占窗口的百分数，后者指定各帧的绝对大小。例如，下面的例子将窗口分成30%、20%、50%的几个区域，各区域的内容分别为A.html,B.html,C.html.

横向排列多个窗口：

<framesetrows=25%,25%,50%>

<framesrc="/A.html">

<framesrc="/B.html">

<framesrc="/C.html">

</frameset>

　　 6.3 纵向帧结构

　　纵向帧结构用<frameset cols=#>指定，参见下例：

<framesetcols=#>

纵向排列多个窗口：

<framesetcols=30%,20%,50%>

<framesrc="/A.html">

<framesrc="/B.html">

<framesrc="/C.html">

</frameset>

A B C

　　 6.4 混合帧结构

　　将窗口分成横纵几个区域时，用<frameset>代替<frame>链接至即可将原的分好的<frame>区域再次帧结构，下面的例子先将窗口分成20%,80%，然后将右边的区域再分成分别占40%和60%的上下两个区域。

纵横排列多个窗口：

<framesetcols=20%,*>

<framesrc="/A.html">

<framesrc="/B.html">

<framesrc="/C.html">

</frameset>

A B

　　 6.5 帧结构与帧中文本的间距

　　帧结构与其中的文本间距可以用Marginwidth=#和marginneigh=#来指定，前者指定文本与帧结构的边缘的横向距离，后者为纵向距离，其单位都为象素，下面的例子中，将右边帧结构的左右边距，上下空白都设为50个象素。

　　 6.6 帧结构间的关联

　　帧结构之间可以有特定的关联，比如将某一帧的内容输出到另一个帧，这样我们就可以把其中一个帧作为输出帧，另一个帧作为选择帧。实现这种关联需要做下列的事情。

　　 ①在帧结构的hrme文件中标记各个帧，标记的方法是在<frame>中加入name属性，比如上例，定义左边的帧为输出，右边帧为主帧。

　　 <framesrc="/A.html"name=display>

　　 <framesrc="/B.htme"name=index>

　　 ②在B.html文件中指定输出到哪个帧方法是在B.html文件中加入下列一行。

　　这便得用鼠标点取B.html中的链接指针，它的输出会显示在左边的帧中。

　　特殊的 4 类操作(很有用喔)

<ahref="/url" target=_blank> 新窗口

<ahref="/url" target=_self> 本窗口

<ahref="/url" target=_parent> 父窗口

<ahref="/url" target=_top> 整个浏览器窗口

1.oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

<table borderoncontextmenu=return(false)><td>no</table> 可用于Table

2. <bodyonselectstart="return false"> 取消选取、防止复制

3.onpaste="return false" 不准粘贴

4.oncopy="return false;" oncut="return false;" 防止复制

5. <linkrel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <linkrel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <inputstyle="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架

<scriptlanguage="javascript"><!--

if (window ==top)top.location.href = "frames.htm"; //frames.htm为框架网页

// --></script>

9. 防止被人frame

<SCRIPTLANGUAGE=javascript><!--

if (top.location !=self.location)top.location=self.location;

//--></SCRIPT>

10.<noscript><iframesrc="/*.html>";</iframe></noscript> 网页将不能被另存为

11. <inputtype=button value=查看网页源代码

onclick="window.location= 'view-source:'+ 'http://www.csdn.net/'">

12. 怎样通过asp的手段来检查来访者是否用了代理

<% ifRequest.ServerVariables("HTTP_X_FORWARDED_FOR")<>""then

response.write"您通过了代理服务器，"& _

"真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR")

end if

13. 取得控件的绝对位置

//javascript

<scriptlanguage="javascript">

function getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

alert("top="+t+"nleft="+l);

}

</script>

//VBScript

<scriptlanguage="VBScript"><!--

function getIE()

dim t,l,a,b

seta=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

whilea.tagName<>"BODY"

set a =a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox"top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

14. 光标是停在文本框文字的最后

<scriptlanguage="javascript">

function cc()

{

var e =event.srcElement;

var r=e.createTextRange();

r.moveStart('character',e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 判断上一页的来源

asp:

request.servervariables("HTTP_REFERER")

javascript:

document.referrer

16. 最小化、最大化、关闭窗口

<paramname="Command" value="Minimize"></object>

<paramname="Command" value="Maximize"></object>

<PARAMNAME="Command" value="Close"></OBJECT>

<inputtype=button value=最小化 onclick=hh1.Click()>

<inputtype=button value=最大化 onclick=hh2.Click()>

<inputtype=button value=关闭 onclick=hh3.Click()>

本例适用于IE

17.

'定义数据库连接的一些常量

ConstadOpenForwardOnly = 0 '游标只向前浏览记录，不支持分页、Recordset、BookMark

Const adOpenKeyset= 1 '键集游标，其他用户对记录说做的修改将反映到记录集中，但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark

Const adOpenDynamic= 2 '动态游标功能最强，但耗资源也最多。用户对记录说做的修改，增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持)。

Const adOpenStatic= 3 '静态游标，只是数据的一个快照，用户对记录说做的修改，增加或删除记录都不会反映到记录集中。支持向前或向后移动

ConstadLockReadOnly = 1 '锁定类型，默认的，只读，不能作任何修改

ConstadLockPessimistic = 2 '当编辑时立即锁定记录，最安全的方式

ConstadLockOptimistic = 3 '只有在调用Update方法时才锁定记录集，而在此前的其他操作仍可对当前记录进行更改、插入和删除等

ConstadLockBatchOptimistic = 4 '当编辑时记录不会被锁定，而更改、插入和删除是在批处理方式下完成的

Const adCmdText =&H0001

Const adCmdTable =&H0002

18. 网页不会被缓存

HTM网页

<METAHTTP-EQUIV="pragma" CONTENT="no-cache">

<METAHTTP-EQUIV="Cache-Control" CONTENT="no-cache,must-revalidate">

<METAHTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57GMT">

或者<META HTTP-EQUIV="expires"CONTENT="0">

ASP网页

Response.Expires =-1

Response.ExpiresAbsolute= Now() - 1

Response.cachecontrol= "no-cache"

PHP网页

header("Expires:Mon, 26 Jul 1997 05:00:00 GMT");

header("Cache-Control:no-cache, must-revalidate");

header("Pragma:no-cache");

19. 检查一段字符串是否全由数字组成

<scriptlanguage="javascript"><!--

functioncheckNum(str){return str.match(/D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

//--></script>

20. 获得一个窗口的大小

document.body.clientWidth,document.body.clientHeight

21. 怎么判断是否是字符

if(/[^x00-xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");

22.TEXTAREA自适应文字行数的多少

</textarea>

23. 日期减去天数等于第二个日期

<scriptlanguage=javascript>

functioncc(dd,dadd)

{

//可以加上错误处理

var a = newDate(dd)

a = a.valueOf()

a = a - dadd * 24 *60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear()+ "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

}

cc("12/23/2002",2)

</script>

24. 选择了哪一个Radio

function checkme()

for each ob inradio1

if ob.checked thenwindow.alert ob.value

end function

</script><BODY>

<INPUTname="radio1" type="radio" value="style" checked>Style

<INPUTname="radio1" type="radio"value="barcode">Barcode

<INPUTtype="button" value="check"onclick="checkme()">

</BODY></HTML>

25.获得本页url的request.servervariables("")集合

Response.Write"<TABLE border=1><TR><TD><B>Variables</B></TD><TD><B>value</B></TD></TR>"

for each ob inRequest.ServerVariables

Response.Write"<TR><TD>"&ob&"</TD><TD>"&Request.ServerVariables(ob)&"</TD></TR>"

Response.Write"</TABLE>"

26.

本机ip<%=request.servervariables("remote_addr")%>

服务器名<%=Request.ServerVariables("SERVER_NAME")%>

服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>

服务器端口<%=Request.ServerVariables("SERVER_PORT")%>

服务器时间<%=now%>

IIS版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>

脚本超时时间<%=Server.ScriptTimeout%>

本文件路径<%=server.mappath(Request.ServerVariables("SCRIPT_NAME"))%>

服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS")%>

服务器解译引擎<%=ScriptEngine & "/"&ScriptEngineMajorVersion&"."&ScriptEngineMinorVersion&"."&ScriptEngineBuildVersion %>

服务器操作系统<%=Request.ServerVariables("OS")%>

27.ENTER键可以让光标移到下一个输入框

<inputonkeydown="if(event.keyCode==13)event.keyCode=9">

28. 检测某个网站的链接速度：

把如下代码加入<body>区域中:

<scriptlanguage=javascript>

tim=1

setInterval("tim++",100)

b=1

var autourl=newArray()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

function butt(){

document.write("<formname=autof>")

for(vari=1;i<autourl.length;i++)

document.write("<inputtype=text name=txt"+i+" size=10 value=测试中……> =》<input type=text name=url"+i+" size=40>=》<input type=button value=GOonclick=window.open(this.form.url"+i+".value)><br/>")

document.write("<inputtype=submit value=刷新></form>")

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="链接超时"}

else

{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}

b++

}

functionrun(){for(var i=1;i<autourl.length;i++)document.write("<imgsrc=http://"+autourl[i]+"/"+Math.random()+" width=1height=1 onerror=auto('http://";;;+autourl[i]+"')>")}

run()</script>

29. 各种样式的光标

auto ：标准光标

default ：标准箭头

hand ：手形光标

wait ：等待光标

text ：I形光标

vertical-text ：水平I形光标

no-drop ：不可拖动光标

not-allowed ：无效光标

help ：?帮助光标

all-scroll ：三角方向标

move ：移动标

crosshair ：十字标

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

1、去掉IE的滚动条

有时候做好的网页明明没有超出窗口，可IE却偏偏给加上滚动条，这样看上去很不舒服，其实这也是可以通过一些小技巧避免的。具体如下：

<body style=”overflow-x:hidden”>…</body> //去掉X轴方向的滚动条

<body style=”overflow-y:hidden”>…</body> //去掉Y轴方向的滚动条

<body style=”overflow:hidden”>…</body> //去掉全部的滚动条

现在你看到的和你想像中的网页应该一样了吧，如果其中有什么不明白的地方可以参照注释中的说明。

2、使网页中的复制无效

有方法防止网页被保存了（参见《你别看我的源代码》），可不可以也防止网页内容被复制呢？答案是当然可以。看看下面的例子你就会明白的。

<html>

<head>

<scriptlanguage=”javascript”>

function nocopy() {

alert(“对不起，你不能非法复制本站内容”);

event.returnvalue=false;

}

</script>

</head>

<bodyoncopy=”nocopy()”>copyright by commander.</body>

</html>

这其实中是利用了document的一个oncopy事件，也就是说当发生复制事件时，弹出警告框，同时事件（event）的返回值为false使oncopy事件失效，从而达到防止复制的目的。

3、用脚本控制浏览器

看到标题是不是有点不相信，那么试试下面的这几个例子吧！你一定会吃惊的。

在<body>和</body>之间加入如下代码：

上面其实都是利用了document.execCommand()这个内置的函数，其参数为相应的浏览器命令，还有很多命令就留给大家自己发现吧！

4、 IFrame也可以编辑文字

有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢？只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。

<html>

<bodyonload=”editer.document.designMode=’On’”>

<IFrameID=”editer”></IFrame>

</body>

</html>

其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试试吧！

只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。

<html>

<IFrameid=”imgEditer”></IFrame>

</body>

</html>

用鼠标点击图片是不是有新的发现，其实大家只要利用自己的想象和充分利用这个属性一定能做出更多的花样来，别忘了到时候有什么新的东东，告诉我一声呀！（Email：BluePBoy@yesky.com）

5、打开硬盘

这是打开硬盘的另一种方法，把它写出来只是想告诉大家，要达到同一个目的有很多种方法，这里就是利用了表单的Action属性达到的，其实打开硬盘有很多种方法，只是这种不太被人们注意，所以这里就选择了这种方法。

<formaction=file ://c|><input type=”submit” value=”打开C盘”></form>

阅读全文

0 0