HTML 教程(初级)

最新推荐文章于 2024-10-03 20:03:26 发布

pengjj

最新推荐文章于 2024-10-03 20:03:26 发布

阅读量4k

点赞数

分类专栏： 05-HTML & XML 相关文章标签： html 音乐浏览器 border 图形 table

本文链接：https://blog.csdn.net/pengjj/article/details/399963

版权

05-HTML & XML 相关专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML入门

　　HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。

　　所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

　　通过HTML可以表现出丰富多彩的设计风格

图片调用：<IMG SRC="文件名">
文字格式：文字

　　通过HTML可以实现页面之间的跳转

页面跳转：〈A HREF="文件路径/文件名"></A>

　　通过HTML可以展现多媒体的效果

声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
视频：<EMBED SRC="视频文件名" AUTOSTART=true>

上面我们在示例超文本特征的同时，采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。

HTML的基本结构

　　超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

<HTML>

<BODY>
文档主体，正文部

</BODY>

</HTML>

其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Homepage省略<HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY> 标记一般不省略，表示正文内容的开始。

下面是一个最基本的超文本文档的源代码：

<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>

<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
 
<HR>

　　这是我第一次做主页，无论怎么样，我都会努力做好！

</CENTER>
</BODY>

</HTML>

━┓
　┃文件头
━┛

━┓
　┃
　┃
　┃
　┃文件体
　┃
　┃
　┃
　┃
━┛

窗体顶端

窗体底端

超文本中的标签

刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

1. 单标签

　　某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：

< 标签名称>

最常用的单标签是 , 它表示换行。

2.双标签

　　另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：

<标签> 内容</ 标签>

其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在 标记中：

第一：

3.标签属性

　　许多单标记和双标记的始标记内可以包含一些属性，其语法是：

< 标签名字属性1 属性2 属性3 … >

各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条
水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：

　　其中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>　　　　　第六级标题

请看下面的例子：

<body>

这是一行普通文字
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>

</html>

窗体顶端

窗体底端

　　从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。

换行

在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上 标签。

　　请看下面的例子：

<html>
<head>
<title>无换行示例</title>
</head>

<body>
登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</body>

</html>

窗体顶端

窗体底端

<body>
登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
</body>

</html>

段落标签

为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。

标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。

　　下面，我们用两个例子来说明这个标签的用法。

<body>

浣溪沙　一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。
</body>

</html>

窗体顶端

窗体底端

<body>
登鹳雀楼白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
</body>

</html>

水平线段<HR>

这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：

　　　size　水平线的宽度
　　 width 水平线的长，用占屏幕宽度的百分比或象素值来表示
　　 align 水平线的对齐方式，有LEFT RIGHT CENTER三种
　　 noshade 线段无阴影属性，为实心线段

　　我们可以用几个例子来说明这线段的用法：

线段粗细的设定

<HTML>
<HEAD>
<TITLE>线段粗细的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无size设定，取内定值SIZE=1来显示 
<HR>
这是第二条线段，SIZE=5 
<HR SIZE=5>
这是第三条线段，SIZE=10 
<HR SIZE=10>
</BODY>

</HTML>

窗体顶端

窗体底端

线段长度的设定

<HTML>
<HEAD>
<TITLE>线段长度的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 
<HR SIZE=3>
这是第二条线段，WIDTH=50(点数方式) 
<HR WIDTH=50 SIZE=5>
这是第三条线段，WIDTH=50%(百分比方式) 
<HR WIDTH=50% SIZE=7>
</BODY>

</HTML>

窗体顶端

窗体底端

线段排列的设定

<HTML>
<HEAD>
<TITLE>线段排列的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无ALIGN设定，(取内定值CENTER显示) 
<HR WIDTH=50% SIZE=5>
这是第二条线段，向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
这是第三条线段，向右对齐 
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>

</HTML>

窗体顶端

窗体底端

无阴影的设定

<HTML>
<HEAD>
<TITLE>无阴影的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 
<HR WIDTH=80% SIZE=5>
这是第二条线段，有NOSHADE设定 
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>

</HTML>

文字的大小设置

　　提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

　　请看示例：

<body>
这是size=7的字体
这是size=6的字体
这是size=5的字体
这是size=4的字体
这是size=3的字体
这是size=2的字体
这是size=1的字体
这是size=-1的字体
</body>

