网页设计与网站开发

Transcription

1 网 页 设 计 与 网 站 开 发 孙 永 科 编 西 南 林 业 大 学 计 算 机 科 学 与 信 息 学 院

2 序 本 指 导 书 主 要 介 绍 了 网 页 制 作 中 三 个 基 本 语 言 html,css 和 javascript 的 使 用, 适 合 网 页 编 程 的 初 学 者 学 习 使 用, 也 适 合 程 序 爱 好 者 自 学 html,css 和 javascript 是 网 页 开 发 的 基 本 语 言, 是 网 页 开 发 这 必 须 掌 握 的 语 言 ; 不 论 你 后 台 采 用 何 种 语 言, 或 者 是 C#, 或 者 是 jsp, 或 者 是 php, 数 据 在 传 递 给 客 户 浏 览 器 的 时 候 都 是 要 转 化 为 这 三 者 才 能 能 在 客 户 端 正 确 显 示 因 此 html, css 和 javascript 是 网 页 开 发 必 须 掌 握 的 基 本 语 言 现 在 网 页 的 开 发 流 行 使 用 开 源 的 框 架 的 确, 使 用 开 源 的, 优 秀 的 框 架 ( 比 如 :wordpress,drupal,etc) 可 以 大 大 的 提 高 开 发 的 效 率, 可 以 快 速 的 创 建 一 个 稳 健 的 网 站 如 果 是 基 于 这 些 框 架 进 行 二 次 开 发, 你 甚 至 可 以 不 用 编 写 后 台 代 码, 但 是 不 论 你 使 用 那 种 框 架, 你 都 必 须 掌 握 网 页 前 台 展 示 的 三 大 语 言 html,css 和 javascript 为 了 让 读 者 能 够 尽 快 的 进 入 网 页 编 程 的 角 色, 本 书 所 采 用 的 实 例 都 比 较 短 小 目 的 是 让 读 者 能 够 快 速 的 编 写 自 己 的 第 一 网 页, 尽 早 的 培 养 读 者 的 自 信 心 书 中 所 采 用 的 示 例 一 部 分 是 我 在 教 学 的 过 程 中 使 用 的, 还 有 一 本 分 来 自 网 络 来 自 网 络 的 示 例 我 尽 量 都 给 出 出 处, 但 是 仍 有 一 部 分 我 没 有 办 法 给 出 具 体 的 出 处 若 果 原 作 的 作 者 不 愿 意 被 我 在 这 里 引 用, 请 联 系 我 (sunyongke@gmail.com), 我 会 尽 快 修 改 ii

3 目 录 1 html 基 础 Web 文 件 静 态 页 面 动 态 页 面 开 发 环 境 html 文 档 结 构 HTML 版 本 规 范 meta 信 息 字 符 编 码 标 记 和 属 性 度 量 单 位 网 页 布 局 table table 属 性 td 属 性 caption font p br Link div input dl ul/ol hr select 文 本 标 记 img 左 环 绕 右 环 绕 iii

4 目 录 网 页 设 计 与 网 站 开 发 1.23 习 题 作 业 css 基 础 CSS 的 使 用 CSS 简 单 示 例 第 一 步 : 编 写 HTML 文 件 第 二 步 : 添 加 颜 色 第 三 步 : 设 置 字 体 第 四 步 : 添 加 导 航 条 第 五 步 : 设 置 链 接 样 式 第 六 步 : 添 加 水 平 线 第 七 步 : 使 用 外 部 css css 长 度 单 位 CSS 语 法 选 择 器 的 分 组 继 承 CSS 类 选 择 器 CSS id 选 择 器 CSS 属 性 选 择 器 伪 类 选 择 器 层 叠 顺 序 css 背 景 属 性 文 本 属 性 css 表 格 css 制 作 菜 单 垂 直 css 制 作 菜 单 水 平 CSS 制 作 菜 单 图 片 菜 单 html 框 架 代 码 添 加 CSS 运 行 结 果 示 例 1: 首 行 缩 进 示 例 2: 超 级 链 接 示 例 3: 图 片 圆 角 矩 形 固 定 宽 度 的 圆 角 框 灵 活 的 圆 角 框 示 例 4: 无 图 片 圆 角 矩 形 习 题 作 业 iv

5 目 录 网 页 设 计 与 网 站 开 发 3 javascript javascript 的 使 用 javascript 注 释 符 号 语 法 基 础 数 据 类 型 内 置 对 象 表 达 式 控 制 语 句 函 数 事 件 指 定 事 件 处 理 程 序 事 件 介 绍 Click 事 件 confirm 方 法 循 环 定 时 器 示 例 1: 页 面 计 时 示 例 2: 移 动 的 图 片 表 单 取 值 文 本 框 复 选 框 单 选 框 下 拉 列 表 正 则 表 达 式 jquery jquery 使 用 方 法 jquery 页 面 元 素 的 引 用 示 例 1: 画 廊 示 例 2: 折 叠 列 表 (accordion) 在 线 示 例 php 网 页 登 陆 创 建 数 据 库 html 页 面 php 登 陆 数 据 验 证 客 户 端 验 证 服 务 端 验 证 页 面 传 值 运 行 结 果 v

6 目 录 网 页 设 计 与 网 站 开 发 4.6 php 开 源 系 统 WordPress phpbb ThinkPHP drupal 附 录 117 vi

7 第 一 部 分 html 基 础 1989 年 欧 洲 粒 子 物 理 实 验 室 (CERN) 制 定 了 超 文 本 标 记 语 言 (HyperText Marked Language,HTML) 的 第 一 个 简 单 的 版 本, 它 基 于 标 准 通 用 标 记 语 言 (Standard Generalized Markup Language,SGML), 目 的 是 用 在 网 络 系 统 上 借 助 浏 览 器 异 地 共 享 纯 超 文 本 文 档 1997 年 HTML 的 第 一 个 公 共 标 准 HTML3.2 面 世,1999 年 HTML4.01 成 为 W3C 标 准 2000 年 W3C 组 织 发 布 了 XHTML1.0 XHTML1.0 严 格 地 迎 了 HTML(HTML4.01), 避 免 了 传 统 HTML 默 写 标 记 属 性 意 义 解 释 不 唯 一 的 情 况 HTML4.01 明 确 区 分 HTML 的 文 件 结 构 与 文 件 样 式 两 个 方 面, 规 范 了 HTML 与 客 户 端 脚 本 之 间 的 关 系 网 页 是 一 种 使 用 特 定 的 传 输 协 议 在 网 络 上 传 输, 并 能 够 在 浏 览 器 上 进 行 显 示 的 文 件 有 些 人 认 为 制 作 一 个 网 站 是 一 项 难 度 大 且 技 术 含 量 高 的 工 作, 认 为 只 有 高 手 们 才 可 以 完 成 完 成 这 种 工 作, 对 此 望 而 却 步 不 是 这 样 的, 其 实 HTML 语 言 是 一 种 比 C C# Java 都 要 简 单 的 语 言, 非 常 容 易 理 解 HTML 中 没 有 分 支 结 构, 没 有 循 环 结 构, 程 序 运 行 时, 按 照 先 后 顺 序 从 头 到 尾 依 次 执 行 每 一 行 代 码 结 构 比 较 简 单, 没 有 复 杂 的 语 法, 只 要 掌 握 了 HTML 中 标 记 的 含 义, 就 可 以 来 开 发 自 己 的 网 页 还 有 一 些 人 认 为 制 作 网 站 需 要 使 用 一 些 非 常 高 级 的 工 具, 事 实 上 确 实 有 一 些 价 格 非 常 高 的 商 业 网 页 制 作 软 件, 可 以 帮 助 制 作 网 页 但 是 很 幸 运 的 是, 利 用 系 统 自 带 的 一 些 简 单 工 具 ( 这 些 工 具 都 是 免 费 的 ) 我 们 就 可 以 编 写 自 己 的 网 页 代 码 了 html 文 档 保 存 时 后 缀 名 必 须 是.html 或 者.htm html 文 件 可 以 用 浏 览 器 直 接 打 开 运 行 本 教 程 中 部 分 使 用 了 XHTML(Extensible HyperText Mark-up Language), 它 是 HTML 的 升 级, 具 有 更 加 良 好 的 结 构 HTML 是 浏 览 器 的 母 语, 使 用 HTML 可 以 在 Internet 上 表 示 一 些 信 息, 我 们 所 看 到 的 网 页, 是 浏 览 器 对 HTML 代 码 的 解 释 后 表 现 出 来 的 任 何 一 个 网 页 最 终 都 是 由 HTML 来 表 现, 依 次 点 击 查 看 > 源 文 件 可 以 查 看 网 页 的 源 代 码 对 于 那 些 没 有 接 收 过 HTML 训 练 的 人 来 说,HTML 代 码 非 常 的 复 杂, 甚 至 难 以 理 解 本 教 程 将 教 会 你 如 何 看 懂 这 些 代 码 1

8 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1.1 Web 文 件 web 文 件 叫 做 web 文 档,web 页, 或 者 网 页 文 件, 它 主 要 用 HTML 书 写, 利 用 超 链 接 访 问 web 发 布 的 图 像 文 本 多 媒 体 文 档 和 其 他 web 页 面, 通 过 浏 览 器 进 行 阅 读 静 态 页 面 页 面 中 的 信 息 不 能 进 行 自 动 更 新, 文 件 后 缀 名 一 般 为.html 或 者.htm 的 网 页 文 件 静 态 文 件 使 用 HTML,CSS 和 Javascript 编 写 静 态 页 面 不 涉 及 数 据 库 的 操 作 动 态 页 面 动 态 页 面 运 行 在 服 务 器 一 边, 只 有 当 访 问 者 请 求 web 服 务 器 中 的 某 些 动 态 页 面 时, 才 会 按 客 户 请 求 在 服 务 器 一 端 运 行, 动 态 的 输 出 html 页 面 动 态 页 面 中 的 内 容 一 般 都 与 数 据 库 处 理 有 关, 动 态 页 面 是 web 技 术 不 可 缺 少 的 一 个 方 面 动 态 页 面 设 计 常 用 的 技 术 有 :ASP 技 术 Jsp 技 术 php 技 术 等 1.2 开 发 环 境 编 写 HTML 文 档 可 以 使 用 任 何 文 本 编 辑 器 例 如 记 事 本 写 字 板 noteplus 等, 这 类 工 具 称 为 非 可 视 化 开 发 工 具 另 一 类 称 为 可 视 化 开 发 工 具, 例 如 :frontpage,dreamweaver 使 用 可 视 化 工 具, 只 需 要 一 些 简 单 的 鼠 标 操 作, 它 就 可 以 自 动 的 生 成 相 应 的 代 码, 减 少 了 程 序 员 很 多 的 工 作 但 是, 由 工 具 自 动 生 成 的 代 码 往 往 比 较 庞 杂, 很 不 便 于 初 学 者 阅 读 和 学 习 所 以, 在 开 始 学 习 的 时 候 建 议 使 用 非 可 视 化 编 辑 器, 掌 握 了 基 本 知 识 以 后, 再 使 用 可 视 化 的 开 发 工 具, 这 样 不 仅 可 以 知 其 然, 而 且 可 以 知 其 所 以 然, 做 到 真 正 的 得 心 应 手 一 些 自 认 为 很 聪 明 的 网 页 设 计 者 会 告 诉 你, 没 有 必 要 去 学 习 HTML, 因 为 很 多 的 工 具 能 够 自 动 的 生 成 网 页 文 件, 而 且 非 常 的 简 单 对 于 那 些 不 知 道 详 情 的 人 来 说, 他 们 很 可 能 就 会 接 受 这 种 愚 蠢 的 建 议 虽 然 这 些 WYSY- WIG(What you see is what you getsometimes!) 工 具 能 够 自 动 的 生 成 一 些 代 码, 但 是 它 经 常 会 对 代 码 做 一 些 修 改, 甚 至 还 会 添 加 一 些 我 们 根 本 不 需 要 的 特 效 (Effect) 我 也 经 常 使 用 类 似 与 FrontPage 这 样 的 工 具, 但 是 我 只 使 用 对 我 来 说 有 用 的 一 些 功 能, 这 样 可 以 提 高 开 发 的 效 率 我 们 可 以 使 用 这 样 的 工 具, 但 是 不 要 变 成 工 具 的 奴 隶 想 要 更 好 的 利 用 工 具, 成 为 工 具 的 主 人, 首 先 就 必 须 学 习 HTML 2

9 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 表 1.1: 编 辑 器 编 辑 器 代 码 着 色 语 法 检 测 自 动 缩 进 文 本 编 辑 记 事 本 无 无 无 写 字 板 无 无 无 UltraEdit 有 有 有 noteplus 有 有 有 可 视 化 编 辑 frontpage 有 有 有 dreamweaver 有 有 有.net 有 有 有 1.3 html 文 档 结 构 一 个 简 单 的 html 文 档 功 包 含 4 个 部 分 :html,head,title 和 body 信 息, 如 下 代 码 1.1 是 一 个 简 单 的 示 例, 其 运 行 结 果 如 图 1.1 代 码 1.1: helloworld.html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html;charset= gb2312" /> 4 <title>this is a title</title> 5 </head> 6 <body> 7 hello world 8 </body> 9 </html> html 文 件 主 要 使 用 标 记 (Tag) 来 表 示 文 件, 一 般 标 记 都 是 成 对 出 现 ( 有 些 书 称 其 为 围 堵 标 记 ) 代 码 1.1 的 第 一 个 标 记 是 <html>, 这 个 标 记 告 诉 浏 览 器 这 是 HTML 文 件 的 头 文 件 的 最 后 一 个 标 记 是 </html>, 表 示 HTML 文 件 到 此 结 束 在 <head> 和 </head> 之 间 的 内 容, 是 Head 信 息 Head 信 息 是 不 显 示 出 来 的, 你 在 浏 览 器 里 看 不 到 但 是 这 并 不 表 示 这 些 信 息 没 有 用 处 比 如 你 可 以 在 Head 信 息 里 加 上 一 些 关 键 词, 有 助 于 搜 索 引 擎 能 够 搜 索 到 你 的 网 页 在 <title> 和 </title> 之 间 的 内 容, 是 这 个 文 件 的 标 题 你 可 3

10 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 图 1.1: 运 行 结 果 以 在 浏 览 器 最 顶 端 的 标 题 栏 看 到 这 个 标 题 在 <body> 和 </body> 之 间 的 信 息 是 正 文 HTML 文 件 看 上 去 和 一 般 文 本 类 似, 但 是 它 比 一 般 文 本 多 了 标 记, 比 如 <html>,<body> 等, 通 过 这 些 标 记, 可 以 告 诉 浏 览 器 如 何 显 示 这 个 文 件 1.4 HTML 版 本 规 范 一 个 完 整 HTML 文 件 通 常 是 以 版 本 声 明 开 始 的, 它 指 明 遵 守 的 XML 文 档 类 型 定 义 文 件 (DTD) HTML 4.0 规 范 有 3 种 语 法 定 义, 必 须 选 择 其 中 一 种 3 种 语 法 定 义 所 支 持 的 标 记 是 不 同 的 1. HTML 4.0 Strict DTD 这 是 严 格 的 XML 文 档 类 型 定 义 文 件 版 本, 它 不 支 持 可 以 使 用 但 不 推 荐 使 用 ( 如 框 架 Frame) 的 所 有 标 记 和 属 性 2. HTML 4.0 Transitional DTD 这 是 过 渡 性 型 版 本, 支 持 HTML 4.0 Strict DTD 的 所 有 合 法 标 记 及 可 以 使 用 但 不 推 荐 使 用 标 记 3. HTML 4.0 Frameset DTD 支 持 所 有 合 法 可 以 使 用 但 不 推 荐 使 用 的 标 记, 包 括 Frame 标 记 声 明 版 本 规 范 的 方 法 比 较 简 单, 以 代 码 1.1 为 例 如 果 想 使 用 过 度 型 版 本 的 HTML 规 范, 只 需 将 代 码 的 第 一 行 改 为 下 面 代 码 即 可 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 1.5 meta 信 息 标 记 meta 可 以 用 来 说 明 一 些 与 网 页 有 关 的 信 息 例 如 4

11 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 定 义 网 页 的 内 容 类 型 (content-type), 其 值 为 text/html;charset=gb2312 浏 览 器 在 会 以 gb2312 的 编 码 渲 染 页 面 上 的 字 体, 如 果 该 编 码 指 定 错 误, 那 么 在 显 示 时 页 面 会 出 现 乱 码 <meta http-equiv="refresh" content="15;url=2.html" /> 定 义 网 页 的 自 动 刷 新 (refresh) 时 间, 其 值 为 15;url=2.html 表 示 在 该 网 页 打 开 15 秒 后 网 页 自 动 跳 转 到 2.html 页 面 <meta name="keywords" content="web html css javascript" /> 定 义 网 页 的 关 键 字 (keywords), 其 值 为 web,html,css,javascript, 关 键 字 之 间 使 用 空 格 分 隔 这 些 关 键 字 有 利 于 网 页 搜 索 引 擎 ( 如 :google) 快 速 获 取 网 页 的 关 键 字 1.6 字 符 编 码 在 浏 览 网 页 时, 浏 览 器 会 按 照 网 页 中 指 定 的 编 码 方 法 来 显 示 网 页 中 的 字 符 信 息 如 果 在 网 页 中 没 有 指 明 网 页 的 编 码 方 式, 浏 览 器 会 使 用 默 认 的 编 码 方 式 来 显 示 文 字 有 时 候 浏 览 器 默 认 的 编 码 方 式 和 编 写 网 页 时 使 用 的 编 码 不 一 致, 就 会 造 成 显 示 乱 码 所 以 在 编 写 网 页 时 应 在 头 部 信 息 中 说 明, 该 文 件 使 用 的 是 哪 一 种 编 码 方 式 在 <head> 和 </head> 之 间, 添 加 meta 信 息, 用 来 了 指 明 编 码 类 型 1 代 码 1.2 指 明 网 页 使 用 的 是 gb2312 编 码 ; 代 码 1.3 指 明 网 页 使 用 的 是 utf-8 编 码 代 码 1.2: gb2312 编 码 <meta http-equiv="content-type" content="text/html;charset=gb2312" /> 代 码 1.3: utf-8 编 码 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 字 符 必 须 编 码 后 才 能 被 计 算 机 处 理 计 算 机 使 用 的 缺 省 编 码 方 式 就 是 计 算 机 的 内 码 早 期 的 计 算 机 使 用 7 位 的 ASCII 编 码, 为 了 处 理 汉 字, 程 序 员 设 计 了 用 于 简 体 中 文 的 GB2312 和 用 于 繁 体 中 文 的 big5 2 GB2312(1980 年 ) 一 共 收 录 了 7445 个 字 符, 包 括 6763 个 汉 字 和 682 个 ml 1 charset 应 该 写 在 title 之 前 2 该 部 分 内 容 引 自 : 5

12 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 其 它 符 号 汉 字 区 的 内 码 范 围 高 字 节 从 B0-F7, 低 字 节 从 A1-FE, 占 用 的 码 位 是 72*94=6768 其 中 有 5 个 空 位 是 D7FA-D7FE GB2312 支 持 的 汉 字 太 少 1995 年 的 汉 字 扩 展 规 范 GBK1.0 收 录 了 个 符 号, 它 分 为 汉 字 区 和 图 形 符 号 区 汉 字 区 包 括 个 字 符 从 ASCII GB2312 到 GBK, 这 些 编 码 方 法 是 向 下 兼 容 的, 即 同 一 个 字 符 在 这 些 方 案 中 总 是 有 相 同 的 编 码, 后 面 的 标 准 支 持 更 多 的 字 符 在 图 1.3: 字 符 编 码 这 些 编 码 中, 英 文 和 中 文 可 以 统 一 地 处 理 区 分 中 文 编 码 的 方 法 是 高 字 节 的 最 高 位 不 为 0 按 照 程 序 员 的 称 呼,GB2312 GBK 都 属 于 双 字 节 字 符 集 (DBCS) 2000 年 的 GB18030 是 取 代 GBK1.0 的 正 式 国 家 标 准 该 标 准 收 录 了 个 汉 字, 同 时 还 收 录 了 藏 文 蒙 文 维 吾 尔 文 等 主 要 的 少 数 民 族 文 字 从 汉 字 字 汇 上 说,GB18030 在 GB 的 个 汉 字 的 基 础 上 增 加 了 CJK 扩 展 A 的 6582 个 汉 字 (Unicode 码 0x3400-0x4db5), 一 共 收 录 了 个 汉 字 UTF-8 可 以 看 作 是 大 字 符 集, 它 包 含 了 大 部 分 文 字 的 编 码 使 用 UTF-8 的 一 个 好 处 是 其 他 地 区 的 用 户 ( 如 香 港 台 湾 ) 无 需 安 装 简 体 中 文 支 持 就 能 正 常 观 看 你 的 文 字 而 不 会 出 现 乱 码, 因 此, 几 乎 所 有 的 操 作 系 统 都 实 现 了 对 UTF-8 的 支 持,GB2312 的 编 码 方 式 将 逐 渐 被 UTF-8 取 代 查 看 文 件 的 编 码 很 多 的 工 具 在 保 存 文 件 时, 都 会 让 用 户 选 择 编 码 格 式, 查 看 编 码 的 方 式 也 很 多 如 果 你 使 用 的 是 记 事 本 (notepad), 按 照 如 下 的 方 法 就 可 以 知 道 文 件 的 编 码 格 式 是 哪 一 种 了 使 用 记 事 本 打 开 文 件, 然 后 依 次 选 择 文 件 另 存 为, 在 弹 出 的 另 存 为 对 话 框 ( 图 1.3) 中 就 可 以 看 到 文 件 的 编 码 类 型 1.7 标 记 和 属 性 标 记 一 般 有 三 种 使 用 方 法 : 1. < 标 记 名 > 控 制 的 文 本 或 其 他 内 容 </ 标 记 名 > 6

