第1章HTML基础

1、第1章 HTML基础1.1什么是什么是HTML1.2 创建创建 Web 页页 1.3 发布发布 Web 页页 1.1什么是什么是HTML1.1.1Web 页的基本概念页的基本概念 Internet 与与 WWW WWW 与浏览器与浏览器 当我们在网上冲浪时，基本工作过程如图当我们在网上冲浪时，基本工作过程如图 1-1 所所示。示。图 1-1 上网冲浪的基本工作原理 网站与主页网站与主页1.1.2HTML 的工作原理的工作原理 如果在浏览器中任意打开一个网页，然后在窗如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择口中空白位置单击鼠

2、标右键，选择“查看源文件查看源文件”命令（或者选择命令（或者选择“查看查看”菜单中的菜单中的“源文件源文件”命令命令），则系统会启动），则系统会启动“记事本记事本”，其中包含一些文本，其中包含一些文本信息，如图信息，如图 1-2 所示。所示。图 1-2 网页的源文件 这些文本其实就是网页的本质这些文本其实就是网页的本质 HTML 源代源代码。码。HTML（HyperText Markup Language，超文，超文本标记语言）是表示网页的一种规范（或者说是一本标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。种标准），它通过标记符定义了网页内容的显示。例如

3、，用例如，用 标记符可以在网页上定义一个表标记符可以在网页上定义一个表格。格。 说明：说明：超文本是相对普通文本而言的，与普通文超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点就是文本本按顺序定位不同，超文本最典型的特点就是文本中包含指向其他位置的链接，通过这些链接使文档中包含指向其他位置的链接，通过这些链接使文档组织成了网状结构，如图组织成了网状结构，如图 1-3 所示（这实际上也是所示（这实际上也是 WWW 信息组织的基本原理）。例如，我们可以把信息组织的基本原理）。例如，我们可以把常规意义上的书本理解为普通文本，而把由超链接常规意义上的书本理解为普通文本，而把由超

4、链接组织起来的电子文档理解为超文本。组织起来的电子文档理解为超文本。图 1-3 超文本示意图 在在 HTML 文档中，通过使用标记符可以告诉浏文档中，通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取器按顺序读取 HTML 文件，然后根据内容周围的文件，然后根据内容周围的 HTML 标记符解释和显示各种内容。例如，如果为标记符解释和显示各种内容。例如，如果为某段内容添加某段内容添加 标记符，则浏览器会以比标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如图一般文字大的粗体字显示该段内容，如图 1-4 所示。所示。图

5、 1-4 浏览器解释 HTML 标记符示意 HTML 中的超文本功能，也就是超链接功中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多接构成了网站，而网站与网站的链接就构成了多姿多彩的姿多彩的 WWW。 HTML 由国际组织由国际组织 W3C（万维网联盟）制（万维网联盟）制定和维护，定和维护，HTML 3.2 是目前支持最好的标准（是目前支持最好的标准（几乎所有浏览器都支持），但几乎所有浏览器都支持），但 HTML 4.0 也已逐也已逐步普及。最新的标准是步普及。最新的标准是 HTML 4

6、.01，它对，它对 HTML 4.0 作了一些小的修正。对于基本的标记作了一些小的修正。对于基本的标记符，符，3.2 与与 4.0 基本一致，在本书中不作区分，基本一致，在本书中不作区分，但本书中的主要内容是以但本书中的主要内容是以 4.0 为基础的。为基础的。 如果需要了解如果需要了解 HTML 的更详细的更详细情况，请访问情况，请访问 W3C 的官方网站：的官方网站：（如图（如图 1-5 所示），所示），可以从该网站中获得最新的可以从该网站中获得最新的 HTML 规规范。范。图 1-5 W3C 的官方网站 1.2 创建创建 W

7、eb 页页1.2.1 标记符基础标记符基础 基本的基本的 HTML 语法语法 标记符的属性标记符的属性1.2.2 Web 页的基本结构页的基本结构 HTML标记标记 首部标记首部标记1 基本的基本的HTML语法语法 在在HTML中，所有的标记符都用尖括号（大中，所有的标记符都用尖括号（大于号和小于号）括起来。例如于号和小于号）括起来。例如表示表示HTML标记符。标记符。 绝大多数标记符都是成对出现的，包括开始绝大多数标记符都是成对出现的，包括开始标记符和结束标记符，定义了标记符所影响的范标记符和结束标记符，定义了标记符所影响的范围，例

