HTML基本知识和使用

晴天雨 · 发表于 2009-8-19 09:24

本帖最后由晴天雨于 2009-8-19 09:54 编辑

最近有小朋友问我HTML是什么，怎么制作？没想到这个年头还有这么菜的，嗨，可能什么时候都有菜鸟吧，我也是吧！
现在将搜集到的有关这方面的知识，贴出来，送给比我还菜的鸟。。。

第一章 HTML概述与结构

内容包括：
HTML的概述
HTML的基本结构
HTML的标签与属性

一、HTML的概述
1、定义
HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。

所谓超文本language(超文本标志语言）是生成活动文档的代码系统。是因为它可以加入图片、声音、动画、影视等内容，HTML并不是一种程序语言，它只是一种排版网页中资料显示的结构语言，易学易懂，非常简单。活动文档是使你和别人能够进行交互的文档。HTML的普遍应用就是带来了超文本的技术----从一个主题转入另一个主题，它不是线性的阅读和寻找信息。通过单击链接直接获取相关的主题。或者通过单击鼠标去发送EMAIL与别人联系，填写表单并联机提交，以及访问巨大的数据库和信息资源以及对HMTL文档的访问。HTML使得阅读及使用方便，快捷和有效。无论WEB页面包括动画，多媒体，图形等各种复杂的格式，基础都是HTML。
如下所示：
通过HTML可以表现出丰富多彩的设计风格：

         图片调用：<IMG SRC="文件名">
               文字格式： <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>

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

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

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

         声频：<EMBED SRC="音乐地址" AUTOSTART=true>
               视频：<EMBED SRC="视频地址" AUTOSTART=true>

2、html组件
从上面我们可以看到HTML超文本文件时需要用到的一些标签。这些标签均由"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字属性>”来表示。
HTML实际上是普通的文档，没有图形，动画，声音等，但包含了指向这些类型文件的"指针"或者称为链接。使得WEB页面包含这些非文本因素。HTML本身是由标识文档元素和特性标志（tag)和属性（attribute）构成的代码系统。有些标志显示文档结构，有些指向其它文件。属性的作用是对标志提供补充信息。

3、HTML工具
创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。

A、HTML编辑器是用于生成和保存THML文档的应用程序。分两种：一种是基于文本和代码的编辑器，在创建时只能看到代码；另一种所见即所得编辑器。在对网页编辑时，它所处的设计界面里设置的网页内容也会最终在浏览器窗口中显示出它的效果。在这种应用软件中一般有设计区和代码区之分。

B、WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。

二、 HTML的基本结构：
   一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置，
   HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

下面是一个最基本的html文档的代码:1－1.html

<HTML> ----------------------------------------    开始标签
<HEAD> --------------------------------------
<TITLE> 一个简单的HTML示例 </TITLE>             |    头部标签
</HEAD> --------------------------------------
<BODY> ----------------------------------------
<CENTER>                                     |
<H1>欢迎光临我的主页</H1>                      |
<BR>                                           |
<HR>                                           |    文件主体
<FONT SIZE= 7 COLOR= red>                      |
这是我第一次做主页                            |
</FONT>                                        |
</CENTER>                                     |
</BODY> ---------------------------------------

</HTML> ---------------------------------------    结尾标签

   <HTML></HTML>在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有 <html>标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。
   <HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记，良好的习惯是不省略。
   <title>和</title>是嵌套在<HEAD>头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
   <BODY> </BODY>标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。

上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。

三、 HTML的标签与属性:
对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用“<”和 “>”括起来的句子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项。
HTML是由标签和属性构成的，一起用于标识各个文档部件，告诉浏览器如何显示文档。所有的标签都是由“<”、“>”包围的元素构成，尖括号会告诉浏览器其中的标志元素是命令。
标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项，在标志中对文档修饰或进一步指定信息，比如颜色、高度、宽度等。
1、加入标签：HTML的标签分单标签和成对标签两种。
A、成对标签是由首标签<标签名> 和尾标签</标签名>组成的，成对标签的作用域只作用于这对标签中的文档。
大多数标志是成对出现的，称为起始标志“<标签名> 和结束标志“<标签名> ”。结束标志中有一个反斜杠（/）。为了将标志作用于文档中的信息，将起始标志放在受作用的文档信息的前部，将结束标志放在文档信息之后。例如：<p>这是我的第一个html文档</p>
B、单独标签的格式<标签名>，单独标签在相应的位置插入元素就可以了。
注意事项：输入始标签时，一定不要在“<”与标签名之间输入多余的空格，否则浏览器将不能正确的识别括号中的标志命令，从而从而不能正确的显示你的信息。
例如：标题标签应该如下正确输入：<TITLE>这是我的第一次学习</TITLE>
而不应该在“<”与标签名中输入空格：<  TITLE>这是我的第一次学习</TITLE>
注：空格不应该放在“<”和标签之间。标签名后面与它的属性及属性与属性之间以及和“>”之间是允许有空格的。

2、加入属性：属性能对标志进行补充说明。
大多数标签都有自己的一些属性, 属性要写在开始标签的尖括号里并在标签名的后面用空格进行分开，标签必须在属性前面。属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值；其格式如下：  <标签名字属性1 属性2 属性3 … >内容</标签名字>
   例如：<H1 align="center">这是我的第一次学习</H1>

作为一般的原则，大多数属性值（只包含数字，字母，连字符和点号的）不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号。
起始标志里可以放置的多个属性，属性与元素间、属性与属性间用空格分隔开。为了好的习惯，提倡全部对属性值加双引号。如：
            <font color="#ff00ff" face="宋体" size="30">字体设置</font>