13 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 2. < 标 记 名 属 性 名 1= 属 性 值 1 属 性 名 2= 属 性 值 2 属 性 名 3= 属 性 值 3... > 控 制 的 文 本 或 其 他 内 容 </ 标 记 名 > 3. < 标 记 名 /> 标 记 的 属 性 一 般 是 可 选 的, 可 以 按 照 任 何 顺 序 设 置 ; 如 果 未 设 置 某 个 属 性, 就 使 用 默 认 值 标 记 的 属 性 之 间 使 用 空 格 进 行 分 隔 ;XHTML 规 定 标 记 要 小 写, 属 性 值 区 分 大 小 写 XHTML 版 本 前 html 标 记 不 去 区 分 大 小 写 现 在 的 浏 览 器 一 般 都 支 持 HTML 标 记 不 区 分 大 小 写 一 个 标 记 可 以 包 含 一 个 或 者 多 个 属 性, 这 些 属 性 为 浏 览 器 提 供 了 更 多 的 信 息, 用 来 显 示 这 些 标 记 每 一 个 属 性 都 包 含 名 称 和 值 两 个 部 分, 它 们 之 间 使 用 = 分 隔 代 码 1.4 是 一 个 简 单 示 例 代 码 1.4: 简 单 示 例 1 <hr width="60%" /> 2 <input type="text" name="textfield" /> 3 <h2 title="hello There!">Titled Heading Tag (firfox) </h2> 4 <h2 alt="hello There!">Titled Heading Tag (ie) </h2> 5 <h2 alt="hello There!" title="hello There!">Titled Heading Tag </h2> 6 <h2 align="center">centered Heading</h2> 代 码 1.4 说 明 : 第 1 行,<hr> 标 记 用 来 画 一 条 水 平 线 该 标 记 是 一 个 非 围 堵 标 记, 属 性 中 指 定 了 线 条 的 宽 度 为 整 个 页 面 的 60% 第 2 行, 在 <h2> 和 </h2> 之 间 的 内 容 使 用 二 级 标 题 格 式 此 类 标 题 列 别 的 标 记 还 包 括 <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> 等 级 别 不 同, 字 体 的 大 小 和 段 落 的 间 距 都 不 一 样 第 2 行,title 属 性 用 来 给 该 标 记 提 供 建 设 性 意 见 当 鼠 标 停 3 在 该 行 文 字 上 面 的 时 候, 屏 幕 上 会 出 现 title 指 定 的 提 示 信 息 第 3 行,alt 属 性 的 作 用 和 title 的 作 用 一 样, 都 是 为 标 记 添 加 悬 浮 提 示 信 息, 不 同 的 是 alt 适 用 于 IE 浏 览 器,title 使 用 与 firefox 浏 览 器 为 了 兼 容 不 同 种 类 的 浏 览 器, 在 编 写 程 序 时, 最 好 两 个 属 性 一 起 出 现, 如 第 4 行 代 码, 这 样 不 论 在 IE 或 者 firefox 都 会 出 现 悬 浮 提 示 第 5 行,align 属 性 设 置 文 本 的 水 平 对 其 方 式 常 见 的 属 性 在 HTML 中 有 很 多 的 属 性, 其 中 有 些 属 性 是 属 于 共 享 属 性, 多 个 标 记 都 可 以 使 用, 比 如 id,algin 在 <div> <td> 和 <span> 中 都 可 以 使 用 ; 另 外 3 悬 停 : 鼠 标 放 在 文 字 和 图 片 对 象 上, 不 要 动, 停 留 一 段 时 间 7

14 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 还 有 一 些 是 只 为 某 些 标 记 定 制 的, 如 :cellspacing 一 旦 明 白 了 这 些 属 性 的 含 义, 那 些 看 起 来 复 杂 的 HTML 代 码 将 会 变 得 很 容 易 理 解 表 1.2 列 出 的 是 常 见 的 一 些 属 性 表 1.2: 常 见 的 HTML 标 记 属 性 属 性 选 项 功 能 align right,left,center 水 平 对 齐 valign top,middle,bottom 垂 直 对 齐 bgcolor 数 字, 十 六 进 制 数,RGB 颜 色 背 景 颜 色 background URL 设 置 元 素 的 背 景 图 片 id 用 户 定 义 元 素 的 编 号 class 用 户 定 义 元 素 的 分 类 width 数 字 表 格, 图 片, 单 元 格 的 宽 度 height 数 字 表 格, 图 片, 单 元 格 的 高 度 title 用 户 定 义 元 素 的 提 示 信 息 1.8 度 量 单 位 在 网 页 中 长 度 的 度 量 单 位 有 px 和 %, 字 体 大 小 的 度 量 单 位 有 pt,px 和 em; px: 像 素 是 计 算 机 度 量 的 基 本 单 位, 它 的 大 小 随 着 显 示 器 分 辨 率 的 变 化 而 变 化 例 如 对 于 一 个 分 辨 率 为 1024x768 的 显 示 器 来 说, 它 的 长 ( 宽 ) 就 是 1024px( 像 素 ), 他 的 高 就 是 768px pt: 点 数 1pt=1/72xDPI DPI 是 操 作 系 统 和 浏 览 器 中 使 用 的 术 语, 即 为 PPI,pixels per inch em: 字 符 高 度, 一 个 x 字 符 的 高 度 %: 百 分 比 相 对 于 容 器 的 高 度 或 者 宽 度 的 百 分 比 1.9 网 页 布 局 网 页 布 局 也 称 为 网 页 的 排 版 布 局 看 起 来 是 一 件 很 不 起 眼 的 工 作, 但 却 是 非 常 重 要 的 一 个 细 节 工 作, 布 局 的 好 坏 是 导 致 网 站 是 否 成 功 的 一 个 重 要 原 因 常 见 的 基 本 布 局 类 型 有 上 下 型 左 右 型 上 中 下 型 左 中 右 型 8

15 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 图 1.4: 上 下 型 图 1.5: 左 右 型 图 1.6: 上 中 下 型 图 1.7: 左 中 右 型 对 于 信 息 容 量 比 较 大 的 网 站 来 说, 仅 仅 只 依 靠 基 本 的 布 局 类 型 很 难 达 到 效 果 通 常 都 是 使 用 table 标 记 实 现 这 些 布 局, 例 如 代 码 1.5 可 以 实 现 上 下 布 局 代 码 1.5: 上 下 布 局 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 4 <title> 上 下 布 局 </title> 5 </head> 6 <body> 7 <table width="900px"> 8 <tr> 9 <td height="150px"> 这 是 顶 部 区 域 </td> 10 </tr> 11 <tr> 12 <td height="500px"> 这 是 主 体 区 域 </td> 13 </tr> 14 </table> 15 </body> 16 </html> 代 码 1.6: 左 右 布 局 9

16 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 4 <title> 左 右 布 局 </title> 5 </head> 6 <body> 7 <table width="900px"> 8 <tr> 9 <td width="150px"> 这 是 左 边 区 域 </td> 10 <td width="500px"> 这 是 右 边 主 体 区 域 </td> 11 </tr> 12 </table> 13 </body> 14 </html> 1.10 table 在 HTML 文 件 中, 制 作 一 个 表 格 制 作 表 格 使 用 table 标 记 table 标 记 中 包 含 tr 和 td 子 标 记 tr: 代 表 一 行 td: 代 表 一 个 单 元 格 th: 代 表 表 格 头 制 作 表 格 时,table 标 记 应 该 body 中, 也 就 是 放 在 <body> 和 </body> 之 间 1 <html> 2 <head> 3 <title>this is a title</title> 4 </head> 5 <body> 6 <table> 7 <tr> 8 <th> 学 号 </th> 9 <th> 姓 名 </th> 10 <th> 科 目 </th> 11 <th> 成 绩 </th> 12 </tr> 13 <tr> 代 码 1.7: table.html 10

17 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 14 <td> </td> 15 <td> 李 明 </td> 16 <td> 语 文 </td> 17 <td>80</td> 18 </tr> 19 <tr> 20 <td> </td> 21 <td> 小 红 </td> 22 <td> 数 学 </td> 23 <td>82</td> 24 </tr> 25 </table> 26 </body> 27 </html> 图 1.8: 运 行 结 果 代 码 1.7 上 面 是 一 个 简 单 的 表 格 示 例, 其 运 行 结 果 如 图 1.8 所 示, 是 一 个 3 行 4 列 的 表 格, 其 中 第 一 行 是 表 头, 第 2 3 行 是 数 据 信 息 显 然 这 个 表 格 缺 少 必 要 的 美 化, 为 了 让 表 格 变 得 易 于 辨 认 和 美 观, 需 要 使 用 一 些 标 记 的 属 性 在 成 对 出 现 的 标 记 中, 属 性 必 须 写 在 开 始 标 记 中, 其 书 写 的 格 式 一 般 为 : 属 性 名 称 = 值 例 如 :<table width="100px">...</table> 这 个 例 子 中, 在 table 标 记 中 使 用 了 width 属 性, 用 来 定 义 表 格 的 宽 度 为 100 个 像 素 table 属 性 width: 宽 度 可 以 使 用 像 素 来 定 义 宽 度 也 可 以 使 用 百 分 数 来 定 义 宽 度 border: 边 框, 单 位 : 像 素 (px) cellspacing: 单 元 格 与 单 元 格 之 间 的 距 离, 默 认 情 况 下 一 般 为 2 cellpadding: 单 元 格 内 部 文 字 和 对 象 与 单 元 格 边 框 的 距 离 11

18 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 图 1.9: cellspacing 图 1.10: cellpadding td 属 性 width: 宽 度 align: 水 平 对 齐 方 式 可 取 得 值 包 括 (left,center,right) valign: 垂 直 对 齐 方 式 可 取 得 值 包 括 (top,middle,bottom) rowspan: 合 并 行, 指 定 单 元 格 纵 向 跨 越 的 行 数 colspan: 合 并 列, 指 定 单 元 格 横 向 跨 越 的 列 数 下 面 是 一 个 添 加 了 一 些 属 性 后 的 例 子, 运 行 的 结 构 如 图 1.11 所 示 代 码 1.8: table2.html 1 <html> 2 <head> 3 <title>this is a title</title> 4 </head> 5 <body> 6 <table border="1" width="100%"> 7 <tr> 8 <th> 学 号 </th> 9 <th> 姓 名 </th> 10 <th> 科 目 </th> 11 <th> 成 绩 </th> 12 </tr> 13 <tr> 14 <td rowspan="2" valign="middle" align="center"> </td> 15 <td rowspan="2" valign="middle" align="center"> 16 李 明 </td> 17 <td> 语 文 </td> 18 <td>80</td> 19 </tr> 12

19 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 20 <tr> 21 <td> 数 学 </td> 22 <td>90</td> 23 </tr> 24 <tr> 25 <td> </td> 26 <td> 小 红 </td> 27 <td> 数 学 </td> 28 <td>82</td> 29 </tr> 30 </table> 31 </body> 32 </html> 图 1.11: 运 行 结 果 13

20 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 修 改 代 码 中 的 第 23 ~ 28 行, 将 其 改 为 如 下 代 码 : 1 <tr> 2 <td colspan="2"> 合 计 </td> 3 <td>2</td> 4 <td>85</td> 5 </tr> 代 码 1.9: table3.html 在 这 个 示 例 中, 使 用 了 td 的 colspan 属 性, 它 可 以 对 单 元 格 进 行 列 合 并 ( 横 向 合 并 ), 后 边 的 数 字 2 表 示 合 并 连 续 的 2 个 单 元 格 运 行 的 界 面 图 1.12 图 1.12: 运 行 结 果 caption caption 标 记 是 表 格 的 标 题, 对 表 格 的 简 单 描 述 它 是 表 格 的 子 元 素 14

21 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1 <html> 2 <body> 3 4 <h4> 这 个 表 格 有 标 题 : 5 6 </h4> 7 8 <table border="6"> 9 <caption> 10 表 格 标 题 11 </caption> 12 <tr> 13 <td>100</td> 14 <td>200</td> 15 <td>300</td> 16 </tr> 17 <tr> 18 <td>400</td> 19 <td>500</td> 20 <td>600</td> 21 </tr> 22 </table> </body> 25 </html> 1.11 font 字 体 使 用 <font></font> 标 记 配 合 属 性 使 用 可 以 用 来 指 定 字 体 的 名 称, 大 小 字 体 的 属 性 主 要 有 以 下 几 个 : face: 字 体 名 称 size: 字 体 大 小, 取 值 范 围 从 1( 最 小 ) 到 7( 最 大 ), 默 认 的 大 小 是 3. color: 字 体 的 颜 色, 可 以 是 十 六 进 制 数, 也 可 以 是 RGB 颜 色 代 码 1.10: 字 体 颜 色 <font face=" 宋 体, 楷 体 "> This text has had its font... </font> <font size="5">here is a size 5 font</font> 15

22 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 <font color="#990000"> This text is hexcolor # </font> 代 码 1.10 中 字 体 的 face 属 性 使 用 了 多 个 字 体, 浏 览 器 在 进 行 显 示 时, 先 采 用 第 一 个 字 体 进 行 显 示, 如 果 客 户 端 没 有 安 装 该 字 体, 则 依 次 选 用 后 面 的 字 体 在 示 例 中 浏 览 器 先 选 择 宋 体 进 行 显 示, 如 果 客 户 端 计 算 机 没 有 安 装 宋 体, 则 使 用 Book Antiqua 字 体, 如 果 前 面 的 两 个 字 体 都 不 存 在 则 使 用 Garamond 字 体 如 果 指 定 的 字 体 都 不 存 在, 则 浏 览 器 使 用 自 己 的 默 认 字 体 进 行 显 示 1.12 p <p></p> 标 记 对 是 用 来 创 建 一 个 段 落, 在 此 标 记 对 之 间 加 入 的 文 本 将 按 照 段 落 的 格 式 显 示 在 浏 览 器 上 另 外,<p> 标 记 还 可 以 使 用 align 属 性, 它 用 来 说 明 对 齐 方 式, 语 法 是 : <p align= ></p> Align 可 以 是 Left( 左 对 齐 ) Center( 居 中 ) 和 Right( 右 对 齐 ) 三 个 值 中 的 任 何 一 个 如 <p align= Center ></p> 表 示 标 记 对 中 的 文 本 使 用 居 中 的 对 齐 方 式 1.13 br <br> 是 一 个 很 简 单 的 标 记, 它 没 有 结 束 标 记, 因 为 它 用 来 创 建 一 个 回 车 换 行 在 默 认 情 况 修,<P> 标 记 所 产 生 的 行 间 距 比 <br> 所 产 生 的 行 间 距 要 大 1.14 Link 在 页 面 上 创 建 链 接 或 者 超 链 接 时, 使 用 <a> 标 记 配 合 href 属 性 href 的 值 可 以 是 一 个 完 整 的 URL 地 址, 也 可 以 是 一 个 服 务 器 的 相 对 地 址 使 用 代 码 1.11 可 以 在 网 页 上 创 建 一 个 超 级 链 接, 超 级 链 接 的 文 字 是 网 易, 点 击 该 文 字, 网 页 会 自 动 打 开 并 转 到 地 址 代 码 1.11: html code <a href=" 网 易 </a> 使 用 target 属 性 可 以 指 定 新 窗 口 打 开 的 位 置 例 如 target= _blank, 指 的 是 在 新 窗 口 打 开 链 接, 新 网 页 不 替 换 当 前 网 页 的 内 容 target 可 以 取 以 下 的 几 个 值 : 16

23 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 _blank _self 在 新 窗 口 打 开 链 接 在 当 前 窗 口 打 开 链 接 _parent 在 父 窗 口 打 开 链 接 ( 仅 在 使 用 frame 时 有 效 ) _top 在 顶 部 窗 口 打 开 链 接 ( 仅 在 使 用 frame 时 有 效 ) 代 码 1.12: html code <a href=" target="_blank"> 网 易 </a> href 属 性 的 值 若 为 空, 则 表 示 链 接 到 当 前 页 面, 即 链 接 自 己 1.15 div <div> 是 一 个 容 器, 可 以 在 <div> 和 </div> 中 放 置 其 他 的 标 记, 例 如 <a>,<input>,<table> 等 代 码 1.13 利 用 <div> 标 记 制 作 了 一 个 简 单 的 导 航 菜 单 其 运 行 的 结 果 如 图 1.13 所 示 代 码 1.13: menu.html 1 <html> 2 <head> 3 <title> 这 里 是 窗 体 标 题 </title> 4 <meta http-equiv="content-type" content="text/html; charset= gb2312" /> 5 </head> 6 <body> 7 <div id="menu" align="right" > 8 <a href=""> 主 页 </a> 9 <a href=""> 联 系 方 式 </a> 10 <a href=""> 关 于 </a> 11 </div> <div id="content" align="left" bgcolor="white"> 14 <h5> 网 页 的 内 容 </h5> 15 <p> 放 在 < p > 标 记 中, 表 示 这 是 一 个 段 落.</p> 16 </div> 17 </body> 18 </html> 代 码 1.13 说 明 : 17

24 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 代 码 中 的 第 7 ~ 11 行, 创 建 了 一 个 <div>, 该 标 记 中 放 置 了 3 个 超 级 链 接 <div> 中 使 用 了 align 属 性, 使 得 其 中 的 内 容 右 对 齐 第 15 行 代 码 使 用 了 两 个 特 殊 的 符 号 :< 和 > < 表 示 <, > 表 示 > ( 参 见 表 1.3) 第 15 行,<p> 表 示 这 是 一 个 段 落 <p> 和 </p> 之 间 的 文 字 为 一 个 段 落 使 用 <p> 标 记 后, 段 前 间 距 和 段 后 间 距 会 增 大 表 1.3: 常 用 html 特 殊 符 号 表 特 殊 符 号 命 名 实 体 特 殊 符 号 命 名 实 空 格 < < > > 2 上 标 ² 下 标 2 &sub2; 图 1.13: 运 行 结 果 18

25 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1.16 input <input> 中 的 type 属 性 取 不 同 的 值, 可 以 创 建 不 同 的 控 件 例 如, 可 以 用 来 在 网 页 上 创 建 文 本 框 密 码 框 单 选 按 钮 复 选 按 钮 提 交 按 钮 重 置 按 钮 等 窗 体 控 件 type 属 性 可 以 取 以 下 的 值 : text: 普 通 文 本 框 password: 密 码 框 checkbox: 复 选 框 radio: 单 选 框 submit: 提 交 按 钮 reset: 重 置 按 钮 button: 普 通 按 钮 代 码 1.14 是 各 种 input 的 使 用 方 法, 图 1.14 是 代 码 的 运 行 效 果 代 码 1.14: input.html 1 <html> 2 <meta http-equiv=" contenttype" 3 content="text/html;charset=utf-8" /> 4 <head> 5 <title>this is a title</title> 6 </head> 7 <body> 文 本 框 8 <input type="text" /><br /> 密 码 框 9 <input type="password" /><br /> 10 <input type="checkbox" /> 复 选 框 <br /> 11 <input type="checkbox" /> 复 选 框 <br /> 12 <input type="checkbox" /> 复 选 框 <br /> 13 <input type="radio" /> 单 选 按 钮 <br /> 14 <input type="radio" /> 单 选 按 钮 <br /> 15 <input type="radio" /> 单 选 按 钮 <br /> 16 <input type="submit" value=" 提 交 " /><br /> 17 <input type="reset" value=" 重 置 " /><br /> 18 <input type="button" value=" 普 通 按 钮 " /> 19 </body> 20 </html> 1 <html> 代 码 1.15: 按 钮 实 例 19

26 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 图 1.14: 运 行 结 果 2 <head> 3 <title>this is a title</title> 4 </head> 5 <body> 6 <h1 align="center"> 按 钮 示 例 </h1> 7 用 户 名 :<input type="text" size="8"/><br /> 8 密 码 : 9 <input type="password" size="8"/><br /> 10 <input type="submit" value=" 登 录 " /> 11 <input type="reset" value=" 清 空 " /><br /> 12 <hr> 13 个 人 爱 好 <br> 14 <input type="checkbox" /> 音 乐 <br /> 15 <input type="checkbox" /> 足 球 <br /> 16 <input type="checkbox" /> 舞 蹈 <br /> 17 <hr> 18 性 别 <br> 19 <input name="sex" type="radio" /> 男 <br /> 20 <input name="sex" type="radio" /> 女 <br /> 21 </body> 22 </html> 20

27 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1.17 dl <dl></dl> 用 来 创 建 一 个 普 通 的 列 表 (list),<dt></dt> 用 来 创 建 列 表 中 的 上 层 项 目 (title),<dd></dd> 用 来 创 建 列 表 中 最 下 层 项 目 (data), <dt></dt> 和 <dd></dd> 都 必 须 放 在 <dl></dl> 标 记 对 之 间 代 码 1.16 可 以 创 建 一 个 普 通 的 城 市 列 表 21