8、如围，例如.结束标记符在小于结束标记符在小于号后面有一条斜线。号后面有一条斜线。 但是某些标记符，只要求单一标记符号，如但是某些标记符，只要求单一标记符号，如换行标记符换行标记符。 HTML标记符是不区分大小写的。标记符是不区分大小写的。1.2.1 标记符基础标记符基础 2 标记符的属性标记符的属性 属性是用来描述对象特征的特性。属性是用来描述对象特征的特性。 在在HTML中，所有的属性都放置在开始标记中，所有的属性都放置在开始标记符的见括号里，符的见括号里， 属性与标记符之间用空格分隔；属性与标记符之间用空格分隔；属性的值放在相应属性之后，用等号分隔，并且属性的值放在相应属性之后，用等号分隔

9、，并且一般用双引号包括（双引号必须成对出现）；而一般用双引号包括（双引号必须成对出现）；而不同的属性之间用空格分隔。不同的属性之间用空格分隔。 例如：例如：本行本行字将以绿色较小字体显示字将以绿色较小字体显示 HTML属性通常也不区分大小写。属性通常也不区分大小写。1.2.1 标记符基础标记符基础 1HTML标记符标记符 和和是网页的第一个和最是网页的第一个和最后一个标记符，网页的其他内容都位于这两个标后一个标记符，网页的其他内容都位于这两个标记符之间。这两个标记符告诉浏览器或其他阅读记符之间。这两个标记符告诉浏览器或其他阅读程序，此文件是一个网页。程序，此文件是一个网页。 HTML标记符的开

10、始和结束标记符都可以省标记符的开始和结束标记符都可以省略，略，HTML标记符通常不包含任何属性。标记符通常不包含任何属性。 1.2.2 Web 页的基本结构页的基本结构HEAD标记符标记符 首部标记首部标记和和位于位于 Web 页页的开头，其中不包括的开头，其中不包括 Web 页的任何实际内容，而页的任何实际内容，而是提供一些与是提供一些与 Web 页有关的特定信息。页有关的特定信息。 首部标记中的内容也用相应的标记符括起来首部标记中的内容也用相应的标记符括起来。例如，样式表（。例如，样式表（CSS）定义位于）定义位于和和 之 间 ； 脚 本 定 义 位 于之 间 ； 脚 本 定 义 位 于之

11、间。之间。首部标记符首部标记符1TITLE 标记符标记符 在首部标记符中，最基本、最常用的标记符在首部标记符中，最基本、最常用的标记符是标题标记符是标题标记符 和和 ，用于定义，用于定义网页的标题。网页标题可被浏览器用作书签和收网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。在浏览器窗口的标题栏中显示。 例如，以下例如，以下 HTML 代码在浏览器中的显示如代码在浏览器中的显示如图图 1-6 所示。所示。首部标记符首部标记符图 1-6 TITLE 标记符的效果 这里是网页标题这里是网页标题

12、 请看浏览器的标题栏。请看浏览器的标题栏。 注意：注意：本书的本书的 HTML 代码中，使用黑体的内容是需代码中，使用黑体的内容是需要引起读者注意的部分。实际上，要引起读者注意的部分。实际上，HTML 文件相当文件相当于文本文件，不包含任何字符格式设置。于文本文件，不包含任何字符格式设置。2META 标记符标记符 在首部标记符中另外一个比较常用的标记符在首部标记符中另外一个比较常用的标记符是是 META，它，它用于说明与用于说明与 Web 页有关的信息。页有关的信息。例如，可以说明文件创作工具、文件作者等信息。例如，可以说明文件创作工具、文件作者等信息。 META 标记符的常用属性包括：标记符

13、的常用属性包括：name、http-equiv 以及以及 content。其中，。其中，name 属性给出属性给出特性名，而特性名，而 content 属性给出特性值，属性给出特性值，http-equiv 属性指定属性指定 HTTP 响应名称，通常用于替换响应名称，通常用于替换 name 属性，属性，HTTP 服务器使用该属性值为服务器使用该属性值为 HTTP 响应响应消息头收集信息。消息头收集信息。 说明：说明：HTTP 是是 HyperText Transfer Protocol（超文本传输协议）的缩写，它是超文本传输协议）的缩写，它是 Internet 上最常用上最常用的协议之一。的协议