</html>

文字的字体与样式

　　HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

请看例子：

<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>

<BODY>
<CENTER>
欢迎光临
欢迎光临
欢迎光临
欢迎光临
Welcome my homepage.
Welcome my homepage.
</CENTER>
</BODY>

</HTML>

窗体顶端

窗体底端

　　为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：

粗体　　　　　　　　　　　　　　HTML语言

斜体　　　　　　　　　　　　　　HTML语言

加下划线　　　　　　　　　　　　HTML语言

<TT> <TT> 打字机字体　　　　　　　　　　　HTML语言

<BIG> </BIG> 大型字体　　　　　　　　　　　　HTML语言

小型字体　　　　　　　　　　　　HTML语言

<BLINK>　　　</BLINK>　　　闪烁效果　　　　　　　　　　　　HTML语言

表示强调，一般为斜体　　　　　　HTML语言

表示特别强调，一般为粗体　　　　HTML语言

<CITE>　　　 </CITE>　　　用于引证、举例，一般为斜体　　　HTML语言

现在我们用一个实例来看看效果：

<body>
黑体字
 斜体字
 加下划线
 <BIG>大型字体</BIG>
 小型字体
 <BLINK>闪烁效果</BLINK>
Welcome
Welcome
<CITE>Welcom</CITE>
</body>

</html>

文字的颜色

　　文字颜色设置格式如下：

…

　　这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。

Black = "#000000"

Green = "#008000"

Silver = "#C 0C 0C 0"

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"

请看例子：

<HTML>
<HEAD>
<TITLE>文字的颜色</TITLE>
</HEAD>

<BODY BGCOLOR=000080>
<CENTER>
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
</CENTER>
</BODY>

</HTML>

位置控制

　　通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：

<DIV ALIGN=#>　　　#＝left／right／center

例：

窗体顶端

窗体底端

　　另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。

如：
　　　　<HR ALIGN=#>　　　#＝left／right／center
　　　　<H1 ALIGN=#〉

综合示例

前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，
比如：
　　　　文字
　　　　文字

【例】

<BODY>

白居易

白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。

白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到《赋得古原草送别》中的

<CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”</CITE>

时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。

白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。

白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐府运动，创作了大量优秀的现实主义诗篇。

</BODY>
</HTML>

列表

无序号列表

无序号列表使用的一对标签是<ul></ul>，每一个列表项前使用<LI>。其结构如下所示：

例：

<html>
<head>
<title>无序列表</title>
</head>

<body>
这是一个无序列表：
<UL>
国际互联网提供的服务有：
　　<LI>WWW服务
　　<LI>文件传输服务
　　<LI>电子邮件服务
　　<LI>远程登录服务
　　<LI>其它服务
</UL>

</body>
</html>

序号列表

序号列表和无序号列表的使用方法基本相同，它使用标签<OL></OL>，每一个列表项前使用<LI>。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：

例：

<html>
<head>
<title>有序列表</title>
</head>

<body>
这是一个有序列表：
<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>
这是一个定义性列表：
<DL>
　<DT>WWW<DD>WWW是全球信息网(World wide web)的缩写，也有人称之为3W、W3、Web。
　<DT>Hyper Text<DD>Hyper Text是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散在各地的数据。
<DL>

</body>
</html>

表格的基本结构

<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>

显示结果：

旅游日程　

日期

9-11

11-13

13-14

旅游地点

青岛

黄山

杭州

</table>

日期

9-11

11-13

13-14

旅游地点

青岛

黄山

杭州

旅游日程

表格尺寸设置

表格的大小

　　一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：

　　width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。

下表是一个长为200像素，宽为100像素的表格。<table width="200" height="100">

下表是一个长为屏幕的20%，宽为屏幕的10%的表格。<table width=20% height=10%>

边框尺寸设置

　　边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。

如：

显示结果为：

定货单

苹果

香蕉

葡萄

200公斤

100公斤

显示结果：

<TABLE BORDER=1

表格内文字的对齐/布局

　　表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以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=#>

左右排列

显示结果：

居左

居中

居右

上下排列

显示结果：

上齐

居中

下齐

基线

跨多行、多列的表元

要创建跨多行、多列的表元，只需在<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>

表格的颜色