28 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 代 码 1.16: dl 示 例 1 <html> 2 <head> 3 <title> 一 个 普 通 列 表 </title> 4 </head> 5 <body text="blue"> 6 <dl> 7 <dt> 中 国 城 市 </dt> 8 <dd> 北 京 </dd> 9 <dd> 上 海 </dd> 10 <dd> 广 州 </dd> 11 <dt> 美 国 城 市 </dt> 12 <dd> 华 盛 顿 </dd> 13 <dd> 芝 加 哥 </dd> 14 <dd> 纽 约 </dd> 15 </dl> 16 </body> 17 </html> 1.18 ul/ol 在 html 中 列 表 分 为 有 序 列 表 (order list) 和 无 序 列 表 (unorder list) 两 大 类 <ol></ol> 标 记 对 用 来 创 建 一 个 标 有 数 字 的 列 表, 也 称 为 有 序 列 表 ; <ul></ul> 标 记 对 用 来 创 建 一 个 标 有 圆 点 的 列 表, 也 称 为 无 序 列 表 ;<li></ li> 标 记 对 只 能 在 <ol></ol> 或 <ul></ul> 标 记 对 之 间 使 用, 此 标 记 对 用 来 创 建 一 个 列 表 项, 若 <li></li> 放 在 <ol></ol> 之 间 则 每 个 列 表 项 加 上 一 个 数 字, 若 在 <ul></ul> 之 间 则 每 个 列 表 项 加 上 一 个 圆 点 代 码 1.17 中 创 建 了 两 个 列 表, 第 一 个 是 一 个 有 序 列 表, 第 二 个 是 无 序 列 表 为 了 定 制 列 表 的 显 示 效 果, 需 要 使 用 列 表 的 一 些 属 性 表 1.4 中 列 出 的 是 列 表 标 记 中 的 几 个 重 要 的 属 性 22

29 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 标 记 描 述 list-style-position 控 制 序 号 的 显 示 位 置 inside: 列 表 的 序 号 和 标 题 对 齐, 效 果 如 代 码 1.18 所 示 outside: 列 表 的 序 号 向 左 端 凸 出, 效 果 如 代 码 1.17 所 示 list-style-type 控 制 有 序 列 表 的 序 号 的 形 式 或 者 type decimal: 仅 对 有 序 列 表 有 效, 列 表 项 使 用 十 进 制 数 字 自 动 编 号, 如 :1,2,3... upper-alpha: 仅 对 有 序 列 表 有 效, 编 号 使 用 大 写 字 母 表 顺 序, 如 :A,B,C... lower-alpha: 仅 对 有 序 列 表 有 效, 编 号 使 用 小 写 字 母 表 顺 序, 如 :a,b,c... upper-roman: 仅 对 有 序 列 表 有 效, 编 号 使 用 大 写 罗 马 数 字 顺 序, 如 :I,II,III... lower-roman: 仅 对 有 序 列 表 有 效, 编 号 使 用 大 写 罗 马 数 字 顺 序, 如 :i,ii,iii... none: 取 消 编 号 start 序 号 的 开 始 值, 仅 对 有 序 列 表 有 效 和 list-style-type 配 合 使 用, 控 制 序 号 的 开 始 值 例 如 : 表 示 列 表 项 以 大 写 字 母 进 行 编 号, 开 始 序 号 为 B <ol style= list-style-type:upper-alpha; start=2> 或 者 <ol type= A start=2> 表 1.4: 列 表 属 性 23

30 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 代 码 1.17: ol-ul 示 例 ( 序 号 突 出 ) 1 <html> 2 <head> 3 <title></title> 4 </head> 5 <body text="blue"> 6 <ol> 7 <p> 中 国 城 市 </p> 8 <li> 北 京 </li> 9 <li> 上 海 </li> 10 <li> 广 州 </li> 11 </ol> 12 <ul> 13 <p> 美 国 城 市 </p> 14 <li> 华 盛 顿 </li> 15 <li> 芝 加 哥 </li> 16 <li> 纽 约 </li> 17 </ul> 18 </body> 19 </html> 代 码 1.18: 序 号 缩 进 显 示 1 <html> 2 <head> 3 <title> 一 个 普 通 列 表 </title> 4 </head> 5 <body text="blue"> 6 <ol style="list-styleposition:inside"> 7 <lh> 中 国 城 市 </lh> 8 <li> 北 京 </li> 9 <li> 上 海 </li> 10 <li> 广 州 </li> 11 <li> 华 盛 顿 </li> 12 <li> 芝 加 哥 </li> 13 <li> 纽 约 </li> 14 </ol> 15 </body> 16 </html> 24

31 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1.19 hr <hr> 标 记 是 在 Html 文 档 中 加 入 一 条 水 平 线, 它 可 以 直 接 使 用, 具 有 size color width 和 noshade 属 性 size 是 设 置 水 平 线 的 厚 度, 而 width 是 设 定 水 平 线 的 宽 度, 默 认 单 位 是 像 素 想 必 大 家 对 color 属 性 已 经 很 熟 悉 了, 在 此 就 不 再 用 多 讲 noshade 属 性 不 用 赋 值, 而 是 直 接 加 入 标 记 即 可 使 用, 它 是 用 来 加 入 一 条 没 有 阴 影 的 水 平 线 ( 不 加 入 此 属 性 水 平 线 将 有 阴 影 ) 代 码 1.19 在 窗 体 中 画 了 一 个 宽 度 为 600px 的 水 平 线 代 码 1.19: 水 平 线 1 <html> 2 <head> 3 <title> 水 平 线 示 例 </title> 4 </head> 5 <body> 6 <div align="center"> 7 <h1> 水 平 线 示 例 8 9 </h2> 10 </div> 11 <hr width="600px" size="1" color="#0000ff"> 12 </body> 13 </html> 1.20 select <select></select> 标 记 对 用 来 创 建 一 个 下 拉 列 表 框 或 可 以 复 选 的 列 表 框 <select> 具 有 multiple name 和 size 属 性 multiple 属 性 不 用 赋 值, 直 接 加 入 标 记 中 即 可 使 用, 加 入 了 此 属 性 后 列 表 框 就 成 了 可 多 选 的 了, 若 没 有 设 置 ( 加 入 )multiple 属 性, 显 示 的 将 是 一 个 弹 出 式 的 列 表 框 ; name 是 此 列 表 框 的 名 字, 某 些 后 台 语 言 通 过 name 属 性 来 获 取 该 标 记 的 值 ; size 属 性 用 来 设 置 列 表 的 高 度, 表 示 列 表 框 中 有 可 见 项 的 数 目, 如 size=4, 则 表 示 列 表 框 的 有 4 项 是 可 见 的, 通 过 该 属 性 也 可 以 控 制 select 控 件 的 高 度, 缺 省 时 值 为 1 25

32 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 <option> 标 记 用 来 指 定 列 表 框 中 的 一 个 选 项, 它 放 在 <select></select> 标 记 对 之 间 此 标 记 具 有 selected 和 value 属 性,selected 用 来 指 定 默 认 的 选 项,value 属 性 用 来 给 <option> 指 定 的 那 一 个 选 项 赋 值 代 码 1.20 在 一 个 网 页 中 实 现 了 下 拉 列 表 框 和 复 选 框, 运 行 结 果 如 图 1.15 所 示 代 码 1.20: 列 表 框 1 <p> 请 选 择 你 最 喜 欢 的 课 程 :<br /> 2 <select name="kc" size="1"> 3 <option value="ldh"> 语 文 4 <option value="zhxy" selected> 数 学 5 <option value="gfch"> 程 序 设 计 6 <option value="lm"> 物 理 7 </select> 8 </p> 9 10 <p> 请 选 择 你 喜 欢 的 颜 色 :<br /> 11 <select name="ys" multiple size="4"> 12 <option value="zhmy"> 红 色 13 <option value="wf" selected> 紫 色 14 <option value="tzh"> 蓝 色 15 <option value="ny"> 黑 色 16 </select> 图 1.15: select 标 记 示 例 1.21 文 本 标 记 在 html 中 有 很 多 的 文 本 标 记, 每 一 种 标 记 的 显 示 效 果 都 各 不 相 同 代 码 1.21 运 行 后, 就 可 以 看 到 这 些 标 记 的 显 示 效 果 26

33 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 表 1.5: 字 体 标 记 标 记 <pre></pre> <h1><h1>...<h6></h6> <b></b> <i></i> <u></u> <tt></tt> <cite></cite> <em></em> <strong></strong> 描 述 预 处 理 标 记, 空 格 和 回 车 将 会 被 保 留 六 对 标 题 的 标 记 对 <h1></h1> 是 最 大 的 标 题, 而 <h6></h6> 则 是 最 小 的 标 题 粗 体 斜 体 下 划 线 打 印 机 风 格 字 体 引 用 方 式 字 体 强 调 字 体, 通 常 为 黑 体 + 斜 体 强 调 字 体, 黑 体 代 码 1.21: 字 体 标 记 示 例 1 <html> 2 <head> 3 <title> 文 本 标 记 的 综 合 示 例 </title> 4 </head> 5 <body text="blue"> 6 <h1> 最 大 的 标 题 </h1> 7 <h3> 使 用 的 标 题 h3</h3> 8 <h6> 最 大 的 标 题 </h6> 9 <p><b> 黑 体 字 文 本 </b> </p> 10 <p><i> 斜 体 字 文 本 </i> </p> 11 <p><u> 下 加 一 划 线 文 本 </u> </p> 12 <p><tt> 打 字 机 风 格 的 文 本 </tt></p> 13 <p><cite> 引 用 方 式 的 文 本 </cite></p> 14 <p><em> 强 调 的 文 本 </em></p> 15 <p><strong> 加 重 的 文 本 </strong></p> 16 </body> 17 </html> 27

34 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1.22 img 图 片 对 于 任 何 网 页 制 作 者 来 说 都 是 很 重 要 的 使 用 <img /> 标 记, 可 以 在 网 页 中 放 置 一 张 图 片 代 码 1.22 是 一 个 简 单 的 图 片 示 例, 该 示 例 中 的 img 的 src 属 性 使 用 的 是 相 对 路 径, 在 编 写 这 个 网 页 时, 图 片 sunset.gif 应 该 和 该 网 页 文 件 存 放 在 同 一 个 目 录 中 <img src="sunset.gif" /> 代 码 1.22: 图 片 示 例 img 标 记 是 一 个 非 围 堵 ( 封 闭 ) 标 记, 不 需 要 </img> 结 束 它 也 具 有 一 些 特 殊 属 性, 例 如 : src: 图 片 的 地 址 可 以 是 一 个 完 整 的 URL, 也 可 是 一 个 在 服 务 器 上 的 相 对 地 址 alt: 当 图 片 不 能 显 示 时, 在 图 片 的 位 置 显 示 次 文 字 信 息 height: 图 片 的 高 度 width: 图 片 的 宽 度 代 码 1.23: Img 示 例 <img src=" alt=" Beautiful Sunset" /> <img src="sunset.gif" height="50px" width="100px"> 一 个 界 面 美 观 的 web 页 面 不 仅 仅 要 包 含 文 字 和 图 片, 而 且 还 要 有 合 适 的 图 文 混 排 功 能 在 html 文 件 中 进 行 图 文 混 排 时, 通 过 设 置 img 的 align 属 性, 可 以 设 置 不 同 的 图 文 混 排 方 式 例 如 : 左 对 齐, 图 片 在 文 字 的 左 边, 文 字 环 绕 图 片 ; 右 对 齐, 图 片 在 文 字 的 右 边 文 字 环 绕 图 片 在 <img> 标 记 中 主 要 使 用 的 图 片 格 式 有 以 下 3 种 : GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) GIF 格 式 图 像 是 一 种 8 位 压 缩 图 像, 体 积 较 小, 在 网 络 上 的 传 输 速 度 较 快 显 示 时 图 像 由 模 糊 至 清 晰 逐 步 渲 染 但 是 由 于 颜 色 的 色 位 较 少, 因 此 不 适 合 用 来 表 现 真 彩 色 的 图 片 JPG 图 片 是 24 位 色, 颜 色 丰 富, 可 以 表 现 真 彩 色 是 一 种 使 用 有 损 压 缩 算 法 压 缩 的 文 件, 体 积 是 位 图 的 1/4 到 1/20 图 像 质 量 较 高 但 不 能 够 实 现 背 景 透 明 效 果 显 示 时 图 片 逐 行 显 示 28

35 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 PNG 是 具 有 GIF 和 JPG 的 优 点 : 具 有 丰 富 的 24 位 色, 也 可 以 实 现 背 景 透 明 效 果, 采 用 的 是 无 损 的 压 缩 算 法 显 示 时 图 像 有 模 糊 至 清 晰 逐 步 进 行 渲 染 在 代 码 1.23 中, 图 片 标 记 <img> 中 使 用 了 width 和 height 属 性 使 用 这 两 个 属 性 可 以 让 图 片 发 生 变 形, 如 果 图 片 本 身 较 大, 大 于 指 定 的 尺 寸, 那 么 图 片 会 被 压 缩 ; 如 果 图 片 小 于 指 定 的 尺 寸, 图 片 就 会 被 放 大 : 1. 如 果 源 图 片 较 大, 浏 览 器 先 从 服 务 器 下 载 图 片 到 本 地 临 时 目 录, 让 后 在 执 行 压 缩 算 法, 对 该 图 片 进 行 压 缩, 压 缩 后 在 浏 览 器 进 行 显 示 2. 如 果 源 图 片 较 小, 浏 览 器 先 从 服 务 器 下 载 图 片 到 本 地 临 时 目 录, 让 后 在 执 行 放 大 算 法, 对 该 图 片 进 行 放 大, 放 大 后 在 浏 览 器 进 行 显 示 在 第 1 中 方 案 中, 浏 览 器 下 载 了 过 多 的 数 据, 增 加 了 下 载 的 时 间, 而 且 需 要 执 行 压 缩 算 法, 增 加 了 客 户 端 CPU 的 负 担 在 方 案 2 中, 虽 然 下 载 的 数 据 量 小, 但 是 需 要 执 行 放 大 算 法, 同 样 也 增 加 了 客 户 端 CPU 的 负 担, 而 且 经 过 放 大 后 的 图 片, 显 示 出 的 图 片 会 有 所 失 真 所 以, 方 案 1 和 方 案 2 都 不 是 首 选 的 方 案, 最 好 选 择 大 小 合 适 的 图 片, 这 样 不 仅 减 少 了 客 户 CPU 的 负 担, 而 且 也 保 证 了 图 片 的 质 量 左 环 绕 设 置 图 片 的 属 性 为 align= left, 就 可 以 实 现 图 片 的 左 对 齐 代 码 1.24 运 行 的 结 果 如 图 1.16 所 示 代 码 1.24: 图 文 环 绕 1 <html> 2 <head> 3 <title> 图 文 混 排 </title> 4 </head> 5 <body> 6 <img src="lrimg.jpg" width="300px" align="left"/> 7 题 目 : 啼 鸟 <br /> 8 作 者 : 欧 阳 修 ( )<br /> 9 我 遭 谗 口 身 落 此, 每 闻 巧 言 宜 可 憎 <br /> 10 春 到 山 城 苦 寂 寞, 把 盏 常 恨 无 娉 婷 <br /> 11 花 开 鸟 语 辄 自 醉, 醉 与 花 鸟 为 交 朋 <br /> 12 花 能 嫣 然 顾 我 笑, 鸟 劝 我 饮 非 无 情 <br /> 13 身 闲 酒 美 惜 光 景, 惟 恐 鸟 散 花 飘 零 <br /> 14 可 笑 灵 均 楚 泽 畔, 离 骚 憔 悴 愁 独 醒 </body> 17 </html> 29

36 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 右 环 绕 如 果 想 把 图 片 放 在 文 字 的 右 边, 只 要 修 改 algin 的 值 为 right 就 可 以 了 修 改 代 码 1.24 代 码 的 第 6 行 代 码, 将 其 改 为 <img src="lrimg.jpg" width="300px" align="righ"/> 修 改 后 运 行 的 结 果 如 图 1.17 所 示 图 1.16: 图 片 左 对 齐 图 1.17: 图 片 右 对 齐 30

37 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 1.23 习 题 作 业 1. 在 空 白 网 页 的 右 下 角 显 示 字 符 串 西 南 林 学 院 计 科 系 2. 制 作 如 图 1.18 所 示 的 网 页, 网 页 四 角 分 别 是 春 夏 秋 冬 四 个 汉 字, 网 页 的 中 间 显 示 hello 图 1.18: 网 页 布 局 3. 比 较 图 1.16 和 图 1.17 可 以 发 现, 两 幅 图 中 图 片 和 文 字 的 间 距 大 小 不 一 样 如 何 增 大 或 减 小 图 片 和 文 字 之 间 的 距 离? 4. 利 用 表 格 制 作 如 图 1.19 所 示 的 个 人 简 历, 表 格 的 宽 度 要 求 900px 5. 收 集 你 最 喜 欢 的 网 站 的 网 址, 将 他 们 归 类, 做 成 超 级 链 接 要 求 : (a) 使 用 div 标 记 存 放 同 一 类 的 网 址 (b) 点 击 网 址 的 链 接 时, 在 新 窗 口 打 开 6. 收 集 你 喜 欢 的 图 片, 然 后 将 它 们 做 成 一 个 画 廊 7. 思 考 :<tr> 和 <td> 分 别 表 示 什 么? 它 们 之 间 有 什 么 联 系 8. 思 考 : 什 么 是 相 对 路 径? 什 么 是 绝 对 路 径? 在 网 页 中 使 用 哪 种 类 型 的 路 径 比 较 好? 为 什 么 9. <head> 标 记 中 的 charset 的 作 用 是 什 么? 如 果 文 件 保 存 时 的 编 码 和 charset 中 指 定 的 编 码 不 一 致, 会 发 生 什 么 情 况? 31

38 第 一 部 分. HTML 基 础 网 页 设 计 与 网 站 开 发 图 1.19: 个 人 简 历 32

39 第 二 部 分 css 基 础 CSS(Cascading Style Sheets, 层 叠 样 式 表 ) 用 来 定 义 HTML 元 素 的 显 示 样 式 由 于 两 种 主 要 的 浏 览 器 (firefox 和 Internet Explorer) 不 断 地 将 新 的 HTML 标 记 和 属 性 ( 比 如 字 体 标 记 和 颜 色 属 性 ) 添 加 到 HTML 规 范 中, 创 建 文 档 内 容 清 晰 地 独 立 于 文 档 表 现 层 的 站 点 变 得 越 来 越 困 难 为 了 解 决 这 个 问 题, 万 维 网 联 盟 (W3C), 这 个 非 营 利 的 标 准 化 联 盟, 肩 负 起 了 HTML 标 准 化 的 使 命, 并 在 HTML 4.0 之 外 创 造 出 样 式 (Style) 目 前 所 有 的 主 流 浏 览 器 均 支 持 层 叠 样 式 表,CSS 具 有 以 下 优 点 : 为 已 编 写 好 的 HTML 文 档 设 计 新 的 外 观 修 改 外 观 时, 只 需 要 修 改 少 量 的 CSS 代 码 2.1 CSS 的 使 用 在 html 文 件 中 使 用 css 共 有 4 种 方 法 : 嵌 入 将 css 样 式 表 用 <style> 标 记 包 起 来, 放 到 <head> 和 </head> 之 间 1 <html> 2 <head> 3 <title>this is a title</title> 4 <style type="text/css"> 5 body {color: blue} 6 </style> 7 </head> 8 <body> 9 hello css! 10 </body> 11 </htm> 33

40 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 使 用 外 部 css 文 档 可 以 把 所 有 的 css 文 档, 独 立 出 来 放 到 一 个 文 本 文 档 中, 让 后 在 html 文 档 中 使 用 <link> 标 记 把 css 链 接 过 来 <link> 标 记 放 在 <head> 和 </ head> 之 间 <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css"> 在 上 面 的 示 例 中, 使 用 了 一 个 外 部 的 css 文 件 :style.css 代 码 2.1: mystyle.css 1 hr {color: sienna;} 2 p {margin-left: 20px;} 3 body {background-image: url("images/back40.gif");} 导 入 也 可 以 把 多 个 独 立 的 css 文 件 合 并 成 一 个 css 文 件 例 如, 现 在 有 两 个 css 文 件, 一 个 是 基 本 的 css 文 件, 另 一 个 css 文 件 是 对 基 本 css 的 扩 展, 可 以 使 用 下 面 的 方 法, 把 这 两 个 文 件 合 并 成 一 个 文 件 1 <STYLE TYPE="text/css"> 2 <!-- url(style.css); 4... rest of style code goes here 5 --> 6 </STYLE> 直 接 嵌 入 css 也 可 以 直 接 当 做 html 标 记 的 属 性 来 使 用 <P STYLE="margin:1.0in"> 这 是 一 个 段 落 示 例.</P> 2.2 CSS 简 单 示 例 这 是 一 个 适 合 初 学 者 的 简 单 示 例 示 例 中 没 有 使 用 过 多 的 css 样 式, 主 要 是 介 绍 如 何 创 建 一 个 html 文 档 一 个 css 文 档 以 及 如 何 将 这 两 个 文 件 组 合 在 一 起 学 习 本 示 例 有 助 于 对 html 和 css 有 一 个 整 体 性 的 了 解, 是 编 写 复 杂 html 文 件 和 css 文 件 的 开 始 1 在 本 示 例 中 我 们 将 编 写 一 个 如 图 2.1 所 示 的 网 页 1 参 考 示 例 来 自 : 34

41 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 图 2.1: 网 页 的 最 终 效 果 第 一 步 : 编 写 HTML 文 件 本 示 例 作 为 初 学 者 的 第 一 个 css, 我 们 不 能 因 为 高 级 编 辑 器 的 特 殊 功 能 而 使 我 们 分 心, 所 以 建 议 使 用 功 能 比 较 简 单 的 编 辑 器 比 如 :windows 中 的 记 事 本 linux 中 的 文 本 编 辑 器 或 者 vim mac 中 的 textedit 等 当 明 白 了 其 中 的 原 理 后, 建 议 使 用 高 级 的 商 业 编 辑 器, 如 :Dreamweaver 打 开 记 事 本, 输 入 代 码 2.2 中 的 内 容 : 代 码 2.2: ex1.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http :// 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>xxx 个 人 主 页 </title> 6 </head> 7 <body> 8 <!-- 站 点 导 航 菜 单 --> 9 <ul class="navbar"> 10 <li><a href="index.html"> 首 页 </a> 11 <li><a href="profile.html"> 个 人 简 历 </a> 12 <li><a href="myworks.html"> 个 人 作 品 </a> 13 <li><a href="hobby.html"> 特 长 爱 好 </a> 35