14、之一。 例如：例如： 设置客户端行内程设置客户端行内程序的语言是序的语言是 JavaScript； 设设置行内样式的样式语言为置行内样式的样式语言为 CSS。 META 标记符的一个常用功能是设置自动转址标记符的一个常用功能是设置自动转址功能，即使浏览器自动从一个地址跳转到另一个地功能，即使浏览器自动从一个地址跳转到另一个地址，如下所示。址，如下所示。 META示例示例 META示例示例 在此实例中，完成当前文档加载在此实例中，完成当前文档加载 30 秒后将自秒后将自动加载另一个文档（即动加载另一个文档（即“URL =”后指定的后指定的 HTML 文档），如图文档），如图 1-7 所示。所示。

15、30秒后自动跳转图 1-7 利用 META 实现自动转址功能 说明：说明：要实现以上效果，必须使要实现以上效果，必须使“URL =”后指后指定的定的 HTML 文档存在。在该例子中，我们指定跳转文档存在。在该例子中，我们指定跳转的目标为当前目录的某个文件。在实际使用此功能的目标为当前目录的某个文件。在实际使用此功能时，也可以直接指定一个完整的时，也可以直接指定一个完整的 URL 地址（例如地址（例如 http:/）。有关文件路径及）。有关文件路径及 URL 地址指定的详细信息，请参见本书第地址指定的详细信息，请参见本书第 3 章。章。3BGSOUND 标记符标记符 用于指定网页的背景音乐，只有

16、开始标记符，用于指定网页的背景音乐，只有开始标记符，没有结束标记符。属性没有结束标记符。属性src用于指定背景音乐的源文用于指定背景音乐的源文件，属性件，属性loop用于指定背景音乐重复的次数。用于指定背景音乐重复的次数。 BGSOUND标记符必须位于标记符必须位于HEAD标记符内。标记符内。 正文标记符正文标记符 正文标记符正文标记符 和和 包含包含 Web 页页的具体内容，包括文字、图形、超链接以及其他各的具体内容，包括文字、图形、超链接以及其他各种种 HTML 对象。对象。 如果没有其他标记符修饰，正文标记符中的文如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显

17、示（如果浏览器窗口显示不字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）。下，则自动换行）。 例如，以下例如，以下 HTML 代码在浏览器中的显示如图代码在浏览器中的显示如图 1-8 所示。所示。 网 页 标 题网 页 标 题 正文，正文，正文，正正文，正文，正文，正文，文， 正文，正文，正文，正文，正文，正文， 正文，正文正文，正文 图 1-8 BODY 标记符中的正文 注意：注意：空格、回车这些格式控制在显示时都不空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用预格式化标记起作用，如要使它们起作用，应使用预格式化标记符符 和和 将需要采用原始格式的内容将需要采

18、用原始格式的内容包含起来。包含起来。1.2.3 设置页面属性设置页面属性 设置页面背景颜色设置页面背景颜色 在在 标记符中使用标记符中使用 bgcolor bgcolor 属属性可以为网页设置背景颜色。例如，如果想性可以为网页设置背景颜色。例如，如果想为网页设置黑色背景，应使用以下为网页设置黑色背景，应使用以下HTMLHTML语句：语句： 在指定背景颜色时，有在指定背景颜色时，有 16 16 种标准颜色种标准颜色可供选择，如表可供选择，如表 1-1 1-1 所示。所示。 表 1-1 16 种标准颜色色彩名色彩名十六进制值十六进制值色彩名色彩名十六进制值十六进制值Aqua（水蓝色）

19、#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Fuchsia（樱桃色）#FF00FFRed（红色）#FF0000Gray（灰色）#808080Silver（银色）#C0C0C0Green（绿色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐红色）#800000Yellow（黄色）#FFFF00注：注：Aqua Aqua 也称也称 CyanCyan；Fuchsia Fuchsia 也称也称

20、MagentaMagenta。 设置页面背景图像设置页面背景图像 单纯使用一种颜色作为背景显然有些单调，单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的背景网页设计者也可选择特定图案作为页面的背景使用使用 BODY 标记符的标记符的 background 属性即可。属性即可。HTML语句为：语句为： 使用背景图案时，如果图案小于浏览器窗口的使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图大小，则浏览器会自动象铺地板砖一样平铺背景图案。例如，以下代码显示了设置背景图案的效果，案。例如，以下代码显示了设置背景图案的效果，

