第3章HTML语言基础 本章要点: 网页设计的基本原则 冷HTML语言及其基本语法
第3章 HTML语言基础 本章要点： ❖网页设计的基本原则 ❖HTML语言及其基本语法
HTML(Hyper Text Markup Language 即超文本标记语言)是一种用来制作超文 本文档的简单标记语言。用HTML编写的 超文本文档称为HTML文档,它能独立于 各种操作系统平台(如UNX, WINDOWS 等)。自1990年以来HTML就一直被用作 WWW上的信息表述语言,用于描述网页 的格式设计和它与WWW上其它网页的链 接信息 HTML文档(即网页的源文件)是一个 放置了标记的ASCI文本文件,通常它带 有htm或htm的文件扩展名。生成一个 HTML文档主要有以下三种途径
HTML（Hyper Text Markup Language， 即超文本标记语言）是一种用来制作超文 本文档的简单标记语言。用HTML编写的 超文本文档称为HTML文档，它能独立于 各种操作系统平台（如UNIX，WINDOWS 等）。自1990年以来HTML就一直被用作 WWW上的信息表述语言，用于描述网页 的格式设计和它与WWW上其它网页的链 接信息。 HTML文档（即网页的源文件）是一个 放置了标记的ASCII文本文件，通常它带 有.html或.htm的文件扩展名。生成一个 HTML文档主要有以下三种途径：
(1)手工直接编写(例如用你所喜爱的 ASCI文本编辑器或其它HIML的编辑工具) (2)通过某些格式转换工具将现有的其它 格式文档(如WORD文档)转换成HTML文 (3)借助专用制作工具软件,如 Frontpage eam weaver等进行设计与制作 HTML语言是通过利用各种标记(tags) 来标识文档的结构以及标识超链接 Hyperlink)信息的。虽然HTML语言描述 了文档的结构格式,但并不能精确地定义文 档信息必须如何显示和排列,而只是建议
（1） 手工直接编写（例如用你所喜爱的 ASCII文本编辑器或其它HTML的编辑工具）。 （2） 通过某些格式转换工具将现有的其它 格式文档（如WORD文档）转换成HTML文 档。 （3） 借助专用制作工具软件，如Frontpage、 Dreamweaver等进行设计与制作。 HTML语言是通过利用各种标记（tags） 来 标 识 文 档 的 结 构 以 及 标 识 超 链 接 （Hyperlink）信息的。虽然HTML语言描述 了文档的结构格式，但并不能精确地定义文 档信息必须如何显示和排列，而只是建议 Web浏览器
Q如N间等应该如何最示 示结果取决于Web浏览器本身的显示风 格及其对标记的解释能力。这就是为什 么同一文档在不同的浏览器中展示的效 果会不一样的原因
（如Mosiac，Netscape等）应该如何显示 和排列这些信息，最终在用户面前的显 示结果取决于Web浏览器本身的显示风 格及其对标记的解释能力。这就是为什 么同一文档在不同的浏览器中展示的效 果会不一样的原因
3.1网页设计基本原则 设计网页如同编写其它计算机程序一样, 需要一定的专业知识和基本技能,而且必 须对设计环境有个明确的了解。在设计网 页的过程中,要清楚地了解网页的阅读对 象,要对整个网络文档有统一的规划。总 体说来,要了解以下基本设计原则: (1)正确分析网页用户的需要 (2)网页下载时间不宜过长。注意网页文 件的大小,在50KB以内为宜。 (3)网页的设计要做到在不同的环境下都 能浏览
3.1 网页设计基本原则 设计网页如同编写其它计算机程序一样, 需要一定的专业知识和基本技能，而且必 须对设计环境有个明确的了解。在设计网 页的过程中，要清楚地了解网页的阅读对 象，要对整个网络文档有统一的规划。总 体说来，要了解以下基本设计原则： （1）正确分析网页用户的需要。 （2）网页下载时间不宜过长。注意网页文 件的大小，在50KB以内为宜。 （3）网页的设计要做到在不同的环境下都 能浏览
(4)注意网页中的图形设计。首先,图形 的文件大小要尽可能小,尽量使用GIF文件 和JPG文件,不使用BMP文件。其次,每个图 形都要有相应的替代文字,这使得用户在关 闭图形显示功能时能够看到替代文字 (5)定期更新网页内容。每隔一定时间就 对网页内容和版面设计进行较大幅度的更新, 从而吸引访问者的注意力。这不失为增加来 访次数的好方法 (6)注意网站内容的搭配。在首页中尽量 使之美观大方,直观又丰富。其它网页要与 首页有很好的搭配效果
（4）注意网页中的图形设计。首先，图形 的文件大小要尽可能小，尽量使用GIF文件 和JPG文件，不使用BMP文件。其次，每个图 形都要有相应的替代文字，这使得用户在关 闭图形显示功能时能够看到替代文字。 （5）定期更新网页内容。每隔一定时间就 对网页内容和版面设计进行较大幅度的更新， 从而吸引访问者的注意力。这不失为增加来 访次数的好方法。 （6）注意网站内容的搭配。在首页中尽量 使之美观大方，直观又丰富。其它网页要与 首页有很好的搭配效果
(⑦)考虑不支持某些功能的浏览器。随着 网页设计技术的不断进步,在网页中经常会 使用一些特殊的技术,使得网页的功能更加 丰富,看起来也更加美观。但是不可排除 些用户使用过时的浏览器浏览这些网页,这 就需要为这些特殊的功能部分添加替代性文 字,避免误将程序代码显示出来。 (8)对多媒体文件实施有限的限制。尽管 网络多媒体技术有了很大的发展,但由于网 络速度的限制,就要求一个网页设计者在设 计网页时要充分考虑到所添加多媒体部分的 大小和必要性
（7）考虑不支持某些功能的浏览器。随着 网页设计技术的不断进步，在网页中经常会 使用一些特殊的技术，使得网页的功能更加 丰富，看起来也更加美观。但是不可排除一 些用户使用过时的浏览器浏览这些网页，这 就需要为这些特殊的功能部分添加替代性文 字，避免误将程序代码显示出来。 （8）对多媒体文件实施有限的限制。尽管 网络多媒体技术有了很大的发展，但由于网 络速度的限制，就要求一个网页设计者在设 计网页时要充分考虑到所添加多媒体部分的 大小和必要性
3.2HTM语言的结构 从结构上讲,HTM文件由元素( element 组成。组成HM文件的元素有许多,用于组 织文件的内容和指导文件的输出格式。 绝大多数元素是“容器”,即它有起始 标记和结尾标记。 元素的起始标记叫做起始标记( start tag)。 元素结束标记叫做结尾标记( end tag) 在起始标记和结尾标记中间的部分是元素体。 每一个元素都有名称和可选择的属性,元素 的名称和属性都在起始标记内标明。比如体 元素(bod
3.2 HTML语言的结构 从结构上讲，HTML文件由元素（element） 组成。组成HTML文件的元素有许多，用于组 织文件的内容和指导文件的输出格式。 绝大多数元素是“容器”，即它有起始 标记和结尾标记。 元素的起始标记叫做起始标记(start tag)。 元素结束标记叫做结尾标记(end tag)。 在起始标记和结尾标记中间的部分是元素体。 每一个元素都有名称和可选择的属性，元素 的名称和属性都在起始标记内标明。比如体 元素(body)：
示例 这是一个示例 第一行是体元素的起始标记,它标明体 元素从此开始。由于所有的标记都具有相同 的结构,因此仔细分析这个标记的各个部分 就能对标记的写法有一个大概了解。 起始标记开始 body元素名称,由于元素和标记一一对 应,所以元素名也叫标记名。注意:<和 body之间不能有空格。元素名称不分大小写
示例 这是一个示例 第一行是体元素的起始标记，它标明体 元素从此开始。由于所有的标记都具有相同 的结构，因此仔细分析这个标记的各个部分， 就能对标记的写法有一个大概了解。 ▪ < 起始标记开始 ▪ body 元素名称，由于元素和标记一一对 应，所以元素名也叫标记名。注意：<和 body之间不能有空格。元素名称不分大小写
background属性名。一个元素可以有多 属性,属性及其属性值不分大小写 background.gif属性值。表示用 background.gif文件来填充背景 属性名、=、属性值三者合起来构成一个完整 的属性,一个元素可以有多个属性,各个属 性用空格分开。 起始链接链结束。 第二行和第三行是body元素的元素体,最后 行是body元素的结尾标记。结尾标记用
▪ background 属性名。一个元素可以有多个 属性，属性及其属性值不分大小写。 ▪ background.gif 属性值。表示用 background.gif文件来填充背景。 属性名、=、属性值三者合起来构成一个完整 的属性，一个元素可以有多个属性，各个属 性用空格分开。 ▪ > 起始链接链结束。 第二行和第三行是body元素的元素体，最后 一行是body元素的结尾标记。结尾标记用