1
第 5章 网页设计语言 HTML
学习目标
? HTML的概念
? HTML的语法与结构
? 掌握 HTML的各种标记符号及其属性
? 能够制作简单网页
2
第 5章 网页设计语言 HTML
教学内容
5.1 HTML概述
5.2 HTML的一般标记符
5.3 文本标记符
5.4 列表标记符
5.5 链接标记符
5.6 表格标记符
5.7 表单标记符
5.8 多媒体标记符
本章小结
返回总目录
3
5.1 HTML概述
返回目录
HTML（ Hypertext Markup Language） 是最基本的 Web页面开发语
言, 称为文本文档标记语言 。 它不需要编译, 由浏览器 （ 如 IE） 解
释执行 。 HTML是纯文本文件, 可采用 Windows中的记事本或写字板
来编辑, 也可以用 DOS下的 Edit等文本编辑器, 保存时文件名的后缀
为,htm或,html。
HTML的主要语法是元素和标签 。 元素是符合文档类型定义的文档
组成部分, 如 title（ 文档标题 ）, img（ 图像 ）, table（ 表格 ）
等 。 元素名不区分大小写 。 标签用来规定元素的属性和它在文档中
的位置 。 标签分单独出现和成对出现两种情况 。
例如,<title>网页设计教程 </title>
title是元素名,<title>与 </title>之间的内容都属于元素 title，
<title>是标签，用来说明元素 title。
4
5.2 HTML的一般标记符 — 一个简单的网页
一个简单网页的制作
第一步：打开 Windows下的记事本 。
第二步：输入下面代码
<html>
<head>
<title> HTML网页设计教程 </title>
</head>
<body> 你好 ! 欢迎浏览本网页 ！ </body>
</html>
第三步：以 sample.htm为文件名保存文件并关闭该文件 。
第四步：双击 sample.htm文件，浏览器会自动执行它。
返回目录
5
5.2 HTML的一般标记符 — HTML文件格式特点
1,每一个 HTML文件以 <html>开始, 以 </html>结束, 浏览器遇到 <html>标志时, 会按
照 HTML的标准来解释后面的文本, 直到 </html>才停止解释 。 <html>和 </html>是成对出
现的, 所有的文本和命令都在它们之间 。
2,<head>是网页的头部标记, 通常紧跟 <html>之后 。 <head>与 </head>之间的文本是整
个文件的序言, 不属于 HTML文件本体部分, 不在浏览器屏幕中显示 。
3,<title>用来说明文件标题, TITLE元素的格式为,<title>文件题目 </title>, 一
个好的题目应该使读者能从中判断出该文件的大概内容 。 浏览时文件题目将显示在 IE浏
览器标题栏上 。 <title>中不包含其他标记 。
4,<body>和 </body>之间是网页主体内容 。 在 <body>标签中可以规定整个文档的一些
基本属性, 如：, bgcolor” 属性, 用于指定文档的背景颜色,“text” 属性用于指定文档中文
字的颜色 。
5,所有标记不得交叉, 如 <body>与 </body>必须包含在 <html>与 </html>中间 。
6,HTML文件对书写格式要求不太严格 。
返回目录
6
5.3 文本标记符 — 常用文本标记符
标 签 作 用
<br> <br>是单独出现的，作用相当于插入回车符。如果没有换行标签，Web浏览器窗口将根据浏览器窗口的宽度尽可能长的显示文本。
<Hi> <Hi>标签是成对出现的，夹在 <Hi>和 </Hi>之间的文字是文档中的标
题。标题文字都用黑体显示，上级标题总比下面各级标题更大些、
更粗些。 <Hi>标签共分六级，其中 <H1>标签括起的文字是第一级标
题，最大最粗，而 <H6>标签括起的文字是最后一级标题，最小最细。
<hr> <hr>标签是单独出现的，作用是换行并在该行下面画一条水平直线。它有三个属性值,SIZE,WIDTH和 ALIGN，分别用以规定水平线的
高度、宽度和水平线在浏览器窗口中的位置。
<p> P是 paragraph的意思，它用于划分段落，作用是换行并插入一个空白行,<p>标签可以单独使用，也可以成对使用。成对使用时，可以添
加 ALIGN属性，标出段落在浏览器中的位置。 ALIGN属性的参数值
有 left,center和 right，分别表示 <p>标签所括起的段落位于浏览器窗
口的左侧、中间、右侧。
返回目录
7
5.3 文本标记符 — 常用文本标记符
标 签 作 用
<pre> <pre>是预格式化标签,HTML的输出是基于窗口的，因而
HTML文件在输出时都要重新排版，对确实不需要重新排
版的内容，可以用 <pre>… <／ pre>通知浏览器。浏览器在
输出时，对 <pre>… <／ pre>括起来的内容几乎不做修改地
输出。
字符格式
标签
HTML文档的字符格式标签主要有 <b>,<i>和 <u>，它们
都成对出现。 <b>和 </b>之间的内容将显示为黑体文字，
<i>和 </i>之间的内容将显示为斜体,<u>和 </u>之间的内
容将显示为带下划线的文字。
<address> 地址标签，一般放在文档体的首部或尾部。 <address>和
</address>之间的内容通常是有关作者的信息，包括作者的
姓名、身份等等。
返回目录
8
5.3 文本标记符 — 常用文本标记符
例常用文本标记符举例
<html>
<head> <title> 有关文本标签的使用 </title> </head>
<body text=#ff0000 bgcolor=#ccff99>
这一个段落我们分两行显示, 需用到 <BR>标签, <br>
我们看如果我们不用 <BR>标签, 而只是在形式上分行的效果,
<b> 该段落到此结束 </b>
<p>
下面是第二段 。 该段只有一行, 在该行下面加一条绿色水平线 。
<hr size=10 width=160 align=left color=#00ff00>
</body>
</html>
说明,<BR>将 <br>作为纯文本符号而不是标记。
返回目录
9
5.3 文本标记符 — 滚动字幕
滚动字幕能使网页生动活泼, 增加视觉效果 。 标签为,<marquee>…
</marquee>。
<marquee>标签有这样几个常用属性：
1,derection属性, 用于指定文字移动方向, 属性值有,left,right。
2,behavior属性, 指定文字移动方式 。 属性值有,scroll,slide、
alternate,分别表示文字一圈一圈的绕着走, 只走一次, 来回走动 。
3,loop属性, 用于指定循环次数, 若不指定循环次数, 则表示循环不
止 。
4,scrollamount属性, 用于指定文字移动的速度 。
5,bgcolor属性, 用于指定文字背景色 。
返回目录
10
5.3 文本标记符 — 滚动字幕
例 5-3 滚动字幕举例
<html><head> <title>滚动字幕 </title> </head>
<body text=#ff0000 bgcolor=#ccff99>
<marquee>请进入音乐休闲屋 </marquee>
<marquee direction=left>看我还会动呢,并且是从右向左移动
</marquee> <p>
<marquee direction =right behavior=scroll>我从左向右一圈一圈的移动
</marquee > <p>
<marquee scrollamount=18>我是不是移动的比较快？
</marquee> <P>
<marquee loop=3 bgcolor=blue>我的底色是黄的, 我循环三次即停止移动
</marquee > <p>
</body> </html>
返回目录
11
5.4 列表标记符 — 有序列表
有序列表用于对网页中的一些内容进行编号排列, 以便读者清晰地了解其
每行的顺序 。
在 HTML中插入有序列表是通过 <ol><li>标签来实现的 。 首标签 <ol>和尾标
签 </ol>之间的内容是有序列表的内容, 排序列表的每一项必须用 <li>标签标识 。
例有序列表举例 <html>
<head> <title>有序列表 </title> </head>
<body bgcolor=#00ff00>
<p>下面是有序列表 </p>
<ol> <li>这是列表第一项
<li>这是列表第二项
<li>这是列表第三项
</ol>
</body>
</html>
返回目录
12
5.4 列表标记符 — 无序列表
无序列表是指列表内容可以按任意顺序排列 。 每一列表项前不是用连续编
号, 而是用一个特定符号来标记, 通常是在每一列表项前加上一个圆点儿 。
无序列表与有序列表的实现方法很相似, 只是用标记 <ul>来代替有序列表中
的 <ol>来代替列表中的 <ol>。
例无序列表举例
<html>
<head> <title> 无序列表 </title> </head>
<body>
以下是娱乐休闲版的列表：
<ul> <li>音乐
<li>影视
<li>游戏
</ul>
</body>
</html>
返回目录
13
5.4 列表标记符 — 定义列表
定义列表用于对清单条目进行简短说明, 首标签 <dl>和尾标签 </dl>之间的内
容就是定义列表的内容, 列表项目用 <dt>引导, 它的说明用 <dd>引导 。 通常
<dt>和 <dd>是成对出现的, 即一个列表项目对应一个说明项, 当然也可以一
个列表项目对应多个说明项 。
例定义列表举例
<html>
<head> <title>定义列表 </title> </head>
<body bgcolor=#FFFFFF>
下面是一个定义性列表：
<dl> <dt>计算机硬件
<dd>如软驱, 硬盘等
<dt>计算机软件
<dd>如系统软件, 应用软件
</dl>
</body>
</html>
返回目录
14
5.5 链接标记符
在浏览网页过程中, 有时点击某处的文字或图像会跳转
到另一部分, 这是因为在网页中使用了超文本链接 。 使用
超文本链接可以使顺序存放的文件在一定程度上具有随机
访问的能力, 更加符合人类的思维方式 。 支持文档的超连
接是 HTML最吸引人优点之一 。
一个超文本链接指针由两部分组成：被指向的目标和是
锚点 。 目标可以是同一文件的另一部分, 也可以是另一个
文件, 还可以是动画或音乐 。 而当用户把鼠标移到锚点时,
鼠标的形状会变成小手状, 这时点击鼠标, 就会跳转到链
接的目标 。
返回目录
15
5.5 链接标记符 — 不同文件间的链接
HTML文件用文字作锚点的格式是,<a href="URL">字符串 </a>。
HTML文件用图像作锚点的格式是,<a href="URL"><img src="URL"></a>。
用图像作锚点实际上是用 <img src="URL">取代了用文字作锚点中, 字符串,
的位置 。
HREF是链接中最常用的属性, 该属性用来指出所要链接文件的名称或 URL。
URL是统一资源定位器 (Uniform Resource Locator)。 对于自己主机内的文件,
它的 URL可以根据该文件的实际情况决定 。 对于因特网上的资源, 在用浏览
器观看时它的 URL会在浏览器的, 地址, 栏中显示出来, 把它抄下来写到你
的 HTML文件中即可 。 这个, 字符串, 就是锚点 。 用鼠标点这个字符串时, 浏
览器就会将 URL处的资源显示在屏幕上 。
<img src="URL">用来指明作为锚点的图像 。
例如,<a href=＂ mypicture.gif＂ >点此处看相片 </A>
网页上会显示字符串, 点此处看相片,, 当把鼠标移到这个字符串上时, 鼠
标会变成小手形状, 点击字符串就会显示文件, mypicture.gif”的内容 。
返回目录
16
5.5 链接标记符 — 同一文件间的链接
链接指针可以使读者在整个因特网网上方便的跳跃浏览, 当一个 HTML较长
时, 还可以在文件中建立一些链接, 实现同一文件中内容的跳跃浏览 。 对于
一个完整的文件, 可以用 URL来唯一地标识被指向的目标, 但对于同一文件
的不同部分, 被指向的目标是通过 <a>标记的 NAME属性来定义的 。
格式,<a name="name ">text</a>
说明,NAME属性用来给被链接的部分起名字并加标记, text是可选项 。
给被链接的部分起名字并加标记后, 可以用 <a href="URL#name">text </a>指
向它 。 其中的 URL是放置标记的 HTML文件的 URL,name是标记名, 对于同
一个文件, 可以写为 <a href="#name">text </a>。 这时就可以点取 text跳转到标
记名为 name的部分了 。
例如,<a name="白雪飘飘 ">这里白雪飘飘 </a>
<a href="＃白雪飘飘 ">点此进入白雪飘飘 </a>
这段代码, 为, 这里白雪飘飘, 作了标记, 白雪飘飘, 。 点击, 点此进入
白雪飘飘, 字符串可链接到, 这里白雪飘飘, 。
返回目录
17
5.5 链接标记符 — 在新窗口中显示被指向的目标
如果希望在一个新的窗口中显示被指向的目标,
可以使用 target属性 。
格式：
<a href="URL" target="新窗口名 ">字符串 </a>
它能将 URL代表的资源显示在一个新的窗口中,
该窗口的名字叫, 新窗口名, 。
返回目录
18
5.5 链接标记符 — 链接地图
图像链接中每幅图只能指向一个地点, 而图像地图可以把图像分成多个区域,
每个区域指向不同的目标文档 。
例链接地图举例
<html>
<head> <title>链接地图 </title> </head>
<body>
下面定义的是一个链接地图
<img src="F:\ZHOU ZHOU\JING.BMP" ismap usemap="#JY>
<map name="JY">
<area shape="rect" coords="100,80,130,120" href="water.html" >
<area shape="poly" coords="200,150,180,150,230,180" href="image.html">
<area shape ="circle" coords="150,130,60" href="太阳,jpg">
</map>
</body> </html>
返回目录
19
5.5 链接标记符 — 链接地图
在定义链接地图时, 首先要为链接源点的图像添加 ismap属性, 将图像定义
为地图 。 然后必须使用 usemap属性说明该图像是遵循哪个地图定义的 。
usemap属性的参数值为, #地图名, 。 HTML是通过 <map>标签和 <area>标签
来定义地图的 。 <map>标签有一个不可缺省的属性 name,参数值是地图名字,
比如上例中的 name="JY",其中, JY”是地图名 。 地图的区域划分是通过
<area>标签来实现的 。 <area>标签有三个属性, 就是上例中用到的 shape、
coords,href,分别表示该区域的形状, 范围和所链接到的目标文档 。 上例中
用到的 rect用于指定一个矩形区域, 该区域的位置由左上角坐标和右下角坐标
说明 。 poly 指定一个多边形区域, 该区域的位置由各顶点坐标说明 。 circle 指
定一个圆形区域, 该区域的位置由垂直通过圆心的直径与该圆的交点坐标说
明 。 上例中 <area shape="rect" coords="100,80,130,120" href="WATER.HTML" >
语句定义了一个矩形区域, 矩形的左上角坐标为 （ 100,80）, 右下角的坐标
为 （ 130, 120 ） 。 在该区 域的任 何位置点 击都可 以链接 到目标 文档
,WATER.HTML”。
返回目录
20
5.6 表格标记符
表格能将 HTML的内容按行或列的方式组织, 使网页的组织井然有序 。
<table>标记是定义表格的总标记, HTML要求一个表格的全部内容包含
在 <table>和 </table>标记之中 。 <table>标记中最常用属性是 border属性,
它的值表示以像素点为单位的边框宽度, 如 border=2表示边框为 2个像素
点 （ 像素点是位图的基本单位 ）, 如果不包含 border属性则默认无边框 。
此外, <table>标记还有 align属性, 取值为 left,right,center,分别表示将
表格定义在网页的左端, 右端或使表格居中 。
表是由行和列内的单元格组成的 。 表格的定义顺序是首先定义表的一行,
行标记用 <tr>… </tr>,是成对标签 。 然后依此是行的单元格, 单元格用标
记 <td>… </td>,如果一个表格中某个单元格的内容很长, 可以使用 <br>标
记强制内容折行 。 再定义第二行, 依次定义第二行的单元格 。 表的列由每
行包含的单元格数目自动计算得到 。 <th>… </th>标志用来设置表格头,
文字通常是黑体居中显示 。 为确保表中每列对齐, 应在每行包含相同单元
格 。
返回目录
21
5.6 表格标记符
此外, <tr>还有 align和 valign属性 。 align属性定义水平对
齐方式, 与 <table>标记的该属性相同 。 valign属性定义垂
直对齐方式, 取值为 top（ 顶端对齐 ）, middle（ 居中间对
齐 ） 或 bottom（ 底部对齐 ） 。 <td>具有 width,colspan、
rowspan和 nowrap属性 。 width是格的宽度, 单位用绝对像
素值或总宽度的百分比, colspan设置一个表格格子跨占的
列数 （ 缺省值为 1）, rowspan设置一个表格格子跨占的行
数 （ 缺省值为 1）, nowrap禁止单元格内的内容自动换行 。
表的标题使用 <caption>… </caption>标记, 一般放在表中
第一行的前面, <caption> 的属性包括对齐属性 align,取值
为 top,bottom,right,left,middle。
返回目录
22
5.6 表格标记符
例 表格的制作
<html>
<head> <title>表格标志的综合示例 </title> </head>
<body>
<table border="1" align="center">
<tr> <th colspan="1" valign="bottom">姓名 </th>
<th colspan="1" valign="bottom">性别 </th>
<th colspan="1" valign="bottom">分数 </th> </tr>
<tr> <td align="center">周 </td>
<td align="center">女 </td>
<td align="left">90</td></tr>
<tr> <td align="center">王 </td>
<td align="center">男 </td>
<td align="center">98</td></tr>
</table>
</body></html>
返回目录
23
5.7 表单标记符
我们上网时经常需要填写一些用户信息, 在 HTML中是通过表
单实现的 。 表单使网页具有交互功能, 在 Web页中提供表单让访
问者填写, 从而获得用户信息 。 一个表单至少应该包括说明性文
字, 用户填写的表格, 提交和重填按钮等内容 。 当用户填写完信
息做提交 （ submit） 操作后, 表单内容就从客户端的浏览器传送
到服务器上, 经过服务器上的 ASP 或 CGI 等处理程序处理后,
再将用户所需信息传送回客户端的浏览器, 网页便有了交互性 。
设计表单常用标记是,<form>,< input>,<option>,<select>、
<textarea>和 <isindex>等 。
返回目录
24
5.7 表单标记符 — 表单输入标记 <input>
此标记在表单中使用频繁, 大部分表单内容需要用到此标记 。 语法如下：
<input aligh=left/righ/top/middle/bottom
name=value
type=text/textarea/password/checkbox/radio/submit/reset/file/hidden/image/button
value=value
src=URL
checked
maxlength=n
size=n
onclick=function
onselect=function>
各项含义说明如下：
返回目录
25
5.7 表单标记符 — 表单输入标记 <input>
1,align用于设定表单的位置, 参数有,left,right,middle,top,bottom。
2,name是单行文字盒名称 。 比如我们要在该文本框中填写姓名, 可给文本框
起名,YOUR-NAME.
3,type决定了输入数据的类型 。
4,value用于设定默认值, 如果用户不输入的话, 就采用此默认值；
5,src是针对 type=image的情况来说的, 设定图像文件的地址；
6,checked指定复选项的初始状态, 表示该复选项在初始时是被选中的；
7,maxlength表示在输入单行文本的时候, 最大输入字符个数；
8,size用于设定在输入多行文本时的最大输入字符数；
9,onclick表示在按下按钮时调用指定的子程序；
10,onselect表示当前项被选择时调用指定的子程序 。
返回目录
26
5.7 表单标记符 — 表单输入标记 <input>
例制作一个表单
<html>
<head><title>表单实例 </title></head>
<body>
<p><hr></p>
请选择您喜欢的娱乐节目,<br>
<form action="http://www.yule.com/cgi-cin/item.exe" method="post">
<input type=checkbox name="happe1" value="非常六加一 ">
非常六加一 <br>
<input type= checkbox name ="happe2" value="开心辞典 ">
开心辞典 <br>
<input type=radio name="happe3" value="快乐大本营 ">
快乐大本营 <br>
</form>
<hr>
</body></html>
返回目录
27
5.7 表单标记符 — <select> 和 <option>标签
用 <select>标签和 <option>标签可以在表单中插入一个下拉列表框 。 首标签
<select>和尾标签 </select>之间的内容就是一个列表框的内容 。 <select>标签必须
和 <option>标签联合使用, 因为下拉菜单中的每个选项要用 <option>标签定义 。
<select>标签和 <option>标签语法如下：
<select name=nametext size=n multiple>
<option selected value=value> 请单击该图标看
</select> 下拉列表框举例
说明：
1,name设定下拉列表框的名称；
2,size设定列表框高度, 即一次显示几个菜单项, 一般取默认值 （ size="1"） ；
3,multiple设定可以进行多选 。
4,<option>标签定义下拉列表框中的一个选项, 其中 selected表示当前项被默
认选中, value表示该项对应的值, 当该项被选中之后, 该项的值会被送到服务
器进行处理 。
返回目录
28
5.7 表单标记符 — 多行文本输入 标签
建立多行文本输入框的专用标签, 其语法如下：
<textarea name=name cols=n rows=n wrap=off/hard/soft>
各参数含义：
name：文本框名称, cols：宽度, rows：高度 （ 行数 ）, wrap：换行
控制, 有三个属性值,off表示不自动换行； hard表示自动硬回车换行,
换行标记一同被传送到服务器中去； soft表示自动软回车换行, 换行
标记不会传送到服务器中去 。
表单所涉及的标记很多, 参数也比较复杂, 但一般的表单不可能涉
及所有参数, 实际制作表单时通常是组合应用这些标记 。 我们在制作
表单时要遵循一个原则：能用默认值的尽量用默认值, 绝不设定一个
不用的参数 。
返回目录
29
5.8 多媒体标记符 — 文本中插入图像
超文本支持的图像格式一般有 X Bitmap(XBM),GIF,JPEG三种,
所以我们对图片处理后要保存为这三种格式中的任何一种, 才可
以在浏览器中看到 。 插入图像的标签是 <img>,格式为,<img
src="图形文件地址 ">。
src属性指明了所要链接的图像文件所在地址, 这个图像文件可以
在本地机器上, 也可以位于远端主机上 。 地址的表示方法可以沿
用 3.4节, 链接标记符, 中 URL地址表示方法 。 img还有两个属性是
height和 width,分别表示图形的高度和宽度 。
网页上不仅有图形还有文字, 文字与图形之间有各种不同的对
齐方式, 用 align 属性定义对齐方式 。 align 的取值可以是
top|middle|bottom|right|left。 图文之间的距离用属性 hspace和 vspace
来规定, 分别表示文字与图像的水平距离和垂直距离 。
返回目录
30
5.8 多媒体标记符 — 插入背景音乐
<bgsound> 标签用以插入背景音乐, 但只在 IE中才能
听到 。 其格式如下：
<bgsound src="音乐文件的地址 " autostart=true/false
loop=循环次数 >
src用来指出音乐文件地址； autostart 用来指出在音乐
下载传送完之后是否自动播放, 默认 false（ 否 ）, 选
true（ 是 ） 则自动播放； Loop用来指出播放的次数 。
Loop=3表示重复三次, Infinite 表示重复多次 。
返回目录
31
5.8 多媒体标记符 — 插入背景音乐
要在浏览网页时听音乐, 可将音乐做成一个链接, 只
需用鼠标在锚点上单击, 就可以听到动人的音乐了 。 其
基本格式与前面讲的链接标记符相同：
<a href="音乐地址 ">乐曲名 </a>
除了借助链接实现网上播放音乐的功能, 我们还可以
让音乐自动载入, 让它出现控制面板或当背景音乐来使
用 。
基本语法,<embed src="音乐文件地址 ">
返回目录
32
5.8 多媒体标记符 — 多行文本输入框
src=“音乐文件地址,,用于设定音乐文件的路径
autostart=true/false,音乐文件传送完后是否自动播放,true是要,false是
不要，默认为 false。
loop=循环次数,设定播放重复次数,loop=3为重复 3次,true为无限次播
放,false播放一次即停止。
startime=“分,秒,,设定乐曲的开始播放时间，若 30秒后播放可写为
:startime=00:30。
volume=0-100:设定音量的大小。如果没设定的话，就用系统的音量。
width height:设定控制面板的大小。
hidden=true:隐藏控制面板。
controls=console/smallconsole:设定控制面板的样子。
返回目录
33
5.8 多媒体标记符 — 多行文本输入框
播放音乐举例
<html>
<head><title>播放音乐 </title></head>
<body text=#0000ff bgcolor=#ccff99>
下面的音乐是作为背景音乐来播放的 。 <p>
<embed src="xiangfengssg.mid" autostart=true hidden=true loop=6>
下面的音乐是用控制面板来控制播放的 <br>
<embed src="窗外,mp3" loop=true width=200 hight=150>
</body>
</html>
返回目录
34
本 章 小 结
? HTML概述
– HTML的主要语法是元素和标签 。 元素是符合文档类型定义的文档组
成部分, 标签用来规定元素的属性和它在文档中的位置 。 标签分单
独出现和成对出现两种情况 。
? HTML的一般标记符
– 每一个 HTML文件以 <html>开始, 以 </html>结束 。
– <head>是网页的头部标记, 通常紧跟 <html>之后 。
– <title>用来说明文件标题, TITLE元素的格式为,<title>文件题目
</title>
– <body>和 </body>之间是网页主体内容 。
? 文本标记符
– 在 HTML文档中, 文本也是由标签标注和控制的 。
– 滚动字幕能使网页生动活泼, 增加视觉效果 。 标签为,<marquee>…
</marquee>。
返回目录
35
本 章 小 结
? 列表标记符
– 列表用于列举事实, 常用的列表有 3种格式：无序列表 （ unordered
List）, 有序列表 （ ordered list） 和定义列表 （ definition
list） 。
– 首标签 <ol>和尾标签 </ol>之间的内容是有序列表的内容, 排序列表
的每一项必须用 <li>标签标识 。
– 无序列表是指列表内容可以按任意顺序排列 。 每一列表项前不是用
连续编号, 而是用一个特定符号来标记,
– 首标签 <dl>和尾标签 </dl>之间的内容就是定义列表的内容, 列表项
目用 <dt>引导, 它的说明用 <dd>引导 。
? 链接标记符
– 一个超文本链接指针由两部分组成：被指向的目标和锚点 。
– HTML文件用文字作锚点的格式是,<a href="URL">字符串 </a>。
– HTML 文 件 用 图 像 作 锚 点 的 格 式 是, <a href="URL"><img
src="URL"></a>。
返回目录
36
本 章 小 结
? 表格标记符
– <table>标记是定义表格的总标记, HTML要求一个表格的全部内容
包含在 <table>和 </table>标记之中 。
– 表格的定义顺序是首先定义表的一行, 行标记用 <tr>… </tr>,是成
对标签 。
– 单元格用标记 <td>… </td> 。
? 表单标记符
– 表单使网页具有交互功能 。
– 表单标记 <form>, 表单输入标记 <input> 。
? 多媒体标记符
– 插入图像的标签是 <img>,格式为,<img src=“图形文件地址, >。
– <bgsound> 标签用以插入背景音乐 。
返回目录
第 5章 网页设计语言 HTML
学习目标
? HTML的概念
? HTML的语法与结构
? 掌握 HTML的各种标记符号及其属性
? 能够制作简单网页
2
第 5章 网页设计语言 HTML
教学内容
5.1 HTML概述
5.2 HTML的一般标记符
5.3 文本标记符
5.4 列表标记符
5.5 链接标记符
5.6 表格标记符
5.7 表单标记符
5.8 多媒体标记符
本章小结
返回总目录
3
5.1 HTML概述
返回目录
HTML（ Hypertext Markup Language） 是最基本的 Web页面开发语
言, 称为文本文档标记语言 。 它不需要编译, 由浏览器 （ 如 IE） 解
释执行 。 HTML是纯文本文件, 可采用 Windows中的记事本或写字板
来编辑, 也可以用 DOS下的 Edit等文本编辑器, 保存时文件名的后缀
为,htm或,html。
HTML的主要语法是元素和标签 。 元素是符合文档类型定义的文档
组成部分, 如 title（ 文档标题 ）, img（ 图像 ）, table（ 表格 ）
等 。 元素名不区分大小写 。 标签用来规定元素的属性和它在文档中
的位置 。 标签分单独出现和成对出现两种情况 。
例如,<title>网页设计教程 </title>
title是元素名,<title>与 </title>之间的内容都属于元素 title，
<title>是标签，用来说明元素 title。
4
5.2 HTML的一般标记符 — 一个简单的网页
一个简单网页的制作
第一步：打开 Windows下的记事本 。
第二步：输入下面代码
<html>
<head>
<title> HTML网页设计教程 </title>
</head>
<body> 你好 ! 欢迎浏览本网页 ！ </body>
</html>
第三步：以 sample.htm为文件名保存文件并关闭该文件 。
第四步：双击 sample.htm文件，浏览器会自动执行它。
返回目录
5
5.2 HTML的一般标记符 — HTML文件格式特点
1,每一个 HTML文件以 <html>开始, 以 </html>结束, 浏览器遇到 <html>标志时, 会按
照 HTML的标准来解释后面的文本, 直到 </html>才停止解释 。 <html>和 </html>是成对出
现的, 所有的文本和命令都在它们之间 。
2,<head>是网页的头部标记, 通常紧跟 <html>之后 。 <head>与 </head>之间的文本是整
个文件的序言, 不属于 HTML文件本体部分, 不在浏览器屏幕中显示 。
3,<title>用来说明文件标题, TITLE元素的格式为,<title>文件题目 </title>, 一
个好的题目应该使读者能从中判断出该文件的大概内容 。 浏览时文件题目将显示在 IE浏
览器标题栏上 。 <title>中不包含其他标记 。
4,<body>和 </body>之间是网页主体内容 。 在 <body>标签中可以规定整个文档的一些
基本属性, 如：, bgcolor” 属性, 用于指定文档的背景颜色,“text” 属性用于指定文档中文
字的颜色 。
5,所有标记不得交叉, 如 <body>与 </body>必须包含在 <html>与 </html>中间 。
6,HTML文件对书写格式要求不太严格 。
返回目录
6
5.3 文本标记符 — 常用文本标记符
标 签 作 用
<br> <br>是单独出现的，作用相当于插入回车符。如果没有换行标签，Web浏览器窗口将根据浏览器窗口的宽度尽可能长的显示文本。
<Hi> <Hi>标签是成对出现的，夹在 <Hi>和 </Hi>之间的文字是文档中的标
题。标题文字都用黑体显示，上级标题总比下面各级标题更大些、
更粗些。 <Hi>标签共分六级，其中 <H1>标签括起的文字是第一级标
题，最大最粗，而 <H6>标签括起的文字是最后一级标题，最小最细。
<hr> <hr>标签是单独出现的，作用是换行并在该行下面画一条水平直线。它有三个属性值,SIZE,WIDTH和 ALIGN，分别用以规定水平线的
高度、宽度和水平线在浏览器窗口中的位置。
<p> P是 paragraph的意思，它用于划分段落，作用是换行并插入一个空白行,<p>标签可以单独使用，也可以成对使用。成对使用时，可以添
加 ALIGN属性，标出段落在浏览器中的位置。 ALIGN属性的参数值
有 left,center和 right，分别表示 <p>标签所括起的段落位于浏览器窗
口的左侧、中间、右侧。
返回目录
7
5.3 文本标记符 — 常用文本标记符
标 签 作 用
<pre> <pre>是预格式化标签,HTML的输出是基于窗口的，因而
HTML文件在输出时都要重新排版，对确实不需要重新排
版的内容，可以用 <pre>… <／ pre>通知浏览器。浏览器在
输出时，对 <pre>… <／ pre>括起来的内容几乎不做修改地
输出。
字符格式
标签
HTML文档的字符格式标签主要有 <b>,<i>和 <u>，它们
都成对出现。 <b>和 </b>之间的内容将显示为黑体文字，
<i>和 </i>之间的内容将显示为斜体,<u>和 </u>之间的内
容将显示为带下划线的文字。
<address> 地址标签，一般放在文档体的首部或尾部。 <address>和
</address>之间的内容通常是有关作者的信息，包括作者的
姓名、身份等等。
返回目录
8
5.3 文本标记符 — 常用文本标记符
例常用文本标记符举例
<html>
<head> <title> 有关文本标签的使用 </title> </head>
<body text=#ff0000 bgcolor=#ccff99>
这一个段落我们分两行显示, 需用到 <BR>标签, <br>
我们看如果我们不用 <BR>标签, 而只是在形式上分行的效果,
<b> 该段落到此结束 </b>
<p>
下面是第二段 。 该段只有一行, 在该行下面加一条绿色水平线 。
<hr size=10 width=160 align=left color=#00ff00>
</body>
</html>
说明,<BR>将 <br>作为纯文本符号而不是标记。
返回目录
9
5.3 文本标记符 — 滚动字幕
滚动字幕能使网页生动活泼, 增加视觉效果 。 标签为,<marquee>…
</marquee>。
<marquee>标签有这样几个常用属性：
1,derection属性, 用于指定文字移动方向, 属性值有,left,right。
2,behavior属性, 指定文字移动方式 。 属性值有,scroll,slide、
alternate,分别表示文字一圈一圈的绕着走, 只走一次, 来回走动 。
3,loop属性, 用于指定循环次数, 若不指定循环次数, 则表示循环不
止 。
4,scrollamount属性, 用于指定文字移动的速度 。
5,bgcolor属性, 用于指定文字背景色 。
返回目录
10
5.3 文本标记符 — 滚动字幕
例 5-3 滚动字幕举例
<html><head> <title>滚动字幕 </title> </head>
<body text=#ff0000 bgcolor=#ccff99>
<marquee>请进入音乐休闲屋 </marquee>
<marquee direction=left>看我还会动呢,并且是从右向左移动
</marquee> <p>
<marquee direction =right behavior=scroll>我从左向右一圈一圈的移动
</marquee > <p>
<marquee scrollamount=18>我是不是移动的比较快？
</marquee> <P>
<marquee loop=3 bgcolor=blue>我的底色是黄的, 我循环三次即停止移动
</marquee > <p>
</body> </html>
返回目录
11
5.4 列表标记符 — 有序列表
有序列表用于对网页中的一些内容进行编号排列, 以便读者清晰地了解其
每行的顺序 。
在 HTML中插入有序列表是通过 <ol><li>标签来实现的 。 首标签 <ol>和尾标
签 </ol>之间的内容是有序列表的内容, 排序列表的每一项必须用 <li>标签标识 。
例有序列表举例 <html>
<head> <title>有序列表 </title> </head>
<body bgcolor=#00ff00>
<p>下面是有序列表 </p>
<ol> <li>这是列表第一项
<li>这是列表第二项
<li>这是列表第三项
</ol>
</body>
</html>
返回目录
12
5.4 列表标记符 — 无序列表
无序列表是指列表内容可以按任意顺序排列 。 每一列表项前不是用连续编
号, 而是用一个特定符号来标记, 通常是在每一列表项前加上一个圆点儿 。
无序列表与有序列表的实现方法很相似, 只是用标记 <ul>来代替有序列表中
的 <ol>来代替列表中的 <ol>。
例无序列表举例
<html>
<head> <title> 无序列表 </title> </head>
<body>
以下是娱乐休闲版的列表：
<ul> <li>音乐
<li>影视
<li>游戏
</ul>
</body>
</html>
返回目录
13
5.4 列表标记符 — 定义列表
定义列表用于对清单条目进行简短说明, 首标签 <dl>和尾标签 </dl>之间的内
容就是定义列表的内容, 列表项目用 <dt>引导, 它的说明用 <dd>引导 。 通常
<dt>和 <dd>是成对出现的, 即一个列表项目对应一个说明项, 当然也可以一
个列表项目对应多个说明项 。
例定义列表举例
<html>
<head> <title>定义列表 </title> </head>
<body bgcolor=#FFFFFF>
下面是一个定义性列表：
<dl> <dt>计算机硬件
<dd>如软驱, 硬盘等
<dt>计算机软件
<dd>如系统软件, 应用软件
</dl>
</body>
</html>
返回目录
14
5.5 链接标记符
在浏览网页过程中, 有时点击某处的文字或图像会跳转
到另一部分, 这是因为在网页中使用了超文本链接 。 使用
超文本链接可以使顺序存放的文件在一定程度上具有随机
访问的能力, 更加符合人类的思维方式 。 支持文档的超连
接是 HTML最吸引人优点之一 。
一个超文本链接指针由两部分组成：被指向的目标和是
锚点 。 目标可以是同一文件的另一部分, 也可以是另一个
文件, 还可以是动画或音乐 。 而当用户把鼠标移到锚点时,
鼠标的形状会变成小手状, 这时点击鼠标, 就会跳转到链
接的目标 。
返回目录
15
5.5 链接标记符 — 不同文件间的链接
HTML文件用文字作锚点的格式是,<a href="URL">字符串 </a>。
HTML文件用图像作锚点的格式是,<a href="URL"><img src="URL"></a>。
用图像作锚点实际上是用 <img src="URL">取代了用文字作锚点中, 字符串,
的位置 。
HREF是链接中最常用的属性, 该属性用来指出所要链接文件的名称或 URL。
URL是统一资源定位器 (Uniform Resource Locator)。 对于自己主机内的文件,
它的 URL可以根据该文件的实际情况决定 。 对于因特网上的资源, 在用浏览
器观看时它的 URL会在浏览器的, 地址, 栏中显示出来, 把它抄下来写到你
的 HTML文件中即可 。 这个, 字符串, 就是锚点 。 用鼠标点这个字符串时, 浏
览器就会将 URL处的资源显示在屏幕上 。
<img src="URL">用来指明作为锚点的图像 。
例如,<a href=＂ mypicture.gif＂ >点此处看相片 </A>
网页上会显示字符串, 点此处看相片,, 当把鼠标移到这个字符串上时, 鼠
标会变成小手形状, 点击字符串就会显示文件, mypicture.gif”的内容 。
返回目录
16
5.5 链接标记符 — 同一文件间的链接
链接指针可以使读者在整个因特网网上方便的跳跃浏览, 当一个 HTML较长
时, 还可以在文件中建立一些链接, 实现同一文件中内容的跳跃浏览 。 对于
一个完整的文件, 可以用 URL来唯一地标识被指向的目标, 但对于同一文件
的不同部分, 被指向的目标是通过 <a>标记的 NAME属性来定义的 。
格式,<a name="name ">text</a>
说明,NAME属性用来给被链接的部分起名字并加标记, text是可选项 。
给被链接的部分起名字并加标记后, 可以用 <a href="URL#name">text </a>指
向它 。 其中的 URL是放置标记的 HTML文件的 URL,name是标记名, 对于同
一个文件, 可以写为 <a href="#name">text </a>。 这时就可以点取 text跳转到标
记名为 name的部分了 。
例如,<a name="白雪飘飘 ">这里白雪飘飘 </a>
<a href="＃白雪飘飘 ">点此进入白雪飘飘 </a>
这段代码, 为, 这里白雪飘飘, 作了标记, 白雪飘飘, 。 点击, 点此进入
白雪飘飘, 字符串可链接到, 这里白雪飘飘, 。
返回目录
17
5.5 链接标记符 — 在新窗口中显示被指向的目标
如果希望在一个新的窗口中显示被指向的目标,
可以使用 target属性 。
格式：
<a href="URL" target="新窗口名 ">字符串 </a>
它能将 URL代表的资源显示在一个新的窗口中,
该窗口的名字叫, 新窗口名, 。
返回目录
18
5.5 链接标记符 — 链接地图
图像链接中每幅图只能指向一个地点, 而图像地图可以把图像分成多个区域,
每个区域指向不同的目标文档 。
例链接地图举例
<html>
<head> <title>链接地图 </title> </head>
<body>
下面定义的是一个链接地图
<img src="F:\ZHOU ZHOU\JING.BMP" ismap usemap="#JY>
<map name="JY">
<area shape="rect" coords="100,80,130,120" href="water.html" >
<area shape="poly" coords="200,150,180,150,230,180" href="image.html">
<area shape ="circle" coords="150,130,60" href="太阳,jpg">
</map>
</body> </html>
返回目录
19
5.5 链接标记符 — 链接地图
在定义链接地图时, 首先要为链接源点的图像添加 ismap属性, 将图像定义
为地图 。 然后必须使用 usemap属性说明该图像是遵循哪个地图定义的 。
usemap属性的参数值为, #地图名, 。 HTML是通过 <map>标签和 <area>标签
来定义地图的 。 <map>标签有一个不可缺省的属性 name,参数值是地图名字,
比如上例中的 name="JY",其中, JY”是地图名 。 地图的区域划分是通过
<area>标签来实现的 。 <area>标签有三个属性, 就是上例中用到的 shape、
coords,href,分别表示该区域的形状, 范围和所链接到的目标文档 。 上例中
用到的 rect用于指定一个矩形区域, 该区域的位置由左上角坐标和右下角坐标
说明 。 poly 指定一个多边形区域, 该区域的位置由各顶点坐标说明 。 circle 指
定一个圆形区域, 该区域的位置由垂直通过圆心的直径与该圆的交点坐标说
明 。 上例中 <area shape="rect" coords="100,80,130,120" href="WATER.HTML" >
语句定义了一个矩形区域, 矩形的左上角坐标为 （ 100,80）, 右下角的坐标
为 （ 130, 120 ） 。 在该区 域的任 何位置点 击都可 以链接 到目标 文档
,WATER.HTML”。
返回目录
20
5.6 表格标记符
表格能将 HTML的内容按行或列的方式组织, 使网页的组织井然有序 。
<table>标记是定义表格的总标记, HTML要求一个表格的全部内容包含
在 <table>和 </table>标记之中 。 <table>标记中最常用属性是 border属性,
它的值表示以像素点为单位的边框宽度, 如 border=2表示边框为 2个像素
点 （ 像素点是位图的基本单位 ）, 如果不包含 border属性则默认无边框 。
此外, <table>标记还有 align属性, 取值为 left,right,center,分别表示将
表格定义在网页的左端, 右端或使表格居中 。
表是由行和列内的单元格组成的 。 表格的定义顺序是首先定义表的一行,
行标记用 <tr>… </tr>,是成对标签 。 然后依此是行的单元格, 单元格用标
记 <td>… </td>,如果一个表格中某个单元格的内容很长, 可以使用 <br>标
记强制内容折行 。 再定义第二行, 依次定义第二行的单元格 。 表的列由每
行包含的单元格数目自动计算得到 。 <th>… </th>标志用来设置表格头,
文字通常是黑体居中显示 。 为确保表中每列对齐, 应在每行包含相同单元
格 。
返回目录
21
5.6 表格标记符
此外, <tr>还有 align和 valign属性 。 align属性定义水平对
齐方式, 与 <table>标记的该属性相同 。 valign属性定义垂
直对齐方式, 取值为 top（ 顶端对齐 ）, middle（ 居中间对
齐 ） 或 bottom（ 底部对齐 ） 。 <td>具有 width,colspan、
rowspan和 nowrap属性 。 width是格的宽度, 单位用绝对像
素值或总宽度的百分比, colspan设置一个表格格子跨占的
列数 （ 缺省值为 1）, rowspan设置一个表格格子跨占的行
数 （ 缺省值为 1）, nowrap禁止单元格内的内容自动换行 。
表的标题使用 <caption>… </caption>标记, 一般放在表中
第一行的前面, <caption> 的属性包括对齐属性 align,取值
为 top,bottom,right,left,middle。
返回目录
22
5.6 表格标记符
例 表格的制作
<html>
<head> <title>表格标志的综合示例 </title> </head>
<body>
<table border="1" align="center">
<tr> <th colspan="1" valign="bottom">姓名 </th>
<th colspan="1" valign="bottom">性别 </th>
<th colspan="1" valign="bottom">分数 </th> </tr>
<tr> <td align="center">周 </td>
<td align="center">女 </td>
<td align="left">90</td></tr>
<tr> <td align="center">王 </td>
<td align="center">男 </td>
<td align="center">98</td></tr>
</table>
</body></html>
返回目录
23
5.7 表单标记符
我们上网时经常需要填写一些用户信息, 在 HTML中是通过表
单实现的 。 表单使网页具有交互功能, 在 Web页中提供表单让访
问者填写, 从而获得用户信息 。 一个表单至少应该包括说明性文
字, 用户填写的表格, 提交和重填按钮等内容 。 当用户填写完信
息做提交 （ submit） 操作后, 表单内容就从客户端的浏览器传送
到服务器上, 经过服务器上的 ASP 或 CGI 等处理程序处理后,
再将用户所需信息传送回客户端的浏览器, 网页便有了交互性 。
设计表单常用标记是,<form>,< input>,<option>,<select>、
<textarea>和 <isindex>等 。
返回目录
24
5.7 表单标记符 — 表单输入标记 <input>
此标记在表单中使用频繁, 大部分表单内容需要用到此标记 。 语法如下：
<input aligh=left/righ/top/middle/bottom
name=value
type=text/textarea/password/checkbox/radio/submit/reset/file/hidden/image/button
value=value
src=URL
checked
maxlength=n
size=n
onclick=function
onselect=function>
各项含义说明如下：
返回目录
25
5.7 表单标记符 — 表单输入标记 <input>
1,align用于设定表单的位置, 参数有,left,right,middle,top,bottom。
2,name是单行文字盒名称 。 比如我们要在该文本框中填写姓名, 可给文本框
起名,YOUR-NAME.
3,type决定了输入数据的类型 。
4,value用于设定默认值, 如果用户不输入的话, 就采用此默认值；
5,src是针对 type=image的情况来说的, 设定图像文件的地址；
6,checked指定复选项的初始状态, 表示该复选项在初始时是被选中的；
7,maxlength表示在输入单行文本的时候, 最大输入字符个数；
8,size用于设定在输入多行文本时的最大输入字符数；
9,onclick表示在按下按钮时调用指定的子程序；
10,onselect表示当前项被选择时调用指定的子程序 。
返回目录
26
5.7 表单标记符 — 表单输入标记 <input>
例制作一个表单
<html>
<head><title>表单实例 </title></head>
<body>
<p><hr></p>
请选择您喜欢的娱乐节目,<br>
<form action="http://www.yule.com/cgi-cin/item.exe" method="post">
<input type=checkbox name="happe1" value="非常六加一 ">
非常六加一 <br>
<input type= checkbox name ="happe2" value="开心辞典 ">
开心辞典 <br>
<input type=radio name="happe3" value="快乐大本营 ">
快乐大本营 <br>
</form>
<hr>
</body></html>
返回目录
27
5.7 表单标记符 — <select> 和 <option>标签
用 <select>标签和 <option>标签可以在表单中插入一个下拉列表框 。 首标签
<select>和尾标签 </select>之间的内容就是一个列表框的内容 。 <select>标签必须
和 <option>标签联合使用, 因为下拉菜单中的每个选项要用 <option>标签定义 。
<select>标签和 <option>标签语法如下：
<select name=nametext size=n multiple>
<option selected value=value> 请单击该图标看
</select> 下拉列表框举例
说明：
1,name设定下拉列表框的名称；
2,size设定列表框高度, 即一次显示几个菜单项, 一般取默认值 （ size="1"） ；
3,multiple设定可以进行多选 。
4,<option>标签定义下拉列表框中的一个选项, 其中 selected表示当前项被默
认选中, value表示该项对应的值, 当该项被选中之后, 该项的值会被送到服务
器进行处理 。
返回目录
28
5.7 表单标记符 — 多行文本输入 标签
建立多行文本输入框的专用标签, 其语法如下：
<textarea name=name cols=n rows=n wrap=off/hard/soft>
各参数含义：
name：文本框名称, cols：宽度, rows：高度 （ 行数 ）, wrap：换行
控制, 有三个属性值,off表示不自动换行； hard表示自动硬回车换行,
换行标记一同被传送到服务器中去； soft表示自动软回车换行, 换行
标记不会传送到服务器中去 。
表单所涉及的标记很多, 参数也比较复杂, 但一般的表单不可能涉
及所有参数, 实际制作表单时通常是组合应用这些标记 。 我们在制作
表单时要遵循一个原则：能用默认值的尽量用默认值, 绝不设定一个
不用的参数 。
返回目录
29
5.8 多媒体标记符 — 文本中插入图像
超文本支持的图像格式一般有 X Bitmap(XBM),GIF,JPEG三种,
所以我们对图片处理后要保存为这三种格式中的任何一种, 才可
以在浏览器中看到 。 插入图像的标签是 <img>,格式为,<img
src="图形文件地址 ">。
src属性指明了所要链接的图像文件所在地址, 这个图像文件可以
在本地机器上, 也可以位于远端主机上 。 地址的表示方法可以沿
用 3.4节, 链接标记符, 中 URL地址表示方法 。 img还有两个属性是
height和 width,分别表示图形的高度和宽度 。
网页上不仅有图形还有文字, 文字与图形之间有各种不同的对
齐方式, 用 align 属性定义对齐方式 。 align 的取值可以是
top|middle|bottom|right|left。 图文之间的距离用属性 hspace和 vspace
来规定, 分别表示文字与图像的水平距离和垂直距离 。
返回目录
30
5.8 多媒体标记符 — 插入背景音乐
<bgsound> 标签用以插入背景音乐, 但只在 IE中才能
听到 。 其格式如下：
<bgsound src="音乐文件的地址 " autostart=true/false
loop=循环次数 >
src用来指出音乐文件地址； autostart 用来指出在音乐
下载传送完之后是否自动播放, 默认 false（ 否 ）, 选
true（ 是 ） 则自动播放； Loop用来指出播放的次数 。
Loop=3表示重复三次, Infinite 表示重复多次 。
返回目录
31
5.8 多媒体标记符 — 插入背景音乐
要在浏览网页时听音乐, 可将音乐做成一个链接, 只
需用鼠标在锚点上单击, 就可以听到动人的音乐了 。 其
基本格式与前面讲的链接标记符相同：
<a href="音乐地址 ">乐曲名 </a>
除了借助链接实现网上播放音乐的功能, 我们还可以
让音乐自动载入, 让它出现控制面板或当背景音乐来使
用 。
基本语法,<embed src="音乐文件地址 ">
返回目录
32
5.8 多媒体标记符 — 多行文本输入框
src=“音乐文件地址,,用于设定音乐文件的路径
autostart=true/false,音乐文件传送完后是否自动播放,true是要,false是
不要，默认为 false。
loop=循环次数,设定播放重复次数,loop=3为重复 3次,true为无限次播
放,false播放一次即停止。
startime=“分,秒,,设定乐曲的开始播放时间，若 30秒后播放可写为
:startime=00:30。
volume=0-100:设定音量的大小。如果没设定的话，就用系统的音量。
width height:设定控制面板的大小。
hidden=true:隐藏控制面板。
controls=console/smallconsole:设定控制面板的样子。
返回目录
33
5.8 多媒体标记符 — 多行文本输入框
播放音乐举例
<html>
<head><title>播放音乐 </title></head>
<body text=#0000ff bgcolor=#ccff99>
下面的音乐是作为背景音乐来播放的 。 <p>
<embed src="xiangfengssg.mid" autostart=true hidden=true loop=6>
下面的音乐是用控制面板来控制播放的 <br>
<embed src="窗外,mp3" loop=true width=200 hight=150>
</body>
</html>
返回目录
34
本 章 小 结
? HTML概述
– HTML的主要语法是元素和标签 。 元素是符合文档类型定义的文档组
成部分, 标签用来规定元素的属性和它在文档中的位置 。 标签分单
独出现和成对出现两种情况 。
? HTML的一般标记符
– 每一个 HTML文件以 <html>开始, 以 </html>结束 。
– <head>是网页的头部标记, 通常紧跟 <html>之后 。
– <title>用来说明文件标题, TITLE元素的格式为,<title>文件题目
</title>
– <body>和 </body>之间是网页主体内容 。
? 文本标记符
– 在 HTML文档中, 文本也是由标签标注和控制的 。
– 滚动字幕能使网页生动活泼, 增加视觉效果 。 标签为,<marquee>…
</marquee>。
返回目录
35
本 章 小 结
? 列表标记符
– 列表用于列举事实, 常用的列表有 3种格式：无序列表 （ unordered
List）, 有序列表 （ ordered list） 和定义列表 （ definition
list） 。
– 首标签 <ol>和尾标签 </ol>之间的内容是有序列表的内容, 排序列表
的每一项必须用 <li>标签标识 。
– 无序列表是指列表内容可以按任意顺序排列 。 每一列表项前不是用
连续编号, 而是用一个特定符号来标记,
– 首标签 <dl>和尾标签 </dl>之间的内容就是定义列表的内容, 列表项
目用 <dt>引导, 它的说明用 <dd>引导 。
? 链接标记符
– 一个超文本链接指针由两部分组成：被指向的目标和锚点 。
– HTML文件用文字作锚点的格式是,<a href="URL">字符串 </a>。
– HTML 文 件 用 图 像 作 锚 点 的 格 式 是, <a href="URL"><img
src="URL"></a>。
返回目录
36
本 章 小 结
? 表格标记符
– <table>标记是定义表格的总标记, HTML要求一个表格的全部内容
包含在 <table>和 </table>标记之中 。
– 表格的定义顺序是首先定义表的一行, 行标记用 <tr>… </tr>,是成
对标签 。
– 单元格用标记 <td>… </td> 。
? 表单标记符
– 表单使网页具有交互功能 。
– 表单标记 <form>, 表单输入标记 <input> 。
? 多媒体标记符
– 插入图像的标签是 <img>,格式为,<img src=“图形文件地址, >。
– <bgsound> 标签用以插入背景音乐 。
返回目录