42 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 14 </ul> <!-- 网 页 内 容 --> 17 <h1> 我 的 第 一 个 CSS 作 品 </h1> <p> 欢 迎! <p> 这 是 一 个 简 单 的 网 页, 它 没 有 图 片, 但 是 应 用 了 CSS 样 式, 也 包 含 了 一 些 链 接 <p> 在 这 里 你 可 以 添 加 更 多 你 自 己 的 内 容 <!-- 日 期 和 署 名 --> 26 <address>20009 年 6 月 10 日 <br> 27 孙 永 科. </address> </body> 30 </html> 代 码 2.2 说 明 :<ul> 表 示 无 序 列 表 (Unordered List), 列 表 项 没 有 编 号 每 一 个 <li> 代 表 一 项 标 记 <p> 表 示 段 落 (Paragraph) 第 二 步 : 添 加 颜 色 在 第 一 步 中, 我 们 创 建 了 一 个 白 底 黑 子 的 页 面, 为 了 让 页 面 显 得 更 好 看 一 些, 我 们 可 以 给 改 网 页 添 加 一 些 颜 色 我 们 使 用 嵌 入 的 方 式, 为 该 HTML 文 件 添 加 一 个 CSS 样 式 ( 添 加 代 码 2.3) 代 码 2.3: 添 加 样 式 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http :// 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>xxx 个 人 主 页 </title> 6 <style type="text/css"> 7 body { 8 color: purple; 9 background-color: #d8da3d } 10 </style> 11 </head> 36

43 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 12 <body> 13 [etc.] 代 码 2.3 说 明 : 标 记 <style> 用 来 标 明, 哪 一 部 代 码 为 css 代 码, 本 示 例 中, 包 含 在 <style> 和 </style> 中 的 代 码 ( 第 68 行 ) 都 是 css 代 码 第 7 行,body 指 明 大 括 号 中 的 设 置 是 针 对 body 的 第 8 行, 设 置 前 景 色 ( 也 可 以 理 解 为 设 置 字 体 的 颜 色 ) 为 紫 色 (purple) 第 9 行, 设 置 背 景 色, 该 颜 色 值 使 用 十 六 进 制 表 示 注 意, 前 面 的 # 不 能 省 略 body 的 背 景 色 也 就 是 整 个 页 面 的 背 景 色 html 中 的 其 他 标 记 因 为 没 有 设 置 背 景 色, 所 以 它 们 的 背 景 色 都 将 使 用 默 认 值 透 明 色 (transparent); 它 们 的 前 景 色 (color) 都 将 继 承 body 的 前 景 色, 因 为 它 们 都 在 body 环 境 中 保 存 该 文 件, 使 用 浏 览 器 打 开 浏 览 可 以 看 到 图 2.2 所 示 的 界 面 图 2.2: 添 加 颜 色 效 果 37

44 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 第 三 步 : 设 置 字 体 另 一 件 比 较 容 易 实 现 的 功 能 是 为 网 页 中 不 同 的 标 记 设 置 不 同 的 字 体 代 码 2.4 实 现 的 效 果 是 : 设 置 网 页 中 除 了 <h1> 的 所 有 标 记 使 用 宋 体 字 体, 标 记 <h1> 使 用 黑 体 字 体 在 web 中, 我 们 不 得 而 知 客 户 端 都 安 装 了 哪 些 字 体, 因 此, 我 们 必 须 为 网 页 添 加 一 些 替 换 字 体 : 如 果 客 户 端 没 有 安 装 宋 体 字 体, 则 使 用 楷 体 或 者 Times New Roman 字 体, 依 此 类 推 ; 如 果 这 些 字 体 都 没 有 安 装, 则 使 用 浏 览 器 指 定 的 字 体 代 码 2.4: 设 置 字 体 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http :// 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>xxx 个 人 主 页 </title> 6 <style type="text/css"> 7 body { 8 font-family: 宋 体, 楷 体, "Times New Roman", Times, serif; 9 color: purple; 10 background-color: #d8da3d } 11 h1 { 12 font-family: 黑 体, 宋 体, Arial, SunSans-Regular, sans-serif 13 } 14 </style> 15 </head> 16 <body> 17 [etc.] 第 四 步 : 添 加 导 航 条 很 多 的 网 页 在 其 顶 部 或 者 一 侧 都 有 一 个 导 航 菜 单 本 示 例 中 可 以 利 用 html 文 件 前 面 的 list 列 表 实 现 一 个 菜 单, 我 们 将 实 现 一 个 左 侧 菜 单 为 此 需 要 把 body 中 的 内 容 整 体 向 右 移 动, 把 列 表 从 顶 端 移 动 到 左 侧 在 css 中, 可 以 使 用 padding-left postion left 和 top 属 性 实 现 这 些 效 果 ( 参 见 代 码 2.5) 浏 览 效 果 如 图 2.3 代 码 2.5: 添 加 导 航 条 38

45 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http :// 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>xxx 个 人 主 页 </title> 6 <style type="text/css"> 7 body { 8 padding-left: 11em; 9 font-family: 宋 体, 楷 体, "Times New Roman",Times, serif; 10 color: purple; 11 background-color: #d8da3d 12 } 13 h1 { 14 font-family: 黑 体, 宋 体, Arial,SunSans-Regular, sans-serif 15 } 16 ul.navbar { 17 position: absolute; 18 top: 2em; 19 left: 1em; 20 width: 9em 21 } 22 </style> 23 </head> 24 <body> 25 [etc.] 代 码 2.5 说 明 : 第 17 行, position: absolute 说 明 ul 的 位 置 不 同 于 其 他 文 字, 而 是 由 top 和 left 指 定 2em 表 示 但 前 字 体 2 倍 的 大 小, 如 果, 当 前 字 体 是 12px, 那 么 2em=24px; 39

46 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 图 2.3: 左 侧 菜 单 第 五 步 : 设 置 链 接 样 式 导 航 现 在 仍 是 一 个 列 表, 而 不 象 一 个 菜 单 需 要 修 改 它 的 样 式 : 去 掉 列 表 的 项 目 符 号, 把 列 表 文 字 向 左 移 动, 为 每 一 个 列 表 项 添 加 背 景 色 和 一 个 黑 色 的 矩 形 ( 代 码 2.6) 代 码 2.6: 设 置 链 接 样 式 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http :// 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>xxx 个 人 主 页 </title> 6 <style type="text/css"> 7 body { 8 padding-left: 11em; 9 font-family: 宋 体, 楷 体, "Times New Roman",Times, serif; 10 color: purple; 40

47 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 11 background-color: #d8da3d } 12 h1 { 13 font-family: 黑 体, 宋 体, Arial,SunSans-Regular, sansserif } 14 ul.navbar { 15 list-style-type: none; 16 padding: 0; 17 margin: 0; 18 position: absolute; 19 top: 2em; 20 left: 1em; 21 width: 9em } ul.navbar li { 24 background: white; 25 margin: 0.5em 0; 26 padding: 0.3em; 27 border-right: 1em solid black } 28 ul.navbar a { 29 text-decoration: none } 30 a:link { 31 color: blue } 32 a:visited { 33 color: purple } </style> 36 </head> <body> 39 [etc.] 第 六 步 : 添 加 水 平 线 在 正 文 和 底 部 签 名 之 间 插 入 一 条 水 平 分 割 线 使 用 border-top 属 性 可 以 在 标 记 <address> 中 实 现 一 个 点 状 线 ( 代 码 2.7) 代 码 2.7: 水 平 分 割 线 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http :// 2 <html> 3 <head> 41