待续。。。

晴天雨 · 发表于 2009-8-19 09:27

本帖最后由晴天雨于 2009-8-19 10:15 编辑

第二章主体标签及属性、颜色的设定
内容包括：
html的主体标签
颜色的设定

为了使你的网页绚丽多姿，吸引更多的浏览者阅读，可以给网页添加更多的标签，对他进行修饰、布局。下面就来逐一介绍这些标签。
一、 html的主体标签<body>
在<body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。
<body>标签有自己的属性，设置 <body>标签内的属性，可控制整个页面的显示方式。
<body>标签的属性

属　性描　　述
link 设定页面默认的连接颜色
alink 设定鼠标正在单击时的连接颜色
vlink 设定访问后连接文字的颜色
background 设定页面背景图像
bgcolor 设定页面背景颜色
leftmargin 设定页面的左边距
topmargin 设定页面的上边距
bgproperties 设定页面背景图像为固定，不随页面的滚动而滚动
text 设定页面文字的颜色

格式：
<body text="#000000" link="#000000" alink="#000000" vlink="#000000" background="gifnam.gif" bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed">

实例：2-1.html
<html>
<head>
<title>bady的属性实例</title>
</head>
<body bgcolor="#FFFFE7" text="#ff0000" link="#3300FF" alink="#FF00FF" vlink="#9900FF">
<center>
<h2>设定不同的连接颜色</h2>
测试body标签<p>
<a href="http://www.baidu.com/">默认的连接颜色</a>
<p>
<a href="http://www.sina.com.cn">正在按下的连接颜色,</a>
<p>
<a href="http://www.sohu.com/">访问过后的连接颜色,</a>
<P>
<a href="#" onClick="javascript:window.history.back()">返回</a>
</conter>
</body>
</html>

实例说明：
<body>的属性设定了页面的背景颜色，文字的颜色，链接的颜色为#3300ff，单击的连接颜色为#ff00ff，单击过后的颜色为#9900ff。
Body里面的是页面中的链接标签，对于属性可根据页面的效果来定，用那个属性就设定那个属性。对于上面的属性在后面的章节中还会介绍，在这里就不逐一引用了，我们的学习目的主要是掌握标签及属性的使用方法。

二、颜色的设定
颜色值是一个关键字或一个RGB格式的数字。在网页中用得很多，在此就先介绍一下。
颜色是由 "red" "green" "blue " 三原色组合而成的，在 HTML 中对颜色的定义是用十六进位的，对於三原色 HTML 分别给予两个十六进位去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成16777216种颜色。
例如：白色的组成是 red=ff, green=ff, blue= ff,RGB 值即为ffffff
红色的组成是 red=ff, green= 00, blue= 00, RGB值即为ff0000
绿色的组成是 red=00, green=ff, blue= 00, RGB值即为 00ff00
蓝色的组成是 red=00, green= 00, blue= ff, RGB值即为0000ff
黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000

应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor="#336699" 用英文名字表示颜色时直接写名字。如 bgcolor=green
RGB颜色可以有四种表达形式:：
#rrggbb (如，#00cc00)
#rgb (如，#0c0)
rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0))
rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如， rgb(0%,80%,0%)

Windows VGA(视频图像阵列)形成了16各关键字: aqua，black， blue，fuchsia, gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，and yellow

