我收集的常用网页制作HTML代码.docx

《我收集的常用网页制作HTML代码.docx》由会员分享，可在线阅读，更多相关《我收集的常用网页制作HTML代码.docx（45页珍藏版）》请在冰豆网上搜索。

我收集的常用网页制作HTML代码

网页制作HTML代码

关于网页制作的相关代码我在此总结如下，希望给各位广大的网页制作爱好者带来方便。

第一章：

HTML语言的结构

　　html文件是标准的ASCII文件，它看起来象是加入了许多被称为标注（tag）的特殊字符串的普遍文本文件。

从结构上讲，html文件由元素（element）组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。

绝大多数元素是“容器”，即它有起始标记和结尾标记。

元素的起始标记叫做起始标注（starttag），元素结束标记叫做结尾标注（endtag），在起始标注和结尾标注中向的部分是元素体。

每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标注内标明。

比如体元素（body）

demo

Thisismyfirsthtmlfile.

　　第一行是体元素的起始标注，它标明体元素从此开始。

因为所有的标注都具有相同的结构，所以我们将仔细分析这个标注的各个部分，以便读者对标注的写法

有一大概了解。

　　<起始标注开始

　　body元素名称，由于元素和标注一一对应，所以元素名也叫标注名。

需要注意的是<和body之间不能有空格。

元素名称不分大小写。

　　background属性名。

一个元素可以有多个属性，属性及其属性值不分大小写。

本属性指明用什么方法来填充背景。

　　＝指明属性值

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

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

　　>　起始链接链结束。

　　第二行和第三行是body元素的元素体，最后一行是body元素的结尾标注。

结尾标注用。

　　从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。

（上例中第二行的标题元素

…

。

实际上，html文件仅由一个html元素组成，即文件以开始，以结尾，文件其部分都是html的元素体。

html元素的元素体由

两大部分，即头元素..和体元素…和一些注释组成。

头元素和体元素的元素体又由其它的元素和文本及注释组成。

也就是说，一个html文件应具有下面的结构：

　　　　　html文件开始

　　文件头开始

　　文件头

　　　文件头结束

　　文件体开始

　　文件体

　　文件体结束

　　　　html文件结束

　　需要说明的是，html是一门发展很快的语言，早期的html文件并没有如此严格的结构，因而现在流行的浏览器（如Netscape,Mosaic等）为保持对早期html文件的兼容性,也支持不按上述结构编写的html文件。

还需要说明的是，各种浏览器对html元素及其属性的解释也不完全一样，本书中所讲的元素，元素的属性及其输出是以Netscape2.0浏览器为准的，作者将尽量给出别的浏览器对某一元素的解释。

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

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

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

　　3）<元素名>

　　第三种写法仅用于一些特殊的元素,比如分段元素P，它仅仅通知www浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾标注。

htlm3.0标准中，也定义了

　　注意:

HTML并非大小写敏感.

　　title标明该html文件的标题，是对文件内容的概括。

一个好的标题应该能使读者从中判断出该文件的大概内容。

文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。

除了标识窗口外，当将某一homepage存入书签或文件时，title还用作书签名或缺省的文件名。

　　title的长度没有限制，但过长的标题会导致折行，一般情况下它的长度不应超过64个字符。

由于title的作用是标明文件内容，所以太短的title也是不可取的，比如：

introduction这个标题，读者不可能根据它判断出本文介绍的是什么。

一个好的例子是：

　　

　　在头元素中还可以出现其他元素，如，等等。

这些元素都不是必须的，而且也不常用。

这些元素的用法和它们的含义可以参考有关文献。

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

Thisismyfirsthtmlfile.

　§2.2标题（hn）

　　标题元素有6种，分别为h1,h2,…h6，用于表示文章中的各种标题。

标题号越小，字体越大。

一般情况下，浏览器对标题作如下解释：

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

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

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

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

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

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

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

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

left标题居左

center标题居中

right标题居右

　　例:

Chapter2

标题元素！

标题元素！

标题元素！

标题元素！

标题元素！

标题元素！

　§2.3分段

　　html的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。

html的分段完全依赖于分段元素

。

比如下面两段源文件有相同的输出。

ThisisalevelTwoHeading

paragraphone

paragraphtwo

…………………………

