《Web前端概述》PPT课件.pptx

Web前端概述 1 HTML的历史 主要内容 万维网WWW的发明 1989年3月 在日内瓦的欧洲粒子物理实验室 为了使大家在研究和交流上快捷 方便 软件工程师蒂莫西 贝纳斯 李提示一种叫 链 link 也称为超连接 的概念 用连接方式组织文本 把关键词和与它相关内容用 超连接 链接起来 这样的文本称为超文本 他又提出了超文本标记语言 HTML 并创造万维网 1990年12月万维网首次在内部使用 次年夏天在因特网上推出 贝纳斯 李把这项发明取名为 WorldWideWeb 意思是世界范围的网 简写为WWW或Web 时贝纳斯 李所使用的浏览器软件是文本界面方式 使用起来不是很方便 第一个图文界面浏览器 1992年11月 在美国伊利诺斯大学的国家超级计算机应用中心 NCSA 打工的大学生马克 安德里森看到了浏览器程序后 觉得利用鼠标和图形界面可以开发一个方便易用的浏览器 他与同事埃里克 比纳合作 编制出了一个新的浏览器软件 命名为马赛克 Mosaic 简单漂亮的界面与自动显示图形的功能 使得 马赛克 在诸多的浏览器软件中鹤立鸡群 不久马克 安德里森与人成立了网景公司 马赛克也改名为航海家 Navigator HTML的版本 超文本标记语言在1993年6月工作草案发布 HTML2 0 1995年11月作为RFC1866发布HTML3 2 1997年1月14日 W3C推荐标准HTML4 01997年12月18日 W3C推荐标准HTML4 01 微小改进 1999年12月24日 W3C推荐标准HTML5目前仍为草案 并已被W3C接纳 CSS的起源 从1990年代初HTML被发明开始样式表就以各种形式出现 不同的浏览器结合它们各自的样式语言 读者可以使用这些样式语言来调节网页的显示方式 一开始样式表是给读者用的 最初的HTML版本只含有很少的显示属性 读者来决定网页应该怎样被显示 但随着HTML的成长 为了满足设计师的要求 HTML获得了很多显示功能 随着这些功能的增加外来定义样式的语言越来越没有意义了 CSS的起源 1994年哈坤 利提出了CSS的最初建议 伯特 波斯 BertBos 当时正在设计一个叫做Argo的浏览器 他们决定一起合作设计CSS 当时已经有过一些样式表语言的建议了 但CSS是第一个含有 层叠 的主意的 在CSS中 一个文件的样式可以从其它的样式表中继承下来 读者在有些地方可以使用他自己更喜欢的样式 在其他地方则继承 或 层叠 作者的样式 这种层叠的方式使作者和读者都可以灵活地加入自己的设计 混合各人的爱好 CSS的起源 哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议 1995年他与波斯一起再次展示这个建议 当时W3C刚建立 对CSS的发展很感兴趣 它为此组织一次讨论会 哈坤 波斯和其他一些人是这个项目的主要技术负责人 1996年底 CSS已经完成 1996年12月CSS要求的第一版本被出版 1997年初 W3C内组织了专门管CSS的工作组 其负责人是克里斯 里雷 这个工作组开始讨论第一版中没有涉及到的问题 其结果是1998年5月出版的第二版要求 到2009年 第三版基本完备 http www w3 org TR JavaScript的历史 BrendanEich在1995年4月前后被Netscape公司雇佣 目标是完成一套语言系统 最初设计 该语言系统是为Netscape的LiveWire战略服务 它是Netscape公司的一个通用的Web开发环境 LiveWire架构也成为所有Web服务器提供SP ServerPage 技术的蓝本 例如在IIS中的ASP 作为整套的解决方案 Netscape在客户端网页上也提供LiveScript脚本语言的支持 除了访问Array String等这些内置对象之外 也可以访问window等浏览器对象 1995年10月发布的netscape2 0beta1已经包含了脚本支持 JavaScript的历史 Netscape2 0beta1只是在form表单元素中支持onclick这类的事件 脚本代码只用在HTML标签属性上 三周之后Netscape就发布了beta2 正式地支持标签 并可以解析该标签中的代码 标识符 开始具备调用函数 表达式运算等能力 在随后发布的beta3中 函数可以作为构造器使用 可以创建出用户自己的对象 再后来window等全局对象被加进来 再把 当前网页 中的表单元素等影射成可编程对象 JavaScript1 0就完成了 在JavaScript1 0的时代 既没有 原型继承 也没有 函数式编程 甚至连匿名函数也没有支持 JavaScript的历史 JavaScript1 0的设计目标 就是 让网页动起来 让网页中的元素可以被编程 所以象forms links等对象 在网页装载结束后就初始化为全局成员 那时候还没有所谓的DOM或DHTML呢 让JavaScript可以在服务器与客户端两边都使用 不过JavaScript的另一项特性 则自它的第一个版本就存在 该特性就是动态执行 也就是eval JavaScript的历史 JavaScript1 0的设计目标 就是 让网页动起来 让网页中的元素可以被编程 所以象forms links等对象 在网页装载结束后就初始化为全局成员 那时候还没有所谓的DOM或DHTML呢 让JavaScript可以在服务器与客户端两边都使用 不过JavaScript的另一项特性 则自它的第一个版本就存在 该特性就是动态执行 也就是eval JavaScript的历史 JavaScript1 0第一个公布版本 由BrendanEich开发 并在1996年3月追随Netscape公司的Navigator2 0同时公布 JavaScript1 1包括在1996年8月公布的NetscapeNavigator3 0中 ECMA 262第一版即便以这个版本为基础编写的 提出最重要的 构造器 原型继承 概念 JavaScript1 2NetscapeNavigator4 0开始 JavaScript升级为1 2 而JavaScript1 2有局部功能却无法达到第一版中全球化和平台无关特性 例如Date对象即便平台相干的 提出类型系统和重要的函数式语言特性 JavaScript的历史 JavaScript1 3NetscapeNavigator升级到4 06 JavaScript更新为1 3 这个版本便为了和ECMA 262第一版统一 修正了 和 计算符的功能 除此之外 所有JavaScript1 2中的功能均被保留下来 JavaScript1 4集成在NetscapeNavigator5 0中 但这个浏览器因为开发工夫过长 因而未曾最后公布 这个版本的JavaScript也就未曾面世 依据Wikipedia上的说法 1 4的时候公布了一个服务器端版本 JavaScript的历史 JavaScript1 51998年3月31日 Netscape开源了正在开发中的Communicator源代码 演变为开源项目MozillaSuite 而不久尔后 M的引擎就更新为Gecko 而包括在Gecko中的JavaScript引擎即便SpiderMonkey SpiderMonkey在2000年3月公布了RC1 然而直到2004年9月24日 在阅历了6个候选版尔后 才正式公布了1 5版本 DHTML DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理 而在浏览器中直接动态地更新网页的内容 排版样式 动画 比如 当鼠标移至文章段落中 段落能够变成蓝色 或者当你点击一个超链后会自动生成一个下拉式的子超链目录 它是近年来网络发展进程中最具实用性的创新之一 它是一种通过各种技术的综合发展而得以实现的概念 这些技术包括JavaScript VBScript DocumentObjectModel 文档对象模型 Layers和CascadingStyleSheets CSS样式表 等 DOM0 在InternetExplorer4和NetscapeNavigator4分别支持的不同形式的DHTML基础上 开发人员首次无需重新加载网页 就可以修改其外观和内容 由于Netscape和微软在开发DHTML方面各持己见 过去只编写一个HTML页面就能够在任何浏览器中运行的时代结束 如果想继续保持Web跨平台的天性 就必须额外多做一些工作 而人们真正担心的是 如果不对Netscape和微软加以控制 Web开发领域就会出现技术上两强割据 浏览器互不兼容的局面 此时 负责制定Web通信标准的W3C开始着手规划DOM DOM0 SGML SGML StandardGeneralizedMarkupLanguage 标准通用标记语言 ISO ANSI ECMA的一个标准 一种用来注释文本文档 提供文档片断的类型信息的规范 是一种定义电子文档结构和描述其内容的国际标准语言 是所有电子文档标记语言的起源 早在Web发明之前SGML就已存在 SGML是1986年出版发布的一个信息管理方面的国际标准 ISO8879 该标准定义独立于平台和应用的文本文档的格式 索引和链接信息 为用户提供一种类似于语法的机制 用来定义文档的结构和指示文档结构的标签 其中Markup的含义是指插入到文档中的标记 SGML 一个典型文档可被分成3个层次 结构 structure 内容 content 和样式 style SGML主要是处理结构和内容之间关系 1 结构为了描述文档的结构 SGML定义一个称为 文档类型定义 DocumentTypeDefinition DTD 的文件 file 它为组织文档的文档元素 例如章和章标题 节和主题等 提供了一个框架 此外 DTD还为文档元素之间的相互关系制定了规则 例如 章的标题必须是在章开始之后的第一个文档元素 每个列表至少要有两个项目 等 DTD定义的这些规则可以确保文档一致性 SGML 2 内容这里指的内容就是信息本身 内容包括信息名称 标题 段落 项目列表和表格中的具体内容 具体的图形和声音等 确定内容在DTD结构中的位置的方法称为 加标签 tagging 而创建SGML文档实际上就是围绕内容插入相应的标签 这些标签就是给结构中的每一部分的开始和结束做标记 XML 1996年万维网协会 或者叫W3C 开始设计一种可扩展的标记语言 使其能够将SGML的灵活性和强大功能与已经被广泛采用的HTML结合起来 这种后来变成XML的语言继承了SGML的规范 而且实际上就是后者的一个子集 从SGML入手使得该设计小组能够将精力集中在简化已有的成果上 SGML已经提供了一种可以无限扩展的语言 它允许任何人能够根据自己的需要加以扩充 XML XML之所以要较SGML更为简化 很大程度上是出于易用性的考虑 人们对标记的读写过程应该使用现有的 简便通用的工具 同时 我们也应当简化计算机对文档和数据交换的处理 由于有太多可选功能 SGML变得过于复杂 以至于很难编写出针对这种语言的普通解释器 而XML的解释器则简单得多 此外 XML使得现有的Internet协议和软件更为协调 从而简化数据处理和传输 作为一个不错的SGML子集 XML还保持了对现有的面向SGML的系统的向下兼容性 这样 用XML标记过的数据就仍然可以在这些系统中使用 为基于SGML的行业节省了大笔的改造费用 同时 与Web的结合也使得它们更便于被访问 XML 1998年2月 XML1 0成为了W3C的推荐标准使用有意义的标记 TAG HTML 给浏览器读取 不能传达数据语义 XML 具有语义 数据的语义与显示方式分开HTML 决定数据显示方式的语言 XML 描述数据内容的语言 本身并不决定数据该如何显示 数据的显示由XSL决定 XML 可自定义的标记HTML 标记由少数权威团体制定 种类有限且不能随意添加 XML 可由用户按需要增加标记 如数学标记语言MATHML 财经标记语言FPML电子商务标记语言EBXML等 严格的语法控制HTML 语法规则比较多元化 具有较大灵活性 文件结构比较松散 不能很容易的转换为其他类型格式 比较难用程序来做大量而有效的处理 数据再利用的潜力大为降低 XML 对语法有严格的要求 所有XML的文件都必须经过严格的 验证 过程才算完成 文件格式容易转换 DOM HTML改变第一步 DOM是DocumentObjectModel文档对象模型的缩写 根据W3CDOM规范 DOM是一种与浏览器 平台 语言的接口 使得你可以访问页面其他的标准组件 简单理解 DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突 给予web设计师和开发者一个标准的方法 让他们来访问他们站点中的数据 脚本和表现层对像 DOM把整个页面映射为一个多层节点结构 DOM HTML改变第一步 DOM1级 DOMLevel1 于1998年10月成为W3C的推荐标准 DOM1级由两个模块组成 DOM核心 DOMCore 和DOMHTML 其中 DOM核心规定的是如何映射基于XML的文档结构 以便简化对文档中任意部分的访问和操作 DOMHTML模块则在DOM核心的基础上加以扩展 添加了针对HTML的对象和方法 DOM HTML改变第一步 DOM2级在原来DOM的基础上又扩充了 DHTML一直都支持的 鼠标和用户界面事件 范围 遍历 迭代DOM文档的方法 等细分模块 而且通过对象接口增加了对CSS CascadingStyleSheets 层叠样式表 的支持 DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间 DOM2级引入了下列新模块 也给出了众多新类型和新接口的定义 DOM HTML改变第一步 DOM视图 DOMViews 定义了跟踪不同文档 例如 应用CSS之前和之后的文档 视图的接口 DOM事件 DOMEvents 定义了事件和事件处理的接口 DOM样式 DOMStyle 定义了基于CSS为元素应用样式的接口 DOM遍历和范围 DOMTraversalandRange 定义了遍历和操作文档树的接口 DOM HTML改变第一步 DOM3级则进一步扩展了DOM 引入了以统一方式加载和保存文档的方法 在DOM加载和保存 DOMLoadandSave 模块中定义 新增了验证文档的方法 在DOM验证 DOMValidation 模块中定义 DOM3级也对DOM核心进行了扩展 开始支持XML1 0规范 涉及XMLInfoset XPath和XMLBase XHTML HTML改变第二步 XHTML是TheExtensibleHyperTextMarkupLanguage 可扩展超文本标识语言 的缩写 HTML是一种基本的WEB网页设计语言 XHTML是一个基于XML的标记语言 看起来与HTML有些相象 只有一些小的但重要的区别 XHTML就是一个扮演着类似HTML的角色的XML 所以 本质上说 XHTML是一个过渡技术 结合了部分XML的强大功能及大多数HTML的简单特性 XHTML HTML改变第二步 2000年底 国际W3C组织公布发行了XHTML1 0版本 它是在HTML4 0基础上优化和改进的的新语言 XHTML是增强的HTML 是更严谨更纯净的HTML版本 它的可扩展性和灵活性将适应未来网络应用更多的需求 XML虽然数据转换能力强大 完全可以替代HTML 但面对成千上万已有的基于HTML语言设计的网站 直接采用XML还为时过早 因此 在HTML4 0的基础上 用XML的规则对其进行扩展 得到了XHTML 所以 建立XHTML的目的就是实现HTML向XML的过渡 目前国际上在网站设计中推崇的WEB标准就是基于XHTML的应用 即通常