武汉大学 web程序设计 二,HTML（上） 1
第 3讲 HTML基础 （下） 总结武汉大学 web程序设计 二,HTML（上） 2
浏览 WWW
World Wide Web简称 WWW，也称万维网。
网页 (Web页 ),浏览器中所看到的画面
Web站点,多个相关的 Web页组合
Web服务器,放置 Web站点的计算机
HTML文件武汉大学 web程序设计 二,HTML（上） 3
什么是 URL？
URL结构,协议类型、存放资源的主机地址、端口、路径、文件名统一资源定位规范 URL Uniform Resource Locator定位资源信息
http://www.cctv.com:8080/special/index.htm
协议类型 主机地址 网页文件端口号 路径
WWW服务的默认端口是多少？
武汉大学 web程序设计 二,HTML（上） 4
WWW服务的工作原理网页存放在 WEB服务器中用户通过浏览器向服务器发出请求服务器如接受请求，返回某个页面给客户浏览器收到页面后解释、显示
HTML（ Hypertext Markup
language）超文本标记语言
HTTP（ Hypertext Transfer
Protocol）超文本传输协议武汉大学 web程序设计 二,HTML（上） 5
一、全局结构二、文字（ Font）
三、图像（ Image）
四、链接（ link）
五、表格（ Table）
六、表单（ Form）
内容提要武汉大学 web程序设计 二,HTML（上） 6
一、全局结构
HTML的组成结构 （ 头部和身体 ---好像人一样 )
1,头部 。
<head>头部的内容 </head>
2,身体 。
<body>页面内容 </body>
最后,别忘了把这些部分组成一体 ----网页,所以咱们就用 <html></html>把他们给包起来 。
武汉大学 web程序设计 二,HTML（上） 7
例 1:sample2_1.htm
<html>
<head>
<title>武汉大学 </title>
</head>
<body>
庆祝武汉大学建校 110周年 !
</body>
</html>
武汉大学 web程序设计 二,HTML（上） 8
meta标签
根据 HTML语言标准注释,meta标签是对网站发展非常重要的标签,它可以用于鉴别作者,设定页面格式,标注内容提要和关键字,以及刷新页面等等 。
meta标签分两大部分,HTTP-EQUIV和 NAME
变量。
武汉大学 web程序设计 二,HTML（上） 9
HTTP-EQUIV类似于 HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的 HTTP-EQUIV类型有：
1.expires(期限 )
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。用法,<META HTTP-EQUIV="expires" CONTENT="Wed,26 Feb 1997 08:21:57 GMT">
2.Pragma(cach模式 )
说明：禁止浏览器从本地机缓存调阅页面内容,访问者将无法脱机浏览,
用法,<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
3.Refresh(刷新 )
说明：需要定时让网页自动链接到其它网页的话，就用这句了。
用法,<META HTTP-EQUIV=“Refresh”
CONTENT=“5;URL=http://www.yahoo.com”>
4.Window-target(显示窗口的设定 )
说明：强制页面在当前窗口以独立页面显示。
用法,<META HTTP-EQUIV=“Window-target” CONTENT=“_top”>
5.Content-Type(显示字符集的设定 )
说明：设定页面使用的字符集。
用法,<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
武汉大学 web程序设计 二,HTML（上） 10
meta标签
meta标签的 NAME变量语法格式是：
<META NAME=“xxx” CONTENT=“yyy”>
其中 xxx主要有下面几种参数：
1.Keywords(关键字 )
说明,keywords用来告诉搜索引擎你网页的关键字是什么。
举例,<META NAME ="keywords"
CONTENT="life,universe,mankind,
plants,relationships">
武汉大学 web程序设计 二,HTML（上） 11
meta标签
2.description(简介 )
说明,description用来告诉搜索引擎你的网站主要内容。
3.robots(机器人向导 )
说明,robots用来告诉搜索机器人哪些页面需要索引，
哪些页面不需要索引。
4.author(作者 )
说明：标注网页的作者举例,<META name="AUTHOR"
content=“gaojh_whu@sohu.com">
武汉大学 web程序设计 二,HTML（上） 12
META标签用法示例
<html>
<head>
<meta http-equiv="Content-Type " content="text/html;
charset=gb2312">
< meta name ="keywords" content="life,science">
<title>武汉大学 </title>
</head>
<body>
我爱北京天安门
</body>
</html>
武汉大学 web程序设计 二,HTML（上） 13
页面 (PAGE)标记
1、背景颜色
<body bgcolor="red">
我们发现多了个 bgcolor其实就是
backgroundcolor（背景颜色）的意思，
bgcolor=“red”设置网页的背景颜色为红色，现在颜色一般都是 #ff0000样式的。
武汉大学 web程序设计 二,HTML（上） 14
页面 (PAGE)标记
2、背景图片
<body backgroud＝ "back-ground.gif">
back-ground.gif是背景图片的名字，即图片的
URL,可以使用相对于当前页面的相对路径表示，比如你做的这个页面放在 c:\我的网站 \，而背景图片的位置放在 c:\我的网站 \images\，那么就得这样写了：
<body backgroud＝ "images\back-ground.gif">
武汉大学 web程序设计 二,HTML（上） 15
页面 (PAGE)标记
3、背景音乐
<bgsound src=“eat.mid,loop=”-1”>
注意：这段代码是放在页面的头部 <head></head>里
SRC:设置为背景音乐的 URL
Loop:循环次数，那么 loop="-1"是无限循环的意思，
只要是页面打开，音乐不会停止的,loop="1"说明循环一次，等于 0就是不循环了！
武汉大学 web程序设计 二,HTML（上） 16
页面 (PAGE)标记
4,body其它属性,topmargin,leftmargin。
有的朋友再做页面的时候，感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边，怎么回事呢？
因为一般我们用的制作软件或者说 html语言默认的都是 topmargin和 leftmargin值等于 12，如果你把他们的值设为 0。
例,<body topmargin=0 leftmargin=0>
武汉大学 web程序设计 二,HTML（上） 17
文字 (Font)
1、标题字体 (Header)
<h#>,.,</h#> #=1,2,3,4,5,6
例 2：
<h1>今天天气真好！ </h1>
<h2>今天天气真好！ </h2>
<h3>今天天气真好！ </h3>
<h4>今天天气真好！ </h4>
<h5>今天天气真好！ </h5>
<h6>今天天气真好！ </h6>
武汉大学 web程序设计 二,HTML（上） 18
文字 (Font)
2、一般文字
文字的大小
<font size=#> 文字 </font>
#=1,2,3,4,5,6,7 or +#,-#
<basefont size=#> #=1,2,3,4,5,6,7
例,<font size=7>今天天气真好！ </font>
武汉大学 web程序设计 二,HTML（上） 19
文字 (Font)
文字的客户端字体
<font face=“#">文字 </font>
#=宋体、黑体,Arial等
例 3：
<font face=“黑体” >好真好！ </font>
武汉大学 web程序设计 二,HTML（上） 20
文字 (Font)
文字的颜色
<font color=#> 文字 </font>
# =“#rrggbb” 16 进制数码，或者是预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,
Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
对于 16 进制编码的颜色，我们可以这样理解 rrggbb六个字符,r表示红色,g表示绿色,b表示蓝色。
例,<font color=red>文字 </font> 红色文字
<font color=#ffff00>文字 </font> 黄色文字武汉大学 web程序设计 二,HTML（上） 21
文字 (Font)
文字效果
下划线,<u>文字 </u>
加粗,<b>文字 </b>
倾斜,<i>文字 </i>
上标,<sup>文字 </sup>
下标,<sub>文字 </sub>
删除线,<s>文字 </s>
例 4:
武汉大学 web程序设计 二,HTML（上） 22
文字
文字布局 (TEXT STYLE)标记段 (Paragraph) <p>
换行 <br>
不换行 <nobr>
例,<p>我们都是中国人。 </p>
我们都是 <br>中国人。
<nobr>我们都是中国人。 </nobr>
武汉大学 web程序设计 二,HTML（上） 23
图像
<img src=#1 alt=#2 align=#3 vspace=#4
hspace=#5 border=#6 width=#7 height=#8>
#1:要显示的图象的 URL
#2:图象未显示的代替文字
#3:对齐方式 (top,middle,bottom等 )
#4:垂直边距 #5,水平边距
#6:边框宽度
例 5：
武汉大学 web程序设计 二,HTML（上） 24
链接 a
LINK元素
<a name="text" rel="text" href="URL,target=“”>
在当前文档和另一文档之间建立链接关系。 name属性给链接起一个名字，比如,Mail to Author”（发给作者），
rel属性描述了链接的类型，比如,made”（表示作者），
,parent”（表示文档是大文档的一部分），,next”（表示是多文件文档的后续部分），及,pre”（表示前序部分）。 href属性指向相关的文档。
<a href="#abc">abc</a>
title<a name="abc"></a>
sdfsdfsdfhdsjkf
武汉大学 web程序设计 二,HTML（上） 25
链接 target
,目标,使您可以指定将链接文档加载到的框架或窗口：
,_blank”将链接文件加载到未命名的新浏览器窗口中。
,_parent”将链接文件加载到包含链接的父框架页或窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
,_self”将链接文件加载到链接所在的同一框架或窗口中。此目标是隐式的，因此通常不需要指定它。
,_top”将链接文件加载到整个浏览器窗口中，并由此删除所有框架。
武汉大学 web程序设计 二,HTML（上） 26
表格 (Table)
表格的基本语法：
<table>...</table> - 定义表格
<tr>,..</tr>- 定义表行
<th>,..</th>- 定义表头
<td>,..</td>- 定义表元武汉大学 web程序设计 二,HTML（上） 27
表格 (Table)
<table border width=160>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</tr>
</table>
武汉大学 web程序设计 二,HTML（上） 28
表单 (Form)
对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着 CGI、
JAVA Script程序或是 ASP程序来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段！
武汉大学 web程序设计 二,HTML（上） 29
表单 (Form)
表单的基本语法
<form action="url" method=*>
..,
..,
<input type=submit>
<input type=reset>
</form>
注,method为 Post或 Get
武汉大学 web程序设计 二,HTML（上） 30
表单控件
INPUT元素
基本语法,<input type=* value=**>
Type,text 文本输入框
password 密码输入框
submit 确认按钮
reset 重置按钮
button 一般按钮
hidden 隐藏元素
checkbox 多选框
radio 单选框武汉大学 web程序设计 二,HTML（上） 31
表单控件
TEXTAREA 文本区域
基本语法：
<textarea name=* rows=** cols=**>
,..
</textarea>
武汉大学 web程序设计 二,HTML（上） 32
表单控件
SELECT 列表框
基本语法：
<select name=fruits size=3 multiple>
<option value=1 >选项 1</option>
<option value=2 >选项 2 </option>
<option value=3 selected >选项 3 </option>
<option value=4 >选项 4</option>
</select>
第 3讲 HTML基础 （下） 总结武汉大学 web程序设计 二,HTML（上） 2
浏览 WWW
World Wide Web简称 WWW，也称万维网。
网页 (Web页 ),浏览器中所看到的画面
Web站点,多个相关的 Web页组合
Web服务器,放置 Web站点的计算机
HTML文件武汉大学 web程序设计 二,HTML（上） 3
什么是 URL？
URL结构,协议类型、存放资源的主机地址、端口、路径、文件名统一资源定位规范 URL Uniform Resource Locator定位资源信息
http://www.cctv.com:8080/special/index.htm
协议类型 主机地址 网页文件端口号 路径
WWW服务的默认端口是多少？
武汉大学 web程序设计 二,HTML（上） 4
WWW服务的工作原理网页存放在 WEB服务器中用户通过浏览器向服务器发出请求服务器如接受请求，返回某个页面给客户浏览器收到页面后解释、显示
HTML（ Hypertext Markup
language）超文本标记语言
HTTP（ Hypertext Transfer
Protocol）超文本传输协议武汉大学 web程序设计 二,HTML（上） 5
一、全局结构二、文字（ Font）
三、图像（ Image）
四、链接（ link）
五、表格（ Table）
六、表单（ Form）
内容提要武汉大学 web程序设计 二,HTML（上） 6
一、全局结构
HTML的组成结构 （ 头部和身体 ---好像人一样 )
1,头部 。
<head>头部的内容 </head>
2,身体 。
<body>页面内容 </body>
最后,别忘了把这些部分组成一体 ----网页,所以咱们就用 <html></html>把他们给包起来 。
武汉大学 web程序设计 二,HTML（上） 7
例 1:sample2_1.htm
<html>
<head>
<title>武汉大学 </title>
</head>
<body>
庆祝武汉大学建校 110周年 !
</body>
</html>
武汉大学 web程序设计 二,HTML（上） 8
meta标签
根据 HTML语言标准注释,meta标签是对网站发展非常重要的标签,它可以用于鉴别作者,设定页面格式,标注内容提要和关键字,以及刷新页面等等 。
meta标签分两大部分,HTTP-EQUIV和 NAME
变量。
武汉大学 web程序设计 二,HTML（上） 9
HTTP-EQUIV类似于 HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的 HTTP-EQUIV类型有：
1.expires(期限 )
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。用法,<META HTTP-EQUIV="expires" CONTENT="Wed,26 Feb 1997 08:21:57 GMT">
2.Pragma(cach模式 )
说明：禁止浏览器从本地机缓存调阅页面内容,访问者将无法脱机浏览,
用法,<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
3.Refresh(刷新 )
说明：需要定时让网页自动链接到其它网页的话，就用这句了。
用法,<META HTTP-EQUIV=“Refresh”
CONTENT=“5;URL=http://www.yahoo.com”>
4.Window-target(显示窗口的设定 )
说明：强制页面在当前窗口以独立页面显示。
用法,<META HTTP-EQUIV=“Window-target” CONTENT=“_top”>
5.Content-Type(显示字符集的设定 )
说明：设定页面使用的字符集。
用法,<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
武汉大学 web程序设计 二,HTML（上） 10
meta标签
meta标签的 NAME变量语法格式是：
<META NAME=“xxx” CONTENT=“yyy”>
其中 xxx主要有下面几种参数：
1.Keywords(关键字 )
说明,keywords用来告诉搜索引擎你网页的关键字是什么。
举例,<META NAME ="keywords"
CONTENT="life,universe,mankind,
plants,relationships">
武汉大学 web程序设计 二,HTML（上） 11
meta标签
2.description(简介 )
说明,description用来告诉搜索引擎你的网站主要内容。
3.robots(机器人向导 )
说明,robots用来告诉搜索机器人哪些页面需要索引，
哪些页面不需要索引。
4.author(作者 )
说明：标注网页的作者举例,<META name="AUTHOR"
content=“gaojh_whu@sohu.com">
武汉大学 web程序设计 二,HTML（上） 12
META标签用法示例
<html>
<head>
<meta http-equiv="Content-Type " content="text/html;
charset=gb2312">
< meta name ="keywords" content="life,science">
<title>武汉大学 </title>
</head>
<body>
我爱北京天安门
</body>
</html>
武汉大学 web程序设计 二,HTML（上） 13
页面 (PAGE)标记
1、背景颜色
<body bgcolor="red">
我们发现多了个 bgcolor其实就是
backgroundcolor（背景颜色）的意思，
bgcolor=“red”设置网页的背景颜色为红色，现在颜色一般都是 #ff0000样式的。
武汉大学 web程序设计 二,HTML（上） 14
页面 (PAGE)标记
2、背景图片
<body backgroud＝ "back-ground.gif">
back-ground.gif是背景图片的名字，即图片的
URL,可以使用相对于当前页面的相对路径表示，比如你做的这个页面放在 c:\我的网站 \，而背景图片的位置放在 c:\我的网站 \images\，那么就得这样写了：
<body backgroud＝ "images\back-ground.gif">
武汉大学 web程序设计 二,HTML（上） 15
页面 (PAGE)标记
3、背景音乐
<bgsound src=“eat.mid,loop=”-1”>
注意：这段代码是放在页面的头部 <head></head>里
SRC:设置为背景音乐的 URL
Loop:循环次数，那么 loop="-1"是无限循环的意思，
只要是页面打开，音乐不会停止的,loop="1"说明循环一次，等于 0就是不循环了！
武汉大学 web程序设计 二,HTML（上） 16
页面 (PAGE)标记
4,body其它属性,topmargin,leftmargin。
有的朋友再做页面的时候，感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边，怎么回事呢？
因为一般我们用的制作软件或者说 html语言默认的都是 topmargin和 leftmargin值等于 12，如果你把他们的值设为 0。
例,<body topmargin=0 leftmargin=0>
武汉大学 web程序设计 二,HTML（上） 17
文字 (Font)
1、标题字体 (Header)
<h#>,.,</h#> #=1,2,3,4,5,6
例 2：
<h1>今天天气真好！ </h1>
<h2>今天天气真好！ </h2>
<h3>今天天气真好！ </h3>
<h4>今天天气真好！ </h4>
<h5>今天天气真好！ </h5>
<h6>今天天气真好！ </h6>
武汉大学 web程序设计 二,HTML（上） 18
文字 (Font)
2、一般文字
文字的大小
<font size=#> 文字 </font>
#=1,2,3,4,5,6,7 or +#,-#
<basefont size=#> #=1,2,3,4,5,6,7
例,<font size=7>今天天气真好！ </font>
武汉大学 web程序设计 二,HTML（上） 19
文字 (Font)
文字的客户端字体
<font face=“#">文字 </font>
#=宋体、黑体,Arial等
例 3：
<font face=“黑体” >好真好！ </font>
武汉大学 web程序设计 二,HTML（上） 20
文字 (Font)
文字的颜色
<font color=#> 文字 </font>
# =“#rrggbb” 16 进制数码，或者是预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,
Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
对于 16 进制编码的颜色，我们可以这样理解 rrggbb六个字符,r表示红色,g表示绿色,b表示蓝色。
例,<font color=red>文字 </font> 红色文字
<font color=#ffff00>文字 </font> 黄色文字武汉大学 web程序设计 二,HTML（上） 21
文字 (Font)
文字效果
下划线,<u>文字 </u>
加粗,<b>文字 </b>
倾斜,<i>文字 </i>
上标,<sup>文字 </sup>
下标,<sub>文字 </sub>
删除线,<s>文字 </s>
例 4:
武汉大学 web程序设计 二,HTML（上） 22
文字
文字布局 (TEXT STYLE)标记段 (Paragraph) <p>
换行 <br>
不换行 <nobr>
例,<p>我们都是中国人。 </p>
我们都是 <br>中国人。
<nobr>我们都是中国人。 </nobr>
武汉大学 web程序设计 二,HTML（上） 23
图像
<img src=#1 alt=#2 align=#3 vspace=#4
hspace=#5 border=#6 width=#7 height=#8>
#1:要显示的图象的 URL
#2:图象未显示的代替文字
#3:对齐方式 (top,middle,bottom等 )
#4:垂直边距 #5,水平边距
#6:边框宽度
例 5：
武汉大学 web程序设计 二,HTML（上） 24
链接 a
LINK元素
<a name="text" rel="text" href="URL,target=“”>
在当前文档和另一文档之间建立链接关系。 name属性给链接起一个名字，比如,Mail to Author”（发给作者），
rel属性描述了链接的类型，比如,made”（表示作者），
,parent”（表示文档是大文档的一部分），,next”（表示是多文件文档的后续部分），及,pre”（表示前序部分）。 href属性指向相关的文档。
<a href="#abc">abc</a>
title<a name="abc"></a>
sdfsdfsdfhdsjkf
武汉大学 web程序设计 二,HTML（上） 25
链接 target
,目标,使您可以指定将链接文档加载到的框架或窗口：
,_blank”将链接文件加载到未命名的新浏览器窗口中。
,_parent”将链接文件加载到包含链接的父框架页或窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
,_self”将链接文件加载到链接所在的同一框架或窗口中。此目标是隐式的，因此通常不需要指定它。
,_top”将链接文件加载到整个浏览器窗口中，并由此删除所有框架。
武汉大学 web程序设计 二,HTML（上） 26
表格 (Table)
表格的基本语法：
<table>...</table> - 定义表格
<tr>,..</tr>- 定义表行
<th>,..</th>- 定义表头
<td>,..</td>- 定义表元武汉大学 web程序设计 二,HTML（上） 27
表格 (Table)
<table border width=160>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</tr>
</table>
武汉大学 web程序设计 二,HTML（上） 28
表单 (Form)
对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着 CGI、
JAVA Script程序或是 ASP程序来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段！
武汉大学 web程序设计 二,HTML（上） 29
表单 (Form)
表单的基本语法
<form action="url" method=*>
..,
..,
<input type=submit>
<input type=reset>
</form>
注,method为 Post或 Get
武汉大学 web程序设计 二,HTML（上） 30
表单控件
INPUT元素
基本语法,<input type=* value=**>
Type,text 文本输入框
password 密码输入框
submit 确认按钮
reset 重置按钮
button 一般按钮
hidden 隐藏元素
checkbox 多选框
radio 单选框武汉大学 web程序设计 二,HTML（上） 31
表单控件
TEXTAREA 文本区域
基本语法：
<textarea name=* rows=** cols=**>
,..
</textarea>
武汉大学 web程序设计 二,HTML（上） 32
表单控件
SELECT 列表框
基本语法：
<select name=fruits size=3 multiple>
<option value=1 >选项 1</option>
<option value=2 >选项 2 </option>
<option value=3 selected >选项 3 </option>
<option value=4 >选项 4</option>
</select>
