Delphi简介 - 清华大学出版社.doc

1、第 2 章读懂网页密码HTML 语言速成HTML 即 超 文 本 标 记 语 言 ，是 一 种 用 来 制 作 超 文 本 文 档 的 简 单 标 记 语 言 ，是 一种 应 用 非 常 广 泛 的 网 页 格 式 ，也 是 被 用 来 显 示 Web 页 面 的 语 言 之 一 。可 以 说 ，一 个网 页 对 应 于 一 个 HTML 文 件 ，HTML 文 件 以 .htm 或 .html 为 扩 展 名 ，可 以 使 用 任 何 能够 生 成 TXT 类 型 源 文 件 的 文 本 编 辑 器 来 编 辑 HTML 文 件 。本章要点 (已掌握的在方框中打钩 ) 掌 握 网 页 的 H

2、TML 结 构 。 掌 握 HTML 常 用 的 标 签 。 掌 握 制 作 日 程 表 的 步 骤 。122.1 网页的 HTML 构成在一个 HTML 文档中，必须包含 标签，并且放在一个 HTML 文档中的开始和结束位置，即每个文档以开始，以结束。 之间通常包含两个部分，分别是 和。HEAD 标签中包含HTML 头部信息，如文档标题、样式定义等。 BODY 标签中包含文档主体部分，即网页内容。需要注意的是，HTML 标签不区分大小写。为了便于读者从整体上把握 HTML 文档结构，下面通过一个 HTML 页面来介绍其整体结构，示例代码如下。网页标题网页内容从上面的代码可以看出，一个基本的

3、HTML 页面由以下几个部分构成。(1) 声明必须位于 HTML5 文档中的第一行，也就是位于标签之前。该标签告知浏览器文档所使用的 HTML 规范。 声明不属于 HTML 标签，它是一条指令，告诉浏览器编写页面所用的标签的版本。(2) 说明本页面使用 HTML 语言编写，使浏览器软件能够准确无误地解释、显示。(3) 是 HTML 的头部标签，头部信息不显示在网页中，在此标签内可以保护其他标签，用于说明文件标题和整个文件的一些公用属性。可以通过标签定义 CSS 样式表，通过标签定义 JavaScript 脚本文件。(4) 是 HEAD 中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。

4、如果没有 TITLE，浏览器标题栏将显示页面的文件名。(5) 包含 HTML 页面的实际内容，显示在浏览器窗口的客户区中。例如，页面中的文字、图像、动画、超链接以及其他 HTML 相关内容都定义在 BODY 标签中。2.1.1 文档标签基本 HTML 的页面以标签开始，以 标签结束。HTML 文档中的所有内容都应该在这两个标签之间。空结构在 IE 中的显示是空白的。标签的语法格式如下。第2章 读懂网页密码HTML语言速成132.1.2 头部标签头部标签() 包含文档的标题信息，如标题、关键字、说明以及样式等。除了标题外，位于头部的内容一般不会直接显示在浏览器中，而是通过其他方式显示。1. 内容

5、头部标签中可以嵌套多个标签，如、 、等，也可以添加任意数量的属性，如、 或 。除了外，其他嵌入标签可以使用多个。2. 位置在 所 有 的 HTML 文 档 中 ， 头 部 标 签 都 不 可 或 缺 ， 但 结 束 标 签 可 省 略 。 在 各 个 HTML 版 本 的文 档 中 ， 头 部 标 签 后 一 直 紧 跟 标 签 ， 但 在 框 架 设 置 文 档 中 ， 其 后 跟 的 是 标签。3. 属性标签的属性 PROFILE 给出了元数据描写的位置，说明其中的和元素的特性，该属性的形式没有严格的格式规定。2.1.3 主体标签主体标签()包含文档的内容，用若干个属性来规定文档中显示的背

6、景和颜色。主体标签可能用到的属性如下。 BACKGROUND=URL：文档的背景图像，URL 指图像文件的路径。 BGCOLOR=Color：文档的背景色。 TEXT=Color：文本颜色。 LINK=Color：链接颜色。 VLINK=Color：已访问的链接颜色。 ALINK=Color：被选中的链接颜色。 ONLOAD=Script：文档已被加载。 ONUNLOAD=Script：文档已退出。为该标签添加属性的代码格式如下。142.2 HTML 常用标签HTML 文档是由标签组成的文档，要熟练掌握 HTML 文档的编写，首先就是了解 HTML的常用标签。2.2.1 标题标签在 HTML

