《web前端概述》PPT课件

第 1章 Web前 端 开 发 技 术 综 述 Page: 1Web前端开发 技术 清 华 大 学 出 版 社 第 1章 Web前 端 开 发 技 术 综 述 Page: 2Web前端开发 技术 清 华 大 学 出 版 社 考 核 方 式 第 1章 Web前 端 开 发 技 术 综 述 Page: 3Web前端开发 技术 清 华 大 学 出 版 社 延 续 教 学 安 排l答 疑 和 课 外 辅 导 （ 即 延 续 教 学 安 排 ）n面 对 面 答 疑 17学 时 ： 双 周 的 周 五 3-4节 课 ， 工 2的 4层 计算 机 系 机 房n课 后 答 疑 17学 时 ： 有 问 题 请 及 时 在 BB平 台 论 坛 区 发 帖 ，因 为 我 每 天 会 浏 览 多 次 ， 肯 定 及 时 回 帖 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 4Web前端开发 技术 清 华 大 学 出 版 社 课 程 资 源 第 1章 Web前 端 开 发 技 术 综 述 Page: 5Web前端开发 技术 清 华 大 学 出 版 社 1.1 Web概 述lWeb的 起 源 可 以 追 溯 到 1980年 Tim Berners-Lee构 建 的ENQUIRE项 目 （ 详 细 参 见 教 材 第 2-3页 ） 。英 国 计 算 机 科 学 家万 维 网 的 发 明 者 1994年 10月 非 赢 利 性 的 万 维 网 联 盟 W3C（ World Wide Web Consortium） 在 麻省 理 工 学 院 计 算 机 科 学 实 验 室 成 立 。负 责 WWW技 术 标 准 化 的 协 议 制 定 第 1章 Web前 端 开 发 技 术 综 述 Page: 6Web前端开发 技术 清 华 大 学 出 版 社 Web历 史 大 事 记 录Web 1.0 纪 元 （ 1994-2001） Web 2.0 纪元HTML5 纪 元 （ 2009-?） 第 1章 Web前 端 开 发 技 术 综 述 Page: 7Web前端开发 技术 清 华 大 学 出 版 社 Web1.0纪 元n 关 键 词 ： 网 页 制 作 、 三 剑 客 、 特 效 300例n 职 业 名 称 ： 网 页 设 计 师 、 页 面 仔 、 搞 前 台 的 、 网 页 编 辑n 主 要 技 术 ： HTML、 CSS、 Dreamweaver、 Fireworks、 Flashn 市 场 需 求 ： 门 户 网 站 、 企 业 网 站 、 个 人 网 站 网 页 作 图 软 件 第 1章 Web前 端 开 发 技 术 综 述 Page: 8Web前端开发 技术 清 华 大 学 出 版 社 Web1.0纪 元 ： 前 端 与 后 端 比 较 n 前 端 与 后 端 人 员 配 比 是 1:6左 右 ， 薪 水 比 是 1:2 第 1章 Web前 端 开 发 技 术 综 述 Page: 9Web前端开发 技术 清 华 大 学 出 版 社 Web1.0纪 元 ： 前 端 的 领 域 （ 2003） FF浏 览 器 ： 即 Firefox 第 1章 Web前 端 开 发 技 术 综 述 Page: 10Web前端开发 技术 清 华 大 学 出 版 社 Web2.0纪 元n 关 键 词 ： JavaScript、 Ajax、 Div+Css、 Web标 准n 职 业 名 称 ： 网 页 制 作 工 程 师 、 前 端 开 发 工 程 师n 主 要 技 术 ： HTML、 CSS、 JavaScriptn 市 场 需 求 ： 互 联 网 公 司 、 IT软 件 公 司 等 第 1章 Web前 端 开 发 技 术 综 述 Page: 11Web前端开发 技术 清 华 大 学 出 版 社 Web2.0纪 元 ： 前 端 与 后 端 比 较 n 前 端 与 后 端 人 员 配 比 是 1:3左 右 ， 薪 水 比 是 3:4 第 1章 Web前 端 开 发 技 术 综 述 Page: 12Web前端开发 技术 清 华 大 学 出 版 社 Web2.0纪 元 ： 前 端 的 领 域 （ 2009）2007年 ， WebKit开 源 项 目 催 生 了 面 向 移 动 设 备 的 现 代 Web 应 用 程 序 ， 苹 果 的 Safari、 谷 歌 的 Chrome浏 览 器 都 是 基 于 这 个 框 架 来开 发 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 13Web前端开发 技术 清 华 大 学 出 版 社 HTML5 纪 元n 关 键 词 ： JavaScript、 Ajax、 Web标 准 、 HTML5、 CSS3、 移 动 Web、多 终 端 适 配n 职 业 名 称 ： 前 端 开 发 工 程 师 、 全 栈 工 程 师n 主 要 技 术 ： HTML、 CSS、 JavaScript、 服 务 端 脚 本n 市 场 需 求 ： 互 联 网 公 司 、 IT软 件 公 司 、 电 商 、 金 融 、 智 能 硬 件 全 栈 工 程 师 ， 也 叫 全 端 工 程师 ， 英 文 Full Stack developer。 是 指 掌 握 多 种技 能 ， 并 能 利 用 多 种 技 能 独立 完 成 产 品 的 人 第 1章 Web前 端 开 发 技 术 综 述 Page: 14Web前端开发 技术 清 华 大 学 出 版 社 HTML5 纪 元 ： 前 端 与 后 端 比 较 n 前 端 与 后 端 人 员 配 比 是 2:3左 右 ， 薪 水 比 略 大 于 1:1 第 1章 Web前 端 开 发 技 术 综 述 Page: 15Web前端开发 技术 清 华 大 学 出 版 社 HTML5 纪 元 ： 前 端 的 领 域 （ 2014） 第 1章 Web前 端 开 发 技 术 综 述 Page: 16Web前端开发 技术 清 华 大 学 出 版 社 前 端 行 业 未 来 发 展n 云 服 务n 微 信 平 台n 智 能 硬 件n 移 动 HTML5n HTML5游 戏 第 1章 Web前 端 开 发 技 术 综 述 Page: 17Web前端开发 技术 清 华 大 学 出 版 社 关 于 前 端 技 术n 作 为 计 算 机 /软 件 程 专 业 的 一 个 方 向n 教 学 目 标 ： 培 养 专 业 的 前 端 开 发 工 程 师n 必 修 技 能 ： HTML、 CSS、 JavaScriptn 扩 展 技 能 ： HTTP协 议 前 端 性 能 优 化 网 络 安 全 与 攻 击 防 范 服 务 端 开 发 （ 基 于 Node.js）Web网 页 设 计 的 “ 三 剑 客 ” 第 1章 Web前 端 开 发 技 术 综 述 Page: 18Web前端开发 技术 清 华 大 学 出 版 社 前 端 技 术 的 参 考 书非 常 经 典 第 1章 Web前 端 开 发 技 术 综 述 Page: 19Web前端开发 技术 清 华 大 学 出 版 社第 1讲 Web前 端 开 发 概 述 第 1章 Web前 端 开 发 技 术 综 述 Page: 20Web前端开发 技术 清 华 大 学 出 版 社 本 讲 学 习 目 标Web前 端 开 发 工 程 师 应 掌 握 以 下 内 容 ：l了 解 Web发 展 史 ； l了 解 Web前 端 开 发 工 程 师 职 业 需 求l掌 握 Web网 站 相 关 的 基 本 概 念 ；l理 解 Web前 端 开 发 技 术 及 其 在 Web网 页 中 的 作 用 ；l了 解 常 用 的 Web前 端 开 发 工 具 、 浏 览 器 工 具 ， 并 学 会 使 用。 第 1章 Web前 端 开 发 技 术 综 述 Page: 21Web前端开发 技术 清 华 大 学 出 版 社 1.1 Web概 述Web特 点 ： （ 详 细 参 见 教 材 第 3-4页 ）1.Web是 易 导 航 和 图 形 化 2.Web是 具 有 平 台 无 关 性3.Web是 支 持 分 布 式 结 构4.Web是 具 有 动 态 性5.Web是 具 有 交 互 性 移 动 应 用 开 发 优 势 第 1章 Web前 端 开 发 技 术 综 述 Page: 22Web前端开发 技术 清 华 大 学 出 版 社 Web工 作 原 理 第 1章 Web前 端 开 发 技 术 综 述 Page: 23Web前端开发 技术 清 华 大 学 出 版 社 Web前 端 开 发 的 三 层 结 构Web网 页 设 计 的 “ 三 剑 客 ” 。1. HTML是 网 页 信 息 结 构 基 础 ；2. CSS是 网 页 表 现 技 术 ， 对 网 页 布 局 、字 体 、 颜 色 、 背 景 和 其 它 效 果 实 施更 加 精 确 的 控 制 ；3. JavaScrpt和 HTMLDOM是 网 页 行 为 ，实 现 网 页 的 动 态 、 交 互 功 能 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 24Web前端开发 技术 清 华 大 学 出 版 社 HTMLHyper Text Markup Language（ 超 文 本 标 记 语 言 ）用 来 描 述 页 面 的 内 容 和 结 构 HTML是 构 成 Web页 面 (Page)的 基 础 。 最 新 版 本 是 HTML5。 第 1章 Web前 端 开 发 技 术 综 述 Page: 25Web前端开发 技术 清 华 大 学 出 版 社 HTML超 文 本 标 记 语 言 的 发 展 历 史 HTML5终 于 修 成 正 果 第 1章 Web前 端 开 发 技 术 综 述 Page: 26Web前端开发 技术 清 华 大 学 出 版 社 Web网 页 设 计 相 关 概 念l统 一 资 源 定 位 符 统 一 资 源 定 位 符 （ Uniform Resource Locator， URL） 也 被称 为 网 页 地 址 ， 如 同 在 网 络 上 的门 牌 ， 是 因 特 网 上 标 准 的 资 源 的地 址 （ Address)。 协 议 类 型 :/服 务 器 地 址 （ 端 口号 ） /路 径 /文 件 名 http:/info.cern.ch/www20/0002 http:/ 序 号 服 务 （ 协 议 ） 类型 含 义1 http 超 文 本 传 输 协 议 资 源2 https 用 加 密 传 送 的 超 文 本 传输 协 议 3 ftp 文 件 传 输 协 议4 mailto 电 子 邮 件 地 址5 ldap 轻 型 目 录 访 问 协 议 搜 索6 news Usenet新 闻 组7 file 本 地 电 脑 或 网 上 分 享 的文 件 8 gopher G opher协 议 第 1章 Web前 端 开 发 技 术 综 述 Page: 27Web前端开发 技术 清 华 大 学 出 版 社 Web网 页 设 计 相 关 概 念 （ 续 ）l网 站 ： 在 因 特 网 上 ， 根 据 一 定 的 规 则 ， 使 用 HTML等 工 具 制作 的 用 于 展 示 特 定 内 容 的 相 关 网 页 的 集 合 。l网 页 ： 构 成 网 站 的 基 本 元 素 。l首 页 ： 也 称 主 页 。 即 一 个 网 站 的 入 口 网 页 。l超 链 接 超 链 接 （ Hyper Link） 是 指 从 一 个 网 页 指 向 另 一 个 目 标 的 连 接 关系 ， 这 个 目 标 可 以 是 另 一 个 网 页 ， 也 可 以 是 相 同 网 页 上 的 不 同 位 置 ， 还可 以 是 一 个 图 片 、 一 个 电 子 邮 件 地 址 、 一 个 文 件 ， 甚 至 是 一 个 应 用 程 序。 超 链 接 在 本 质 上 属 于 一 个 网 页 的 一 部 分 ， 它 是 一 种 允 许 我 们 同 其 他 网 页 或 站 点 之 间 进 行 连 接 的 元 素 。 例 如 ： 百 科 第 1章 Web前 端 开 发 技 术 综 述 Page: 28Web前端开发 技术 清 华 大 学 出 版 社 一 个 简 单 的 HTML页 面 第 1章 Web前 端 开 发 技 术 综 述 Page: 29Web前端开发 技术 清 华 大 学 出 版 社 l在 文 本 编 辑 器 (例 如 ： Sublime Text3)中 编 写 .l保 存 为 .html结 尾 的 文 件l在 浏 览 器 （ 例 如 ： Goole Chrome） 中 打 开 查 看 效 果如 何 编 写 HTML页 面 ？htm、 html都 是 静 态 网 页 的 后 缀 名 。二 者 没 有 区 别 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 30Web前端开发 技术 清 华 大 学 出 版 社 HTML标 签Hello World!开 始 标 签 结 束 标 签lHTML 标 签 是 由 尖 括 号 包 围 的 关 键 词 ， 比 如 lHTML 标 签 通 常 是 成 对 出 现 的 ， 比 如 和 l开 始 和 结 束 标 签 也 被 称 为 开 放 标 签 和 闭 合 标 签 第 1章 Web前 端 开 发 技 术 综 述 Page: 31Web前端开发 技术 清 华 大 学 出 版 社 标 签 嵌 套标 题介 绍 文 字l使 用 -标 签 定 义 标 题 , 定 义 一 级 标 题 ， 定 义 二 级 标题 ， 以 此 类 推 。 标 题 体 现 了 网 页 的 文 档 结 构 。 l使 用 标 签 定 义 一 个 段 落 。l 是 一 个 块 级 元 素 。 这 意 味 着 它 的 内 容 自 动 地 开 始 一 个 新 行 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 32Web前端开发 技术 清 华 大 学 出 版 社 页 面 编 码 META标 签 是 HTML标 记 HEAD区 的 一 个 关 键 标 签 ， 它 位 于 HTML文 档 的和 之 间 （ 有 些 也 不 是 在 和 之 间 ） 。 它 提 供的 信 息 虽 然 用 户 不 可 见 ， 但 却 是 文 档 的 最 基 本 的 元 信 息 。 除 了 提 供 文 档 字 符 集 、 使 用 语 言 、 作 者 等 基 本 信 息 外 ， 还 涉及 对 关 键 词 和 网 页 等 级 的 设 定 。 如 果 是 UTF8编 码 ， 则 在 外 国 人 的 英 文 IE上 也 能 显 示 中 文 ， 他 们 无 需下 载 IE的 中 文 语 言 支 持 包 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 33Web前端开发 技术 清 华 大 学 出 版 社 属 性 点 击 这 里属 性 属 性 值定 义 超 链 接 href=链 接 目 标 的 URL(即 web页 的 地 址 )title=锚 文 字target=_blank 转 到 空 白 页 第 1章 Web前 端 开 发 技 术 综 述 Page: 34Web前端开发 技术 清 华 大 学 出 版 社 HTML注 释 xxxxxx代表你要写的注释内容，注释不会在浏览器中显示。/和 /* */在 html里 也 是 常 用 的 注 释 ， 但 只 能 用 在js和 CSS语 言 ,不 对 HTML语 言 起 作 用 ！ 第 1章 Web前 端 开 发 技 术 综 述 Page: 35Web前端开发 技术 清 华 大 学 出 版 社 l结 构 , , , , , 等l媒 体 , , 等HTML 5 新 标 签 第 1章 Web前 端 开 发 技 术 综 述 Page: 36Web前端开发 技术 清 华 大 学 出 版 社 l表 单 类 型email, range, url, date, time, datetime, number, search等l验 证required, patternl其 它placeholderHTML 5 新 增 表 单 属 性 第 1章 Web前 端 开 发 技 术 综 述 Page: 37Web前端开发 技术 清 华 大 学 出 版 社 l不 同 的 浏 览 器 对 于 HTML标 准 支 持 程 度 不 同l查 看 浏 览 器 支 持 情 况 可 以 访 问 如 下 网 址 ： http:/浏 览 器 兼 容 性 第 1章 Web前 端 开 发 技 术 综 述 Page: 38Web前端开发 技术 清 华 大 学 出 版 社 l清 楚 了 解 每 一 个 标 签 和 属 性 的 语 义lHTML中 只 描 述 内 容 和 结 构 ， 样 式 留 给 CSSl手 写 HTML， 避 免 使 用 生 成 工 具l推 荐 2个 HTML学 习 的 参 考 网 址 ： HTML: The Living Standard HTML Tutorials如 何 学 习 HTML？ 第 1章 Web前 端 开 发 技 术 综 述 Page: 39Web前端开发 技术 清 华 大 学 出 版 社 CSSl层 叠 样 式 表 CSS（ Cascading Style Sheet） 级 联 样 式 表 1.CSS作 用 可 以 有 效 地 对 页 面 的 布 局 、 字 体 、 颜 色 、 背 景 和 其 它 效果 实 现 更 加 精 确 的 控 制 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 40Web前端开发 技术 清 华 大 学 出 版 社 CSS（ 续 ） 第 1章 Web前 端 开 发 技 术 综 述 Page: 41Web前端开发 技术 清 华 大 学 出 版 社 JavaScript JavaScript的 出 现 使 得 网 页 和 用 户 之 间 实 现 了 一 种 实 时 性 的 、 动 态的 、 交 互 性 的 关 系 ， 使 网 页 包 含 更 多 活 跃 元 素 和 更 加 精 彩 的 内 容 。 1.JavaScript由 来 JavaScript最 初 由 网 景 公 司 （ Netscape） 的 Brendan Eich设 计 ，是 一 种 由 Netscape的 LiveScript发 展 而 来 的 客 户 端 脚 本 语 言 ， 主 要 目 的是 为 了 解 决 服 务 器 端 语 言 ， 提 供 数 据 验 证 的 基 本 功 能 。 2.JavaScript组 成 一 个 完 整 的 JavaScript实 现 是 由 以 下 3个 不 同 部 分 组 成的 ：l核 心 （ ECMAScript） l文 档 对 象 模 型 （ DOM） l浏 览 器 对 象 模 型 （ BOM） 第 1章 Web前 端 开 发 技 术 综 述 Page: 42Web前端开发 技术 清 华 大 学 出 版 社 JavaScript案 例 第 1章 Web前 端 开 发 技 术 综 述 Page: 43Web前端开发 技术 清 华 大 学 出 版 社 HTML DOMlHTML DOM是 Document Object Model文 档 对 象 模 型lDOM结 构 ： 以 层 次 结 构 组 织 节 点 或 信 息 片 段 （ 教 材 第 13页的 例 1-3-3的 网 页 就 展 示 了 这 样 的 一 个 目 录 树 型 结 构 ） 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 44Web前端开发 技术 清 华 大 学 出 版 社 AJAX AJAX即 “ Asynchronous Javascript + XML”（ 异 步 JavaScript和 XML） ， 是 指 一 种 创 建 交 互 式 网 页 应 用 的 网 页 开 发 技 术 。 传 统 的 网 页 （ 不 使 用 AJAX） 如 果 需 要 更 新 内 容 ， 必 须 重 载 整 个 网页 面 。 AJAX 是 一 种 用 于 创 建 快 速 动 态 网 页 的 技 术 。 通 过 在 后 台 与 服 务器 进 行 少 量 数 据 交 换 ， AJAX 可 以 使 网 页 实 现 异 步 更 新 。 这 意 味 着 可 以在 不 重 新 加 载 整 个 网 页 的 情 况 下 ， 对 网 页 的 某 部 分 进 行 更 新 。 有 很 多 使 用 AJAX 的 应 用 程 序 案 例 ： 新 浪 微 博 Google地 图 、 开 心网 等 等 。 第 1章 Web前 端 开 发 技 术 综 述 Page: 45Web前端开发 技术 清 华 大 学 出 版 社 1.6 综 合 案 例 第 1章 Web前 端 开 发 技 术 综 述 Page: 46Web前端开发 技术 清 华 大 学 出 版 社 1.6 综 合 案 例 （ 续 ）