21、如图如图 1-9 所示。所示。 背景图案示例背景图案示例 背景图案示例背景图案示例 背景图片 设置为背景时的效果图 1-9 背景图案示例 注意：注意：如果要使以上代码正确工作，必须在如果要使以上代码正确工作，必须在网页所在目录包含网页所在目录包含 background.jpg 文件。文件。 用户也可以同时设置网页的背景图案和背景用户也可以同时设置网页的背景图案和背景色，在这种情况下，只有在浏览器不能显示图像色，在这种情况下，只有在浏览器不能显示图像时才显示背景色。例如，如果用户将浏览器设置时才显示背景色。例如，如果用户将浏览器设置为不显示图像（选择为不显示图像（选择“工具工具”菜单中的菜单中的

22、“Internet 选项选项”命令，然后选择命令，然后选择“高级高级”选项卡，在选项卡，在“多多媒体媒体”下设置），那么给网页设置的背景图案将下设置），那么给网页设置的背景图案将不显示，而是显示背景颜色。不显示，而是显示背景颜色。 设置背景图像水印效果设置背景图像水印效果 设置文字和超链接的颜色设置文字和超链接的颜色1.2.4添加注释添加注释 不论是编写程序还是制作网页，为所做的工作不论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加添加注释都是一种良好的工作习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。注释是任何程序开

23、发工作必须遵循的规范之一。 由于由于 Web 站点经常需要更新，因此创建的站点经常需要更新，因此创建的 Web 页必须易于维护，而添加注释是增强文档可页必须易于维护，而添加注释是增强文档可读性的重要手段。读性的重要手段。 HTML 的注释由开始标记符的注释由开始标记符 构成。这两个标记符之间的任何内容都将被构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。浏览器解释为注释，而不在浏览器中显示。 例如，以下例如，以下HTML代码在浏览器中的显示如代码在浏览器中的显示如图图 1-10 所示。所示。 网页标题网页标题 正文，正文，正文正文，正文，正文 图 1-10 注释不在

24、网页中显示注意：注意：注释可插入在注释可插入在 Web 页的任何位置。页的任何位置。1.2.5 显示特殊字符显示特殊字符 如果用户需要在网页中显示某些特殊字符，如果用户需要在网页中显示某些特殊字符，例如：例如： 等与等与 HTML 语法冲突的符号（浏览器语法冲突的符号（浏览器会自动将会自动将 号后的内容解释为号后的内容解释为 HTML 标记符），标记符），或者或者 、 等无法直接用键盘输入的符号，等无法直接用键盘输入的符号，则需使用参考字符来表示，而不能直接输入。则需使用参考字符来表示，而不能直接输入。 参考字符以参考字符以“&”号开始，以号开始，以“；”结束，既可结束，既可以使用数字

25、代码，也可以使用代码名称。最常见的以使用数字代码，也可以使用代码名称。最常见的参考字符为：参考字符为： 表示为表示为 >，& 表表示为示为 &，空格表示为，空格表示为  ，有关参考字符，有关参考字符完整的编码请参见附录完整的编码请参见附录 2。 注意：注意：与与HTML标记符不同，字符代码名称区标记符不同，字符代码名称区分大小写。分大小写。 例如，要在例如，要在 Web 页中显示内容页中显示内容“ is a popular VCD program.”，则需使用参考，则需使用参考字符。字符。 HTML 代码如下，在浏览器中的显示如图代码如下

26、，在浏览器中的显示如图 1-11 所示。所示。 参考字符示例参考字符示例 <Tom & Jerry> is a popular VCD program. 图 1-11 参考字符示例说明：说明：对于对于 & 这样可以直接用键盘输入的这样可以直接用键盘输入的特殊字符，如果不用参考字符，浏览器通常特殊字符，如果不用参考字符，浏览器通常也能够正确显示。例如，刚才的示例中，也能够正确显示。例如，刚才的示例中，BODY 部分的代码也可以写为：部分的代码也可以写为： <Tom & Jerry > is a popular

