我收集的常用网页制作HTML代码Word格式文档下载.docx
《我收集的常用网页制作HTML代码Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《我收集的常用网页制作HTML代码Word格式文档下载.docx（45页珍藏版）》请在冰豆网上搜索。
…<
和第三行的分段元素<
实际上，html文件仅由一个html元素组成，即文件以<
html>
开始，以<
/html>
结尾，文件其部分都是html的元素体。
html元素的元素体由
两大部分，即头元素<
head>
..<
/head>
和体元素<
body>
和一些注释组成。
头元素和体元素的元素体又由其它的元素和文本及注释组成。
也就是说，一个html文件应具有下面的结构：
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>
title标明该html文件的标题，是对文件内容的概括。
一个好的标题应该能使读者从中判断出该文件的大概内容。
文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。
除了标识窗口外，当将某一homepage存入书签或文件时，title还用作书签名或缺省的文件名。
title的长度没有限制，但过长的标题会导致折行，一般情况下它的长度不应超过64个字符。
由于title的作用是标明文件内容，所以太短的title也是不可取的，比如：
introduction这个标题，读者不可能根据它判断出本文介绍的是什么。
一个好的例子是：
AnIntroductiontoHTML<
在头元素中还可以出现其他元素，如<
isindex>
，<
meta>
等等。
这些元素都不是必须的，而且也不常用。
这些元素的用法和它们的含义可以参考有关文献。
下面是一个最简单的html文件
thesimplesthtmlfile<
Thisismyfirsthtmlfile.
§
2.2标题（hn）
标题元素有6种，分别为h1,h2,…h6，用于表示文章中的各种标题。
标题号越小，字体越大。
一般情况下，浏览器对标题作如下解释：
h1黑体，特大字体，居中，上下各有两行空行。
h2黑体，大字体，上下各有一到两行空行
h3黑体（斜体），大字体，左端微缩进，上下空行
h4黑体，普通字体，比h3更多缩进，上边一空行
h5黑体（斜体），与h4相同缩进，上边一空行
h6黑体，与正文有相同缩进，上边一空行
Netscape对hn的解释为，一律黑体，字体越来越小。
hn可以有对齐属性，align＝#，#表示
left标题居左
center标题居中
right标题居右
例:
<
h2align=center>
Chapter2<
h1>
标题元素！
/h1>
标题元素！
h3>
/h3>
h4>
/h4>
h5>
/h5>
h6>
/h6>
2.3分段<
P>
html的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。
html的分段完全依赖于分段元素<
比如下面两段源文件有相同的输出。
ThisisalevelTwoHeading<
paragraphone<
paragraphtwo<
…………………………
ThisIsaLevelTwoHeading<
paragraphTwo<
也可以有多种属性，比较常用的属性是：
aligh＝#，#可以是left,center,right,其含义同上文。
例 <
palign=center>
Thisisacenteredparagraph<
／p>
当html文件中有图形，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。
这时，不带clear属性的<
可能会使文章的内容显示在该空白区内。
为确保下一段内容显示在图形的下方，可使用clear属性。
clear属性的含义为：
clear=left下一段显示在左边界处空白的区域
clear=right下一段显示在右边界处空白的区域
clear=all下一段的左右两边都不许有别的内容
§
2.4列表List
列表用于列举事实，常用的列表有3种格式，即无序列表（unorderedList），有序列表（orderedlist）和定义列表（definitionlist）
2.4.1无序列表（ul）
无序列表用（ul）开始，每一个列表条目用<
li>
引导，最后是<
/ul>
，注意列表条目不需要结尾标注<
/Li>
输出时每一列表条目缩进，并且以黑点标示。
例：
<
ul>
Today
Tommorow
输出为
●Today
●Tommorow
2.4.2有序列表<
ol>
有序列表与无序列表相比，只是在输出时列表条目用数字标示，下面是一个例子及其输出：
例：
<
/ol>
输出为：
1.Today
2.Tommorow
2.4.3定义列表<
dl>
定义列表用于对列表条目进行简短说明的场合，用<
开始，列表条目用<
dt>
引导，列表条目的说明用<
dd>
引导。
Item1
Thedefinitionofitem1
Item2
Definitionorexplainationofitem2
/dl>
输出为：
Thedefinitionofitem1
Definitonorexplainationofitem2
2.4.4改变条目标记
1.改变无序列表条目标记
无序列表输出时，每一条目前都有一个黑色圆点，用户可以用type序性修改条目的标记。
type可以是disc实心圆点 cirde圆圈square实心方点
litype=disc>
ONE
litype=circle>
TWO
litype=square>
THREE
●ONE
○TWO
■THREE
2.改变有序列表条目标记
有序列表条目标记的缺省值是阿拉伯数字，可以用type属性修改。
方法为：
litype=#>
Li=A,大写字母
a,小写字母
I,大写罗马数字
i,小写罗马数字
l,缺省,阿拉伯数字
litype=A>
ONE-ONE
ONE-TWO<
A.ONE-ONE
B.ONE-TWO
litype=a>
ONE－TWO<
a.ONE-ONE
b.ONE-TWO
litype=I>
ONE=TWO<
／ol>
Ⅰ.ONE-ONE
Ⅱ.ONE-TWO
litype=i>
i.ONE-ONE
ii.ONE-TWO
litype=1>
1.ONE-ONE
2.ONE-TWO
3.改变有序列表条目的起始数字
有序列表的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。
方法为<
olstart=#>
#是条目起始号
olstart=5>
ONE-TWO
olstart=10>
TWO-ONE
E.ONE-ONE
F.ONE-TWO
10.TWO-ONE
xi.TWO-TWO
2.4.5列表的嵌套
各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。
每嵌套一层，列表条目的输出就会有更大的缩进。
请参照上面的例子。
2.5预格式化文本<
pre>
html的输出是基于窗口的，因而html文件在输出时都是要重新格式化的，若确实不需要重新格式化的内容，可以用<
／pre>
通知浏览器。
浏览器在输出时，对这部分内容几乎不做修改地输出，输出的字体电传打字机字体。
早期的html规范规定在预格式化区内不能出现格式化输出的元素。
如hn等，Netscape在遇到预格式化元素时，允许其中有其他元素。
pleaseuseyourcard.
VISAMaster
b>
Hereisanorderform.<
/b>
Fax
AirMail<
/pre>
pleaseuseyourcard
Hereisanorderform.
●Fax
●AirMail
2.6块引用<
BLOCKQUOTE>
块引用用<
标注，使屏幕显示单独的一块。
大多数的浏览器采用缩进编排的方式，使这一块和其他部分的文本区分开来，上下各有一空行。
块引用（Blockquote）<
blockquote>
...<
/blockquote>
HerSong:
WhenIwasyoung,Ilistenedtotheradio
waitingformyfavoritesongs....
WhenIwasyoung,Ilistenedtotheradiowaitingformyfavoritesongs....
2.7居中
很多元素都有对齐方式属性，如hn、p等。
也可以直接用居中标注<
center>
／center>
h3align=center>
Wonderful!
!
Thismustbemydream.<
/center>
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指向一个目标<
a>
在html文件中用链接指针指向一个目标。
其基本格式为：
ahref="
/url"
字符串
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来唯一地标识它，但对于同一文件的不同部分，我们怎样来标识呢？
下面的内容将介绍链接指针元素的另外的一个用途，标识书签。
标识一个书签的方法为：
aname="
name"
text<
／a>
name属性将放置该标记的地方标记为“name”，name是一个全文唯一的标记串，text部分可有可无。
这样，我们就把放置标记的地方做了一个叫做“name”的标记。
做好标记后，可以用下列方法来指向它，
url#name"
text
url是放置标记的html文件的urlname是标记名，对于同一个文件，可以写为
#name"
这时就可以点取text跳转到标记名为name的部分了。
3.4目标窗口
如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。
target="
window-name"
将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。
3.5图象链接指针
图象也可以做为链接指针。
格式为：
imgsrc="
可以看出，上例中用<
取代了链接指针中text的位置。
是图象元素，它表明显示url代表的图象文件，参见图象一章。
下面是一个简单的图象链接指针:
/"
Chinahomepage<
flag.gif"
边框 <
imgborder=#>
#=value
/URL"
border=15>
§
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文件中引用图象地图的格式为：
升级会员 