第三章文字版面的编辑
内容包括：　
换行标签
换段落标签
原样显示文字标签
居中对齐标签
引文标签 (缩排标签）
水平分隔线标签
署名标签
特殊字符
注释标签
字体属性

一、换行标签
换行标签是个单标签，也叫空标签，不包含任和内容，在html文件中的任何位置只要使用了标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行。
请看下面的例子：3-1html
<html>
<head>
<title>无换行示例</title>
</head>
<body>
无换行标记：登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
<br>有换行标记：<br>登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。
</body>
</html>

二、换段落标签<p>及属性：
由<p>标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个<P>的开始就意味着上一个<P>的结束。良好的习惯是成对使用。
格式：
<P>
<P ALIGN= 参数>
其中,ALIGN是<p>标签的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式。

实例:3-2html
<html>
<head>
<title>测试分段控制标签</title>
</head>
<body>
<p>花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，
就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。</p>
<p align="right">或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。</p>
<p align=center>而美丽苦短的花期</p>
<p align="left">却是那最后悲伤的秋风挽歌中的瞬间插曲。</p>
</body>
</html>

三、原样显示文字标签<pre>
要保留原始文字排版的格式,就可以通过<pre>标签来实现,方法是把制作好的文字排版内容前后分别加上始标签<pre>和尾标签</pre>。
实例:3-3html
<HTML>
<HEAD>
<TITLE>原样显示文字标签</TITLE>
</HEAD>
<BODY>
<PRE>
白日依山尽，

黄河入海流。

欲穷千里目，

更上一层楼。
</PRE>
</BODY>
</HTML>

四、居中对齐标签<center>
文本在页面中使用<center>标签进行居中显示,<center>是成对标签,在需要居中的内容部分开头处加<center>,结尾处加</center>
实例：3-4html
<HTML>
<HEAD>
<TITLE>居中对齐标签</TITLE>
</HEAD>
<BODY>
<CENTER>

《送孟浩然之广陵》<p>

故人西辞黄鹤楼，

烟花三月下扬州。

孤帆远影碧山尽，

惟见长江天际流。
</CENTER>
</BODY>
</HTML>

五、引文标签 (缩排标签）<blockquote>
<blockquote>标签可以用来建立一个引文，他特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别。
实例：3-5html
<HTML>
<HEAD>
<TITLE>引文标签</TITLE>
</HEAD>
<BODY>
春 <BR>
<PRE>
<BLOCKQUOTE>
盼望着，盼望着，东风来了，春天脚步近了。<br>
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球,赛几趟跑，捉几
回迷藏。风轻悄悄的，草软绵绵的。
</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>
桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，村上仿佛已
经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草
丛里像眼睛，像星星，还眨呀眨的。
“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的
空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童
的短笛，这时候也成天嘹亮地响着。
雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶儿却绿得发
亮。小草儿也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑着伞慢
慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的，在雨里静默着。
</BLOCKQUOTE></BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也都赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞
抖擞精神，各做各的一份事儿去。
“一年之计在于春”，刚起头儿，有的是工夫，有的是希望。
春天像刚落地的娃娃，从头到脚都是新的，它生长着。
春天像小姑娘，花枝招展的，笑着，走着。
春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</PRE>
</BODY>
</HTML>

接楼下

晴天雨 · 发表于 2009-8-19 09:48

本帖最后由晴天雨于 2009-8-19 10:18 编辑

续接楼上
六、水平分隔线标签<hr>
<hr>标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置<hr>标签的属性值，可以控制水平分隔线的样式。
<hr>标签的属性
属性
参数
功能
单位
默认值

size
设置水平分隔线的粗细
pixel(像素）
2

width
设置水平分隔线的宽度
pixel(像素）、%
100%

align
left enter right
设置水平分隔线的对齐方式

center

color
设置水平分隔线的颜色

black

noshade
取消水平分隔线的3d阴影

实例：3-6html
<HTML>
<HEAD>
<TITLE>测试水平分隔线标签</TITLE>
</HEAD>
<BODY>
<CENTER>
春晓
<HR >
春眠不觉晓，
<hr size="6">
处处闻啼鸟。
<hr width="40%">
夜来风雨声，
<hr width="60" align="left">
花落知多少？
<hr size="6" width="30%" align="center" noshade color=red >
</CENTER>
</BODY>
</HTML>

七、署名标签<address>
<address>署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。在<address></address>标签之间的文字显示效果是斜体字。
实例：3-7html
<HTML>
<HEAD>
<TITLE>署名标签</TITLE>
</HEAD>
<BODY>
<CENTER>
乐游原
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<PRE>
向晚意不适，
驱车登古原。
夕阳无限好，
只是近黄昏。
</PRE>
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<ADDRESS>
[唐] 李商隐
</ADDRESS>
</BODY>
</HTML>

八、特殊字符
在HTML文档中，有些字符没办法直接显示出来，例如?. 使用特殊字符可以将键盘上没有的字符表达出来，而有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如"<"等，为防止代码混淆，必须用一些代码来表示它们。
HTML几种常见特殊字符及其代码表
特殊或专用字符
字符代码特殊或专用字符
字符代码
< < © ©
> > × ×
& & ® ®
" " 空格

实例：3-8html
<HTML>
<HEAD>
<TITLE>特殊字符</TITLE>
</HEAD>
<BODY>
<CENTER>
<赋得古原草送别>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
离离原上草，
一岁一枯荣。
野火烧不尽，
春风吹又生。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白居易 ©
</ADDRESS>
</BODY>
</HTML>

九、注释标签
在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。
注释标签的格式有如下： 
实例:3-9html
<HTML>
<HEAD>
<TITLE>注释标签</TITLE>
</HEAD>
<BODY>

<CENTER>
<赋得古原草送别>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
<! pre代表原样显示排版格式>
离离原上草，
一岁一枯荣。
野火烧不尽，
春风吹又生。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白居易 ©
</ADDRESS>
</BODY>
</HTML>

十、字体属性
1、标题文字标签<hn>
<hn>标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。
标题标签的格式：<hn align=参数〉标题内容</hn>
说明：<hn>标签是成对出现的，<hn>标签共分为六级，在<h1>...</h1>之间的文字就是第一级标题，是最大最粗的标题；<h6>...</h6>之间的文字是最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数为 left（左）， enter（中)， right (右）。<hn>标签本身具有换行的作用，标题总是从新的一行开始。

实例 3-10-1html
<HTML>
<HEAD>
<TITLE>设定各级标题</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">一级标题。</H1>
<H2>二级标题。</H2>
<H3>三级标题。</H3>
<H4>四级标题。</H4>
<H5 ALIGN="RIGHT">五级标题。</H5>
<H6 ALIGN="LEFT">六级标题。</H6>
</BODY>
</HTML>

2、文字格式控制标签<FONT>
<FONT>标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。
FONT标签的属性属性
使用功能
默认值
face
设置文字使用的字体
宋体
size
设置文字的大小
3
color
设置文字的颜色
黑色

格式：<font face=值1 size=值2 color=值3〉文字 </font>
说明：如果用户的系统中没有face属性所指的字体，则将使用默认字体。size属性的取值为1~7。也可以用"+"或"-"来设定字号的相对值。color属性的值为：rgb颜色"#nnnnnn"或颜色的名称

实例：3-10-2html
<html>
<head>
<title>控制文字的格式</title>
</head>
<body>
<center>
<font face=黑体 size=6 color="red" >盼望着，盼望着，东风来了，春天脚步近了。</font> <p>
<font face=隶书 size=+3 color="green">
一切都像刚睡醒的样子，欣欣然张开了眼。<p>山朗润起来了，水涨起来了，太阳的脸红起来了。
</font><p>
<font face=楷体 size=4 color="#ff00ff">
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。<p>园子里，田野里，瞧去一大片一大片满是的。<p>坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。<p>风轻悄悄的，草软绵绵的。
</font>
</center>
</body>
</html>

3、特定文字样式标签
在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在html中用于这种功能的标签可以分为两类，物理类型和逻辑类型。
a、物理类型
(1) 粗体标签<b>
放在<b>与</b>标签之间的文字将以粗体方式显示。
(2) 斜体标签<i>
放在<i>与</i>标签之间的文字将以斜体方式显示。
(3) 下划线标签<u>
放在<u>与</u>标签之间的文字将以下划线方式显示。

实例3-10-31html
<html>
<head>
<title>字体的物理类型</title>
</head>
<body>
<center>
<font color="#FF0000" size="+2"><b>这些文字是粗体的</b></font><br><br>
<i>这些文字是斜体的</i> <br><br>
<u>这些文字带有下划线</u>
</center>
</body>
</html>

b、逻辑类型
逻辑类型是使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常用的逻辑类型标签有八种，放在标签之间的文字受其控制。下面请看常用逻辑标签的实例

实例3-10-32htrml
<html>
<head>
<title>字体的逻辑类型</title>
</head>
<body>
<pre>
em标签：<em>用于强调的文本，一般显示为斜体字</em>
strong标签：<strong>用于特别强调的文本，显示为粗体字</strong>
cite标签：<cite>用于引证和举例，通常是斜体字</cite>
code标签：<code>用来指出这是一组代码</code>
small标签：<small>规定文本以小号字显示</small>
big标签：<big>规定文本以大号字显示</big>
samp标签：<samp>显示一段计算机常用的字体，即宽度相等的字体</samp>
kbd标签：<kbd>由用户输入文本，通常显示为较粗的宽体字</kbd>
var标签：<var>用来表示变量，通常显示为斜体字</var>
dfn标签：<dfn>表示一个定义或说明，通常显示为斜体字</dfn>
sup标签：12<sup>2</sup>=144
sub标签：硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>
</pre>
</body>
</html>

晴天雨 · 发表于 2009-8-19 09:48

本帖最后由晴天雨于 2009-8-19 10:31 编辑

第四章建立超链接
内容包括：
连接路径
超链接的应用
书签链接
在站点内部建立链接
外部链接

HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。
建立超链接的标签为<A>和</A>
格式为：<A HREF="资源地址" TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>
说明：标签<A>表示一个链接的开始，</A>表示链接的结束；
属性“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问
TARGET:该属性用于指定打开链接的目标窗口，其默认方式是原窗口。

建立目标窗口的属性
属性值
描述
_parent
在上一级窗口中打开，一般使用分桢的框架页会经常使用
_blank
在新窗口打开
_self
在同一个桢或窗口中打开，这项一般不用设置
_top
在浏览器的整个窗口中打开，忽略任何框架
TITLE：该属性用于指定指向链接时所显示的标题文字。
"超链接名称"是要单击到链接的元素，元素可以包含文本，也可以包含图像。文本带下划线且与其它文字颜色不同，图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志<img>嵌套在<A HREF="URL"></A>之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状，单击这个元素可以访问指定的目标文件。
1、链接路径
每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。
URL(Uniform Resourc Locator)中文名字为"统一资源定位器"。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下，在创建一个网站的网页时，不需要为每一个连接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此，链接可以分以下三种：

绝对路径
如：http://www.sina.com.cn
相对路径
如：news/index.html
根路径
如：d│/web/news/index.html
a、绝对路径
绝对路径：包含了标识INTERNET上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称
其格式为：通讯协议：//服务器地址：通讯端口/文件位置....../文件名。
其中网络协议是HTTP(Hypertext Transfer Protocol,超文本传输协议)，资源所在的主机名为：www.sina.com.cn,通常情况下使用默认的端口号８０，资源在WWW服务器主机web文件夹下，资源的名称为：index.html.。
例：http://www.163.net/myweb/book.htm（此网址为假设）
表明采用 http 从名为 www.163.net 的服务器上的目录 myweb 中获得文件book.htm
b、相对路径
相对路经是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。
如果链接到同一目录下，则只需输入要链接文件的名称。
要链接到下级目录中的文件。只需先输入目录名，然后加"/"，再输入文件名。
要链接到上一级目录中文件，则先输入"../"，再输入文件名。
相对路径的用法
相对路径名
含义
herf="shouey.html" shouey.html 是本地当前路径下的文件
herf="web/shouey.html" shouey.html 是本地当前路径下称做"web"子目录下的文件
herf="../shouey.html" shouey.html 是本地当前目录的上一级子目录下的文件
herf="../../shouey.html" shouey.html 是本地当前目录的上两级子目录下的文件
c、根路径
根路径目录地址同样可用于创建内部链接，但大多数情况下，不建议使用此种链接形式。
根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。
如果根目录要写盘符，就在盘符后使用"│",而不用":" 这点与DOS的写法不同。
如：/web/highight/shouey.html
d│/web/highight/shouey.html

也你会问，链接本地机器上的文件时，应该使用相对路径还是绝对路径？在绝大多数情况下使用相对路径比较好，例如，用绝对路径定义了链接，当把文件夹改名或者移动之后，那么所有的链接都要失败，这样就必须对你的所有html文件的链接进行重新编排，而一旦将此文夹件移到网络服务器上时，需要重新改动的地方就更多了，那是一件很麻烦的事情。而使用相对路径，不仅在本地机器环境下适合，就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。

2、超链接的应用
a、书签链接
链接文档中的特定位置也叫书签链接，在浏览页面时如果页面很长，要不断的拖动滚动条给浏览带来不便，要是浏览者可以从上头阅读到尾，又可以选择自己感兴趣的部分阅读，这种效果就可以通过书签链接来实现，方法是选者一个目标定位点，用来创建一个定位标记，用属性name的值来确定定位标记名 <a name="定位标记名"> 。然后在网页的任何地方建立对这个目标标记的链接"标题"，在标题上建立的链接地址的名字要和定位标记名相同，前面还要加上"#"号，<a href= "#定位标记名">。单击标题就跳到要访问的内容。
书签链接可以在同一页面中链接，也可以在不同页面中链接，在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置
格式：
在同一页面要使用链接的地址：
<a href="#书签名称" target="窗口名称">超连链标题名称</a>

在不同页面要使用链接的地址：
<a href="URL地址#书签名称" target="窗口名称">超链接标题名称</a>

链接到的目的地址：
<a name="书签名称">目标超链接名称</a>
name的属性值为该目标定位点的定位标记点名称，是给特定位置点(这个位置点也叫锚点)起个名称。
实例：4-2-11html
<HTML>
<HEAD>
<TITLE>唐诗欣赏</TITLE>
</HEAD>
<BODY>
<a name="top"><H2>唐诗欣赏</H2></a>
<a name="lb"><H2>李白</H2></a>
<A href="#T.2" target="_blank">清平调三首</A><br>
<A href="#T.1">长干行</A><br>
<A href="#T.3">月下独酌</A>
<HR>

<BR><BR>
<H3><A NAME="T.2">清平调三首</A> </H3>

云想衣裳花想容，<br>春风拂槛露华浓。<br>若非群玉山头见，<br>会向瑶台月下逢。<br>一枝红艳露凝香，<br>云雨巫山枉断肠。<br>借问汉宫谁得似？<br>可怜飞燕倚新妆。<br>名花倾国两相欢，<br>常得君王带笑看。<br>解释春风无限恨，<br>沈香亭北倚阑干。

<H3><A NAME="T.1">长干行</A> </H3>
<PRE>
妾发初覆额，<br>折花门前剧。<br>郎骑竹马来，<br>遶床弄青梅。<br>同居长干里，<br>两小无嫌猜。<br>十四为君妇，<br>羞颜未尝开。<br>低头向暗壁，<br>千唤不一回。<br>十五始展眉，<br>愿同尘与灰。<br>常存抱柱信，<br>岂上望夫台。<br>十六君远行，<br>瞿塘灩澦堆。<br>五月不可触，<br>猿鸣天上哀。<br>门前迟行迹，<br>一一生绿苔。<br>苔深不能扫，<br>落叶秋风早。<br>八月蝴蝶来，<br>双飞西园草。<br>感此伤妾心，<br>坐愁红颜老。<br>早晚下三巴，<br>预将书报家。<br>相迎不道远，<br>直至长风沙。

</PRE>
<A href="#top">唐诗欣赏</a>
<BR><BR>
<H3><A NAME="T.3">月下独酌</A> </H3>
<PRE>
花间一壶酒，<br>独酌无相亲。<br>举杯邀明月，<br>对影成三人。<br>月既不解饮，<br>影徒随我身。<br>暂伴月将影，<br>行乐须及春。<br>我歌月裴回，<br>我舞影零乱。<br>醒时同交欢，<br>醉後各分散。<br>永结无情游，<br>相期邈云汉。
</PRE>
<p><a href="4-2-12.html#libai">李白蔑视权贵</a></p>
</BODY>
</HTML>

实例：4-2-12html
<html>
<head>
<title>李白</title>
</head>
<body>
<center>
<a href="4-2-11.html#lb"><h1 align="center"><font color="#339933">李白</font></h1></a>
<font color="#339933" size="+2">李白（701~762），<br>字太白，号青莲居士。<br>祖籍陇西成纪（今甘肃省天水市附近的秦安县），<br>隋朝末年其先租因罪住在中亚细亚。<br>李白的家世和出生地至今还是个谜，<br>学术界说法不一。<br>一说李白就诞生在安西都护府所辖的碎叶城，<br>五岁时随父迁到绵州昌隆县青莲乡。<br>
<p>李白性情豪放，<br>喜爱纵横家的作风，<br>爱好任侠之事，轻视财货。<br>早年在蜀中度过。他的父亲是个富商。<br>李白二十五岁开始漫游全国，<br>走过湖北，江西，河南，山东等地.<br></p>

<p><A NAME="libai">李白蔑视权贵</A>，<br>传说他喝醉酒，<br>曾在玄宗面前使高力士给他脱靴。<br>高力士认为这是很大的耻辱，<br>就摘取李白诗句激怒杨贵妃。<br>玄宗每次让李白做官，杨贵妃就加以阻止。<br>李白知道玄宗的亲信对他有意见，<br>于是恳求还家。<br>玄宗赐给他财物，放他开.<br></p>
<p>李白是我国唐代伟大的浪漫主义诗人，<br>被誉为“诗仙”。<br>他的诗豪迈瑰丽，诗里有突破现实的幻想。<br>也有对当时民生疾苦的反映和对政治黑暗的抨击。<br>他的散文具有清新明朗，<br>奔放流畅的特点。</p></font></center>
</body>
</html>

晴天雨 · 发表于 2009-8-19 10:37

本帖最后由晴天雨于 2009-8-19 10:41 编辑

b、在站点内部建立链接
所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。在前面介绍链接路径时，已经给大家介绍了内部链接概念，内部链接一般采用相对路径链接比较好。下面我们根据如图示，来看看相对路径的具体的链接方法:
在站点内部建立链接
当前页面被链接页面超链接代码
2-1.html 3-1.html <a href="3-1.html">超链接元素</a>
3-1.html 1-1.html <a href="asm/1-1.html">超链接元素</a>
sy.html 1-1.html <a href="ssm/asm/1-1.html">超链接元素</a>
2-1.html sy.html <a href="../sy.html">超链接元素</a>
1-1.html sy.html <a href="../../../sy.html">超链接元素</a>
sy.html 2-1.html <a href="ssm/2-1.html">超链接元素</a>
c、外部链接
所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径，要有完整的URL地址，包括协议名，主机名，文件所在主机上的的位置的路径以及文件名。
最常用的外部链接格式是：<a href="http://网址">,还有其他的格式如下表所示：
URL外链部接格式服务 URL格式描述
WWW http://"地址" 进入万维网站点
Ftp ftp://"" 进入文件传输协议
Telnet telnet://"" 启动Telnet方式
Gopher gopher://"" 访问一个gopher服务器
News news://"" 启动新闻讨论组
Email email://"" 启动邮件

d、链接其它站点：
站点之间的页面和元素的链接是万维网交流信息的关键，这种链接用HTTP协议来建立网站之间的超链接。
格式：<A HREF="HTTP://"网址">
实例：4-2-31.html
<HTML>
<HEAD>
<TITLE>链接到http://</TITLE>
</HEAD>
<BODY>
<CENTER>
<h2>绝对路径链接</h2>
<HR>
<A HREF="http://www.sina.com.cn" title="打开新浪首页"><img src="../../imgelogo(3).gif/"></A><BR><BR>
<A HREF="http://www.tsinghua.edu.cn">清华大学</A><BR><BR>
<A HREF="http://www.pku.edu.cn">北京大学</A><BR><BR>
<A HREF="http://www.shisu.edu.cn" target=_blank>上海外国语学院</A><BR>
</CENTER>
</BODY>
</HTML>

e、发送E-mail
在HTML页面中，可以建立E-mail链接。当浏览者单击链接后，系统会启动默认的邮件服务系统发送邮件。
基本与法：<a href="mailto:E-mali 地址: subject=邮件主题">描述文字</a>
在实际应用中，用户还可以加入另外的两个参数"cc=?&"和"&body=?",这分别表示在发送邮件的同时把邮件抄送给第三者和设定邮件主题内容。
邮件的参数参数描述
subject 电子邮件主题
cc 抄送收件人
body 主题内容
bcc 暗送收件人

如果希望同时写下多个参数，则参数之间使用"&"分隔符。
实例：4-2-32.html
<html>
<head>
<title>发送邮件</title>
</head>
<body>
<p>
<a href="mailto:zhoujr3071@yahoo.com.cn?cc=benbenmao@163.com&Subject=早安&bcc=a@b.c
&Body= 早安,笨笨猫祝你度过一个快乐的早晨！">
向笨笨猫的好友发送邮件(抄送笨笨猫)
</a>
</p>
</body>
</html>

单击"向笨笨猫的好友发送邮件(抄送笨笨猫)"后打开了系统的邮件服务软件Outlook Exqress发送邮件。

f、链接FTP
lnternet上资源丰富，通过ftp文件传输协议，就可以获得各种免费软件和其他文件，ftp协议是使计算机与计算机之间能够相互通信的语言，ftp使文件和文件夹能够在lnternet上公开传输，通过ftp可以访问某个网络或服务器，而不需要该计算机的账户和授权的密码就可通过ftp公开获得数据
语法格式：
<a href="ftp://ftp主机地址">文字链接</a>
实例：4-2-33.html
<html>
<head>
<title>链接ftp主机</title>
</head>
<body>
<p>
<a href=ftp://ftp.pku.edu.cn>北京大学ftp站点</a>
</p>
</body>
</html>

第五章图像的处理
内容包括：
背景图像的设定
网页中插入图片标签
图像的超链接
用标签插入avi文件

图像可以使html页面美观生动且富有生机。浏览器可以显示的图像格式有jpeg，bmp，gif。其中bmp文件存储空间大，传输慢，不提倡用，常用的jpeg和gif格式的图像相比较，jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大，gif图像仅包括265色彩，虽然质量上没有jpeg图像高，但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点。因此使用图像美画页面可视情况而决定使用那种格式。
1、背景图像的设定
在网页中除了可以用单一的颜色做背景外，还可用图像设置背景。
设置背景图像的格式：
<body background= "image-url">
其中 "image-url" 只图像的位置。
实例：5-1.html
<html>
<head>
<title>设置背景图像</title>
</head>
<body background="../../imge/11.gif">
<center>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font color="#006600" size="+6">盼望着，盼望着，东风来了，春天脚步近了.</font>
</p>
</center>
</body>
</html>

2、网页中插入图片标签<img>
网页中插入图片用单标签<img>，当浏览器读取到<img>标签时，就会显示此标签所设定的图像。插入图片时，仅仅用这一个标签是不够的，还要配合其它属性来完成。
插入图片标签<img>的属性属性描述
src 图像的url的路径
alt 提示文字
width 宽度
height 高度
hspace 排列
dynsrc 设定avi文件的播放
loop 设定avi文件循环播放的次数
loopdelay 设定avi文件循环播放延迟
start 设定avi文件的播放方式
lowsrc 设定低分辨率图片
usemap 映像地图
border 边框
hspace 水平间距
vlign 垂直间距

<IMG> 的格式及一般属性设定：
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

a、普通插入图片
实例：5-2-1.html
<html>
<head>
<title>普通插入图片</title>
</head>
<body>
<BODY>
<CENTER>
<H2>爱在深秋</H2>
<IMG src="../../imge/6-5.gif">
</CENTER>
<WBR>
<p>秋雨无声无息地下着。<BR>
飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……<BR>
黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。<BR>
然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？<BR>
</p>
</WBR>
</body>
</html>

b、设定上下左右空白位置 hspace/vspace
实例：5-2-2.html
<html>
<head>
<title>设定图像与文本之间的距离</title>
<body>
<img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">
<wbr>
<font size="+3">秋雨无声无息地下着。<BR>
飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……<BR>
黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。
然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？</font><BR>
</wbr>
</body>
</html>

c、设定字画对其方式
对其属性align的设定
属性值对齐方式
top 上对齐
middle 居中对齐
bottom 下对齐
left 左对齐
right 右对齐
实例：5-2-3.html
<html>
<head>
<title>控制图像相对于文字基准线的水平对齐方式</title>
</head>
<body>
<img src="../../imge/6-2.jpg" align=top>
此图像相对于文字基准线为靠上对齐<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="right">
此图像相对于文字基准线为置中对齐<p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align=bottom>
此图像相对于文字基准线为靠下对齐</p>
<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="middle">
此图像相对于文字基准线为置中对齐<p>
</body>
</html>

d、图片大小设定
实例：5-2-4.html
<html>
<head>
<title>图像大小的设定</title>
</head>
<body>
<center>
<p>
缩小图像
<p><img src="../../imge/6-3.gif" width="350" height="200">
<p>原图显示
<p>
<img src="../../imge/6-3.gif" width="400" height="236">
<p>放大图像
<p>
<img src="../../imge/6-3.gif" width="500" height="250">
</p>
</center>
</body>
</html>

e、图像边框的设定
实例：5-2-5.html
<html>
<head>
<title>设定图像的边框</title>
</head>
<body>
<center>
<div align="center">
<pre><img src="../../imge/xjbjtp22.jpg" border="10"></pre>
</div>
</body>
</html>

3、图像的超链接
图像的链接和文字的链接方法是一样的，都是用<a>标签来完成，只要将<img>标签放在<a>和</a>只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在<body>标签中设定。
实例：5-3.html
<html>
<head>
<title>使用图像为选取的对象</title>
</head>
<body>
<p align="center"> </p>
<h1 align="center">图片的超链接</h1>
<P>
<center>
<a href="http://www.sohu.com/" target="_blank"><img alt="搜狐网站" src="../../imge/logo[1].gif"></a><p>
<a href="http://www.baidu.com/"><img alt="百度搜索" src="../../imge/logo[2].gif"></a><p>
<a href="http://www.sina.com.cn"><img alt="新浪网站" src="../../imge/logo(3).gif"></a>
</center>
</body>
</html>

4、用<img>标签插入avi文件
格式：<img dynsrc="avi文件地址">
<img>标签插入avi文件的属性属性描述
dynsrc 指定avi文件所在路径
loop 设定avi文件循环次数
loopdelay 设定avi文件循环延迟
start 设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放）
实例：5-4.html
<html>
<head>
<title>设定图像的边框</title>
</head>
<body>
<center>
<p align="center">
<img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover">
</p>
</center>
</body>
</html>

晴天雨 · 发表于 2009-8-19 10:46

第六章多媒体效果
内容包括：
文字的移动
插入多媒体文件
嵌入多媒体文件
点播音乐

在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。
1、滚动字幕<marquee>
<marquee>标签可以实现元素在网页中移动的效果，以达到动感十足的视觉效果。<marquee>标签是一个成对的标签。应用格式为:
<marquee>...</marquee>
<marquee>标签有很多属性，用来定义元素的移动方式:
<marquee>的属性
属性描述
align 指定对齐方式top,middle,bottom
scroll 单向运动
slide 如幻灯片,一格格的，效果是文字一接触左边就停止。
alternate 左右往返运动
bgcolor 设定文字卷动范围的背景颜色
loop 设定文字卷动次数，其值可以是正整数或 infinite表示无限次默认为无限循环
height 设定字幕高度
width 设定字幕宽度
scrollamount 指定每次移动的速度,数值越大速度越快
scrolldelay 文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快
hspace 指定字幕左右空白区域的大小
vspace 指定字幕上下空白区域的大小
direction 设定文字的卷动方向,left表示向左,right表示向右
behavior 指定移动方式，scroll表示滚动播出，slibe表示滚动到一方后停止，alternate表示滚动到一方后向相反方向滚动。
实例6-1.html
<html>
<body>
<center>
<font face="字体2" size=6 color="#ff0000">
滚动字幕
</font><br>
<marquee>啦啦啦~~~我会跑了</marquee>
<p>
<marquee height="200" direction="up" hspace="200">啦啦啦~~~我会往上跑了<br>啦啦啦~~~我会往上跑了</marquee>
<p>
<marquee direction="right">啦啦啦~~~我会往右跑了</marquee>
<p>
<marquee height="200" direction="down"><center>啦啦啦~~~我会往下跑了</center></marquee>
<p>
<marquee width="500" behavior="alternate">啦啦啦~~~我来回的跑</marquee>
<p>
<marquee behavior="slide">啦啦啦~~~我跑到目的地就该休息了</marquee>
<P>
<marquee scrollamount="2">啦啦啦~~~我累了，要慢慢的溜达</marquee>
<P>
<marquee scrolldelay="300">啦啦啦~~~我累了，我要走走停停</marquee>
<p>
<marquee scrollamount="20">哈哈~都没有我跑得快</marquee>
<p>
<marquee><img src="../../imge/6-2.jpg">啦啦啦~~图片也可以啊</marquee>
<p>
<marquee bgcolor="#FFFFCC" width="700" vspace="30"><font size="+3" color="#FF0000">啦啦啦~~滚动文字有背景了</font></marquee>
</center>
</body>
</html>

2、插入多媒体文件
在网页中可以用<embed>标签将多媒体文件插入，比如可以插入音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、mp3、AIFF、AU格式等。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。但要说明一点，虽然我们用代码标签插入了多媒体文件，但IE浏览器通常能自动播放某些格式的声音与影像，但具体能播放什么样格式的文件．取决于所用计算机的类型以及浏览器的配置．浏览器使用Hn7或n7协议获取多媒体文件，(可能得花很长时间，因为多媒体文件通常比较大)，浏览器既就决定如何播放。通常是调用称为括件的内置程序来播放的。事实上．浏览器仅仅能显示几种文件格式。是括件扩展了浏览器的能力．有许多种不同的括件程序，每种都能赋予浏览器一种新的能力。有时，不得不分别下栽每个浏览器的多媒体插什程序．系统最小化的安装一般不包括声音与影像播放器。另外在播放影音文件时，若是使用一小部分窗口播放，大多数的计算机还比较快。若是全屏幕播放．就需要专用的硬件或是性能好的计算机．对于IE，若无预先安装好的插件程序，它会提示你或是打开文件或是保存文件或是取消下载。若打开未知类型的文件，浏览器会试图使用外部的应用程序显示此文件．但这要取决于操作系统的配置。
<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 设定播放控件面板的大小
HIDDEN=TRUE 隐藏播放控件面板
CONTROLS=CONSOLE/SMALLCONSOLE 设定播放控件面板的样子

实例 6-2-1.html
<HTML>
<HEAD>
<TITLE>插入多媒体文件</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/一千零一夜.mid" height=150 width=400 loop="false">
</center>
</BODY>
</HTML>

实例6-2-2.html
<HTML>
<HEAD>
<TITLE>插入多媒体文件</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/mmm.avi" width="400" height="500" loop="false">
</center>
</BODY>
</HTML>

实例6-2-3.html
<HTML>
<HEAD>
<TITLE>插入flash</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/023.swf" height="500" width="550">
<embed src="../../imge/023.swf" height="500" width="550" wmode="transparent">
</center>
</BODY>
</HTML>

实例6-2-4.html
<html>
<head>
<title>在图片上插入透明flash</title>
</head>
<body bgColor=lightblue>
<br><center>在图片上插入透明Flash动画</center><br>
<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolorlight="#00CC99" bordercolordark="#009933" background="../../imge/hai.jpg"><TBODY><TD><EMBED src="../../imge/016.swf" width=630 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed></TD></TBODY></table></center>
</body>
</html>

注意长和宽的设定要根据图片的实际大小来设定

3、嵌入多媒体文件
除了可以使用上述方法插入多媒体文件外，还可以在网页中嵌入多媒体文件，这种方式将不调用媒体播放器

a、嵌入背景音乐
<bgsound>标签用来设置网页的背景音乐。但只适用於 IE，其参数设定不多。格式如下：
<BGSOUND src="your.mid" autostart=true loop=infinite>
src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。声音文件可以是wav,midi,mp3等类型的文件
autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。
loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。直到网页关闭为止。
实例 6-3-1.html
<HTML>
<HEAD>
<TITLE>背景声音</TITLE>
</HEAD>
<body>
<H4 ALIGN="CENTER" >网页的背景声音<H4>
<HR>
<bgsound src="../../imge/小三和弦.mp3" LOOP="3">
</BODY>
</HTML>

背景音乐可以放在<body></body>或<head></head>之间

b、在网页中嵌入视屏文件使用前面学过的标签<img src="路径">,在此就不重述了。

4、点播音乐
将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：
　　　<A　HREF="音乐地址">乐曲名</A>
例如：播放一段MIDI音乐：
　　　<A　HREF="imge/一千零一夜.mid">MIDI音乐</A>　　MIDI音乐
　　　播放一段AU格式音乐：
　　　<A　HREF="imge/小三和弦.mp3">同桌的你-AU音乐</A>　小三和弦-mp3音乐
　　把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中，已经有人这样做了，你一定已经遇到很多，而且自己也可以试着去做了！

花心兔 · 发表于 2009-9-22 22:31

所有人都是从菜鸟过来的，就是比尔盖次也不是一生下来就会用电脑。

seoer · 发表于 2009-11-4 15:48

这个没学但是会

晓娜 · 发表于 2011-5-4 17:31

搞css样式的mm？

你若安好 · 发表于 2013-3-9 10:12

学习了，谢谢楼主分享

		自动登录	找回密码
密码			加入无为

HTML基本知识和使用

评分