27、 VCD program. 不过，如果要显示不过，如果要显示 ，则一定要使，则一定要使用参考字符，否则会出现显示错误。用参考字符，否则会出现显示错误。1.2.6 1.2.6 创建和测试创建和测试 Web 页页 创建创建 Web 页页使用使用“记事本记事本”创建创建 Web 页的步骤如下：页的步骤如下： （1）单击）单击“开始开始”按钮，选择按钮，选择“程序程序/附附件件/记事本记事本”。 （2）在）在“记事本记事本”的窗口中输入的窗口中输入 HTML 代码。代码。 （3）输入代码结束后，选择）输入代码结束后，选择“文件文件”菜菜单中的单中的“保存保存”或或“另存为另存为”命令，

28、则弹出命令，则弹出如图如图 1-12 所示的所示的“另存为另存为”对话框。对话框。图 1-12 “另存为”对话框 （4）在）在“文件名文件名”框中键入框中键入 Web 页的名称，注意页的名称，注意文件名必须以文件名必须以 .htm 或或 .html 为扩展名。如果需要，应为扩展名。如果需要，应在在“保存在保存在”列表框中定位到特定的目录。列表框中定位到特定的目录。 （5）单击）单击“保存保存”按钮，即创建出了一个按钮，即创建出了一个 Web 页页。 测试测试Web页页 1.3 发布发布 Web 页页1.3.1 创建本地站点创建本地站点 1.3.2申请网页空间申请网页空间 1.3

29、.3用用 FTP 上传网页上传网页 申请了免费网页空间之后，需要用申请了免费网页空间之后，需要用 FTP 的的方式将网页上传到服务器上，才能让别人通过方式将网页上传到服务器上，才能让别人通过 Internet 浏览自己的网站。上传时通常可以使浏览自己的网站。上传时通常可以使用 一 些用 一 些 F T P 软 件 ， 下 面 以 最 常 用 的软 件 ， 下 面 以 最 常 用 的 CuteFTP4.0 为例简要说明上传网页的过程。为例简要说明上传网页的过程。 注意：注意：对于不同版本的对于不同版本的 CuteFTP，操作过，操作过程略有不同，但基本选项是相同的。程略有不同，但基本选项是相同的

30、。 首先应在计算机上安装首先应在计算机上安装 CuteFTP（如果没（如果没有该软件，可以去一些下载软件的站点进行下载，有该软件，可以去一些下载软件的站点进行下载，或者直接到或者直接到 去下载），然后通去下载），然后通过以下步骤上传网页：过以下步骤上传网页： （1）启动）启动 CuteFTP，此时系统自动打开，此时系统自动打开“FTP Site Manager”（FTP 站点管理器）对话站点管理器）对话框。框。 （2）在该对话框中，单击）在该对话框中，单击“New”按钮，如按钮，如图图 1-13 所示。所示。站点标签站点地址用户名口令新建站点连接站点图 1-13 新建 FTP 站点 （3）在）

31、在“Site Settings for New Site”（站点设置）（站点设置）对话框中填写以下信息：对话框中填写以下信息：l l Label for site 此选项用于标识所建立的此选项用于标识所建立的 FTP 站点，可以用任何自己想要的名称，例如站点，可以用任何自己想要的名称，例如 MyHomesite。l l FTP Host Address 此选项为此选项为 Web 服务器的服务器的 FTP 地址，通常在申请网页空间时可以获得。例地址，通常在申请网页空间时可以获得。例如 ， 网 易 免 费 个 人 主 页 的如 ， 网 易 免 费 个 人 主 页 的 F T P 地 址 是地 址

32、是 。l l FTP site User Name 此选项为此选项为 Web 服务器分配给用户的用户名称，也是在申请服务器分配给用户的用户名称，也是在申请网页空间时获得的。网页空间时获得的。l l FTP site Password 此选项为对应于此选项为对应于用户名的用户口令（密码），也是在申请网用户名的用户口令（密码），也是在申请网页空间时获得的。页空间时获得的。（4）正确地填写了这些选项后，单击）正确地填写了这些选项后，单击“Connect”按钮连接站点（当然事先必须已按钮连接站点（当然事先必须已经连接到经连接到 Internet 上），如果连接正常，那上），如果连接正常，那么将出现如图么将出现如图 1-14 所示对话框。所示对话框。图 1-14 连接 FTP 站点成功时的提示对话框（5）单击）单击“OK”按钮，则按钮，则 CuteFTP 的主窗口中显的主窗口中显示出两栏，左边一栏是本机中的文件列表，右边一示出