7、文档中，文本的结构除了以行和段出现之外，还可以作为标题存在。通常一篇文档最基本的结构就是由若干不同级别的标题和正文组成。HTML 文档中包含有各种级别的标题，各种级别的标题由 元素来定义， 标题标签中的字母 h 是英文 headline(标题行)的简称。其中 代表 1 级标题，级别最高，文字也最大，其他标题元素依次递减，级别最低。下面给出一个实例，来具体介绍标题标签的使用方法。【例 2.1】标题标签的使用(实例文件： ch022.1.html)。文本段换行这里是 1 级标题 这里是 2 级标题 这里是 3 级标题 这里是 4 级标题 这里是 5 级标题 这里是 6 级标题 将 上 述 代 码

8、输 入 记 事 本 ， 并 以 后 缀 名 为 .html 的 格 式 保 存 ， 然 后 在 IE 中 预 览 效 果 ， 如 图2-1 所示。图 2-1 标题标签的使用作 为 标 题 ，它 们 的 重 要 性 是 有 区 别 的 ，其 中 标 题 的 重 要 性 最 高 ，标 题的 重 要 性 最 低。第2章 读懂网页密码HTML语言速成152.2.2 段落标签段落标签 用来定义网页中的一段文本，文本在一个段落中会自动换行。段落标签是双标签，即 ，在开始标 签和结束标签之间的内容形成一个段落。如果省略结束标签，从 标 签开始，直到遇见下一个段落标签之前的文本，都在一个段落内。段落标 签中的

9、 p 是英文单词 paragraph(段落 )的首字母。下面给出一个实例，来具体介绍段落标签的使用方法。【例 2.2】段落标签的使用(实例文件： ch022.2.html)。段落标签的使用白雪公主与七个小矮人!很久以前，白雪公主的后母 王后美貌盖世，但魔镜却告诉她世上唯有白雪公主最漂亮，王后怒火中烧，派武士把她押送到森林准备谋害，武士同情白雪公主，让她逃往森林深处。小动物们用善良的心抚慰她，鸟兽们还把她领到一间小屋中，收拾完房间后她进入了梦乡。房子的主人是在外边开矿的七个小矮人，他们听了白雪公主的诉说后把她留在家中。王后得知白雪公主未死，便用魔镜把自己变成一个老太婆，来到密林深处，哄骗白雪公主

10、吃下一只有毒的苹果，使公主昏死过去。鸟儿识破了王后的伪装，飞到矿山报告白雪公主的不幸。七个小矮人火速赶回，王后仓皇逃跑，在狂风暴雨中跌下山崖摔死。七个小矮人悲痛万分，把白雪公主安放在一只水晶棺里日日夜夜守护着她。邻国的王子闻讯，骑着白马赶来，爱情之吻使白雪公主死而复生。然后王子带着白雪公主骑上白马，告别了七个小矮人和森林中的动物，到王子的宫殿中开始了幸福的生活。将上述代码输入记事本，并以后缀名为.html 的格式保存，然后在 IE 中预览效果，如图2-2 所示，可以看出 标签将文本分成标题与 4 个段落。图 2-2 段落标签的使用162.2.3 换行标签使用换行标签可以对文字强制换行，该标签是

11、一个单标签，它没有结束标签，是英文单词 break 的缩写。一个标签代表一个换行，连续的多个标 签可以实现多次换行。使用换行标签时，在需要换行的位置添加标签即可。下面给出一个实例，来具体介绍换行标签的使用方法。【例 2.3】换行标签的使用(实例文件： ch022.3.html)。文本段换行清明清明时节雨纷纷路上行人欲断魂借问酒家何处有牧童遥指杏花村将 上 述 代 码 输 入 记 事 本 ， 并 以 后 缀 名 为 .html 的 格 式 保 存 ， 然 后 在 IE 中 预 览 效 果 ， 如 图2-3 所示。图 2-3 换行标签的使用2.2.4 链接标签链接标签 是网页中最为常用的标签，主要

