HTML语言与网页设计
——HTML基础
什么是 HTML
?万维网
?Web
?页面
?HTML
万维网
?万维网是一个大规模的在线（ on-line）
信息集合，可以通过一种叫做浏览器
（ browser）的应用程序进行检索与
查看。
Web
?Web 是一个支持交互式访问的分布
式超媒体系统。
?不论是在超文本系统还是在超媒体系
统，信息都是以文档集的形式存贮的。
在文档中除了包括基本信息以外，还
可以包括指向文档集中其他文档的指
针。例如,图
页面
?Web上的一个超媒体文档称为一个页
面（ Page）；
?作为一个组织或个人在 WWW（或其
他 Web）上开始点的页面称为主页
（ Homepage）；
页面
?在逻辑上可视为一个整体的一系列页
面的有机集合称为网站（ Web Site或
Site）。
HTML
?HTML(Hypertext Markup
Language) 是一种规范，一种标准，
它通过标记符（ tag）来标记要显示
的网页的各个部分。
HTML
?通过在网页中添加标记符，可以告诉
浏览器如何显示网页，即确定内容的
格式。浏览器按顺序阅读网页文件
（ HTML文件），然后根据内容周围
的 HTML标记符解释和显示各种内容。
演示 ——HTML的基本原理
标记符基础
?概述
?属性
概述
?在 HTML 中，所有的标记符都用尖
括号括起来。
?HTML 标记符是不区分大小写的。
概述
?某些标记符，例如换行标记符 <BR>，
只要求单一标记符号。但绝大多数标
记符都是成对出现的，包括开始标记
符和结束标记符。开始标记符和相应
的结束标记符定义了标记符所影响的
范围。
属性
属性是用来描述对象特征的特性。例
如，一个人的身高、体重就是人这
个对象的属性。
?在 HTML中，所有的属性都放置在开
始标记符的尖括号里，通常也不区
分大小写。
属性
?例如，可以用字体标记符和字号属
性指定文字的大小。 <FONT
SIZE=1>本行字将以较小字体显示。
</FONT>
演示 ——属性的作用
Web页的基本结构
?概述
?HTML标记符
?HEAD标记符
?BODY标记符
?小节
概述
?一个 Web 页实际上对应于一个
HTML 文件,HTML 文件以,htm
或,html 为扩展名。
?最基本的 HTML文档包括,HTML标
记 <HTML></HTML>、首部标记
<HEAD>和 </HEAD>、以及正文
<BODY></BODY>。
HTML标记符
?<HTML>和 </HTML> 是 Web页的第一个
和最后一个标记符,Web 页的其他所
有内容都位于这两个标记符之间。这
两个标记告诉浏览器或其他阅读该页
的程序，此文件为一个 Web页。
HEAD标记符
?首部标记 <HEAD>和 </HEAD>位于
Web 页的开头，其中不包括 Web 页
的任何实际内容，而是提供一些与
Web 页有关的特定信息。
HEAD标记符
?首部标记中的内容也用相应的标记符
括起来。例如，样式表（ CSS）定义
位于 <STYLE>和 </STYLE>之间；脚
本定义位于 <SCRIPT></SCRIPT>之
间。
TITLE 标记符
?在首部标记符中，最基本、最常用的
标记符是标题标记 <TITLE>和
</TITLE>，用于定义网页的标题。
?当网页在浏览器中显示时，网页标题
将在浏览器窗口的标题栏中显示。
演示 ——TITLE的作用
BODY标记符
?正文标记符 <BODY>和 </BODY>包
含 Web 页的内容。文字、图形、链
接以及其他 HTML元素都位于该标记
符内。
BODY标记符
?正文标记符中的文字，如果没有其他
标记符修饰，则将以无格式的形式显
示。
?注意：空格、回车这些格式控制在显
示时都不起作用，如要使它们起作用，
应使用预格式化元素 <PRE>和
</PRE>
演示 ——BODY标记符中的内容无格式
小节
?综上所述，一个不包含任何内容的基
本 Web 页文件如下所示：
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY></BODY>
</HTML>
添加注释
?不论是编写程序还是制作网页，为所
做的工作添加注释都是一种良好的工
作习惯。实际上，添加注释是任何开
发工作必须遵循的规范之一。
添加注释
?HTML 的注释由开始标记符 <!-- 和结
束标记符 --> 构成。这两个标记符之
间的任何内容都将被浏览器解释为注
释，而不在浏览器中显示。
演示 ——添加注释
显示特殊字符
?如果用户需要在网页中显示某些特殊
字符，例如,<（小于号）,>（大于
号）,” （引号）等，则需使用参考
字符来表示，而不能直接输入。
?参考字符以, &”号开始，以, ；, 结
束，既可以使用数字代码，也可以使
用代码名称。
显示特殊字符
例如，要在 Web 页中显示以下内容，
则需使用参考字符：, 1+1>2”
<BODY>1+1>2</BODY>
演示 ——特殊字符的显示
页面背景与颜色控制
?(1)页面背景
– 背景颜色
– 背景图案
?(2)字符和链接的颜色
背景颜色
?在 <BODY>标记符中使用 BGCOLOR
属性可以为网页设置背景颜色。
?在 HTML 中，除了使用颜色名称以
外，还可以用格式 #RRGGBB 来表
示颜色。
演示 ——设置网页背景颜色
背景图案
?使用 BODY 标记符的
BACKGROUND 属性可以设置背景
图案。 HTML语句为：
?<BODY BACKGROUND =
“image.gif”>
演示 ——设置网页背景图案
字符和链接的颜色
?设置正文和链接颜色时，可以使用
BODY 标记符的 TEXT,LINK、
VLINK 和 ALINK 属性。
字符和链接的颜色
?其中,TEXT 属性用于设置正文的颜
色； LINK 属性用于设置未被访问的
链接的颜色； VLINK 用于设置已被访
问过的链接的颜色； ALINK 用于设
置活动链接（即当前选定的链接）的
颜色。
演示 ——设置网页背景声音
?在 HEAD中添加：
– <BGSOUND src=“soundfileURL”>
总结
? Web 是一个支持交互式访问的分布
式超媒体系统。
? Web 上的一个超媒体文档称为一个
页面（ Page）。
?
总结
?HTML 是用来表示 Web 文档的规范，
它使用标记符确定 Web 页内容显示
的格式。
? 最基本的 HTML 标记符是
<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>。
总结
? HTML 的注释由标记符 <!-- 和 --> 构
成。
? 在 Web 页中显示特殊字符需用参考
字符。
?
总结
? BODY 标记符中的 BGCOLOR、
BACKGROUND,TEXT,LINK、
ALINK和 VLINK 等属性可用于设置
文档的背景以及字符和链接的颜色。
——HTML基础
什么是 HTML
?万维网
?Web
?页面
?HTML
万维网
?万维网是一个大规模的在线（ on-line）
信息集合，可以通过一种叫做浏览器
（ browser）的应用程序进行检索与
查看。
Web
?Web 是一个支持交互式访问的分布
式超媒体系统。
?不论是在超文本系统还是在超媒体系
统，信息都是以文档集的形式存贮的。
在文档中除了包括基本信息以外，还
可以包括指向文档集中其他文档的指
针。例如,图
页面
?Web上的一个超媒体文档称为一个页
面（ Page）；
?作为一个组织或个人在 WWW（或其
他 Web）上开始点的页面称为主页
（ Homepage）；
页面
?在逻辑上可视为一个整体的一系列页
面的有机集合称为网站（ Web Site或
Site）。
HTML
?HTML(Hypertext Markup
Language) 是一种规范，一种标准，
它通过标记符（ tag）来标记要显示
的网页的各个部分。
HTML
?通过在网页中添加标记符，可以告诉
浏览器如何显示网页，即确定内容的
格式。浏览器按顺序阅读网页文件
（ HTML文件），然后根据内容周围
的 HTML标记符解释和显示各种内容。
演示 ——HTML的基本原理
标记符基础
?概述
?属性
概述
?在 HTML 中，所有的标记符都用尖
括号括起来。
?HTML 标记符是不区分大小写的。
概述
?某些标记符，例如换行标记符 <BR>，
只要求单一标记符号。但绝大多数标
记符都是成对出现的，包括开始标记
符和结束标记符。开始标记符和相应
的结束标记符定义了标记符所影响的
范围。
属性
属性是用来描述对象特征的特性。例
如，一个人的身高、体重就是人这
个对象的属性。
?在 HTML中，所有的属性都放置在开
始标记符的尖括号里，通常也不区
分大小写。
属性
?例如，可以用字体标记符和字号属
性指定文字的大小。 <FONT
SIZE=1>本行字将以较小字体显示。
</FONT>
演示 ——属性的作用
Web页的基本结构
?概述
?HTML标记符
?HEAD标记符
?BODY标记符
?小节
概述
?一个 Web 页实际上对应于一个
HTML 文件,HTML 文件以,htm
或,html 为扩展名。
?最基本的 HTML文档包括,HTML标
记 <HTML></HTML>、首部标记
<HEAD>和 </HEAD>、以及正文
<BODY></BODY>。
HTML标记符
?<HTML>和 </HTML> 是 Web页的第一个
和最后一个标记符,Web 页的其他所
有内容都位于这两个标记符之间。这
两个标记告诉浏览器或其他阅读该页
的程序，此文件为一个 Web页。
HEAD标记符
?首部标记 <HEAD>和 </HEAD>位于
Web 页的开头，其中不包括 Web 页
的任何实际内容，而是提供一些与
Web 页有关的特定信息。
HEAD标记符
?首部标记中的内容也用相应的标记符
括起来。例如，样式表（ CSS）定义
位于 <STYLE>和 </STYLE>之间；脚
本定义位于 <SCRIPT></SCRIPT>之
间。
TITLE 标记符
?在首部标记符中，最基本、最常用的
标记符是标题标记 <TITLE>和
</TITLE>，用于定义网页的标题。
?当网页在浏览器中显示时，网页标题
将在浏览器窗口的标题栏中显示。
演示 ——TITLE的作用
BODY标记符
?正文标记符 <BODY>和 </BODY>包
含 Web 页的内容。文字、图形、链
接以及其他 HTML元素都位于该标记
符内。
BODY标记符
?正文标记符中的文字，如果没有其他
标记符修饰，则将以无格式的形式显
示。
?注意：空格、回车这些格式控制在显
示时都不起作用，如要使它们起作用，
应使用预格式化元素 <PRE>和
</PRE>
演示 ——BODY标记符中的内容无格式
小节
?综上所述，一个不包含任何内容的基
本 Web 页文件如下所示：
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY></BODY>
</HTML>
添加注释
?不论是编写程序还是制作网页，为所
做的工作添加注释都是一种良好的工
作习惯。实际上，添加注释是任何开
发工作必须遵循的规范之一。
添加注释
?HTML 的注释由开始标记符 <!-- 和结
束标记符 --> 构成。这两个标记符之
间的任何内容都将被浏览器解释为注
释，而不在浏览器中显示。
演示 ——添加注释
显示特殊字符
?如果用户需要在网页中显示某些特殊
字符，例如,<（小于号）,>（大于
号）,” （引号）等，则需使用参考
字符来表示，而不能直接输入。
?参考字符以, &”号开始，以, ；, 结
束，既可以使用数字代码，也可以使
用代码名称。
显示特殊字符
例如，要在 Web 页中显示以下内容，
则需使用参考字符：, 1+1>2”
<BODY>1+1>2</BODY>
演示 ——特殊字符的显示
页面背景与颜色控制
?(1)页面背景
– 背景颜色
– 背景图案
?(2)字符和链接的颜色
背景颜色
?在 <BODY>标记符中使用 BGCOLOR
属性可以为网页设置背景颜色。
?在 HTML 中，除了使用颜色名称以
外，还可以用格式 #RRGGBB 来表
示颜色。
演示 ——设置网页背景颜色
背景图案
?使用 BODY 标记符的
BACKGROUND 属性可以设置背景
图案。 HTML语句为：
?<BODY BACKGROUND =
“image.gif”>
演示 ——设置网页背景图案
字符和链接的颜色
?设置正文和链接颜色时，可以使用
BODY 标记符的 TEXT,LINK、
VLINK 和 ALINK 属性。
字符和链接的颜色
?其中,TEXT 属性用于设置正文的颜
色； LINK 属性用于设置未被访问的
链接的颜色； VLINK 用于设置已被访
问过的链接的颜色； ALINK 用于设
置活动链接（即当前选定的链接）的
颜色。
演示 ——设置网页背景声音
?在 HEAD中添加：
– <BGSOUND src=“soundfileURL”>
总结
? Web 是一个支持交互式访问的分布
式超媒体系统。
? Web 上的一个超媒体文档称为一个
页面（ Page）。
?
总结
?HTML 是用来表示 Web 文档的规范，
它使用标记符确定 Web 页内容显示
的格式。
? 最基本的 HTML 标记符是
<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>。
总结
? HTML 的注释由标记符 <!-- 和 --> 构
成。
? 在 Web 页中显示特殊字符需用参考
字符。
?
总结
? BODY 标记符中的 BGCOLOR、
BACKGROUND,TEXT,LINK、
ALINK和 VLINK 等属性可用于设置
文档的背景以及字符和链接的颜色。