ThisIsaLevelTwoHeading

paragraphone

paragraphTwo

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

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

　　例　Thisisacenteredparagraph<／p>

　　当html文件中有图形，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。

这时，不带clear属性的

可能会使文章的内容显示在该空白区内。

为确保下一段内容显示在图形的下方，可使用clear属性。

clear属性的含义为：

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

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

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

　　§2.4列表List

　　列表用于列举事实，常用的列表有3种格式，即无序列表（unorderedList），有序列表（orderedlist）和定义列表（definitionlist）

　2.4.1无序列表（ul）

　　无序列表用（ul）开始，每一个列表条目用

输出时每一列表条目缩进，并且以黑点标示。

例：

　

• Today

  　

• Tommorow

  　

输出为

　●Today

　●Tommorow

　2.4.2有序列表

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

　　例：

　　　

　　　

1. Today

   　　　

2. Tommorow

   　　　

　　输出为：

　　　1.Today

　　　2.Tommorow

　　2.4.3定义列表

　　定义列表用于对列表条目进行简短说明的场合，用

开始，列表条目用

引导，列表条目的说明用

引导。

Item1

Thedefinitionofitem1

Item2

Definitionorexplainationofitem2

输出为：

Item1

　　Thedefinitionofitem1

Item2

　　Definitonorexplainationofitem2

　2.4.4改变条目标记

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

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

type可以是disc实心圆点　cirde圆圈square实心方点

ONE

TWO

THREE

输出为：

●ONE

○TWO

■THREE

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

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

方法为：

Li=A,大写字母

a,小写字母

I,大写罗马数字

i,小写罗马数字

l,缺省,阿拉伯数字

ONE-ONE
1. ONE-TWO

输出为：

A.ONE-ONE

B.ONE-TWO

ONE-ONE
1. ONE－TWO

输出为：

a.ONE-ONE

b.ONE-TWO

ONE-ONE
1. ONE=TWO<／ol>

   输出为：

   Ⅰ.ONE-ONE

   Ⅱ.ONE-TWO

   ONE-ONE
   1. ONE-TWO<／ol>

      输出为：

      i.ONE-ONE

      ii.ONE-TWO

      ONE-ONE
      1. ONE-TWO

      输出为：

      1.ONE-ONE

      2.ONE-TWO

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

      　　有序列表的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。

      方法为#是条目起始号

      ONE-ONE

   2. ONE-TWO

   3. TWO-ONE

      TWO-ONE

输出为：

E.ONE-ONE

F.ONE-TWO

10.TWO-ONE

xi.TWO-TWO

　　2.4.5列表的嵌套

　　各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。

每嵌套一层，列表条目的输出就会有更大的缩进。

请参照上面的例子。

　　§2.5预格式化文本