12、用于把页面中的文本或图片链接到其他的页面、文本或图片。建立链接有两个最重要的要素，即设置为链接的网页元素和链接指向的目标地址。基本的链接结构如下。网页元素1. 文本和图片链接设置链接的网页元素通常使用文本和图片。文本链接和图片链接是通过标签实现的，将文本或图片放在开始标签和结束标签之间即可建立文本或图片链接。第2章 读懂网页密码HTML语言速成17【例 2.4】设置文本和图片链接(实例文件：ch022.4.html)。打开记事本文件，在其中输入如下 HTML 代码。文本和图片链接公司简介代码输入完成，将其保存为“链接.html”文件，然后双击该文件，就可以在浏览器中查看应用链接标签后的效果，如

13、图 2-4 所示。2. 电子邮件链接电子邮件链接用来链接一个电子邮件的地址。下面是电子邮件链接可以使用的写法。mailto:邮件地址【例 2.5】设置电子邮件链接(实例文件：ch022.5.html)。打开记事本文件，在其中输入如下 HTML 代码。电子邮件链接使用电子邮件链接：链接代码输入完成，将其保存为“电子邮件链接.html”文件，然后双击该文件，就可以在浏览器中查看应用电子邮件链接后的效果。当单击含有链接的文本时，会弹出邮件发送窗口，如图 2-5 所示。图 2-4 文本与图片链接 图 2-5 电子邮件链接182.2.5 列表标签文字列表可以有序地编排一些信息资源，使其结构化和条理化，并

14、以列表的样式显示出来，以便浏览者能更加快捷地获得相应信息。HTML 中的文字列表如同文字编辑软件 Word中的项目符号和自动编号。1. 建立无序列表无序列表相当于 Word 中的项目符号，无序列表的项目排列没有顺序，只以符号作为分项标识。无序列表使用一对标签，其中每一个列表项使用，其结构如下。无序列表项 无序列表项 无序列表项 无序列表项 在无序列表结构中，使用标签表示这一个无序列表的开始和结束，则表示一个列表项的开始。在一个无序列表中可以包含多个列表项，并且可以省略结束标签。下面给出的实例使用无序列表实现文本的排列显示。【例 2.6】建立无序列表(实例文件： ch022.6.html)。打开

15、记事本文件，在其中输入如下 HTML 代码。嵌套无序列表的使用网站建设流程 项目需求 系统分析网站的定位 内容收集 栏目规划 网站目录结构设计网站标志设计 网站风格设计 网站导航系统设计伪网页草图制作网页草图 将草图转换为网页第2章 读懂网页密码HTML语言速成19站点建设 网页布局 网站测试 站点的发布与站点管理 代码输入完成，将其保存为“无序列表.html”文件，然后双击该文件，就可以在浏览器中查看应用无序列表后的效果了，如图 2-6 所示。读者会发现，在无序列表项中可以嵌套一个列表。如代码中的“系统分析”列表项和“伪网页草图”列表项中都有下级列表，因此在这对标签间又增加了一对标签。2.

16、建立有序列表有序列表类似于 Word 中的自动编号功能。有序列表的使用方法和无序列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示，其结构如下。第 1 项第 2 项第 3 项下面给出的实例使用有序列表实现文本的排列显示。【例 2.7】建立有序列表(实例文件： ch022.7.html)。打开记事本文件，在其中输入如下 HTML 代码。有序列表的使用本讲目标网页的相关概念 网页与 HTMLWeb 标准(结构、表现、行为)网页设计与开发的过程 与设计相关的技术因素 HTML 简介代码输入完成，将其保存为“有序列表.html”文件，然后双击该文件，就可以

17、在浏览器中查看应用有序列表后的效果，如图 2-7 所示。20图 2-6 无序列表 图 2-7 有序列表2.2.6 图像标签图 像 可 以 美 化 网 页 ， 插 入 图 像 使 用 单 标 签 。 标 签 的 属 性 及 描 述 如 表 2-1 所 示。表 2-1 标签的属性及描述属 性 值 描 述alt text 定义有关图像的短的描述src URL 要显示的图像的 URLheight pixels % 定义图像的高度ismap URL 把图像定义为服务器端的图像映射usemap URL 定义作为客户端图像映射的一幅图像width pixels % 定义图像的宽度1插入图像src 属 性 用 于 指 定 图 像 源 文 件 的 路 径 ， 它 是 标 签 必 不 可 少 的 属 性 。 其 语 法 格 式 如 下。图像路径可以是绝对路径，也可以是相对路径。下面给出的实例将在网页中插入图像。【例 2.8】插入图像(实例文件： ch022.8.html)。打开记事本文件，在其中输入如下 HTML 代码。插入图像