48 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>xxx 个 人 主 页 </title> 6 <style type="text/css"> 7 body { 8 padding-left: 11em; 9 font-family: 宋 体, 楷 体, "Times New Roman",Times, serif; 10 color: purple; 11 background-color: #d8da3d } 12 h1 { 13 font-family: 黑 体, 宋 体, Arial,SunSans-Regular, sansserif } 14 ul.navbar { 15 list-style-type: none; 16 padding: 0; 17 margin: 0; 18 position: absolute; 19 top: 2em; 20 left: 1em; 21 width: 9em } ul.navbar li { 24 background: white; 25 margin: 0.5em 0; 26 padding: 0.3em; 27 border-right: 1em solid black } 28 ul.navbar a { 29 text-decoration: none } 30 a:link { 31 color: blue } 32 a:visited { 33 color: purple } address { 36 margin-top: 1em; 37 padding-top: 1em; 38 border-top: thin dotted } 39 </style> 40 </head> <body> 43 [etc.] 42

49 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 现 在, 示 例 程 序 就 完 成 了 打 开 浏 览 器 就 可 以 看 到 效 果 了 ( 图 2.4) 图 2.4: 最 终 效 果 第 七 步 : 使 用 外 部 css 创 建 一 个 文 本 文 件 mycss.css, 将 网 页 中 的 css 设 置 复 制 到 该 文 件 中, 使 css 文 件 和 html 文 件 分 离 这 里 需 要 注 意 的 是 mycss.css 文 件 和 ex1.html 文 件 应 该 放 置 在 同 一 个 目 录 中 其 运 行 的 效 果 和 上 一 步 的 运 行 效 果 一 样 ( 图 2.4) 代 码 2.8: mycss.css 1 body { 2 padding-left: 11em; 3 font-family: 宋 体, 楷 体, "Times New Roman",Times, serif; 4 color: purple; 5 background-color: #d8da3d } 6 h1 { 7 font-family: 黑 体, 宋 体, Arial,SunSans-Regular, sansserif } 8 ul.navbar { 9 list-style-type: none; 10 padding: 0; 11 margin: 0; 12 position: absolute; 13 top: 2em; 14 left: 1em; 43

50 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 15 width: 9em } ul.navbar li { 18 background: white; 19 margin: 0.5em 0; 20 padding: 0.3em; 21 border-right: 1em solid black } 22 ul.navbar a { 23 text-decoration: none } 24 a:link { 25 color: blue } 26 a:visited { 27 color: purple } address { 30 margin-top: 1em; 31 padding-top: 1em; 32 border-top: thin dotted } 代 码 2.9: ex1.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http :// 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>xxx 个 人 主 页 </title> 6 <LINK REL=STYLESHEET TYPE="text/css" HREF="mycss.css"> 7 </head> 8 <body> 9 <!-- 站 点 导 航 菜 单 --> 10 <ul class="navbar"> 11 <li><a href="index.html"> 首 页 </a> 12 <li><a href="profile.html"> 个 人 简 历 </a> 13 <li><a href="myworks.html"> 个 人 作 品 </a> 14 <li><a href="hobby.html"> 特 长 爱 好 </a> 15 </ul> <!-- 网 页 内 容 --> 18 <h1> 我 的 第 一 个 作 品 CSS </h1> 19 44

51 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 20 <p> 欢 迎! <p> 这 是 一 个 简 单 的 网 页, 它 没 有 图 片, 但 是 应 用 了 样 式 CSS 也 包 含 了 一 些 链 接, <p> 在 这 里 你 可 以 添 加 更 多 你 自 己 的 内 容 <!-- 日 期 和 署 名 --> 27 <address>20009 年 6 月 10 日 <br> 28 孙 永 科. </address> </body> 31 </html> 2.3 css 长 度 单 位 css 中 的 长 度 单 位 分 为 两 大 类 : 绝 对 长 度 和 相 对 长 度 在 网 页 中 最 常 用 的 单 位 是 像 素 (px) 相 对 长 度 相 对 长 度 意 思 是 指 单 位 的 长 度 会 随 着 参 考 值 的 变 化 而 变 化, 不 是 固 定 的 css 中 的 相 对 长 度 单 位 有 : 长 度 单 位 em 说 明 表 2.1: CSS 相 对 长 度 网 页 环 境 中 字 体 高 度 ex 字 母 x 的 高 度, 大 约 是 文 字 高 度 的 一 半 px 像 素 Pixels % 百 分 比 绝 对 长 度 绝 对 长 度 的 单 位 值 是 一 个 固 定 值 不 论 显 示 器 的 分 辨 率 是 1024x768, 还 是 800x600, 它 的 长 度 都 是 固 定 的 绝 对 单 位 适 合 制 作 打 印 页 面 的 单 位 45

52 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 表 2.2: CSS 绝 对 长 度 长 度 单 位 说 明 in 英 寸 Inches (1 英 寸 = 2.54 厘 米 ) cm 厘 米 Centimeters mm 毫 米 Millimeters pt 点 Points (1 点 = 1/72 英 寸 ) pc 皮 卡 Picas (1 皮 卡 = 12 点 ) 绝 对 长 度 实 测 在 实 际 的 测 试 中, 发 现 即 使 使 用 了 绝 对 单 位, 在 不 同 的 分 辨 率 下, 长 度 仍 然 会 发 生 变 化 其 实 在 浏 览 器 中 最 基 本 的 单 位 是 像 素 (px), 其 他 的 所 有 单 位 都 是 通 过 换 算 转 换 来 的 因 此, 只 要 像 素 的 发 生 了 变 化, 其 他 所 有 的 单 位 都 会 发 生 变 化 所 以, 建 议 使 用 像 素 作 为 度 量 单 位 CSS 语 法 CSS 语 法 由 三 部 分 构 成 : 选 择 器 属 性 和 值 : selector {property: value} 选 择 器 (selector) 通 常 是 你 希 望 定 义 的 HTML 元 素 或 标 记, 属 性 (property) 是 你 希 望 改 变 的 属 性, 并 且 每 个 属 性 都 有 一 个 值 属 性 和 值 被 冒 号 分 开, 并 由 花 括 号 包 围, 这 样 就 组 成 了 一 个 完 整 的 样 式 声 明 (declaration): body {color: blue} 上 面 这 行 代 码 的 作 用 是 将 body 元 素 内 的 文 字 颜 色 定 义 为 蓝 色 在 上 述 例 子 中,body 是 选 择 器, 而 包 括 在 花 括 号 内 的 的 部 分 是 声 明 声 明 依 次 由 两 部 分 构 成 : 属 性 和 值,color 为 属 性,blue 为 值 除 了 英 文 单 词 red, 我 们 还 可 以 使 用 十 六 进 制 的 颜 色 值 #ff0000: p { color: #ff0000; } 还 可 以 通 过 两 种 方 法 使 用 RGB 值 : 2 css 绝 对 长 度 的 实 测 结 果 来 自 Internet, 参 见 060_css_length_unit.html 46

53 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 如 果 要 定 义 不 止 一 个 声 明, 则 需 要 用 分 号 将 每 个 声 明 分 开 下 面 的 例 子 展 示 出 如 何 定 义 一 个 红 色 文 字 的 居 中 段 落 最 后 一 条 规 则 是 不 需 要 加 分 号 的, 因 为 分 号 在 英 语 中 是 一 个 分 隔 符 号, 不 是 结 束 符 号 然 而, 大 多 数 有 经 验 的 设 计 师 会 在 每 条 声 明 的 末 尾 都 加 上 分 号, 这 么 的 好 处 是, 当 你 从 现 有 的 规 则 中 增 减 声 明 时, 会 尽 可 能 的 减 少 出 错 的 可 能 性 就 像 这 样 : p {text-align:center; color:red;} 如 果 属 性 的 值 中 间 有 空 格, 那 么 值 必 须 使 用 引 号 引 起 来 p {font-family: "sans serif"; color:red} 2.5 选 择 器 的 分 组 如 果 多 个 选 择 器 使 用 相 同 的 属 性, 则 CSS 样 式 没 有 必 要 重 复 编 写, 可 以 将 它 们 看 成 一 组, 选 择 器 使 用 逗 号 分 隔, 写 在 一 起 例 如 : h1,h2,h2,h3,h5,h6 { color: green; } 2.6 继 承 根 据 CSS 定 义, 子 元 素 从 父 元 素 继 承 属 性 看 看 下 面 这 条 规 则 : body { font-family: Verdana, sans-serif; } 根 据 上 面 这 条 规 则, 站 点 的 body 元 素 将 使 用 Verdana 字 体 ( 假 如 访 问 者 的 系 统 中 存 在 该 字 体 的 话 ) 通 过 CSS 继 承, 子 元 素 将 继 承 最 高 级 元 素 ( 在 本 例 中 是 body) 所 拥 有 的 属 性 ( 这 些 子 元 素 诸 如 p, td, ul, ol, ul, li, dl, dt, 和 dd) 不 需 要 另 外 的 规 则, 所 有 body 的 子 元 素 都 应 该 显 示 Verdana 字 体, 子 元 素 的 子 元 素 也 一 样 47

54 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 2.7 CSS 类 选 择 器 在 CSS 中, 类 选 择 器 以 一 个 点 号 显 示 :.center {text-align: center} 在 上 面 的 例 子 中, 所 有 拥 有 center 类 的 HTML 元 素 均 为 居 中 在 下 面 的 HTML 代 码 中,h1 和 p 元 素 都 有 center 类 这 意 味 着 两 者 都 将 遵 守.center 选 择 器 中 的 规 则 下 面 是 一 个 完 整 的 例 子 : 1 <html> 2 <head> 3 <style type="text/css"> 4.center {text-align: center} 5 p {color:red;} 6 </style> 7 <body> 8 <h1 class="center"> 9 This heading will be center-aligned 10 </h1> <p class="center"> 13 This paragraph will also be center-aligned. 14 </p> 15 </body> 16 </html> 在 上 面 的 示 例 中 如 果 网 页 中 有 多 个 <p> 标 记, 那 么 网 页 中 的 所 有 <p> 标 记 都 会 使 用 红 色 显 示 如 果 仅 仅 之 希 望 一 部 分 <p> 标 记 使 用 这 个 属 性, 则 需 要 使 用 类 选 择 器 来 指 定 例 如 : p.red {color:red;} 这 个 css 表 示, 只 把 具 有 class= red 属 性 的 <p> 标 记 的 字 体 设 为 红 色 下 面 是 一 个 完 整 的 示 例 : 1 <html> 2 <head> 3 4 <style type="text/css"> 5 body {color:black;} 代 码 2.10: pa.html 48

55 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 6 p.red {color:red; padding: 20px;} 7 a.green {color:green; padding: 20px;} 8 </style> 9 10 </head> <body> 13 <p class="red"> 我 是 一 个 红 色 文 字 的 段 落 14 <a href="#" class="green"> 我 是 一 个 绿 色 文 字 的 链 接 </a></p> 15 <p><b> 注 释 :</b> 段 落 和 链 接 的 周 围, 我 们 为 它 们 设 置 了 少 许 内 边 距 </p> 16 </body> </html> 2.8 CSS id 选 择 器 id 选 择 器 可 以 为 标 有 特 定 id 的 HTML 元 素 指 定 特 定 的 样 式 id 选 择 器 以 # 来 定 义 下 面 的 两 个 id 选 择 器, 第 一 个 可 以 定 义 元 素 的 颜 色 为 红 色, 第 二 个 定 义 元 素 的 颜 色 为 绿 色 : #red {color:red;} #green {color:green;} 下 面 的 HTML 代 码 中,id 属 性 为 red 的 p 元 素 显 示 为 红 色, 而 id 属 性 为 green 的 p 元 素 显 示 为 绿 色 <p id="red"> 这 个 段 落 是 红 色 </p> <p id="green"> 这 个 段 落 是 绿 色 </p> 上 面 的 示 例 pa.html 文 档, 也 可 以 改 写 为 如 下, 效 果 是 一 样 的 代 码 2.11: pa2.html 1 <html> 2 <head> 3 4 <style type="text/css"> 5 body {color:black;} 6 p#red {color:red; padding: 20px;} 7 a#green {color:green; padding: 20px;} 8 </style> 9 49

56 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 10 </head> <body> 13 <p id="red"> 我 是 一 个 红 色 文 字 的 段 落 14 <a href="#" id="green"> 我 是 一 个 绿 色 文 字 的 链 接 </a></p> 15 <p><b> 注 释 :</b> 段 落 和 链 接 的 周 围, 我 们 为 它 们 设 置 了 少 许 内 边 距 </p> 16 </body> </html> 2.9 CSS 属 性 选 择 器 属 性 选 择 器 可 以 为 包 含 某 个 特 定 属 性 值 的 标 记 指 定 样 式 在 HTML 中 <input> 标 记 会 随 着 type 属 性 的 不 同, 而 显 示 出 不 同 的 控 件 如 果 一 个 网 页 中 包 含 文 本 框 按 钮 和 复 选 按 钮, 而 我 们 只 想 给 其 中 的 文 本 框 设 置 样 式, 这 时 就 可 以 利 用 属 性 选 择 器, 非 常 的 方 便 ( 参 见 示 例 代 码 2.12) 表 2.3: 属 性 选 择 器 示 例 示 例 input[type= button ] input[typeˆ= ch ] input[type$= mit ] 说 明 属 性 type 的 值 为 button 的 input 元 素 属 性 type 的 值 以 ch 开 头 的 input 元 素 属 性 type 的 值 以 mit 结 束 的 input 元 素 代 码 2.12: 属 性 选 择 示 例 input[type="text"] { background:#eeaacc; } 2.10 伪 类 选 择 器 2.11 层 叠 顺 序 如 果 一 个 标 记 对 应 了 多 个 样 式 表, 那 么, 哪 个 样 式 表 的 哪 个 规 则 能 够 获 得 标 记 的 控 制 权, 需 要 遵 循 一 定 的 原 则 50

57 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发!important 特 性 之 重 要 的 样 式 表, 由 他 声 明 的 样 式 会 超 过 其 他 相 同 权 重 的 样 式 当 一 个 标 记 的 样 式 被 重 复 声 明 时, 优 先 使 用 带 有!important 标 记 的 样 式 [2] 例 如 : 代 码 2.13:!important 示 例 1 <html> 2 <head> 3 <title> 规 则 示 例 import</title> 4 <style> 5 body{background:white!important} 6 </style> 7 </head> 8 <body style="background:red"> 9 <div style="background:green"> 声 明 的 示 例 important</div> 10 <p> 对 比 背 景 颜 色 </p> 11 </body> 12 </html> 代 码 2.13 中 的 第 5 行 和 第 8 行 都 指 定 了 标 记 <body> 的 背 景 颜 色, 但 是 由 于 第 5 行 重 使 用 了!important, 所 以 在 显 示 时 浏 览 器 会 给 body 选 择 使 用 第 5 行 的 样 式 显 示 的 效 果 如 图 2.5 所 示 : 图 2.5: important 使 用 修 改 代 码 2.13, 将 其 中 第 5 行 代 码 中 的!important 去 掉, 改 成 下 面 的 代 码, 则 显 示 的 效 果 将 截 然 不 同 在 修 改 后 的 代 码 中, 有 2 处 同 时 对 body 标 签 指 定 了 css 属 性, 但 是 第 8 行 代 码 使 用 的 是 直 接 嵌 入 的 方 式, 其 优 先 级 较 高, 所 以 最 终 的 显 示 效 果 使 用 第 8 行 所 指 定 的 颜 色 其 显 示 效 果 如 图 2.6 代 码 2.14: 无 important body{background:white} 51

58 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 图 2.6: 无 important 的 显 示 显 示 效 果 在 过 代 码 2.13 和 代 码 2.14 中, 我 们 对 对 标 记 <body> 使 用 嵌 入 方 式 和 直 接 嵌 入 方 式 进 了 多 次 定 义, 通 过 实 验 我 们 发 现 : 关 键 字!important 改 变 了 css 对 标 记 的 控 制 优 先 级 如 果 对 同 一 个 标 记 进 行 了 多 次 的 css 定 义, 浏 览 器 使 用 带 有!important 的 css 定 义 对 标 记 进 行 渲 染 下 面 在 通 过 两 个 代 码 示 例 ( 代 码 2.15 和 代 码 2.16), 他 们 的 运 行 效 果 都 一 样 ( 如 图 2.6) 可 以 看 到 到 在 不 使 用!important 的 时 候, 直 接 嵌 入 式 的 css 代 码 对 标 记 的 控 制 优 先 级 高 于 嵌 入 式 css 代 码 对 标 记 的 控 制 优 先 级, 不 论 嵌 入 式 css 的 位 置 是 放 置 在 前 边 还 是 放 置 在 后 边 代 码 2.15: css1 代 码 2.16: css2 1 <html> 2 <head> 3 <title> 优 先 级 css</title> 4 <style> 5 body{background:white} 6 </style> 7 </head> 8 <body style="background:red" > 9 <div style="background:green "> 10 important 声 明 的 示 例 11 </div> 12 <p> 对 比 背 景 颜 色 </p> 13 </body> 14 </html> 1 <html> 2 <head> 3 <title> 优 先 级 css</title> 4 </head> 5 <body style="background:red" > 6 <div style="background:green "> 7 important 声 明 的 示 例 8 </div> 9 <p> 对 比 背 景 颜 色 </p> 10 </body> 11 <style> 12 body{background:white} 13 </style> 14 </html> CSS 对 代 码 的 控 制 优 先 级 具 有 如 下 的 规 律 : 52

59 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发!important > 直 接 嵌 入 式 css > 嵌 入 式 css = 外 部 css 使 用 嵌 入 式 css 和 外 部 css 时, 采 用 后 来 者 居 上 原 则, 即 书 写 在 最 后 边 的 优 先 级 最 高 2.12 css 背 景 属 性 CSS 允 许 应 用 纯 色 作 为 背 景, 也 允 许 使 用 背 景 图 像 创 建 相 当 复 杂 的 效 果 CSS 在 这 方 面 的 能 力 远 远 在 HTML 之 上, 表 2.4 列 出 的 是 常 见 的 一 些 背 景 属 性 使 用 css 不 仅 可 以 自 定 义 背 景 的 颜 色, 而 且 还 可 以 是 图 片 由 于 不 同 的 浏 览 器 在 解 释 数 字 定 义 的 颜 色 时, 存 在 一 定 的 差 异, 因 此 显 示 的 效 果 也 会 有 所 不 同, 但 是 使 用 图 片 作 为 背 景 时, 就 不 会 存 在 这 种 问 题, 颜 色 显 示 的 效 果 都 是 一 样 的 所 以, 为 了 统 一 显 示 效 果, 很 多 的 网 站 使 用 图 片 来 进 行 背 景 色 的 设 置 属 性 描 述 表 2.4: 背 景 属 性 background 简 写 属 性, 作 用 是 将 背 景 属 性 设 置 在 一 个 声 明 中 background-attachment 背 景 图 像 是 否 固 定 或 者 随 着 页 面 的 其 余 部 分 滚 动 background-color 设 置 元 素 的 背 景 颜 色 scroll: 默 认 背 景 图 像 会 随 着 页 面 其 余 部 分 的 滚 动 而 移 动 ; fixed: 当 页 面 的 其 余 部 分 滚 动 时, 背 景 图 像 不 会 移 动 颜 色 名 称 rgb 值 或 者 十 六 进 制 数 ; background-image 把 图 像 设 置 为 背 景 transparent, 表 示 背 景 颜 色 为 透 明, 默 认 为 transparent url(url): 指 向 图 像 的 路 径 none: 默 认 无 背 景 图 像 body { background-image: url(stars.gif); backgroundcolor: # } 接 下 页 53

60 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 属 性 描 述 background-repeat 设 置 背 景 图 像 是 否 及 如 何 重 复 repeat: 默 认 背 景 图 像 将 在 垂 直 方 向 和 水 平 方 向 重 复 repeat-x: 背 景 图 像 将 在 水 平 方 向 重 复 repeat-y: 背 景 图 像 将 在 垂 直 方 向 重 复 no-repeat: 背 景 图 像 将 仅 显 示 一 次 body { background-image: url(stars.gif); backgroundrepeat: repeat-x } 2.13 文 本 属 性 CSS 文 本 属 性 可 定 义 文 本 的 外 观 通 过 文 本 属 性, 您 可 以 改 变 文 本 的 颜 色 字 符 间 距, 对 齐 文 本, 装 饰 文 本, 对 文 本 进 行 缩 进, 等 等 表 2.5 中 列 出 的 是 常 用 的 几 种 文 本 属 性 属 性 color 描 述 设 置 文 本 颜 色 direction 设 置 文 本 方 向 line-height 设 置 行 高 表 2.5: 文 本 属 性 ltr: 默 认 文 本 方 向 从 左 到 右 rtl: 文 本 方 向 从 右 到 左 normal: 默 认 设 置 合 理 的 行 间 距 number: 设 置 数 字, 此 数 字 会 与 当 前 的 字 体 尺 寸 相 乘 来 设 置 行 间 距 length: 设 置 固 定 的 行 间 距 letter-spacing 设 置 字 符 间 距 % : 基 于 当 前 字 体 尺 寸 的 百 分 比 行 间 距 54 接 下 页

61 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 属 性 描 述 normal: 默 认 定 义 字 符 间 的 标 准 空 间 length: 定 义 字 符 间 的 固 定 空 间 text-align 对 齐 元 素 中 的 文 本 left: 把 文 本 排 列 到 左 边 默 认 值 : 由 浏 览 器 决 定 right: 把 文 本 排 列 到 右 边 center: 把 文 本 排 列 到 中 间 justify: 实 现 两 端 对 齐 文 本 效 果 text-decoration 向 文 本 添 加 修 饰 text-indent 缩 进 元 素 中 文 本 的 首 行 text-transform 控 制 元 素 中 的 字 母 white-space 设 置 元 素 中 空 白 的 处 理 方 式 word-spacing 设 置 字 间 距 normal: 默 认 空 白 会 被 浏 览 器 忽 略 pre: 空 白 会 被 浏 览 器 保 留 其 行 为 方 式 类 似 HTML 中 的 <pre> 标 记 nowrap: 文 本 不 会 换 行, 文 本 会 在 在 同 一 行 上 继 续, 直 到 遇 到 <br> 标 记 为 止 pre-wrap: 保 留 空 白 符 序 列, 但 是 正 常 地 进 行 换 行 pre-line: 合 并 空 白 符 序 列, 但 是 保 留 换 行 符 2.14 css 表 格 CSS 表 格 属 性 允 许 你 设 置 表 格 的 布 局 通 过 css 可 以 设 置 表 格 边 框 的 有 无, 粗 细, 颜 色 等 2.15 css 制 作 菜 单 垂 直 使 用 html 标 记 和 css 可 以 制 作 出 满 美 观 的 web 网 页 55

62 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 属 性 描 述 表 2.6: css 表 格 border-collapse 设 置 是 否 把 表 格 边 框 合 并 为 单 一 的 边 框 border-spacing 设 置 分 隔 单 元 格 边 框 的 距 离 ( 仅 用 于 separated borders 模 型 ) caption-side 设 置 表 格 标 题 的 位 置 empty-cells 设 置 是 否 显 示 表 格 中 的 空 单 元 格 ( 仅 用 于 separated borders 模 型 ) table-layout 设 置 显 示 单 元 行 和 列 的 算 法 automatic: 默 认 列 宽 度 由 单 元 格 内 容 设 定 fixed: 列 宽 由 表 格 宽 度 和 列 宽 度 设 定 代 码 2.17: menu1.html 1 <html> 2 <head> 3 <style type="text/css"> 4 <!-- 5 body,div {font-size:12px;} 6 #menu { 7 MARGIN: 15px 20px 0px 15px; /* 定 义 层 的 外 边 框 距 离 */ 8 PADDING:15px; /* 定 义 层 的 内 边 框 为 15px */ 9 BACKGROUND: #dfdfdf; /* 定 义 背 景 颜 色 */ 10 COLOR: #666; /* 定 义 字 体 颜 色 */ 11 BORDER:#fff 2px solid; /* 定 义 边 框 为 2 白 色 线 条 px */ 12 WIDTH:160px; /* 定 义 内 容 的 宽 度 为 160px */ 13 } #menu ul { 16 MARGIN: 0px; 17 PADDING: 0px; 18 BORDER: medium none; /* 不 显 示 边 框 */ 19 LINE-HEIGHT: normal; 20 LIST-STYLE-TYPE: none; 21 } 22 56

63 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 23 #menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;} 24 #menu li a { 25 PADDING:5px 0px 5px 15px; 26 DISPLAY: block; 27 FONT-WEIGHT: bold; 28 WIDTH: 100%; 29 COLOR: #444; 30 TEXT-DECORATION: none; 31 } #menu li a:hover { 34 BACKGROUND: #C61C18 no-repeat 2px 8px; 35 COLOR: #fff; } > 38 </style> </head> 41 <body> 42 <div id="menu"> 43 <ul> 44 <li><a href="webstandards.html"> 什 么 是 网 站 标 准 </a></li> 45 <li><a href="benefits.html"> 使 用 标 准 的 好 处 </a></li> 46 <li><a href="howto.html"> 怎 样 过 渡 </a></li> 47 <li><a href="tutorial.html"> 相 关 教 程 </a></li> 48 <li><a href="tools.html"> 工 具 </a></li> 49 <li><a href="resources.html"> 资 源 及 链 接 </a></li> 50 </ul> 51 </div> 52 </body> 53 </html> 2.16 css 制 作 菜 单 水 平 通 过 修 改 li 的 float 样 式 属 性, 可 以 改 变 菜 单 的 排 列 方 向, 设 置 float 值 为 left, 就 可 以 然 菜 单 进 行 水 平 排 列 代 码 2.20 的 运 行 结 果 如 图 2.8 所 示 代 码 2.18: hmenu.html 1 <html xmlns=" xml:lang="gb2312" lang="gb2312"> 57

64 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 图 2.7: 运 行 结 果 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset= UTF-8" /> 4 <style type="text/css" media="all"> 5.menu4 { 6 width: 100%; 7 margin: 1em 0; 8 padding: 0; 9 background: #fff none; 10 } 11.menu4 ul { 12 margin: 0; 13 padding: 0; 14 list-style-type: none; 15 } 16.menu4 li { 17 margin: 0; 18 padding: 5px; 19 float: left;/* 水 平 显 示 li*/ 20 width: 7em; 21 margin-right:2px; 22 background: #f00 none; 23 text-align: center; 24 } 25.menu4 a { 26 color:#000; 27 display: block; 58

65 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 28 width: 100%; 29 text-decoration: none; 30 } 31.menu4 a:hover { 32 background: #ff9 none; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="menu4"> 38 <ul> 39 <li><a href=""> 首 页 </a></li> 40 <li><a href=""> 自 我 介 绍 </a></li> 41 <li><a href=""> 个 人 作 品 </a></li> 42 <li><a href=""> 爱 好 特 长 </a></li> 43 </ul> 44 <br clear="left"> 45 </div> 46 </body> 47 </html> 图 2.8: 水 平 菜 单 代 码 2.20 说 明 : 第 2 行 : 指 明 该 html 文 件 使 用 的 编 码 格 式 为 gb2312, 若 不 指 明 编 码 格 59

66 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 式, 在 有 些 浏 览 器 上 会 显 示 乱 码 第 6 行 :margin 指 上 下 边 距 的 距 离 为 1em(1em=1 字 符 宽 度 ), 左 右 为 0 margin 由 4 个 值 分 别 表 示 上 右 下 左 ( 从 上 开 始, 顺 时 针 方 向 一 周 ) 如 果 下 边 距 没 有 设 置, 则 下 边 距 的 值 取 上 边 距 的 值 ; 如 果 左 边 距 的 值 没 有 设 置, 则 左 边 距 的 值 取 右 边 距 的 值 在 此 行 代 码 中, 只 设 置 了 两 个 值, 可 以 理 解 为 : 第 一 个 值 表 示 上 下 边 距 ; 第 二 个 值 表 示 左 右 边 距 第 7 行 :padding, 也 分 为 上 下 左 右, 在 这 里 只 有 一 个 值 0, 即 表 示 上 下 左 右 都 为 0; 2.17 CSS 制 作 菜 单 图 片 菜 单 为 了 是 菜 单 更 加 美 观, 需 要 给 菜 单 添 加 一 些 装 饰, 例 如 添 加 过 渡 的 底 色, 或 者 实 现 圆 脚 效 果 这 些 效 果 都 需 要 借 助 于 背 景 图 片 来 实 现 下 面 是 一 个 使 用 图 片 制 作 水 平 菜 单 的 实 力, 图 2.9 是 其 运 行 的 效 果 图 2.9: 图 片 菜 单 制 作 该 图 片 菜 单, 需 要 两 张 图 片 :tableftc.gif 和 tabrightc.gif (5X84 像 素 ) 图 2.10: tableftc.gif (200x84 像 素 ) 图 2.11: tableftc.gif html 框 架 代 码 通 过 前 面 几 个 菜 单 的 示 例, 可 以 总 结 出 : 1. 制 作 菜 单 都 使 用 <UL> 标 签 2. 菜 单 一 般 都 使 用 <div> 标 签 进 行 围 堵 3. 设 置 标 签 的 样 式 时, 一 般 都 按 照 从 外 到 内 的 顺 序 即 先 设 置 父 标 签 的 样 式, 在 设 置 子 标 签 的 样 式 60

67 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 下 面 是 图 片 菜 单 的 HTML 框 架 代 码, 没 有 添 加 任 何 的 css 样 式, 其 运 行 的 效 果 如 图 2.12 所 示 代 码 2.19: 图 片 菜 单 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 2 <html xmlns=" 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>untitled Document</title> 6 </head> 7 8 <body> 9 10 <h2> 水 平 的 图 片 菜 单 </h2> <div id="tabsc"> 13 <ul> <li><a href="#"><span>link 1</span></a></li> 16 <li><a href="#"><span>link 2</span></a></li> 17 <li><a href="#"><span>link 3</span></a></li> 18 <li><a href="#"><span>long Link Text</span></a></li> 19 <li><a href="#"><span>link 5</span></a></li> 20 <li><a href="#"><span>link 6</span></a></li> 21 <li><a href="#"><span>link 7</span></a></li> 22 </ul> 23 </div> 24 <br /><br /> </body> 27 </html> 添 加 CSS 添 加 css 代 码, 实 现 导 航 菜 单 水 平 排 列, 同 时 使 用 css 伪 代 码 添 加 鼠 标 划 过 菜 单 的 动 态 变 化 效 果 代 码 2.20: hmenu.html 1 body { 61

68 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 图 2.12: html 框 架 代 码 2 margin:0; 3 padding:0; 4 /* 字 号 20, 行 间 距 1.5 倍 */ 5 font: bold 20px/1.5em 黑 体, 宋 体 ; 6 } 7 8 #tabsc { 9 float:left; 10 width:100%; 11 background:#edf7e7; 12 font-size:93%; 13 line-height:normal; 14 } 15 #tabsc ul { 16 margin:0; 17 padding:10px 10px 0 50px; 18 list-style:none; 19 } #tabsc li { 22 display:inline; 23 margin:0; 24 padding:0; 25 } #tabsc a { 28 float:left; 29 background:url("tableftc.gif") no-repeat left top; 30 margin:0; 31 padding: px; 62

69 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 32 text-decoration:none; 33 #tabsc a span { 34 float:left; 35 display:block; 36 background:url("tabrightc.gif") no-repeat right top; 37 padding:5px 15px 4px 6px; 38 color:#464e42; 39 } #tabsc a:hover span { 42 color:#fff; 43 } 44 #tabsc a:hover { 45 background-position:0% -42px; 46 } 47 #tabsc a:hover span { 48 background-position: 100% -42px; 49 } 运 行 结 果 2.18 示 例 1: 首 行 缩 进 使 用 text-indent, 可 以 实 现 首 行 缩 进 功 能, 后 面 的 直 可 以 以 px 为 单 位 进 行 缩 进, 也 可 以 以 em( 字 符 ) 为 单 位 缩 进 通 常 在 书 写 中 文 时, 要 求 首 行 缩 进 2 个 字 符, 可 以 使 用 下 面 的 形 式 实 现 <style type="text/css"> <!--.style1 { text-indent: 2em} --> </style> 2.19 示 例 2: 超 级 链 接 浏 览 器 处 理 超 级 链 接 的 默 认 方 式 是, 对 于 目 前 还 没 有 访 问 过 的 超 级 链 接 是 用 蓝 色 且 带 有 下 划 线 的 文 字 来 显 示 的, 对 于 已 经 访 问 过 的 超 级 链 接 则 是 用 深 紫 色 且 带 有 深 紫 色 的 下 划 线 的 文 字 来 显 示 的 这 些 默 认 的 颜 色 设 置 很 有 可 能 与 自 己 网 页 的 背 景 颜 色 不 协 调 因 此 我 们 完 全 可 以 按 照 自 己 的 视 觉 要 求, 来 自 由 更 改 超 级 链 接 的 显 示 颜 色, 让 它 更 能 体 现 自 己 的 风 格 63

70 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 表 2.7: 超 链 接 css 示 例 A:link color:blue} {text-decoration:none; A:visited {color:red; textdecoration:line-through} A:active {color:white; textdecoration:underline } A:hover {text-decoration:none; color: #FF0000; backgroundcolor:black} 描 述 是 说 明 了 超 级 链 接 还 没 有 被 访 问, 它 没 有 下 划 线, 颜 色 为 蓝 色 说 明 了 超 级 链 接 被 访 问 后, 它 的 颜 色 变 成 了 红 色, 有 了 一 根 删 除 线 说 明 超 级 链 接 处 于 活 动 状 态 的 时 候, 它 的 颜 色 变 成 了 白 色, 有 了 下 划 线 说 明 鼠 标 移 动 到 超 级 链 接 后, 它 没 有 下 划 线, 文 字 颜 色 变 成 了 黄 色, 背 景 颜 色 是 黑 色 2.20 示 例 3: 图 片 圆 角 矩 形 固 定 宽 度 的 圆 角 框 最 容 易 创 建 的 是 固 定 宽 度 的 圆 角 框 它 们 只 需 要 两 个 图 像 : 一 个 图 像 用 于 框 的 顶 部, 另 一 个 用 于 底 部 例 如, 假 设 希 望 创 建 图 2.13 这 样 的 框 样 式 就 需 要 两 张 图 片, 如 图 2.14: 一 个 图 像 用 于 框 的 顶 部, 另 一 个 用 于 底 部 然 后, 将 顶 部 图 像 应 用 于 标 题 元 素, 将 底 部 图 像 应 用 于 div 框 的 底 部 因 为 这 个 框 样 式 是 单 色 的, 所 以 可 以 在 div 框 上 添 加 背 景 颜 色, 从 而 形 成 框 的 主 体 3 图 2.14: 圆 角 背 景 图 图 2.13: 圆 角 矩 形 1 实 现 圆 角 的 代 码 见 代 码 2.21: 代 码 2.21: 圆 角 代 码 3 该 部 分 内 若 引 用 自 : html 64

71 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 1 <style> 2.box{ 3 width:418px; 4 background:#effce7 url(image/bottom.gif) no-repeat left bottom; 5 } 6.box h2{ 7 background: url(images/top.gif) no-repeat left top; 8 padding: 10px 20px 0 20px; /* 使 内 容 不 要 碰 到 边 界 */ 9 } 10.box p{ 11 padding: 0 20px 10px 20px; /* 使 内 容 不 要 碰 到 边 界 */ 12 } 13 </style> <div class="box"> 16 <h2>headling</h2> 17 <p>content</p> 18 </div> 灵 活 的 圆 角 框 如 果 加 大 字 号, 前 面 的 示 例 都 会 垂 直 扩 展 但 是, 它 们 不 会 水 平 扩 展, 因 为 框 的 宽 度 必 须 与 顶 部 和 底 部 图 像 的 宽 度 一 致 如 果 希 望 创 建 灵 活 的 框, 那 么 需 要 采 用 略 有 不 同 的 方 法 不 用 单 一 图 像 组 成 顶 部 和 底 部 曲 线 这 个 方 法 需 要 四 个 图 像 : 两 个 顶 部 图 像 组 成 顶 部 曲 线, 两 个 底 部 图 像 组 成 底 部 曲 线 和 框 的 主 体 ( 见 图 2.15) 因 此, 底 部 图 像 的 高 度 必 须 与 框 的 最 大 高 度 相 同 分 别 将 这 些 图 像 命 名 为 top-left.gif top-right.gif bottom-left.gif 和 bottom-right.gif 代 码 2.22 是 一 个 完 整 的 示 例 代 码 2.22: 灵 活 圆 角 的 代 码 1 <style> 2.box{ 3 width: 20em; 4 background: #3ffce7 url(images/bottom-left.gif) no-repeat left bottom; 5 } 6.box-outer{ 7 background :url(images/bottom-right.gif) no-repeat right bottom; 65

72 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 图 2.15: 灵 活 圆 角 框 8 padding-bottom: 5%; 9 } 10.box-inner{ 11 background: url(images/top-left.gif) no-repeat left top; 12 } 13.box h2{ 14 background: url(images/top-right.gif) no-repeat right top; 15 padding-top: 5%; 16 } 17.box h2,.box p{ 18 padding-left: 5%; 19 padding-right: 5%; 20 } 21 </style> <div class="box"> 24 <div class="box-outer"> 25 <div class="box-inner"> 26 <h2> Headline </h2> 27 <p>content</p> 28 </div> 29 </div> 30 </div> 在 这 个 示 例 中, 以 em 为 单 位 设 置 框 的 宽 度, 所 以 在 浏 览 器 中 增 加 文 本 尺 寸 时 框 会 伸 展 也 可 以 用 百 分 数 设 置 宽 度, 这 使 框 根 据 浏 览 器 窗 口 的 尺 寸 进 行 扩 展 或 收 缩 这 是 弹 性 和 灵 活 布 局 的 主 要 原 则 之 一 66

73 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 2.21 示 例 4: 无 图 片 圆 角 矩 形 该 方 法 的 原 理 比 较 简 单, 它 主 要 使 用 了 数 学 中 积 分 的 思 想 : 使 用 如 干 条 长 短 不 一 的 线 条, 将 它 们 按 照 一 定 的 规 则 ( 居 中 左 对 齐 右 对 齐 ) 进 行 排 列, 如 果 线 条 足 够 的 细, 则 在 人 的 视 觉 中 便 可 产 生 平 滑 圆 角 的 效 果 图 2.16: 无 图 片 圆 角 原 理 代 码 2.23: 无 图 片 圆 角 矩 形 1 <style> 2 div.bg{background:#ffc20e;width:50%} 3 b{display:block;} 4 /* 将 所 有 标 记 转 成 块 级 元 素 B */ 5 div b.topb b,div b.bottomb b{height:1px;overflow:hidden; background:#ffc20e;} 6 /* 标 记 内 类 名 为 div topb/bottomb 的 那 个 b 标 记 的 css 属 性 值 -- 高 为 1px, 7 溢 出 部 份 隐 藏 背 景 色 同, div.bg 的 背 景 色 */ 8 9 div b.topb,div b.bottomb{ background-color:white} 10 /* div 标 记 内 类 名 为 topb/bottomb 的 背 景 色 要 与 body 背 景 色 一 致 */ b.t1{margin:0 5px} 13 /* 标 记 margin 值 将 决 定 溢 出 的 多 少 值 被 隐 藏 */ 14 b.t2{margin:0 3px} 15 b.t3{margin:0 2px} 16 b.t4{margin:0 1px;height:2px;} </style> <div align="center"> 21 <div class="bg"> <b class="topb"><!-- ** 此 b 标 记 所 包 含 的 b 标 记 要 进 行 溢 出 隐 藏 ** --> </b> 67

74 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 26 <br /> 27 注 明 一 下 : 这 个 教 程 不 完 全 是 本 人 所 写 html, 谢 谢 支 持! 28 <br /> 29 <br /> <b class="bottomb"> 32 <b class="t4"></b> 33 <b class="t3"></b> <b class="t2"></b> 36 <b class="t1"></b> 37 </b> </div> 40 </div> 图 2.17: 无 图 片 圆 角 2.22 习 题 作 业 1. 制 作 个 人 主 页 的 导 航 菜 单, 要 求 至 少 实 现 以 下 功 能 : (a) 鼠 标 划 过 的 特 效 (b) 使 用 id 选 择 器 和 类 选 择 器 (c) 使 用 外 部 CSS 文 件 2. 修 改 第 一 题 的 菜 单, 在 第 一 题 的 基 础 上, 增 加 实 现 圆 角 菜 单 的 功 能 3. 制 作 以 下 文 本 框 特 效 (a) 文 本 框 背 景 色 为 蓝 色 (b) 只 有 地 线 ( 没 有 左 右 和 上 边 框 ), 底 色 为 透 明 色 的 文 本 框 4. 制 作 以 下 文 字 特 效 (a) 一 行 文 字 中 包 含 至 少 4 种 字 体 和 不 同 的 大 小 (b) 带 有 波 浪 线 的 文 字 68

75 第 二 部 分. CSS 基 础 网 页 设 计 与 网 站 开 发 (c) 利 用 <span> 标 记 自 作, 鼠 标 经 过 时 可 以 放 大, 变 色 的 文 字 5. 制 作 以 下 图 片 特 效 (a) 设 置 50% 的 透 明 度 (b) 顺 时 针 旋 转 图 片 45 度 6. 自 作 以 下 按 钮 特 效 (a) 圆 角 按 钮 (b) 图 片 按 钮 7. 思 考 题 (jpg 和 gif): (a) jpg 格 式 和 gif 格 式 的 文 件 都 是 压 缩 文 件 吗? (b) 从 浏 览 器 下 载 这 两 种 图 片 文 件 时, 会 发 生 什 么 不 同 的 现 象? (c) 制 作 不 规 则 图 形 时, 应 选 择 使 用 哪 个 格 式? 为 什 么? (d) 制 作 动 画 时, 应 选 择 哪 个 格 式? 为 什 么? 69

76 第 三 部 分 javascript JavaScript 是 一 种 解 释 型 语 言, 其 代 码 是 在 客 户 端 有 浏 览 器 执 行 在 html 文 档 中 使 用 JavaScript 是 需 要 使 用 <script> 和 </script> 标 记 script 标 记 有 一 个 language 属 性, 它 可 以 写 成 <script language= javascipr >...</script>, 但 是,language 不 是 必 须 的, 可 以 省 略 代 码 3.1 是 一 个 简 单 的 JavaScript 示 例 1 <html> 2 <head> 3 <script language="javascript"> 4 <!-- 5 function welcome() 6 { 7 alert("hello world"); 8 } 9 --> 10 </script> 11 </head> 12 <body onload="welcome()"> 13 </body> 14 </html> 15 </html> 代 码 3.1: hellojs.html 3.1 javascript 的 使 用 在 html 文 件 中 使 用 javascript 有 两 种 方 式 70

77 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 图 3.1: 运 行 结 果 嵌 入 在 html 文 件 的 head 标 记 中 直 接 嵌 入 script 脚 本, 代 码 3.1 中 的 javascript 使 用 的 就 是 嵌 入 方 式 使 用 外 部 javascript 使 用 嵌 入 方 式,html 代 码 和 javascript 书 写 在 同 一 个 文 件 里, 会 使 文 件 变 得 庞 杂, 显 得 混 乱 对 于 逻 辑 较 复 杂 的 javascript, 最 好 使 用 外 部 链 接 方 式 进 行 书 写 代 码 3.2 和 代 码 3.3 是 一 个 简 单 的 使 用 外 部 js 文 件 的 示 例, 使 用 这 种 方 法 后,html 文 件 会 显 得 整 齐 简 单 代 码 3.2: hello.html 1 <html> 2 <head> 3 <script type="text/javascript" src="hello.js"></script> 4 </head> 5 <body onload="welcome()"> 6 </body> 7 </html> 8 </html> 代 码 3.3: hello.js 1 <!-- 2 function welcome() 3 { 4 alert("hello world"); 5 // This closes the comment section and the browser will read on normally 6 } 7 --> 71

78 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 javascript 注 释 符 号 代 码 注 释 是 对 程 序 的 解 释 和 说 明, 方 便 其 他 人 阅 读 程 序 也 方 便 自 己 阅 读 自 己 以 前 写 的 代 码 在 javascript 中 注 释 分 为 行 注 释 和 块 注 释 两 种 代 码 3.4 是 使 用 注 释 的 一 个 例 子 代 码 3.4: javascript 中 注 释 的 使 用 1 // This is a single line comment. 2 3 /* This is a multiple line comment with only one line. */ 4 5 /* This is a multiple line comment. 6 * The star (*) at the beginning of this line is optional. 7 * So is the star at the beginning of this line. */ 3.2 语 法 基 础 数 据 类 型 变 量 是 一 个 存 储 单 元, 可 以 用 来 保 存 数 据 可 以 根 据 需 要 给 变 量 起 一 个 合 适 得 名 字 例 如 : 如 果 有 一 个 做 除 法 运 算 得 程 序, 在 计 算 得 过 程 中 要 使 用 到 三 个 数, 可 以 给 他 们 分 别 起 名 数 1, 数 2, 数 3, 但 是 这 样 很 不 便 于 三 个 数 得 关 系 一 个 好 的 办 法 是 给 三 个 数 分 别 起 一 个 代 表 其 意 义 的 名 字, 如 divisor( 除 数 ),dividend( 被 除 数 ),quotient( 商 ) JavaScript 有 六 种 数 据 类 型 主 要 的 类 型 有 Number String Object 以 及 Boolean 类 型, 其 他 两 种 类 型 为 null 和 Undefined 变 量 命 名 必 须 遵 循 以 下 规 则 : 1. 第 一 个 字 符 必 须 是 一 个 字 母 ( 大 小 写 均 可 ) 或 一 个 下 划 线 (_) 或 一 个 美 元 符 ($) 2. 后 续 的 字 符 可 以 是 字 母 数 字 下 划 线 或 美 元 符 3. 变 量 名 称 不 能 是 保 留 字 4. 区 分 字 母 大 小 写 因 此 将 一 个 变 量 命 名 为 computer 和 将 其 命 名 为 Computer 是 不 一 样 的 5. 变 量 的 长 度 任 意 6. 变 量 可 以 不 声 明, 直 接 使 用 JavaScript 是 一 种 对 数 据 类 型 变 量 要 求 不 太 严 格 的 语 言, 所 以 不 必 声 明 每 一 个 变 量 的 类 型, 变 量 声 明 尽 管 不 是 必 须 的, 但 在 使 用 变 量 之 前 先 进 行 声 明 是 一 种 好 的 习 惯 可 以 使 用 var 语 句 来 进 行 变 量 声 明 如 : 72

79 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 代 码 3.5: javascript 中 变 量 的 使 用 var men = true; //men 中 存 储 的 值 为 Boolean 类 型 var count = 0; // 中 存 储 的 值 为 count number 类 型 if(men) { do something; }else{ count++; do something else; } 内 置 对 象 String 对 象 string 是 javascrit 中 最 常 用 的 一 个 对 象, 使 用 new 方 法 可 以 创 建 一 个 string 对 象 更 多 的 方 法 参 见 表 3.2 var tmp_str = new String("hello world!"); Array 对 象 Array 对 象 提 供 对 数 组 的 支 持 通 过 以 下 的 几 种 方 式 都 可 以 实 现 对 数 组 的 定 义 var arr=new Array(); var arr = []; var arr = new Array(10); // 创 建 一 个 空 数 组 // 创 建 一 个 空 数 组 // 创 建 一 个 长 度 为 10 的 数 组 // 创 建 一 个 数 组, 其 元 素 为 1,5,7 var arr = new Array(1,5,7); // 创 建 一 个 数 组, 其 元 素 为 a,b,c var arr = new Array("a","b","c"); var arr = [2,4,6]; // 创 建 数 组, 其 元 素 为 2,4,6 Math 对 象 Math 对 象 提 供 了 一 组 数 学 常 用 的 定 义 和 数 学 函 数, 使 用 Math 对 象 可 以 在 Javascript 中 进 行 常 用 的 数 学 运 算 Math 对 象 的 属 性 方 法 及 其 说 明 如 表 3.3 所 示 73

80 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 Function 对 象 Function 对 象 可 以 用 于 在 javascript 中 声 明 一 个 函 数 例 如 : var myfun=new Function("x","y","return(x*y)"); // 它 实 际 上 等 效 于 function myfun(x,y){ return (x*y); } Error 对 象 Error 对 象 提 供 了 对 错 误 处 理 的 支 持 使 用 代 码 3.6 可 以 创 建 一 个 Error 对 象 : 代 码 3.6: Error 对 象 var err = new Error(); var err2=new Error("Something is wrong!"); 表 达 式 表 达 式 与 数 学 中 的 定 义 相 似, 表 达 式 是 指 具 有 一 定 的 值 的 用 运 算 符 把 常 数 和 变 量 连 接 起 来 的 代 数 式 一 个 表 达 式 可 以 只 包 含 一 个 常 数 或 一 个 变 量 运 算 符 可 以 是 四 则 运 算 符 关 系 运 算 符 位 运 算 符 逻 辑 运 算 符 复 合 运 算 符 下 表 将 这 些 运 算 符 从 高 优 先 级 到 低 优 先 级 排 列 : 74

81 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 属 性 String 描 述 表 3.1: 数 据 类 型 字 符 串 类 型 : 字 符 串 是 用 单 引 号 或 双 引 号 来 说 明 的 ( 使 用 单 引 号 来 输 入 包 含 引 号 的 字 符 串 ) 如 : The cow jumped over the moon. Number JavaScript 支 持 整 数 和 浮 点 数 整 数 可 以 为 正 数 0 或 者 负 数 ; 浮 点 数 可 以 包 含 小 数 点 也 可 以 包 含 一 个 e ( 大 小 写 均 可, 在 科 学 记 数 法 中 表 示 10 的 幂 ) 或 者 同 时 包 含 这 两 项 Boolean Undefined 可 能 的 Boolean 值 有 true 和 false 这 是 两 个 特 殊 值, 不 能 用 作 1 和 0 数 据 类 型 : 一 个 为 undefined 的 值 就 是 指 在 变 量 被 创 建 后, 但 未 给 该 变 量 赋 值 以 前 所 具 有 的 值 null null 值 就 是 没 有 任 何 值, 什 么 也 不 表 示 Object 除 了 上 面 提 到 的 各 种 常 用 类 型 外, 对 象 也 是 JavaScript 中 的 重 要 组 成 部 分, 这 部 分 将 在 后 面 章 节 详 细 介 绍 75

82 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 表 3.2: string 对 象 的 属 性 和 方 法 属 性 / 方 法 length charat(n) indexof(substring[,start]) replace(regexp) slice(start,end) split(delimiter,limit) substring(start,end) tolowercase() touppercase() tostring() valueof() 说 明 字 符 串 长 度 返 回 字 符 串 中 得 第 n 个 字 符 在 字 符 串 中 查 找 子 串 首 次 出 现 的 位 置 使 用 正 则 表 达 式 进 行 字 符 串 的 匹 配 和 替 换 返 回 字 符 串 的 一 部 分 将 字 符 串 分 隔 为 字 符 串 数 组 返 回 字 符 串 的 一 部 分 返 回 字 符 串 的 小 写 形 式 返 回 字 符 串 的 大 写 形 式 返 回 String 对 象 的 值 返 回 String 对 象 的 值 表 3.3: Math 对 象 的 属 性 和 方 法 属 性 / 方 法 Math.PI Math.abs(number) Math.exp(number) Math.ceil(number) Math.floor(number) Math.max(n1,n2,n3...) Math.min(n1,n2,n3...) Math.random() Math.round(number) 说 明 圆 周 率 返 回 number 的 绝 对 值 返 回 number 的 自 然 指 数 返 回 大 于 等 于 number 的 最 小 整 数 返 回 小 于 等 于 number 的 最 大 整 数 返 回 所 有 参 数 中 的 最 大 数 返 回 所 有 参 数 中 的 最 小 数 返 回 [0,1) 之 间 的 伪 随 机 数 返 回 与 number 最 为 接 近 的 整 数 76

83 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 表 3.4: 算 术 运 算 符 示 例 描 述 x++ x 值 加 1, 但 仍 返 回 原 来 的 x 值 x x 值 减 1, 但 仍 返 回 原 来 的 x 值 ++x x 值 加 1, 返 回 后 来 的 x 值 x x 值 减 1, 返 回 后 来 的 x 值 x y 返 回 x 乘 以 y 的 值 x/y 返 回 x 除 以 y 的 值 x%y 返 回 x 与 y 的 模 (x 除 以 y 的 余 数 ) x+y 返 回 x 加 y 的 值 x-y 返 回 x 减 y 的 值 表 3.5: 比 较 运 算 符 示 例 x<y x<=y x>=y x>y x==y x!=y 描 述 当 x 小 于 y 时 返 回 true 值, 否 则 返 回 false 值 当 x 小 于 等 于 y 时 返 回 true 值, 否 则 返 回 false 值 当 x 大 于 等 于 y 时 返 回 true 值, 否 则 返 回 false 值 当 x 大 于 y 时 返 回 true 值, 否 则 返 回 false 值 当 x 等 于 y 时 返 回 true 值, 否 则 返 回 false 值 当 x 不 等 于 y 时 返 回 true 值, 否 则 返 回 false 值 77

84 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 示 例 (x) [x] 描 述 表 3.6: 位 运 算 符 中 括 号 只 用 于 指 明 数 组 的 下 标 -x 返 回 x 的 相 反 数!x 返 回 与 x ( 布 尔 值 ) 相 反 的 布 尔 值 x&y 当 两 个 数 位 同 时 为 1 时, 返 回 的 数 据 的 当 前 数 位 为 1, 其 他 情 况 都 为 0 x ˆy 两 个 数 位 中 有 且 只 有 一 个 为 0 时, 返 回 0, 否 则 返 回 1 x y 两 个 数 位 中 只 要 有 一 个 为 1, 则 返 回 1; 当 两 个 数 位 都 为 零 时 才 返 回 零 x<<y 对 二 进 制 数 x 进 行 左 移,y 指 定 移 动 的 位 数, 右 端 填 0 x>>y 对 二 进 制 数 x 进 行 右 移,y 指 定 移 动 的 位 数, 左 端 填 0, 符 号 位 保 留 x>>>y 对 二 进 制 数 x 进 行 右 移,y 指 定 移 动 的 位 数, 左 端 填 0, 78

85 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 逻 辑 与 / 或 有 时 候 被 称 为 快 速 与 / 或 这 是 因 为 当 第 一 操 作 数 (x) 已 经 可 以 决 定 结 果, 它 们 将 不 去 理 会 y 的 值 例 如,false && y, 因 为 x == false, 不 管 y 的 值 是 什 么, 结 果 始 终 是 false, 于 是 本 表 达 式 立 即 返 回 false, 而 不 论 y 是 多 少, 甚 至 y 可 以 导 致 出 错, 程 序 也 可 以 照 样 运 行 下 去 运 算 示 例 描 述 表 3.7: 逻 辑 运 算 符 逻 辑 与 x&&y 当 x 和 y 同 时 为 true 时 返 回 true, 否 则 返 回 false 逻 辑 或 x y 当 x 和 y 任 意 一 个 为 true 时 返 回 true, 当 两 者 同 时 为 false 时 返 回 false 逻 辑 非!y 若 y 为 true 时 返 回 false, 若 y 为 false 时 返 回 true 字 符 串 连 接 使 用 + 符 号 可 以 将 多 个 字 符 串 连 接 起 来 组 成 一 个 新 的 字 符 串 例 如 : str1="hello"; str2=" world"; str3=str1+str2; /* 运 行 结 果 : str3 中 的 内 容 为 "hello world" */ 三 目 运 算 c?x:y 当 条 件 c 为 true 时 返 回 x 的 值 ( 执 行 x 语 句 ), 否 则 返 回 y 的 值 ( 执 行 y 语 句 ) var a=5; var b=7; c = (a > b? 1 : 0); /* 运 行 结 果 :c=0 */ 控 制 语 句 if 结 构 格 式 1: if ( < 条 件 > ) 语 句 组 ; 功 能 说 明 : 当 条 件 成 立 时, 执 行 语 句 组 格 式 2: 79

86 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 if ( < 条 件 1 > ) { 语 句 组 1; }else if(< 条 件 2 >){ /* 注 意 :else 和 if 中 间 有 一 个 空 格 */ 语 句 组 2; }else{ 语 句 组 3; } 功 能 说 明 : 当 条 件 1 成 立 时, 执 行 语 句 组 1; 条 件 2 成 立 时, 执 行 语 句 组 2; 若 既 不 满 足 条 件 1 也 不 满 足 条 件 2, 则 执 行 语 句 组 3 循 环 结 构 格 式 1: for ( < 变 量 >=< 初 始 值 >; < 循 环 条 件 >; < 变 量 累 加 方 法 > ) { < 语 句 组 >; } 功 能 说 明 : 实 现 条 件 循 环, 当 条 件 成 立 时, 执 行 语 句 集, 否 则 跳 出 循 环 体 语 句 说 明 : 初 始 值 时 循 环 的 开 始 位 置, 必 须 为 变 量 付 初 始 值 循 环 条 件 若 成 立, 则 继 续 循 环 ; 若 不 成 立, 则 跳 出 循 环 变 量 累 加 方 法 用 来 控 制 变 量 在 每 次 循 环 后, 按 照 什 么 方 法 进 行 变 化 三 个 主 要 语 句 之 间 必 须 使 用 分 号 进 行 分 隔 格 式 2: while ( < 循 环 条 件 > ) { < 语 句 >; } 功 能 说 明 : 当 条 件 成 立 时, 进 行 循 环 ; 否 则 跳 出 有 时 候 在 循 环 体 内, 需 要 立 即 跳 出 循 环 或 跳 过 循 环 体 内 其 余 代 码 而 进 行 下 一 次 循 环 这 时 我 们 要 使 用 break 和 continue break: 本 语 句 放 在 循 环 体 内, 作 用 是 立 即 跳 出 循 环 continue: 本 语 句 放 在 循 环 体 内, 作 用 是 中 止 本 次 循 环, 并 执 行 下 一 次 循 环 80

87 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 代 码 3.7: 示 例 程 序 1 for (i = 1; i < 10; i++) { 2 if (i == 3 i == 5 i == 8) continue; 3 document.write(i); 输 出 : switch 语 句 格 式 : switch (e) { case r1: ( 注 意 : 冒 号 )... [break;] case r2:... [break;]... [default:...] } 这 一 大 段 的 作 用 是 : 计 算 e 的 值 (e 为 表 达 式 ), 然 后 跟 下 边 case 后 的 r1 r2 比 较, 当 找 到 一 个 相 等 于 e 的 值 时, 就 执 行 该 case 后 的 语 句, 直 到 遇 到 break 语 句 或 switch 段 落 结 束 ( } ) 如 果 没 有 一 个 值 与 e 匹 配, 那 么 就 执 行 default: 后 边 的 语 句, 如 果 没 有 default 块,switch 语 句 结 束 函 数 定 义 格 式 : function 函 数 名 ([ 参 数 集 ]) {... [return[ < 值 >];]... } 其 中, 用 在 function 之 后 和 函 数 结 尾 的 大 括 号 是 不 能 省 去 的, 就 算 整 个 函 数 只 有 一 句 函 数 名 与 变 量 名 有 一 样 的 起 名 规 定, 也 就 是 只 包 含 字 母 数 字 81

88 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 下 划 线 字 母 排 头 不 能 与 保 留 字 重 复 等 参 数 集 可 有 可 无, 但 括 号 就 一 定 要 有 参 数 是 函 数 外 部 向 函 数 内 部 传 递 信 息 的 桥 梁, 例 如, 想 叫 一 个 函 数 返 回 3 的 立 方, 你 就 要 让 函 数 知 道 3 这 个 数 值, 这 时 候 就 要 有 一 个 变 量 来 接 收 数 值, 这 种 变 量 叫 做 参 数 参 数 集 是 一 个 或 多 个 用 逗 号 分 隔 开 来 的 参 数 的 集 合, 如 :a, b, c 函 数 的 内 部 有 一 至 多 行 语 句, 这 些 语 句 并 不 会 立 即 执 行, 而 只 当 有 其 它 程 序 调 用 它 时 才 执 行 这 些 语 句 中 可 能 包 含 return 语 句 在 执 行 一 个 函 数 的 时 候, 碰 到 return 语 句, 函 数 立 刻 停 止 执 行, 并 返 回 到 调 用 它 的 程 序 中 如 果 return 后 带 有 < 值 >, 则 退 出 函 数 的 同 时 返 回 该 值 在 函 数 的 内 部, 参 数 可 以 直 接 当 作 变 量 来 使 用, 并 可 以 用 var 语 句 来 新 建 一 些 变 量, 但 是 这 些 变 量 都 不 能 被 函 数 外 部 的 过 程 调 用 要 使 函 数 内 部 的 信 息 能 被 外 部 调 用, 要 么 使 用 return 返 回 值, 要 么 使 用 全 局 变 量 1 function addall(a, b, c) { 2 return a + b + c; 3 } 4 5 var total = addall(3, 4, 5); 代 码 3.8: 函 数 示 例 代 码 3.8 建 立 了 一 个 叫 addall 的 函 数, 它 有 3 个 参 数 :a, b, c, 作 用 是 返 回 三 个 数 相 加 的 结 果 在 函 数 外 部, 利 用 var total = addall(3, 4, 5); 接 收 函 数 的 返 回 值 3.3 事 件 事 件 处 理 是 对 象 化 编 程 的 一 个 很 重 要 的 环 节, 没 有 了 事 件 处 理, 程 序 就 会 变 得 很 死, 缺 乏 灵 活 性 事 件 处 理 的 过 程 可 以 这 样 表 示 : 发 生 事 件 - 启 动 事 件 处 理 程 序 - 事 件 处 理 程 序 作 出 反 应 其 中, 要 使 事 件 处 理 程 序 能 够 启 动, 必 须 先 告 诉 对 象, 如 果 发 生 了 什 么 事 情, 要 启 动 什 么 处 理 程 序, 否 则 这 个 流 程 就 不 能 进 行 下 去 事 件 的 处 理 程 序 可 以 是 任 意 JavaScript 语 句, 但 是 我 们 一 般 用 特 定 的 自 定 义 函 数 (function) 来 处 理 事 情 指 定 事 件 处 理 程 序 直 接 在 HTML 标 记 中 指 定 这 种 方 法 是 用 得 最 普 遍 的 方 法 是 : < 标 记 事 件 =" 事 件 处 理 程 序 " [ 事 件 =" 事 件 处 理 程 序 "...]> 代 码 3.9: 示 例 代 码 82

89 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 <body... onload="alert(' 网 页 读 取 完 成!')" onunload="alert(' 再 见 ')"> 代 码 3.9 中 的 <body> 标 记, 能 使 文 档 读 取 完 毕 的 时 候 弹 出 一 个 对 话 框, 写 着 网 页 读 取 完 成! ; 在 用 户 退 出 文 档 ( 或 者 关 闭 窗 口, 或 者 到 另 一 个 页 面 去 ) 的 时 候 弹 出 再 见 对 话 框 在 网 页 中 最 长 使 用 到 的 事 件 是 鼠 标 的 单 击 事 件, 使 用 该 事 件 的 方 法 也 非 常 简 单 代 码 3.10 是 单 击 事 件 的 一 个 简 单 应 用 代 码 3.10: 简 单 单 击 事 件 1 <html> 2 <head> 3 <title> 单 击 事 件 </title> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 </head> 6 <body> 7 <input type="button" value=" 请 点 击 我 " 8 onclick='alert("hello world!")' /> 9 </body> 10 </html> 图 3.2: 简 单 事 件 事 件 介 绍 83

90 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 事 件 名 应 用 对 象 描 述 表 3.8: 事 件 介 绍 onblur window 发 生 在 窗 口 失 去 焦 点 的 时 候 onchange onclick Password; Select; Text; Textarea Button; Checkbox; Image; Link; Radio; Reset; Submit 发 生 在 文 本 输 入 区 的 内 容 被 更 改, 然 后 焦 点 从 文 本 输 入 区 移 走 之 后 捕 捉 此 事 件 主 要 用 于 实 时 检 测 输 入 的 有 效 性, 或 者 立 刻 改 变 文 档 内 容 发 生 在 对 象 被 单 击 的 时 候 单 击 是 指 鼠 标 停 留 在 对 象 上, 按 下 鼠 标 键, 没 有 移 动 鼠 标 而 放 开 鼠 标 键 这 一 个 完 整 的 过 程 onfocus window 发 生 在 窗 口 得 到 焦 点 的 时 候 onload window 发 生 在 文 档 全 部 下 载 完 毕 的 时 候 全 部 下 载 完 毕 意 味 着 不 但 HTML 文 件, 而 且 包 含 的 图 片, 插 件, 控 件, 小 程 序 等 全 部 内 容 都 下 载 完 毕 本 事 件 是 window 的 事 件, 但 是 在 HTML 中 指 定 事 件 处 理 程 序 的 时 候, 我 们 是 把 它 写 在 <body> 标 记 中 的 onmousedown Button; Link 发 生 在 用 户 把 鼠 标 放 在 对 象 上 按 下 鼠 标 键 的 时 候 参 考 onmouseup 事 件 onmouseout link 发 生 在 鼠 标 离 开 对 象 的 时 候 参 考 onmouseover 事 件 onmouseover Link 发 生 在 鼠 标 进 入 对 象 范 围 的 时 候 这 个 事 件 和 onmouseout 事 件, 再 加 上 图 片 的 预 读, 就 可 以 做 到 当 鼠 标 移 到 图 像 连 接 上, 图 像 更 改 的 效 果 了 有 时 我 们 看 到, 在 指 向 一 个 连 接 时, 状 态 栏 上 不 显 示 地 址, 而 显 示 其 它 的 资 料, 看 起 来 这 些 资 料 是 可 以 随 时 更 改 的 接 下 页 84

91 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 事 件 名 应 用 对 象 描 述 onmouseup Button; Link 发 生 在 用 户 把 鼠 标 放 在 对 象 上 鼠 标 键 被 按 下 的 情 况 下, 放 开 鼠 标 键 的 时 候 如 果 按 下 鼠 标 键 的 时 候, 鼠 标 并 不 在 放 开 鼠 标 的 对 象 上, 则 本 事 件 不 会 发 生 onreset Form 发 生 在 表 单 的 重 置 按 钮 被 单 击 ( 按 下 并 放 开 ) 的 时 候 通 过 在 事 件 处 理 程 序 中 返 回 false 值 (return false) 可 以 阻 止 表 单 重 置 onresize window 发 生 在 窗 口 被 调 整 大 小 的 时 候 onsubmit Form 发 生 在 表 单 的 提 交 按 钮 被 单 击 ( 按 下 并 放 开 ) 的 时 候 可 以 使 用 该 事 件 来 验 证 表 单 的 有 效 性 通 过 在 事 件 处 理 程 序 中 返 回 false 值 (return false) 可 以 阻 止 表 单 提 交 onunload window 发 生 在 用 户 退 出 文 档 ( 或 者 关 闭 窗 口, 或 者 到 另 一 个 页 面 去 ) 的 时 候 与 onload 一 样, 要 写 在 HTML 中 就 写 到 <body> 标 记 里 Click 事 件 当 用 户 在 对 象 上 单 击 鼠 标 左 键 时, 就 会 触 发 click 事 件 利 用 该 事 件, 可 以 编 写 一 个 简 单 的 测 试 程 序 ( 代 码 3.11) 程 序 运 行 后 的 结 果 如 图 3.3, 其 实 现 的 功 能 为 : 用 户 点 击 出 题 按 钮, 网 页 上 显 示 一 道 加 法 题 目 点 击 检 查 按 钮, 判 断 用 户 答 案 是 否 正 确, 若 正 确 弹 出 正 确 对 话 框 ; 若 不 正 确, 弹 出 错 误 对 话 框 代 码 3.11: click 事 件 示 例 1 <html> 2 <head> 3 <title> 测 试 </title> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8"> 5 <script> 6 var num1; // 定 义 全 局 变 量 7 var num2; // 定 义 全 局 变 8 var num3; // 定 义 全 局 变 9 function ct(){ 85

92 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 10 num1=math.round(math.random()*10); 11 num2=math.round(math.random()*10); 12 num3=num1+num2; 13 document.getelementbyid('tm').innerhtml=num1+"+"+num2+"="; 14 } function jc(){ 17 ans=document.getelementbyid('da').value; 18 if(ans==num3){ 19 alert(" 答 对 了 "); 20 }else{ 21 alert(" 答 错 了 "); 22 } 23 } 24 </script> 25 </head> 26 <body> 27 <span id="tm"></span> 28 <input id="da" type="text" /><br /> 29 <input id="ct" type="button" onclick="ct();" value=" 出 题 " /> 30 <input id="jc" type="button" onclick="jc();" value=" 检 查 " /> 31 </body> 32 </html> 图 3.3: clicl 事 件 代 码 3.11 说 明 : 第 6 7 和 8 行 用 来 定 义 一 个 全 局 的 变 量, 全 局 变 量 在 整 个 文 档 中 都 可 以 被 访 问 第 10 行 和 第 11 行, 用 到 了 2 个 数 学 函 数, 其 中 Math.random() 用 来 生 成 一 个 [0 1) 之 间 的 随 机 数 ;Math.round() 用 来 对 数 字 进 行 取 整 第 13 行, 可 以 在 id 值 为 tm 的 标 记 处 显 示 一 个 字 符 串 86

93 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 第 17 行, 获 取 用 户 在 文 本 框 中 输 入 的 数 字, 并 把 该 数 字 赋 值 给 变 量 ans 第 19,20 行, 使 用 alert 弹 出 一 个 对 话 框 3.4 confirm 方 法 confirm 方 法 是 一 个 具 有 确 定 和 取 消 按 钮 的 对 话 框, 当 用 户 单 击 确 定 时 返 回 真 值, 否 则 返 回 假 代 码 3.12 运 行 后 界 面 如 图 3.4 所 示 代 码 3.12: confirm 示 例 1 <html> 2 <head> 3 <title> 单 击 事 件 </title> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <script> 6 function mytest(){ 7 var cf=confirm(" 你 确 定 要 继 续 吗?"); 8 if (cf){ 9 alert(" 你 点 击 了 确 定 按 钮 "); 10 }else{ 11 alert(" 你 点 击 了 取 消 按 钮 "); 12 } 13 } 14 </script> 15 </head> 16 <body> 17 <input type="button" value=" 事 件 confirm" 18 onclick='mytest()' /> 19 </body> 20 </html> 87

94 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 3.5 循 环 定 时 器 图 3.4: confirm 运 行 结 果 在 网 页 中 使 用 循 环 定 时 器 可 以 实 现 很 多 的 页 面 特 效 比 如 : 计 时 图 片 的 移 动 定 时 的 提 示 等 循 环 定 时 器 的 使 用 格 式 为 : 代 码 3.13: 循 环 定 时 器 1 timename=setinterval("function();",delaytime); // 设 置 一 个 定 时 器 2 clearinterval(timename); // 清 除 一 个 定 时 器 在 代 码 3.13 中, 第 一 行 用 来 设 置 一 个 定 时 器, 其 中 : timename: 是 一 个 变 量, 用 来 存 放 定 时 器 的 句 柄, 当 需 要 关 闭 改 定 时 器 时, 需 要 使 用 到 改 变 量 delaytime: 时 间 间 隔 ( 单 位 毫 秒 :1s=1000ms), 表 示 每 个 delaytime 时 间 自 动 调 用 一 次 函 数 function(); 第 2 行 代 码, 用 来 关 闭 第 一 行 代 码 所 创 建 的 循 环 定 时 器 示 例 1: 页 面 计 时 1 <html> 2 <head> 3 <title>example</title> 4 <script language="javascript" type="text/javascript"> 88

95 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 5 var sec = 0; 6 timerid = setinterval("count()",1000); 7 function count() { 8 document.getelementbyid('num').innerhtml = sec++ ; 9 } 10 </script> 11 </head> 12 <body> 13 停 留 时 间 :<span id="num"></span> 14 </body> 15 </html> 示 例 2: 移 动 的 图 片 代 码 3.14: 移 动 的 图 片 1 <html> 2 <head> 3 <title>example</title> 4 </head> 5 <body> 6 <div id = "mdiv" style ="position:absolute; top:150; left:100; z-index:-1"> 7 <img src = "run.gif"> 8 </div> 9 </body> 10 <script> 11 var obj=document.getelementbyid('mdiv').style; 12 timerid = setinterval("divmove()",500); 13 function divmove() { 14 if (parseint(obj.left)>=parseint(document.body. clientwidth)) 15 obj.left=0; 16 obj.left=parseint(obj.left)+50; 17 } 18 </script> 19 </html> 代 码 3.14 说 明 : 本 示 例 中 使 用 了 一 幅 会 动 gif 图 片, 第 12 行 : 定 义 了 一 个 循 环 定 时 器 每 隔 500 毫 秒, 执 行 一 次 divmove() 函 数 89

96 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 图 3.5: 运 行 结 果 第 14 行 : 行 数 parseint() 用 于 将 括 号 中 的 参 数 转 换 成 数 字 类 型 第 行 : 当 div 的 x 坐 标 点 大 于 窗 体 的 宽 度 ( 或 图 片 向 右 已 超 出 窗 体 的 范 围 ) 时, 重 新 将 图 片 拉 回 到 最 左 边, 这 样 可 以 实 现 循 环 移 动 第 15 行 : 每 次 把 图 片 向 右 移 动 50 像 素 3.6 表 单 取 值 文 本 框 使 用 javascript 函 数 可 以 轻 松 的 读 取 网 页 中 表 单 的 内 容 <input type="textbox" id="txtboxid" name="textbox1" /> 上 面 的 代 码 片 段 在 网 页 上 显 示 的 是 一 个 文 本 框, 当 用 户 在 该 文 本 框 中 输 入 字 符 后, 可 以 使 用 下 面 的 代 码 读 取 里 面 的 内 容 例 如, 可 以 在 用 户 将 该 文 本 框 的 内 容 提 交 到 服 务 器 之 前 对 文 本 框 中 的 内 容 进 行 校 验 var v=document.getelementbyid("textbox"); 90

97 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 复 选 框 1 个 人 爱 好 : 2 <input id="checkbox1" type="checkbox" name="chk" value="1" /> 足 球 3 <input id="checkbox2" type="checkbox" name="chk" value="2"/> 音 乐 4 <input id="checkbox3" type="checkbox" name="chk" value="3"/> 绘 画 5 6 // 循 环 检 验 每 一 个 选 项 是 否 被 选 中 7 var ochks = document.all.chk; 8 for(var i=0; i<ochks.length; i++) 9 { 10 if(ochks[i].checked) 11 alert(ochks[i].value); 12 } 单 选 框 1 性 别 : 2 <input id="checkbox1" type="radio" name="sex" value="1" /> 男 3 <input id="checkbox2" type="radio" name="sex" value="2"/> 女 // 循 环 检 验 每 一 个 选 项 是 否 被 选 中 7 var s = document.all.sex; 8 for(var i=0; i<s.length; i++) 9 { 10 if(s[i].checked) 11 alert(s[i].value); 12 } 下 拉 列 表 1 <select id="select1" multiple> 2 <option value=1>1</option> 3 <option value=2>2</option> 4 </select> 5 // 得 到 当 前 选 中 项 的 值 ( 单 选 ) 91

98 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 6 var selselect=document.getelementbyid("select1"); 7 alert(selselect.options[selselect.selectedindex].text); 8 alert(selselect.options[selselect.selectedindex].value); 9 10 // 得 到 所 有 选 中 项 的 值 ( 多 选 ) 11 for(var j=0;j<selselect.options.length;j++) 12 { 13 if(selselect.options[j].selected) 14 { 15 alert(selselect.options[j].value); 16 } 17 } 18 } 3.7 正 则 表 达 式 3.8 jquery AJAX (Asynchronous JavaScript and XML, 异 步 JavaScript 及 XML 技 术 ) 是 个 新 词, 但 内 涵 是 两 个 存 在 已 有 一 段 时 间 的 JavaScript 功 能 这 两 种 功 能 以 往 一 直 被 忽 略, 在 Gmail Google suggest 及 Google Maps 出 现 后 才 一 举 成 名 天 下 知 使 用 ajax 可 以 不 用 刷 新 整 个 页 面 就 可 以 实 现 和 服 务 器 的 数 据 通 信 例 如 : 在 用 户 注 册 页 面, 当 用 户 输 入 用 户 名 后, 我 们 希 望 能 够 及 时 的 检 测 该 用 户 名 是 否 已 存 在 在 传 统 的 方 式 下, 需 要 提 交 页 面 才 能 进 行 检 测 ; 如 果 使 用 ajax, 只 需 要 提 交 用 户 输 入 的 用 户 名 即 可, 不 用 整 个 页 面 进 行 提 交 而 且 服 务 器 返 回 的 结 果 还 可 以 及 时 的 在 页 面 上 进 行 显 示 随 着 WEB2.0 及 ajax 思 想 在 互 联 网 上 的 快 速 发 展 传 播, 陆 续 出 现 了 一 些 优 秀 的 Js 框 架, 其 中 比 较 著 名 的 有 Prototype YUI jquery mootools Bindows 以 及 国 内 的 JSVM 框 架 等, 通 过 将 这 些 JS 框 架 应 用 到 我 们 的 项 目 中 能 够 使 程 序 员 从 设 计 和 书 写 繁 杂 的 JS 应 用 中 解 脱 出 来, 将 关 注 点 转 向 功 能 需 求 而 非 实 现 细 节 上, 从 而 提 高 项 目 的 开 发 速 度 jquery 是 继 prototype 之 后 的 又 一 个 优 秀 的 Javascript 框 架 它 是 由 John Resig 于 2006 年 初 创 建 的, 它 有 助 于 简 化 JavaScript 以 及 Ajax 编 程 有 人 使 用 这 样 的 一 比 喻 来 比 较 prototype 和 jquery:prototype 就 像 Java, 而 jquery 就 像 ruby. 它 是 一 个 简 洁 快 速 灵 活 的 JavaScript 框 架, 它 能 让 你 在 你 的 网 页 上 简 单 的 操 作 文 档 处 理 事 件 实 现 特 效 并 为 Web 页 面 添 加 Ajax 交 互 jquery 特 点 1 : 1 官 方 站 点 : 92

99 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 代 码 简 练 语 义 易 懂 学 习 快 速 文 档 丰 富 jquery 是 一 个 轻 量 级 的 脚 本, 其 代 码 非 常 小 巧, 最 新 版 的 JavaScript 包 只 有 20K 左 右 jquery 支 持 CSS1-CSS3, 以 及 基 本 的 xpath jquery 是 跨 浏 览 器 的, 它 支 持 的 浏 览 器 包 括 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 可 以 很 容 易 的 为 jquery 扩 展 其 他 功 能 能 将 JS 代 码 和 HTML 代 码 完 全 分 离, 便 于 代 码 和 维 护 和 修 改 插 件 丰 富, 除 了 jquery 本 身 带 有 的 一 些 特 效 外, 可 以 通 过 插 件 实 现 更 多 功 能, 如 表 单 验 证 tab 导 航 拖 放 效 果 表 格 排 序 DataGrid, 树 形 菜 单 图 像 特 效 以 及 ajax 上 传 等 jquery 使 用 方 法 在 html 中 使 用 jquery, 应 在 <head> 和 </head> 之 间 进 行 引 用 jquery.js 可 以 在 jquery 的 官 方 网 站 下 载 <script type="text/javascript" src="js/jquery.js"></script> jquery 页 面 元 素 的 引 用 通 过 jquery 的 $() 引 用 元 素 包 括 通 过 id class 元 素 名 以 及 元 素 的 层 级 关 系 及 dom 或 者 xpath 条 件 等 方 法, 且 返 回 的 对 象 为 jquery 对 象 ( 集 合 对 象 ), 不 能 直 接 调 用 dom 定 义 的 方 法 示 例 : 示 例 1: 画 廊 准 备 材 料 1. jquery 框 架 下 载 地 址 2. 图 片 每 种 图 案 需 要 两 张 图, 一 张 大 图 和 一 张 小 图 如 图 3.6 所 示, 上 边 是 大 图, 下 边 是 小 图 代 码 3.15: 画 廊 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 2 <html xmlns=" 3 <head> 93

100 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>image Replacement</title> 6 7 <script type="text/javascript" src="jquery.js"></script> 8 9 <script type="text/javascript"> 10 $(document).ready(function(){ 11 $("h2").append('<em></em>'); 12 $(".thumbs a").click(function(){ 13 var largepath = $(this).attr("href"); 14 var largealt = $(this).attr("title"); 15 $("#largeimg").attr({ src: largepath, alt: largealt }); 16 $("h2 em").html(" (" + largealt + ")"); 17 return false; 18 }); 19 }); </script> 22 <style type="text/css"> 23 body { 24 margin: 20px auto; 25 padding: 0; 26 width: 580px; 27 font: 75%/120% Arial, Helvetica, sans-serif; 28 } 29 h2 { 30 font: bold 190%/100% Arial, Helvetica, sans-serif; 31 margin: 0 0.2em; 32 } 33 h2 em { 34 font: normal 80%/100% Arial, Helvetica, sans-serif; 35 color: #999999; 36 } 37 #largeimg { 38 border: solid 1px #ccc; 39 width: 550px; 40 height: 400px; 41 padding: 5px; 42 } 43.thumbs img { 44 border: solid 1px #ccc; 94

101 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 45 width: 100px; 46 height: 100px; 47 padding: 4px; 48 } 49.thumbs img:hover { 50 border-color: #FF9900; 51 } 52 </style> 53 </head> <body> <h2>illustrations</h2> <p> 60 <img id="largeimg" src="images/img1-lg.jpg" alt="large image" / > 61 </p> <p class="thumbs"> 64 <a href="images/img2-lg.jpg"><img src="images/img2-thumb.jpg" /></a> 65 <a href="images/img3-lg.jpg"><img src="images/img3-thumb.jpg" /></a> 66 <a href="images/img4-lg.jpg"><img src="images/img4-thumb.jpg" /></a> 67 <a href="images/img5-lg.jpg"><img src="images/img5-thumb.jpg" /></a> 68 <a href="images/img6-lg.jpg"><img src="images/img6-thumb.jpg" /></a> 69 </p> </body> 72 </html> 代 码 说 明 代 码 3.15 的 运 行 效 果 如 图 3.6 代 码 中 使 用 了 jquery 框 架, 编 写 代 码 时 需 要 注 意 以 下 几 点 : 1. 代 码 第 7 行, 调 用 jquery 框 架 代 码 从 jquery 官 方 网 站 下 载 的 js 文 件 命 中 包 含 有 版 本 号, 用 户 需 要 将 其 重 命 名 为 jquery.js 并 且 应 和 html 文 件 保 存 在 相 同 的 文 件 夹 中 2. 代 码 第 10 行 和 第 19 行, 是 jquery 的 固 定 语 法 使 用 jquery 时, 用 户 的 自 95

102 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 图 3.6: 代 码 3.15 运 行 结 果 定 义 function 都 应 该 放 置 在 $(document).ready(function{... }); 中 3. 第 12 行, 为 class 属 性 的 值 为 thumbs 中 的 所 有 a 标 记 添 加 一 个 click 事 件 当 click 事 件 时, 调 用 click 后 面 小 括 号 中 的 function 4. 第 13 行 this 是 系 统 的 关 键 字, 表 示 事 件 源, 或 者 可 以 认 为 是 click 事 件 发 生 时, 鼠 标 所 在 的 标 记 本 行 的 代 码 表 示 当 点 击 a 标 签 时, 获 取 标 签 的 href 属 性 的 值, 并 将 值 赋 给 变 量 largepath 5. 第 15 行, 修 改 id 为 largeimg 标 签 中 的 src 属 性 的 值 和 alt 属 性 的 值 修 改 src 的 值,img 标 签 就 会 更 换 新 的 图 片 显 示 6. 第 16 行, 修 改 h2 标 记 中 的 子 标 记 em 中 的 文 字 内 容 7. 第 17 行, 取 消 a 标 记 默 认 的 跳 转 功 能 示 例 2: 折 叠 列 表 (accordion) 96

103 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 代 码 3.16: 折 叠 列 表 (accordion) 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 2 <html xmlns=" 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf -8" /> 5 <title>accordion 1</title> 6 7 <script type="text/javascript" src="jquery.js"></script> 8 9 <script type="text/javascript"> 10 $(document).ready(function(){ $(".accordion h3:first").addclass("active"); 13 $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ 16 $(this).next("p").slidetoggle("slow") 17.siblings("p:visible").slideUp("slow"); 18 $(this).toggleclass("active"); 19 $(this).siblings("h3").removeclass("active"); 20 }); }); 23 </script> <style type="text/css"> 26 body { 27 margin: 10px auto; 28 width: 570px; 29 font: 75%/120% Arial, Helvetica, sans-serif; 30 } 31.accordion { 32 width: 480px; 33 border-bottom: solid 1px #c4c4c4; 34 } 35.accordion h3 { 36 background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px; 37 padding: 7px 15px; 97

104 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 38 margin: 0; 39 font: bold 120%/100% Arial, Helvetica, sans-serif; 40 border: solid 1px #c4c4c4; 41 border-bottom: none; 42 cursor: pointer; 43 } 44.accordion h3:hover { 45 background-color: #e3e2e2; 46 } 47.accordion h3.active { 48 background-position: right 5px; 49 } 50.accordion p { 51 background: #f7f7f7; 52 margin: 0; 53 padding: 10px 15px 20px; 54 border-left: solid 1px #c4c4c4; 55 border-right: solid 1px #c4c4c4; 56 } 57 </style> 58 </head> <body> 61 <div class="accordion"> 62 <h3>question One Sample Text</h3> 63 <p> 第 一 个 标 记 中 的 内 容 </p> 64 <h3>this is Question Two</h3> 65 <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula. </p> 66 <h3>another Questio here</h3> 67 <p> 第 三 个 标 记 中 的 内 容 </p> 68 <h3>sample heading</h3> 69 <p> 第 四 个 标 记 中 的 内 容 </p> 70 <h3>sample Question Heading</h3> 71 <p> 第 五 个 标 记 中 的 内 容 </p> 72 </div> 73 </body> 74 </html> 98

105 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 图 3.7: 代 码 3.16 运 行 结 果 在 线 示 例 利 用 已 有 的 jquery 插 件 可 以 快 速, 容 易 的 制 作 出 各 种 页 面 特 效, 使 用 时 可 以 参 考 本 节 示 例 99

106 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 表 3.9: jquery 页 面 元 素 的 引 用 代 码 $( #msg ).html(); $(.msg ).html(); $( #msg ).html( <b>new content</b> ); $( #msg ).text(); $(.msg ).text(); $( #msg ).text( <b>new content</b> ); $( #msg ).height(); $( #msg ).height( 300 ); $( #msg ).width(); $( #msg ).width( 300 ); $( input ).val( ); $( input ).val( test ); 描 述 返 回 id 为 msg 的 元 素 节 点 的 html 内 容 返 回 class 为 msg 的 元 素 节 点 的 html 内 容 将 <b>new content</b> 作 为 html 串 写 入 id 为 msg 的 元 素 节 点 内 容 中, 页 面 显 示 粗 体 的 new content 返 回 id 为 msg 的 元 素 节 点 的 文 本 内 容 返 回 class 为 msg 的 元 素 节 点 的 文 本 内 容 将 <b>new content</b> 作 为 普 通 文 本 串 写 入 id 为 msg 的 元 素 节 点 内 容 中, 页 面 显 示 <b>new content</b> 返 回 id 为 msg 的 元 素 的 高 度 将 id 为 msg 的 元 素 的 高 度 设 为 300 返 回 id 为 msg 的 元 素 的 宽 度 将 id 为 msg 的 元 素 的 宽 度 设 为 300 返 回 表 单 输 入 框 的 value 值 将 表 单 输 入 框 的 value 值 设 为 test 100

107 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 效 果 演 示 地 址 : ners.com/demo/slider-gallery.h tml 演 示 地 址 : oup.com/examples/slider/index3. php 演 示 地 址 : examples/diggheader/ 演 示 地 址 : are/icondock/0.8b/dock.html 地 址 Slider Gallery- 这 是 一 个 模 仿 Apple 网 站 的 jquery 滑 动 门 产 品 展 示. 这 个 产 品 展 示 滑 动 门 就 是 一 个 直 线 前 进 的 画 廊, 在 有 限 的 空 间 里 面 显 示 产 品 图 片, 支 持 Tab 标 记 的 滑 动 和 前 进 后 退 按 钮 的 滑 动. Accessible slider- Illustrations 和 代 码 显 示 如 何 最 简 单 的 制 作 一 个 滑 动 门 UI 控 制 条, 而 不 需 要 任 何 Javascript 或 CSS 知 识. Digg Header- 这 是 一 个 仿 Digg 的 导 航 菜 单, 宽 度 可 变, 下 拉 菜 单, 精 美 的 搜 索 框, 简 单 的 颜 色 更 改, 总 之 是 有 很 多 可 取 之 处, 很 强 大 的 一 个 导 航 菜 单. IconDock- a jquery JavaScript library 这 个 插 件 允 许 你 创 建 一 个 类 似 于 Mac OS X 操 作 系 统 Dock 菜 单 的 特 效 菜 单. Accordion Menu - 这 是 一 个 手 风 琴 效 果 的 演 示, 标 题 使 用 H3 标 记, 子 菜 单 使 用 UL 标 记 来 实 现 伸 缩 演 示 地 址 : micdrive.com/dynamicindex17/ ddaccordionmenu.htm 树 形 菜 单 演 示 地 址 : 101

108 第 三 部 分. JAVASCRIPT 网 页 设 计 与 网 站 开 发 更 多 示 例 限 于 篇 幅 限 制, 本 文 不 一 一 列 举, 更 多 的 示 例 可 以 参 考 以 下 网 站 ery/ tion-examples-jquery/ 102

109 第 四 部 分 php 4.1 网 页 登 陆 创 建 数 据 库 进 入 mysql 控 制 台, 创 建 数 据 库 phptest, 并 创 建 一 个 数 据 库 用 户 user1, 该 用 户 对 phptest 拥 有 所 有 的 权 限 create database phptest; // 创 建 数 据 库 // 新 建 数 据 库 用 户, 用 户 名 为 user1, 密 码 为 123 对 数 据 库 phptest 下 面 的 所 有 表 拥 有 全 部 的 权 限 grant all on phptest.* to identified by '123'; 在 数 据 库 phptest 中, 新 建 表 users use phptest; create table users( uid int auto_increment primary key, usrname nvarchar(20), usrpasswd nvarchar(20) ); // 向 数 据 库 中 插 入 记 录 insert into users(usrname,usrpasswd)values('admin','admin'); insert into users(usrname,usrpasswd)values('user1','pass1'); html 页 面 代 码 4.1: login.html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset= utf-8"> 4 <title> 用 户 登 陆 php</title> 5 </head> 103

110 第 四 部 分. PHP 网 页 设 计 与 网 站 开 发 6 <body> 7 <form action="login.php" method="post" > 8 <div> 9 <div> 10 <label> 帐 号 </label> 11 <input type="text" name="usrname"/> 12 </div> 13 <div> 14 <label> 密 码 </label> 15 <input type="password" name="usrpwd"/> 16 </div> 17 <div> 18 <input type="submit" value=" 登 陆 "/> 19 </div> 20 </div> 21 </form> 22 </body> 23 </html> 代 码 4.1 使 用 浏 览 器 打 开 后, 其 运 行 的 界 面 如 图 4.1 所 示 图 4.1: 登 陆 网 页 4.2 php 登 陆 html 页 面 使 用 post 方 法 可 以 将 用 户 在 页 面 上 输 入 的 内 容 提 交 到 服 务 器, 在 服 务 器 端 php 可 以 通 过 $_POST 方 法 来 获 取 这 些 值 在 代 码 4.1 中, 页 面 总 共 想 服 务 器 提 交 了 两 个 文 本 框 的 内 容 : 一 个 文 本 框 的 name 为 usrname, 另 一 个 文 本 框 的 name 为 usrpwd php 可 以 使 用 $_POST[usrname] 和 $_POST[usrpwd] 来 获 取 其 中 的 内 容 104

111 第 四 部 分. PHP 网 页 设 计 与 网 站 开 发 php 获 取 到 文 本 框 的 内 容 后, 在 指 定 的 数 据 库 中 查 找 是 否 有 相 应 的 记 录, 如 果 有 验 证 则 通 过, 如 果 没 有 则 验 证 失 败 具 体 的 代 码 如 代 码 4.2 所 示 代 码 4.2: login.php 1 <?php 2 $db = mysql_connect("localhost", "user1","123") 3 or die(" 不 能 连 接 服 务 器 ".mysql_error()); 4 mysql_select_db("phptest",$db) 5 or die(" 数 据 库 访 问 错 误 ".mysql_errno()); 6 $chk_usr=$_post["usrname"]; 7 $chk_pwd=$_post["usrpwd"]; 8 $result = mysql_query("select * FROM users where usrname='". $chk_usr."' and usrpasswd='".$chk_pwd."'",$db); 9 $numrows=mysql_num_rows($result); 10 if ($numrows == 1) { 11 echo "<script>alert(\" 登 陆 成 功!\");</script>"; 12 }else { 13 echo "<script>alert(\" 登 陆 失 败!\");< /script>"; 14 } mysql_free_result($result); 17 mysql_close($db); 18 19?> 4.3 数 据 验 证 有 些 时 候, 由 于 用 户 的 误 操 作, 有 可 能 会 提 交 一 些 错 误 的 数 据 到 服 务 器 其 中 有 些 是 没 有 恶 意 的 误 操 作 数 据, 它 不 会 对 服 务 器 形 成 攻 击, 但 是 它 会 增 加 服 务 器 的 负 担, 也 会 增 加 网 络 的 开 销 有 些 则 是 一 些 恶 意 的 攻 击 数 据, 会 对 服 务 器 形 成 攻 击 为 了 保 护 服 务 器, 所 以 很 有 必 要 对 用 户 提 交 的 数 据 进 行 验 证 验 证 分 为 客 户 端 验 证 和 服 务 器 端 验 证, 两 种 验 证 要 同 时 使 用 仅 仅 只 使 用 其 中 一 种 验 证 很 难 起 到 保 护 服 务 器 的 作 用, 如 果 仅 使 用 客 户 端 验 证, 黑 客 可 以 自 己 构 造 数 据 绕 开 客 户 端 ; 如 果 仅 使 用 服 务 端 验 证, 虽 然 可 以 避 免 非 法 数 据 的 工 具, 无 法 减 少 正 常 用 户 由 于 误 操 作 给 服 务 器 带 来 的 处 理 压 力 105

112 第 四 部 分. PHP 网 页 设 计 与 网 站 开 发 客 户 端 验 证 客 户 端 验 证 通 常 都 使 用 javascript 进 行 验 证 在 提 交 数 据 之 前 对 用 户 的 数 据 进 行 检 测, 检 测 用 户 字 符 中 是 否 还 有 非 法 字 符 是 否 符 合 长 度 要 求 是 否 符 合 数 字 字 符 的 要 求 等 等 代 码 4.1 中 用 户 向 服 务 器 提 交 了 2 个 数 据 此 处 要 求 : 用 户 名 只 能 为 字 母 和 数 字 且 长 度 为 3-10, 密 码 只 能 是 数 字 且 长 度 为 6-10 其 客 户 端 检 测 的 javascript 代 码 如 下 : 代 码 4.3: login.html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset= utf-8"> 4 <title> 用 户 登 陆 php</title> 5 <script language="javascript"> 6 function checkall(){ 7 var re_user=/[\d\w]{3,10}/; 8 var re_pwd=/[\d]{6,10}/; 9 var uname = document.getelementbyid("usrname").value; 10 var upwd = document.getelementbyid("usrpwd").value; 11 if (uname.length=0 upwd.length==0){ 12 alert(" 用 户 名 和 密 码 都 不 能 为 空 "); 13 return false; // 取 消 页 面 提 交 14 } 15 if (re_user.test(uname)){ 16 alert(" 用 户 名 不 合 法 "); 17 // 取 消 页 面 提 交 18 return false; 19 } 20 if (re_pwd.test(upwd)){ 21 alert(" 密 码 不 合 法 "); 22 // 取 消 页 面 提 交 23 return false; 24 } 25 // 允 许 页 面 提 交 26 return true; 27 } 28 </script> 29 </head> 30 <body> 31 <form action="login.php" method="post" onsubmit="return 106

113 第 四 部 分. PHP 网 页 设 计 与 网 站 开 发 checkall();" > 32 <div> 33 <div> 34 <label> 帐 号 </label> 35 <input id="usrname" type="text" name="usrname"/> 36 </div> 37 <div> 38 <label> 密 码 </label> 39 <input id="usrpwd" type="password" name="usrpwd"/> 40 </div> 41 <div> 42 <input type="submit" value=" 登 陆 "/> 43 </div> 44 </div> 45 </form> 46 </body> 47 </html> 服 务 端 验 证 服 务 端 验 证 的 主 要 目 的 是 过 滤 非 法 的 字 符, 防 止 对 数 据 库 的 攻 击 行 为 代 码 4.4: login.php 1 <?php 2 header("content-type: text/html; charset=utf-8"); 3 $db = mysql_connect("localhost", "user1","123") 4 or die(" 不 能 连 接 服 务 器 ".mysql_error()); 5 mysql_select_db("phptest",$db) 6 or die(" 数 据 库 访 问 错 误 ".mysql_errno()); 7 $chk_usr=$_post["usrname"]; 8 $chk_pwd=$_post["usrpwd"] 9 if (preg_match('/[\d\w]{3,10}$/', $chk_usr) and preg_match ('/[\d]{4,10}$/', $chk_pwd)){ $result = mysql_query("select * FROM users where usrname='".$chk_usr."' and usrpasswd='".$chk_pwd."'",$db); 12 $numrows=mysql_num_rows($result); 13 if ($numrows == 1) { 14 echo "<script>alert(\" 登 陆 成 功!\"); 15 window.location.href='main.html'; 16 </script>"; 107

114 第 四 部 分. PHP 网 页 设 计 与 网 站 开 发 17 }else { 18 echo "<script>alert(\" 登 陆 失 败!\"); 19 window.location.href='login.html'; 20 < /script>"; 21 } mysql_free_result($result); 24 } mysql_close($db); 27 28?> 4.4 页 面 传 值 通 常 情 况 下, 用 户 登 陆 成 功 后 会 跳 转 到 另 外 一 个 页 面, 页 面 之 间 需 要 共 享 登 陆 用 户 的 信 息 网 页 程 序 一 般 使 用 session 在 页 面 之 间 传 递 数 据 为 上 面 的 程 序 增 加 一 个 新 的 php 页 面, 当 用 户 登 陆 成 功 后 用 来 显 示 用 户 的 姓 名 当 用 户 登 陆 成 功 时, 在 login.php 页 面 中 使 用 session 记 录 用 户 的 姓 名, 然 后 跳 转 到 success.php 页 面, 输 出 用 户 的 姓 名 代 码 4.5: login.php 1 <?php 2 3 [...etc...] 4 5 session_start(); 6 if(isset($_session['username'])){ 7 echo " 欢 迎 你 ".$_SESSION['username']; 8 9 [...etc...] 10 $result = mysql_query("select * FROM users where usrname='".$chk_usr."' and usrpasswd='".$chk_pwd."'",$db); 11 if (mysql_num_rows($result)) { 12 $r=mysql_fetch_array($result); 13 $_SESSION['username']=$r['usrname']; 14 echo $_SESSION['username']; 15 header("location: success.php"); 16 }else { 17 echo "<script>alert(\" 登 陆 失 败!\"); 108

115 第 四 部 分. PHP 网 页 设 计 与 网 站 开 发 18 window.location.href='login.html'; 19 < /script>"; 20 } mysql_free_result($result); 23 } [...etc...] 26?> 在 success.php 中, 使 用 isset() 函 数 检 测 session 的 是 否 存 在, 如 果 存 在 显 示 欢 迎 信 息 ; 如 果 不 存 在 则 自 动 跳 转 到 login.html 页 面 代 码 4.6: success.php 1 <?php 2 session_start(); 3 header("content-type: text/html; charset=utf-8"); 4 5 if(isset($_session['username'])){ 6 echo " 欢 迎 你 :".$_SESSION['username']; 7 }else{ 8 echo "<script>alert(\" 请 先 登 陆!\"); 9 window.location.href='login.html'; 10 < /script>"; 11 } 12?> 4.5 运 行 结 果 图 4.2: 用 户 登 陆 图 4.3: 登 陆 成 功 109