　　在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。

表格的背景色彩　　　<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

例：

</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教程已经进行到“文件之间的链接”部分，其中，我们学习了<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>等内容。也许很多人理解起来比较吃力，这是很正常的，每个人在刚刚接触它的时候往往要度过很长的一段接受时期。
　　除了我们的这个教程外，网上也有很多的站点介绍了HTML文件的制作方法，在这里，我来推荐几个做得相当不错的站点：

<A href="http://www.dlc.sjtu.edu.cn/courseware/html_learning/hrefsrcci.htm">HTML语言参考</A> 
　<A href="http://www.gzsums.edu.cn/webclass/html/html_design.html">HTML语言教程</A> 
　<A href="http://www.netease.com/~feng/html/index.htm">HTML程序员手册</A>

</body>
</html>

多媒体效果

插入图形

　　超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。

基本格式

超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。
　　插入图象的标签是<IMG>，其格式为：

<IMG SRC="图形文件地址">

　　SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。

例：　<IMG SRC="images/ball.gif">

　　IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：

　　例：

图形与文字的对齐排列

　　由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>

例：

显示结果为：

　　图形上出现小手了，我们试一下吧！

播放音乐

　　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

设定控制面板的样子

例：
*************************************

作为背景音乐来播放。
</body>
</html>

窗体顶端

窗体底端

例：
*************************************

出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。
<／body>
</html>

窗体顶端

窗体底端

IE中的背景音乐

　　另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到。

　　 #=循环数

例：
　　　　　　<bgsound src="sound.wav" loop=3>

播放视频

　　用浏览器可以播放的格式有：MOV格式、AVI格式。

链接一个视频文件

　　将视频文件做成一个链接的方法：

<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

设定控制面板的大小

例：
*************************************

<body>
播放视频WINDOWS95

　　<EMBED SRC="welcome.avi" autostart=false loop=false width=350 height=250>

</body>
</html>

多窗口页面(Frames)

　　使用Frames结构设计的HTML文件，能够将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，令人高兴的是，每个窗口是可以相互沟通的。有时用得恰到好处，感觉真是好极了。
　　这是一个非常好用的技巧，不过，学习内容也不少，我们一起从基本语法学起吧！

Frames结构的基本格式

　　在有Frames结构的HTML文件中，Frames文件的整体结构为：

　　Framees结构中的每个URL值指定了一个文件（这个文件必须事先做好），这个文件将载入相应的窗口。

各窗口的尺寸设置

　　我们将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现。

#的值为一对用引号括起来的字符串，字符串中的数字表示每个分窗口所占的尺寸，数字中间用逗号隔开，有几个数字就表示分出了几个窗口。当然，这其中的任何一个数字也可以由“*”来代替，这样表示由浏览器自动设置其大小。

　　如：<frameset cols="100,200,*">
　　　　<frameset cols="100,*,*"> 　　将100像素以外的窗口平均分配
　　　　<frameset cols="*,*,*"> 　　　将窗口分为三等份

纵向排列多个窗口：
********************************

窗体顶端

窗体底端

横向排列多个窗口：
********************************

窗体顶端

窗体底端

纵横排列多个窗口：
********************************

各窗口间相互操作(Frame Target)

　　由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

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.看到好的网页，可以在浏览器的“编辑”菜单中选择“源文件”，这时我们就可以看到源程序，学习别人制作网页的一些方法和技巧了，有时候通过这种办法可以学到书本上没有的东西，一些新出现的功能也可以率先出现在你的网页中了。

THE END

整理：彭建军

日期： 2005-6-16

pengjj

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML 教程(初级)

HTML入门

HTML的基本结构

超文本中的标签

标题

换行<br>

段落标签<P>

水平线段<HR>

文字的大小设置

文字的字体与样式

文字的颜色

位置控制

综合示例

列表

无序号列表

序号列表

定义性列表

表格的基本结构

表格的标题

表格尺寸设置

表格内文字的对齐/布局

跨多行、多列的表元

表格的颜色

文件之间的链接

本地链接：

URL链接

目录链接

多媒体效果

插入图形

播放音乐

播放视频

多窗口页面(Frames)

Frames结构的基本格式

各窗口的尺寸设置

各窗口间相互操作(Frame Target)

Frame 的其它属性

总复习