《html基础学习必备》PPT课件

2021-5-31 1 Web开 发 基 础 -HTML张 金 荣 重 庆 理 工 大 学TEL： 13983103704 QQ： 1211460305 2021-5-31 2 开 篇欢 迎 大 家 和 我 一 起 学 习 Web基 础学 习 时 间 ： 2天学 习 内 容 ： HTML、 CSS、 JavaScript要 点 安 排 ： NO.1HTML NO.2css样 式 表 NO.3JavaScript和 dom基 础 2021-5-31 3 三 多1、 多 记2、 多 看3、 多 练 2021-5-31 4 Web介 绍 Web介 绍什 么 是 WebWeb的 特 点Web的 发 展 2021-5-31 5 什么是Web 超 文 本 （ hypertext） 超 媒 体 （ hypermedia） 超 文 本 传 输 协 议 （ http） 2021-5-31 6 Web的发展 Web 1.0 角色鲜明 发布个人网站 内容管理系统 目录（分类） Web 2.0 人人参与 参与 博客 维基 标签 Web 3.0 集体智慧 云计算 SaaS 2021-5-31 7 第 一 章 HTML简 介第 一 章 HTML简 介 2021-5-31 8 本 章 目 标 了 解 Internet和 万 维 网 (www)? 了 解 Html语 言 历 史 和 W3C组 织 学 习 Html的 全 局 架 构 标 签 什 么 是 标 签 及 其 属 性 ? 如 何 创 建 超 级 链 接 ? 2021-5-31 9 Internet和 万 维 网 (www) 什 么 是 Internet? Internet的 历 史 TCP/IP(传 输 控 制 协 议 /Internet协 议 )， 一 种 能 保 证 计 算机 之 间 进 行 通 信 的 标 准 规 范 2021-5-31 10 Internet和 万 维 网 (www) 万 维 网 (world wide web) 是 一 个 基 于 超 文 本 （ Hypertext ） 方 式 的 信 息 检 索 服 务工 具 。 万 维 网 提 供 这 样 一 种 友 好 的 信 息 查 询 接 口 ： 用 户 仅 需提 出 查 询 要 求 ， 而 到 什 么 地 方 查 询 及 如 何 查 询 则 由 万维 网 自 动 完 成 。 - 超 文 本 开 发 语 言 HTML - 信 息 资 源 的 统 一 定 位 格 式 URL - 超 文 本 传 送 通 信 协 议 HTTP 2021-5-31 11 Internet和 万 维 网 (www) 超 文 本 传 输 协 议 HTTP 定 义 ： 网 络 传 输 协 议 作 用 ： 发 布 和 接 收 Html页 面 统 一 资 源 定 位 符 URL 定 义 ： 网 页 地 址 格 式 ： 协 议 :/域 名 :端 口 号 /文 件 路 径 /文 件 名 .文 件 后缀 http:/www.QQ:80/tq/index.html 2021-5-31 12 HTTP协 议 示 例GET / HTTP/1.1Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveIf-Modified-Since: Mon, 25 May 2009 03:19:18 GMTHTTP/1.1 200 OKCache-Control: private, max-age=30Content-Type: text/html; charset=utf-8Content-Encoding: gzipExpires: Mon, 25 May 2009 03:20:33 GMTLast-Modified: Mon, 25 May 2009 03:20:03 GMTVary: Accept-EncodingServer: Microsoft-IIS/7.0 X-AspNet-Version: 2.0.50727X-Powered-By: ASP.NETDate: Mon, 25 May 2009 03:20:02 GMTContent-Length: 12173消 息 体 的 内 容 （ 略 ） 2021-5-31 13 HTML超 文 本 标 记 语 言 Html（ 超 文 本 标 记 语 言 ）定 义 ： 为 网 页 创 建 和 其 它 可 在 网 页 浏 览 器 中 看 到 的信 息 设 计 的 一 种 标 记 语 言 .例 子以 “”标 识 标 签 的 开 始 ， 以 “”标识 标 签 的 结 束成 对 标 签 又 称 为 容 器 ， 一 对 标 签 中 还 可 以 嵌 套 其 它标 签单 独 标 签 不 需 要 与 之 配 对 的 结 束 标 签 ， 又 称 之 为 空标 签 ， 例 如 属 性 设 置 的 格 式 为 ： 属 性 名 =“属 性 值 ”Hello world! 2021-5-31 14 Html 规 范 与 版 本 不 同 浏 览 器 之 间 的 不 兼 容 问 题 从 软 件 开 发 角 度 ： 多 个 公 司 开 发 了 浏 览 器 软 件 ， 根 据网 页 中 的 标 签 决 定 显 示 内 容 ,有 点 浏 览 器 根 据 自 己 的 需要 ， 定 义 了 特 有 的 显 示 效 果 标 签 ， 导 致 不 兼 容 规 范 的 制 定 IETF 制 定 Html 2.0 W3C 组 织 3W联 盟 http:/www.w3c.org 正 在 使 用 的 Html的 版 本 Html 4.01 XHTML1.1 HTML 5 最 新 版 2021-5-31 15 浏 览 器 访 问 网 页 文 件 的 方 式http协 议网 页 文 件 本 地 存 储 系 统 （ 硬 盘 ）www服 务 器网 页 文 件 2021-5-31 16 如 何 上 网 ? 网 络 的 工 作 原 理 客 户 端 向 服 务 器 发 送 页 面 请 求Web 服 务 器 处 理 请 求 并 返 回请 求 的 页 面HTTP 负 责 请 求 和 响 应 2021-5-31 17 静 态 网 页 2021-5-31 18 动 态 网 页 (1) 2021-5-31 19 动 态 网 页 (2) 2021-5-31 20 网 页 与 网 站 什 么 是 网 页 ? 定 义 ： 构 成 网 站 的 基 本 元 素 格 式 ： 分 为 静 态 网 页 和 动 态 网 页静 态 网 页 文 件 扩 展 名 为 .html或 .htm动 态 网 页 文 件 扩 展 名 为 .jsp或 .aspx .asp .php等 什 么 是 网 站 ? 实 例 ： 新 浪 ， 网 易 定 义 ： 展 示 特 定 内 容 的 相 关 网 页 的 集 合 2021-5-31 21 编 辑 工 具 Dw( DreamWeaver) EditPlus 记 事 本 (Notepad) 2021-5-31 22 第 一 章 HTML简 介Blog 2021-5-31 23 第 一 章 HTML简 介HTML结 构 人 2021-5-31 24 第 一 章 HTML简 介标 签 ： 2021-5-31 25 Html的 全 局 架 构 标 签网 页 的 头 部 结 构 ： 内 容 ： , , CSS, Javascript网 页 的 主 体 结 构 ： 内 容 ： 包 含 网 页 中 显 示 的 文 本 、 图 像 和 链 接 等 欢 迎 来 到 中 冶 赛 迪 . . /script 欢 迎 来 到 中 冶 赛 迪 例 子 2021-5-31 26 第 一 章 HTML简 介练 习 ： 请 做 一 个 html页 面 ， 输 出 ： “ 这 是 我 的 第 一 个 html页 面 ”演 示 2021-5-31 27 好 的 html编 码 习 惯 文 件 扩 展 名 为 .html 标 签 必 须 正 确 地 嵌 套 要 符 合 XHTML标 准 标 签 元 素 必 须 要 关 闭 比 如 、 标 签 名 、 属 性 名 要 用 小 写 字 母 文 档 必 须 要 有 根 元 素 标 签 的 属 性 必 须 有 属 性 值 ,属 性 值 需 要 加 上 引 号 合 理 必 要 的 注 释 不 要 使 用 W3C不 推 荐 使 用 的 标 签 2021-5-31 28 第 二 章 HTML标 签第 二 章 HTML标 签 2021-5-31 29 第 二 章 HTML标 签 标 签 组 成 ： HTML 标 签 种 类 ： HTML标 签 通 常 称 对 出 现 ， 如 、 等有 个 别 单 独 出 现 的 标 签 我 们 叫 它 ： 空 标 签 。 如 （ 强 制 换 行 符 ） 2021-5-31 30 第 二 章 HTML标 签标 签 属 性标 签 可 以 拥 有 属 性 。 属 性 进 一 步 说 明 了 该 元 素 的 显 示 或 使 用 特 性 。 如 ： 属 性 的 格 式 ：属 性 名 = “属 性 值 ”属 性 的 位 置 ： xxx 添 加 多 个 属 性 ： xxx 2021-5-31 31 什 么 是 标 记 ？ 什 么 是 属 性 ? 什 么 是 标 记 ? 定 义 ： Html命 令 称 为 标 记(标 签 ) 作 用 ： 用 于 控 制 Html文 档的 内 容 和 外 观 分 类 ： 单 独 标 签 :， 成 对 标 签 : 标 记 的 属 性 作 用 ： 修 饰 或 进 一 步 制 定信 息 。 如 颜 色 ， 对 齐 方 式 ， 高 度 ，宽 度 等标 签 属 性 属 性 值 学 习 HTML 欢 迎 来 到 HTML 世 界 2021-5-31 32 DOCTYPE标 签 文 档 类 型 ,会 使 浏 览 器 使 用 相 应 的 方 式 加 载 网 页 并 显 示 。 示 例 ： 注 意 ： 标 签 没 有 结 束 标 签 ！ 2021-5-31 33 Head - Meta元 素 META标 签 分 两 大 部 分 ： HTTP标 题 信 息 (HTTP-EQUIV)和 页 面 描 述 信 息 (NAME) HTTP-EQUIV 类 似 于 HTTP的 头 部 协 议 ， 它 回 应 给 浏 览器 一 些 有 用 的 信 息 ， 以 帮 助 正 确 和 精 确 地 显 示 网 页 内 容 ,响 应 报 头 信 息 ， 如 页 面 编 码 、 缓 存 模 式 等 等 . NAME 定 义 页 面 基 本 信 息 ， 这 些 信 息 是 提 供 给 网 络 搜 索引 擎 的 ， 搜 索 引 擎 通 过 这 些 信 息 可 以 找 到 页 面 标 签 永 远 位 于 head 元 素 内 部 。 元 数 据 总 是 以 名 称 /值 的 形 式 被 成 对 传 递 的 。必 备 属 性 值 描 述content some_text 定 义 与 http-equiv 或 name 属 性 相关 的 元 信 息 2021-5-31 34 2021-5-31 35 META标 签属 性 值 描 述http-equiv content-typeexpires网 页 的 到 期 时 间refresh自 动 刷 新 并 指 向 新页 面set-cookie如 果 网 页 过期 ， 那 么 存 盘 的 cookie将 被 删 除 。 把 content 属 性 关 联 到 HTTP 头 部 。name authordescriptionkeywordsGenerator创 建 者Revised修 改 者others 把 content 属 性 关 联 到 一 个 名 称 。scheme some_text 定 义 用 于 翻 译 content 属 性 值 的 格 式 。 2021-5-31 36 标 签 及 其 属 性示 例xxxxxxxxxxxxx 2021-5-31 37 标 签 及 其 属 性 标 签 属 性 bgcolor 设 置 网 页 文 档 的 背 景 颜 色十 六 进 制 RGB颜 色 码 ， 使 用 一 个 #号 后 跟 六 位 十 六 进 制 数 据 ，例 如 #FF0000Html的 颜 色 常 量 名 ， 例 如 red 属 性 background 设 置 网 页 文 档 的 背 景 图 片 属 性 text 设 置 网 页 中 文 字 的 颜 色 属 性 leftmargin 设 置 网 页 中 的 内 容 到 左 边 距 之 间 的 距 离 属 性 topmargin 设 置 网 页 中 的 内 容 到 上 边 距 之 间 的 距 离 2021-5-31 38 标 签 及 其 属 性 标 签 属 性 align 设 置 标 题 文 字 的 水 平 对 齐 方 式 取 值 范 围 (left,right,center, justify两 端 对 齐 ) 标 签 属 性 size 设 置 水 平 线 的 粗 细 属 性 width 设 置 宽 度 2021-5-31 39 标 签 及 其 属 性标 签 属 性 align 设 置 段 落 文 字 的 水 平 对 齐 方 式 取 值 范 围 (left,right,center)标 签 标 签 作 用 :显 示 图 片 属 性 src 指 明 图 片 位 置 (相 对 路 径 ， 绝 对 路 径 ) 属 性 align 设 置 图 片 周 围 内 容 对 齐 方 式 取 值 范 围 ( top,middle,bottom ) 属 性 alt 图 片 无 法 显 示 时 的 替 代 信 息 属 性 title 提 示 信 息 2021-5-31 40 第 二 章 HTML标 签块 标 签 : 内 容 空 格 符 ： 注 意 ： 如 要 加 多 个 空 格 ， 只 需 加 多 个 标 志 演 示 ： 用 以 上 所 讲 的 标 签 做 一 个 html页 面显 示 2021-5-31 41 第 二 章 HTML链 接 HTML链 接 2021-5-31 42 超 级 链 接 标 签 作 用 :超 级 链 接 1)实 现 页 面 之 间 的 跳 转 2)页 内 跳 转 3） mailto 属 性 href=“” 属 性 target 锚 记 作 用 :页 内 跳 转 利 用 锚 记 可 以 实 现 页 面 内 跳 转 结 合 超 级 链 接 ， 可 以 跳 到 另 外 页 面 指 定 的 位 置 Html语 言 注 释 2021-5-31 43 第 三 章 HTML链 接图 片 标 签 ： Src属 性 （ 链 接 本 地 资 源 ） src = “所 要 链 接 资 源 地 址 ” 注 意 ： 标 签 是 一 个 空 标 签图 片 作 为 链 接 ： 2021-5-31 44 第 三 章 HTML链 接相 对 路 径 ： 资 源 路 径 与 你 打 开 页 面 有 关 联 的 路 径 叫 相 对 路 径绝 对 路 径 ： 资 源 路 径 与 你 打 开 页 面 无 关 的 路 径 叫 绝 对 路 径如 果 当 前 页 面 与 引 用 资 源 在 同 一 文 件 夹 内 则 直 接 写 资 源 名 称如 果 引 用 资 源 在 当 前 文 件 夹 下 一 级 的 文 件 夹 内 则 需 ： ./文 件 夹 名 称 /资 源 名 称 如 果 引 用 资 源 在 当 前 文 件 夹 上 一 级 的 文 件 夹 内 则 需 ： ./资 源 名 称如 果 引 用 资 源 在 当 前 文 件 夹 上 两 级 的 文 件 夹 内 则 需 ： ././资 源 名 称演 示 ： 2021-5-31 45 作 业 （ 一 ）个 人 简 历 ：网 页 1：1： 个 人 图 片2: 个 人 基 本 情 况 介 绍 (性 别 ， 年 龄 ， 姓 名 等 等 )网 页 2：1： 个 人 学 习 经 历 介 绍2: 个 人 工 作 经 验 介 绍要 求 用 到 段 落 标 记 进 行 排 版 ， 图 片 标 记 从 网 页 1中 能 链 接 到 网 页 2的 链 接 2021-5-31 46 作 业 （ 一 ）个 人 简 历姓 名 ： *性 别 : *年 龄 ： *。 。 。 。 。其 他 信 息1 自 我 介 绍2 工 作 简 历 3 家 庭 成 员 自 我 介 绍*工 作 简 历1*2*3*家 庭 成 员父 亲 ： *母 亲 ： * 2021-5-31 47 作 业 （ 二 ）项 目 ： 为 新 开 的 餐 厅 设 计 网 站要 求 ：1.共 有 三 个 页 面 ， 分 别 为A 文 件 名 index.html 站 点 首 页 ， 用 来 显 示 餐 厅 介 绍 信 息 ， 如 餐 厅 主 营 品 种 ， 餐厅 规 模 ， 餐 厅 地 理 位 置 ， 餐 厅 营 业 时 间 ， 餐 厅 服 务 项 目 等 。 其 中 ， 餐 厅 主 营 品 种 ，餐 厅 地 理 位 置 ， 营 业 时 间 为 必 须 选 项B 文 件 名 west.html 介 绍 西 餐 的 页 面 （ 至 少 4种 ） 分 别 介 绍 菜 名 ， 图 片 ， 价 格C 文 件 名 Chinese.html 介 绍 中 国 菜 的 页 面 ( 至 少 4种 ) 分 别 介 绍 菜 名 ， 图 片 ，价 格 2.三 个 页 面 之 间 要 建 立 超 级 链 接A 分 别 建 立 超 级 链 接 到 另 外 两 个 页 面B 对 于 west.html和 Chinese.html要 求 有 目 录 分 别 链 接 到 本 页 面 内 的 具 体 菜 肴C west.html和 Chinese.html之 间 能 够 有 互 相 访 问 的 超 级 链 接 2021-5-31 48 作 业 （ 二 ） 2021-5-31 49 第 四 章 ： HTML表 格 和 列 表 第 四 章 ： HTML表 格 和 列 表 2021-5-31 50 回 顾 Internet 和 万 维 网 网 页 的 工 作 原 理 网 页 的 基 本 结 构 标 记 及 其 属 性 段 落 标 记 ， 图 片 标 记 ， 超 级 链 接 标 记 相 对 路 径 ， 绝 对 路 径 ， 物 理 路 径 2021-5-31 51 本 章 目 标 网 页 设 计 注 意 事 项 什 么 是 表 格 ？ 为 什 么 需 要 表 格 ？ 如 何 创 建 表 格 ？ 表 格 如 何 使 用 ？ 2021-5-31 52 网 页 设 计 注 意 事 项 多 浏 览 器 支 持 样 式 与 风 格 统 一 网 站 结 构 、 文 件 命 名 页 面 尺 寸 与 屏 幕 分 辨 率 图 片 文 件 命 名 、 大 小 尺 寸 限 制 相 对 路 径 的 应 用 页 面 内 容 （ title、 meta、 alt、 tbody等 属 性 的 应 用 ） 2021-5-31 53 什 么 是 表 格 ？ 表 格 是 html高 级 构 件 之 一 ， 它 表 示 数 据 之 间 的 关 系 ， 使 对比 分 析 更 容 易 理 解 。 表 格 由 特 定 数 目 的 行 和 列 组 成球 员 得 分 篮 板 姚 明 27 8 麦 克 格 雷 迪 31 2 海 耶 斯 8 15 巴 蒂 尔 7 5 阿 尔 斯 通 2 3 2021-5-31 54 表 格 应 用 示 例 2021-5-31 55 什 么 是 表 格 ？ 表 格 的 作 用 ： 用 于 显 示 数 据 ， 便 于 理 解 、 分 析 组 织 网 页 版 面 信 息 2021-5-31 56 什 么 是 表 格 ？行 列 列 标 题 在 HTML 文 档 中 ， 广 泛 使 用 表 格 来 存 放 网 页 上 的 文 本 和 图 像单 元 格表 格 标 题 2021-5-31 57 第 四 章 ： HTML表 格 和 列 表HTML表 格 表 格 标 签 ： 行 标 签 ： 列 标 签 ： 空 格 ： 演 示 ： 一 行 一 列 一 行 三 列 两 行 三 列 注 意 ： 一 个 完 整 的 表 格 必 须 由 三 个 标 签 构 成 ， 且 应 该 先 画 行 后 画 列 2021-5-31 58 第 四 章 ： HTML表 格 和 列 表表 格 头 标 签 （ 表 格 头 位 于 表 格 的 内 部 ） ：头 内 容 标 签 相 当 于 一 个 标 签 ， 用 法 也 相 同 。 只 不 过 格 式 化 字 体表 格 标 题 标 签 （ 表 格 标 题 位 于 表 格 的 上 部 ） ：My Caption 注 意 ： 标 签 放 在 的 下 边 ， 第 一 个 的 上 边 2021-5-31 59 标 签 及 其 属 性 表 格 宽 度 width 高 度 height 单 位 设 置 像 素 (px) 百 分 比 ( %) 演 示 设 置 宽 度 ， 高 度 避 免 出 现 水 平 滚 动 条 一 般 不 设 置 高 度 (自 适 应 ) cellspacing， cellpadding 属 性 cellspacing 设 置 单 元 格 间 距 cellpadding 设 置 单 元 格 边 沿 和 其 内 容 之 间 的 距离 2021-5-31 60 table的 常 用 属 性 2021-5-31 61 标 签 及 其 属 性 align 属 性 属 性 值 ： “ left” 、 “ center” 、 “ right” 注 意 区 别 的 align属 性 valign 属 性 属 性 值 ： “ top” 、 “ middle” 、 “ bottom” bgcolor 属 性 背 景 颜 色 设 置 考 虑 设 置 优 先 级 的 问 题 2021-5-31 62 标 签 及 其 属 性 align 属 性 属 性 值 ： ” left” “ center” “ right” 注 意 区 别 的 align属 性 valign 属 性 属 性 值 ： ” top” “ middle” “ bottom” bgcolor 属 性 background 属 性 bgcolor 背 景 颜 色 设 置 background 背 景 图 片 设 置 考 虑 设 置 优 先 级 的 问 题 2021-5-31 63 标 签 及 其 属 性 width属 性 height属 性 注 意 ： 同 行 或 者 同 列 单 元 格 将 受 影 响 rowspan属 性 colspan属 性 rowspan属 性 将 一 个 表 格 单 元 格 扩 展 为 几 行 。 colspan属 性 将 一 个 表 格 单 元 格 扩 展 为 几 列 演 示 项 目 实 战 利 用 rowspan和 colspan属 性 合 并 单 元 格 2021-5-31 64 用 表 格 进 行 页 面 排 版 表 格 进 行 页 面 排 版 简 单 ， 便 捷 表 格 嵌 套 使 用 2021-5-31 65 表 格 排 版 注 意 事 项 ： 表 格 嵌 套 层 次 不 要 太 多 整 个 页 面 的 排 版 不 要 用 一 个 table， 影 响 浏 览 器 对 页 面 的显 示 效 率 表 格 的 行 列 排 版 要 整 齐 td中 没 有 内 容 时 ， 以 空 白 （ ） 填 充 Div+CSS布 局 （ 了 解 ） 2021-5-31 66 总 结 表 格 可 以 格 式 化 数 据 、 管 理 文 件 布 局 表 格 的 基 本 结 构 标 签 及 其 基 本 属 性 合 并 单 元 格 其 它 表 格 标 签 2021-5-31 67 课 后 练 习 作 业 2-1 创 建 一 个 如 下 样 式 的 表 格 要 求 ： 1.表 格 宽 度 760px， 边 框 宽 度 为 1px， 表 格 水 平 居 中2.单 元 格 之 间 没 有 间 距 ， 内 容 与 单 元 格 边 框 之 间 距 离 为 23.在 单 元 格 1和 2分 别 插 入 图 片 a1.gif和 a2.jpg,并 且 图 片 内 容 垂 直 居 中4.其 他 文 字 依 照 下 表 输 入5.要 求 按 照 完 整 的 网 页 规 范 编 码单 元 格 1 单 元 格 2 设 为 首 页联 系 站 长加 入 收 藏 首 页 | 基 础 知 识 | 高 级 编 程第四章：HTML表格和列表 2021-5-31 68 第 五 章 表 单第 五 章 表 单 2021-5-31 69 本 章 目 标 什 么 是 表 单 ？ 表 单 如 何 使 用 ？ 如 何 创 建 表 单 ？ 了 解 表 单 和 表 单 元 素 之 间 的 关 系 掌 握 表 单 元 素 的 使 用 2021-5-31 70 表 单 的 应 用 表 单 在 商 务 上 的 应 用 网 上 预 定 商 品 网 上 商 品 拍 卖 表 单 在 各 种 社 会 机 构 中 的 应 用 网 上 调 查 网 络 咨 询 表 单 在 网 络 上 其 它 应 用 网 络 人 才 招 聘 网 络 社 区 注 册 2021-5-31 71 表 单 应 用 2021-5-31 72 第 五 章 表 单HTML表 单 （ 表 单 是 一 个 能 够 包 含 表 单 元 素 的 区 域 ）表 单 标 签 ： 表 单 元 素 2021-5-31 73 表 单 元 素 -文 本 框 、 密 码 框 文 本 框 标 签 ： 属 性 ： type， name， size， maxlength， value， readonly 密 码 框 标 签 ： 属 性 ： type， name， size， maxlength， value， readonly 2021-5-31 74 第 五 章 表 单单 选 按 钮 标 签 ：MaleFemale复 选 框 ： I have a bike I have a car注 意 ： 复 选 框 与 单 选 框 很 大 的 不 同 就 是 name属 性 不 同 ， 且 复 选 框 不 要 求 有 value属 性Checked属 性 的 特 殊 性 文 件 输 入 框 标 签 ： 属 性 ： type， name， size， maxlength， readonly注 意 ： 单 选 按 钮 的 名 称 必 须 相 同 ， 否 则 不 能 控 制 单 选 特 性 2021-5-31 75 表 单 元 素 下 拉 列 表 下 拉 列 表 标 签 ： 属 性 ： name， size， multiple 属 性 ： value， selected 补 充 ： 标 签 : 为 主 菜 单 中 的 每 个 子 项 标 签 都 再 生 成 子 菜 单下拉列表：VolvoSaab Fiat Audi 2021-5-31 76 表 单 元 素 下 拉 列 表你 所 在 国 家 ：中 国 日 本 韩 国 法 国 德 国 意 大 利 2021-5-31 77 表 单 元 素 复 选 框 、 单 选 框你 最 喜 欢 什 么 动 物 ？狗 猫 鸟 鱼 你 喜 欢 什 么 动 物 ？狗 猫 鸟 鱼 2021-5-31 78 表 单 元 素 动 作 按 钮 标 签 标 签 ： 属 性 ： type 2021-5-31 79 给 表 单 元 素 标 记 和 分 组 标 签 使 用 label 标 签 来 定 义 表 单 元 素 间 的 关 系 标 签 标 签 将 一 群 相 关 表 单 控 件 形 成 一 个 组 ， 并 用 和 标 签 来标 记 这 个 组 个 人 资 料 姓 名 ： 个 人 简 介 ： /label 2021-5-31 80 第 五 章 表 单文 本 域 ：The cat was playing in the garden.按 钮 ： 两 个 特 殊 的 按 钮 提 交 按 钮 重 置 按 钮 注 意 ： 提 交 按 钮 必 须 配 合 form的 action属 性 使 用 2021-5-31 81 Tab 键 索 引 顺 序 tabindex 属 性 用 来 设 定 按 下 tab键 时 焦 点 的 移 动 顺 序 tabindex 属 性 值 为 正 整 数 规 则 ： 数 值 越 小 越 先 访 问 ， 没 有 tabindex属性 或 属 性 为 0的 元 素 后 被 访 问 2021-5-31 82 其 它 相 关 属 性 id 属 性 id属 性 赋 值 的 名 称 不 会 传 递 给 服 务 器 (证 明 ) id属 性 和 name属 性 的 区 别 title 属 性 作 用 ： 用 弹 出 式 帮 助 来 给 用 户 提 示 style, class, lang, dir 属 性 accesskey属 性 作 用 ： 设 定 页 面 快 捷 键IE 为 alt+accesskey属 性 值 ，FireFox 为 alt+shift+accesskey属 性 值 2021-5-31 83 readonly和 disabled属 性 readonly属 性 用 户 不 能 修 改 表 单 控 件 控 件 值 将 被 传 送 到 服 务 器 控 件 可 以 被 鼠 标 和 通 过 tab键 选 定 disabled属 性 用 户 不 能 修 改 表 单 控 件 控 件 值 将 不 会 被 传 送 到 服 务 器 控 件 不 能 被 鼠 标 和 通 过 tab键 选 定 2021-5-31 84 Form标 签 的 三 大 属 性 action属 性 (必 须 ) 说 明 了 接 收 和 处 理 表 单 数 据 的 应 用 程 序 URL method 属 性 (必 须 ) 为 浏 览 器 设 置 表 单 中 的 数 据 传 送 到 服 务 器 的 方 法 属 性 值 ： get 和 post Name 属 性 . 2021-5-31 85 get 还 是 post(补 充 ) GET /cgi-bin/method.cgi?userName=zhangsan HTTP/1.1Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*Referer: http:/localhost/other.htmlAccept-Language: zh-cnAccept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)Host: localhost:8080 Connection: Keep-Alive 注 ： 根 据 HTTP 规 范 ， GET 用 于 信 息 获 取 ， 而 且 应 该 是 安 全 的 和 幂 等 的 。 所 谓安 全 的 意 味 着 该 操 作 用 于 获 取 信 息 而 非 修 改 信 息 。 换 句 话 说 ， GET 请 求 一 般 不应 产 生 副 作 用 。 幂 等 的 意 味 着 对 同 一 URL 的 多 个 请 求 应 该 返 回 同 样 的 结 果 。 POST /cgi-bin/tech/method.cgi HTTP/1.1Acce t: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*Referer: http:/localhost/other.htmlAccept-Language: zh-cnContent-Type: application/x-www-form-urlencodedAccept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)Host: localhost:8080Content-Length: 9Connection: Keep-AliveuserName=lisi 2021-5-31 86 总 结 表 单 是 由 表 单 容 器 和 其 中 的 表 单 元 素 组 成 表 单 中 的 各 种 表 单 元 素 及 其 属 性 表 单 的 结 构 和 表 单 属 性 2021-5-31 87 课 后 练 习 作 业模 拟 美 食 网 站 的 注 册 页 面 （ 结 合 table做 页 面 布 局 ）要 求 ： 姓 名 密 码 性 别 所 在 城 市 （ 省 、 市 ） 个 人 喜 好 ： 各 类 美 食 个 人 介 绍 2021-5-31 88第 五 章 框 架 2021-5-31 89 目 标 框 架 的 意 义 框 架 结 构 的 典 型 代 码 多 框 架 的 窗 口 中 超 链 接 的 导 航 目 标 框 架 嵌 套 的 实 现 2021-5-31 90 框 架 的 应 用 2021-5-31 91 框 架 的 作 用 框 架 结 构 的 优 点 内 容 组 织 有 条 理 方 便 导 航 框 架 结 构 的 缺 点 浏 览 器 被 划 分 为 太 多 子 窗 口 影 响 整 体 美 观 通 常 能 通 过 表 格 布 局 取 代 打 印 整 个 页 面 变 得 困 难 。 2021-5-31 92 框 架 结 构 标 签 作 用 ： 定 义 框 架 属 性 ： cols 设 置 框 架 分 为 几 列 rows设 置 框 架 分 为 几 行 border 用 来 设 置 框 架 的 边 框 宽 度 bordercolor 边 框 颜 色 Frameborder 设 置 是 否 显 示 框 架 边 框 其 它 属 性 ： class， style， title， id 2021-5-31 93 框 架 结 构 标 签 作 用 ： 定 义 每 个 框 架 中 放 入 什 么 文 件 。 属 性 ： src: 制 定 在 框 架 窗 口 中 显 示 什 么 文 件 name: 制 定 框 架 窗 口 的 名 字 noresize: 禁 止 访 问 用 户 改 变 框 架 大 小 scrolling: 为 框 架 窗 口 设 置 滚 动 条 其 它 属 性 ： title， style， class， id 2021-5-31 94 框 架 结 构 标 签 作 用 ： 为 不 能 显 示 框 架 的 浏 览 器 (mosaic)提 供 了 一 种 解 决 方 案 2021-5-31 95 框 架 的 嵌 套 典 型 的 左 右 框 架 演 示 嵌 套 框 架 的 实 现 演 示 2层 嵌 套 3层 嵌 套 （ 作 业 ） 实 际 应 用 ： 聊 天 室 2021-5-31 96 框 架 示 例无 标 题 文 档 您 当 前 浏 览 器 不 支 持 框 架 Rows属 性进 行 窗 口上 下 划 分Frameset嵌套 ， 再 左右 划 分 Frame的 name， 做 页面 导 航 时 ， 超 链 接 的target指 向 此 name 2021-5-31 97 超 链 接 导 航 的 特 殊 属 性 target Target 作 用 ： 指 定 标 签 中 href指 向 的 页 面 在 target指 定 的 框 架 或者 窗 口 中 打 开 。 如 果 target指 定 的 框 架 或 者 窗 口 不 存 在 。 浏 览 器 将 在新 窗 口 中 打 开 。 实 现 框 架 的 导 航 效 果 2021-5-31 98 导 航 链 接 目 标 标 签 作 用 ： 为 没 有 包 含 显 示 的 target属 性 的 当 前 文 档 中 的 每 一 个 超 链 接 设置 一 个 默 认 目 标 。 属 性 ： Target 注 意 ： 该 标 签 位 于 之 内 2021-5-31 99 特 殊 的 目 标 _blank 浏 览 器 总 是 在 一 个 新 打 开 、 未 命 名 的 窗 口 中 载 入 链 接 的 文 档 _self 超 链 接 的 默 认 值 ， 它 使 得 目 标 文 档 载 入 并 显 示 在 相 同 的 框 架 或 者 窗 口中 。 _parent 文 档 载 入 父 窗 口 或 者 包 含 了 超 链 接 引 用 的 框 架 _top 将 文 档 载 入 取 代 当 前 窗 口 中 的 框 架 。 2021-5-31 100 内 联 框 架 标 签 属 性 ： Src 用 来 指 定 内 联 框 架 中 显 示 的 网 页 Align 设 置 内 联 框 架 在 相 邻 文 档 中 的 位 置 Width， height 设 置 内 联 框 架 区 域 的 宽 度 和 高 度 Frameborder 设 置 是 否 有 3维 边 框 (“yes”或 ” no”) Scrolling 设 置 是 否 有 滚 动 条 (同 ) 其 它 标 签 class， style， id， name 浏 览 器 中 的 浏 览 器 2021-5-31 101 总 结 框 架 结 构 的 应 用 框 架 的 标 签 及 其 属 性 多 层 框 架 嵌 套 的 实 现 多 框 架 的 窗 口 中 超 链 接 的 导 航 目 标 2021-5-31 102 作 业 2-1 创 建 一 个 多 级 嵌 套 框 架 ， 具 体 样 式 见 示 意 图 ， 要 求 实 现 导航 页 面 2021-5-31 103 作 业 2-2 采 用 iframe方 式 创 建 以 下 界 面 ， 并 根 据 链 接 的 提 示 实 现界 面 不 同 target的 跳 转 2021-5-31 104第 六 章 其 它 标 签 2021-5-31 105 回 顾 框 架 的 意 义 框 架 结 构 的 典 型 代 码 多 框 架 的 窗 口 中 超 链 接 的 导 航 目 标 框 架 嵌 套 的 实 现 模 板 的 应 用 2021-5-31 106 目 标 段 落 标 记 字 符 标 记 特 殊 字 符 表 示 方 法 图 片 及 图 片 标 记 多 媒 体 （ 动 画 ， 音 乐 ） 2021-5-31 107 段 落 相 关 标 记 作 用 ： 定 义 段 落 属 性 ： align 作 用 ： 换 行 标 题 标 签 . Align属 性 改 变 对 齐 方 式 2021-5-31 108 段 落 相 关 标 记 标 签 作 用 ： 起 修 饰 作 用 的 水 平 分 割 线 属 性 ： align 设 置 对 齐 方 式 size 设 置 分 割 线 的 厚 度 （ 像 素 为 单 位 ） noshade 显 示 扁 平 2D分 割 线 ， 没 有 属 性 值 width 设 置 分 割 线 的 长 度 (百 分 比 ， 像 素 ) color 设 置 颜 色 ， 一 旦 设 置 颜 色 将 失 去 3D效 果 分 割 线 的 使 用 ： 页 首 页 尾 使 用 分 割 线 2021-5-31 109 段 落 相 关 标 记 . 作 用 ： 滚 动 字 幕 属 性 ： behavior 设 置 文 字 滚 动 样 式 (scroll， slide， alternate) direction 设 置 文 字 滚 动 的 方 向 (left,right,up,down) loop 设 置 文 字 的 滚 动 次 数 bgcolor 设 置 滚 动 区 域 背 景 色 scrollamount 设 置 每 次 滚 动 之 间 的 间 隔 像 素 scrolldelay 设 置 每 次 滚 动 之 间 的 时 间 间 隔 (毫 秒 ) height,width设 置 整 个 字 幕 区 域 的 大 小 事 件 ： onmouseover=“ this.stop()” onmouseout=“ this.start()” 2021-5-31 110 段 落 相 关 标 记有 序 列 表 属 性 ： start 设 置 有 序 列 表 的 起 始 数 字 type设 置 编 号 的 样 式 (1,A,a,I,i)无 序 列 表 属 性 ： Type 设 置 编 号 的 样 式 (circle， square， disc) 2021-5-31 111 段 落 相 关 标 记 列 表 的 嵌 套 有 序 列 表 的 嵌 套 无 序 列 表 的 嵌 套嵌 套 示 例 ： 列 表 项 1 列 表 项 2 子 项 2-1 子 项 2-2 列 表 项 3/ol 2021-5-31 112 段 落 相 关 标 记 作 用 ： 标 志 文 档 中 的 地 址 意 义 ： 实 现 内 容 与 格 式 无 关 作 用 ： 用 来 显 示 和 表 示 一 段 引 用 样 式 ： 缩 进 2021-5-31 113 段 落 相 关 标 记 作 用 ： 预 格 式 化 文 本 ， 所 见 即 所 得 2021-5-31 114 字 符 相 关 标 签 作 用 ： 定 义 字 符 的 相 关 样 式 属 性 ： Face 定 义 字 体 ， 默 认 宋 体 Color 定 义 字 体 颜 色 Size 字 号 ， 最 大 为 “ 7”， 大 于 7全 部 按 7号 显 示 在 HTML 4.01 中 ， font 元 素 不 被 赞 成 使 用 。 在 XHTML 1.0 Strict DTD 中 ， font 元 素 不 被 支 持 。动 物 世 界 /head了 解 有 关 动 物 的 更 多 信 息 斑 马 的特 性 没 有 任 何 两 匹 斑 马 的 斑 纹是 完 全 一 样 的 ， 因 此 每 匹 斑 马 都 是 独 一 无 二 的 2021-5-31 115 字 符 相 关 标 签注 ： 它 们 不 被 赞 成 使 用 ,建 议 使 用 样 式 表 加 粗 bold 下 划 线 underline 倾 斜 italics 删 除 线 上 标 下 标 2021-5-31 116 特 殊 字 符 表 示 方 法 特 殊 字 符 “ ” 大 于 号 “ “ 小 于 号 “ 空 格 双 引 号 2021-5-31 117 图 片 标 记 *.gif *.jpg *.png Gif格 式 支 持 动 画 图 形 渐 变 支 持 256种 颜 色 Jpg格 式 支 持 丰 富 的 颜 色 有 损 压 缩 Png格 式 新 图 片 格 式 ， 吸 取 两 者 优 点 标 记 属 性 width height border 2021-5-31 118 图 像 地 图 2021-5-31 119 多 媒 体 （ 动 画 ， 音 乐 ） 背 景 音 乐 作 用 ： 设 置 背 景 音 乐 注 意 ： 只 适 合 IE浏 览 器 属 性 ： src 指 定 相 关 音 乐 文 件 （ IE支 持 wav， au， midi） loop 设 置 音 频 文 件 重 播 的 整 数 次 数 ,设 置 为 infinite则 会 持 续 重 复播 放 2021-5-31 120 动 画 的 引 入 Flash动 画 *.swf 支 持 几 千 万 种 颜 色 ， 能 与 用 户 交 互 ， 支 持 声 音 格 式 *.fla flash动 画 的 源 文 件 Flash按 钮 标 签 属 性 ： classid 播 放 软 件 的 系 统 注 册 号 codebase 控 件 的 下 载 地 址 date type 2021-5-31 121 Applet示 例-IE浏 览 器 - 非 IE浏 览 器 - 2021-5-31 122 总 结 段 落 标 记 字 符 标 记 特 殊 字 符 表 示 方 法 图 片 及 图 片 标 记 多 媒 体 （ 动 画 ， 音 乐 ） 2021-5-31 123 作 业 跑 马 灯 效 果 （ 新 闻 公 告 显 示 ） 完 成 baidu图 片 地 图 （ 至 少 3个 热 点 ） 3层 （ 无 序 /有 序 ） 列 表 嵌 套 2021-5-31 124 阶 段 作 业要 求 ： 采 用 frameset、 form、 table控 件 样 式 不 做 要 求 ， 主 要 控 制 页 面 排 版 2021-5-31 125 阶 段 作 业 2 1 采 用 ”ul +l i +超 链 接 ”即 可 ,下 同 2021-5-31 126 阶 段 作 业 2 2