　　html的输出是基于窗口的，因而html文件在输出时都是要重新格式化的，若确实不需要重新格式化的内容，可以用
…<／pre>通知浏览器。
浏览器在输出时，对这部分内容几乎不做修改地输出，输出的字体电传打字机字体。
早期的html规范规定在预格式化区内不能出现格式化输出的元素。
如hn等，Netscape在遇到预格式化元素时，允许其中有其他元素。
pleaseuseyourcard.
VISAMaster
Hereisanorderform.
Fax
AirMail
输出为：
pleaseuseyourcard
VISAMaster
Hereisanorderform.
●Fax
●AirMail
　　§2.6块引用
　　块引用用
标注，使屏幕显示单独的一块。
大多数的浏览器采用缩进编排的方式，使这一块和其他部分的文本区分开来，上下各有一空行。
块引用（Blockquote）
...
HerSong:
WhenIwasyoung,Ilistenedtotheradio
waitingformyfavoritesongs....
HerSong:
WhenIwasyoung,Ilistenedtotheradiowaitingformyfavoritesongs....
　　§2.7居中
　　很多元素都有对齐方式属性，如hn、p等。
也可以直接用居中标注
…<／center>
Wonderful!
!
Thismustbemydream.
输出为：
Wonderful!
!
Thismustbemydream.
第三章：
超文本链接指针
　　超文本链接指针是html最吸引人们优点之一。
链接指针可以使读者在整个Internet网上方便地链接。
使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，而每一个链接指针正好代表了作者或者读者的思维跳跃，这更加符合人类的思维方式。
因而组织得好的链接指针有助于理解作者的意图。
　　一个超文本链接指针由两部分组成。
一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。
　　§3.1统一资源定位器URL
　　统一资源定位器（uuiformResourceLocator）是文件名的扩展。
在单机系统中，定位一个文件需要路径和文件名，对于遍布全球的Internet网，显然还需要知道文件存放在哪个网络的哪台主机中才行。
与单机系统不一样的是在单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。
一个URL包括了以上所有的信息。
它的构成为：
　　protocol:
//machine.name[:
port]／directory／filename
　　其中protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：
　http超文本传输协议，该资源是html文件file文件传输协议,用ftp访问该资源ftp文件传输协议,用ftp访问该资源gophergopher协议,该资源是gopher文件news表明该资源是网络新闻
　　madcine.name是存放该资源主机的IP地址,通常以字符形式出现,如port端口号，是服务器在该主机所使用的端口号。
一般情况下端口号不需要指定。
只有当服务器所使用的端口号不是缺省的端口号时才指定。
　　directory和filename是该资源的路径和文件名。
　　一个典型的URL为:
它表示中科院高能所WWW服务器上的起始html文件。
（文件具体存放的路径及文件名取决于该WWW服务器的配置情况）。
　　与单机系统绝对路径，相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。
上文所述的是绝对URL。
相对URL是相对于你最近访问的URL。
比如你正在观看一个URL为
　　§3.2指向一个目标
　　在html文件中用链接指针指向一个目标。
其基本格式为：
　　字符串
　　href属性中的统一资源定位器（url）是被指向的目标，随后的“字符串”在html文件中充当指针的角色，它一般显示为蓝色。
当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。
例如：
　　IHEPCHINAhomepage
　　用户用鼠标点取IHEPchinahomepage，即可看到高能所编写的关于中国情况的介绍。
在这个例子中，充当指针的是IHEPchinahomepage，下面我们将看到用图象做为指针的例子。
　　在编写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来唯一地标识它，但对于同一文件的不同部分，我们怎样来标识呢？
下面的内容将介绍链接指针元素的另外的一个用途，标识书签。
　　标识一个书签的方法为：
　　text<／a>
name属性将放置该标记的地方标记为“name”，name是一个全文唯一的标记串，text部分可有可无。
这样，我们就把放置标记的地方做了一个叫做“name”的标记。
　　做好标记后，可以用下列方法来指向它，
　　text
url是放置标记的html文件的urlname是标记名，对于同一个文件，可以写为
　　text
这时就可以点取text跳转到标记名为name的部分了。
　　§3.4目标窗口
　　如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。
　　text
将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。
　　§3.5图象链接指针
　　图象也可以做为链接指针。
格式为：
　　
　　可以看出，上例中用取代了链接指针中text的位置。
　　是图象元素，它表明显示url代表的图象文件，参见图象一章。
　　下面是一个简单的图象链接指针:
　　Chinahomepage
　　边框　#=value
§3.6图象地图（imagemap）
　　上一节介绍的图象链接指针每幅图只能指向一个地点，而图象地图可以把图象分成多个区域，每个区域指向不同的地点。
你可以用图象地图编出很漂亮的html文件。
　　使用图象地图稍微复杂一点。
图象地图不仅需要在html文件中说明，它还需要一个后缀为.map的文件，用来说明图象分区及其指向的url的信息。
在.map文件中说明分区信息的格式如下：
　　recturl左上角坐标，右下角坐标
　　polyurl各顶点坐标
　　circleurl直径两端点坐标
　　defaulturl
　　rect指定一个矩形区域，该区域的位置由左上角坐标和右下角坐标说明。
poly指定一多边形区域，该区域的位置由各顶点坐标说明。
circle指定一圆形区域，该区
域的位置由垂直通过圆心的直径与该圆的交点坐标说明。
default指定图象地图其它部分的url。
坐标的写法为：
x,y，各点坐标之间用空格分开。
下面是一个完整的说明文件，
　　default
　　rect140,20280,60
　　poly180,80200,140
　　circle80,14080,100
　　图象地图需要一个特殊的处理程序imagemap，imagemap放在/cgi-bin中。
在html文件中引用图象地图的格式为：