Your SlideShare is downloading. ×
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
HTML & JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML & JavaScript

1,811

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,811
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML 和 JavaScript 2009-04-29
  • 2. WEB 前端工程师
  • 3. WEB 前端工程师 ?
    • 招聘要求可能是这样的:
    • 1. 精通各种 Web 前端技术,包括 XHTML/XML/CSS/JavaScript/ActionScript 等( JS 和 AS 之一即可);
    • 2. 深刻理解 Web 标准,对可用性、可访问性等相关知识有实际的了解和实践经验;
    • 3. 有基于 Ajax 或 Flash 的 RIA 应用开发经验;
    • 4. 至少精通一门非 Web 前端脚本的语言(如 Java/PHP/C++ ),并有项目经验;
    • 5. 个性乐观开朗,逻辑性强,善于和各种背景的人合作
    • 6. 计算机、数学、自动化等相关专业本科以上学历优先
  • 4. WEB 前端工程师 - 知识结构
  • 5. WEB 前端工程师 - 工作职责
    • 1. 产品的视觉呈现(设计)
    • 2. 产品前端交互的实现(与用户交互)
    • 3. 产品前端逻辑的实现(与后台数据交互)
    • 4. 保证产品用户体验
  • 6. HTML
  • 7. HTML
    • 超文本标记语言( HyperText Mark-up Language )
    • 元素( element )、属性( attribute,property )和数据类型( data type )
  • 8. HTML- 历史
    • HTML+(1993) -> HTML 2(1995) -> HTML 3.2(1996) -> HTML 4(1997) -> HTML 4.01(1999) ISO/IEC 15445:2000 (“ ISO HTML” ) -> HTML 5(Now)
    • A history of HTML http://www.w3.org/People/Raggett/book4/ch02.html
  • 9. HTML-XHTML 历史
    • Extensible Hypertext Markup Language
    • XHTML 1.0 (2000) -> XHTML 1.1 (2001) -> XHTML 2.0 (Now)
    • http://www.w3.org/MarkUp/
  • 10. HTML-html 与 xhtml 区别
    • 以下是 XHTML 具备:
    • 标签不能重叠 , 可以嵌套
    • 标签与属性都要小写
    • 标签都要有始有终 , 要么以 </p> 形式结束 , 要么以 <br /> 形式结束
    • 每个属性都要有属性值 , 并且属性值要在双引号中
    • 别用 name 用 id
    • http://www.w3.org/TR/xhtml1/#diffs
  • 11. HTML- 什么是 DTD
    • DTD 文档类型定义 (Document Type Definition )
    • 1 定义 HTML 文档中所使用的元素和属性遵守哪一种版本的 HTML 规范
    • 2 以确定该使用什么规则来校验文档
    • http://www.w3.org/TR/REC-html40/sgml/dtd.html
  • 12. HTML- 我们正在使用的标准
    • HTML 4.01
    • http://www.w3.org/TR/1999/REC-html401-19991224/
  • 13. HTML-4.01DTD
    • HTML 4.01 DTD 规范分为: Strict, Transitional, Frameset
      • 严格的 (Strict) :使用 CSS 来做格式化,不能使用任何表现层的标识和属性,【解读:尽可能少地包含表现性( presentational )的标记】
        • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN &quot;http://www.w3.org/TR/html4/ strict .dtd&quot;>
      • 过渡的 (Transitional) :要求非常宽松的 DTD ,向严格的文件类型描述过渡的缓冲
        • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional //EN&quot; &quot;http://www.w3.org/TR/html4/ loose .dtd&quot;>
      • 框架的 (Frameset) :专门针对框架页面设计使用的 DTD ,如果你的页面中包含有框架,需要采用这种 DTD
        • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset //EN&quot; &quot;http://www.w3.org/TR/html4/ frameset .dtd&quot;>
  • 14. HTML– 标签使用原则
    • 简洁( html 标签不能滥用)
    • 语义( html 标签不能乱用)
      • 直观的认识标签 (markup) 和属性 (attribute)
      • 对搜索引擎友好
  • 15. HTML- 进阶
    • 分离内容和表现
    • 语义化 HTML
  • 16. HTML-CSS
    • CSS 指层叠样式表 ( C ascading S tyle S heets)
    • 把样式添加到 HTML 中,是为了解决内容与表现分离的问题
    • 遵循 w3c 标准
    • 兼容浏览器包括 ie6,ie7,ff2,ff3
  • 17. HTML- 使用 CSS 好处
    • 样式解决了一个普遍的问题
      • HTML 标签原本被设计为用于定义文档内容。通过使用 <h1> 、 <p> 、 <table> 这样的标签, HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。 W3C 在 HTML 4.0 之外创造出样式。
    • 样式表极大地提高了工作效率
      • 通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
    • 多重样式将层叠为一个
      • 样式表允许以多种方式规定样式信息 。
  • 18. HTML-CSS 用法
    • 直接加入 HTML 文档
    • URL 引用方式
  • 19. HTML-CSS 层叠次序
    • 一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
      • 浏览器缺省设置
      • 外部样式表
      • 内部样式表(位于 <head> 标签内部)
      • 内联样式(在 HTML 元素内部)
    • 因此,内联样式(在 HTML 元素内部)拥有最高的优先权。
  • 20. HTML- 例子
  • 21. HTML- 例子
  • 22. HTML- 例子
  • 23. HTML- 例子
  • 24. HTML- 展望 HTML 5.0
    • 大量的使用 div 元素 , 缺少更明确的语义描述区块 , 孕育了 HTML5.0 的产生。
  • 25. JavaScript
  • 26. JavaScript- 历史
    • Javascript 是一种由 Netscape 的 LiveScript 发展而来的面向对象的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl ,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢 , 只有 28.8kbps ,验证步骤浪费的时间太多。于是 Netscape 的浏览器 Navigator 加入了 JavaScript ,提供了数据验证的基本功能。
    • JavaScript 的正式名称是 “ ECMAScript” 。
    • ECMA-262 是正式的 JavaScript 标准。
    • 在 1997 年, ECMA 会员大会采纳了它的首个版本 。
    • 在 1998 年,该标准成为了国际 ISO 标准 (ISO/IEC 16262) 。
    • 在 2005 年 12 月, ECMA 发布 ECMA-357 标准( ISO/IEC 22537 )出台,主要增加对扩展标记语言 XML 的有效支持。
    • 目前 JavaScript 的最新版本为 1.8
  • 27. JavaScript- 描述
    • 被设计用来向 HTML 页面添加交互行为
    • 是一种脚本语言(脚本语言是一种轻量级的编程语言)
    • 是一种解释性语言(就是说,代码执行不进行预编译)
    • 通常被直接嵌入 HTML 页面
    • 由数行可执行计算机代码组成
  • 28. JavaScript- 用法
    • 直接加入 HTML 文档
    • URL 引用方式
    <script language=“javascript&quot;> <!-- document.writeln(&quot; 这是 JavaScript !采用直接插入的方法! &quot;); //--> </script> <script src=“jsfilename.js” type=“text/javascript”></script>
  • 29. JavaScript- 基础
    • 运算符
    • 表达式
    • 语句
    • 变量
    • 函数
    • 对象
    • 事件
  • 30. JavaScript- 类型
    • ECMAScript 有 5 种原始类型( primitive type ),即 Undefined 、 Null 、 Boolean 、 Number 和 String 。
    • 除了原始类型,其他都是对象( object )。
  • 31. JavaScript- 对象
    • ECMA-262 把对象( object )定义为“属性的无序集合,每个属性存放一个原始值、对象或函数”。严格说来,这意味着对象是无特定顺序的值的数组。
    • 在 ECMAScript 中,对象由特性( attribute )构成,特性可以是原始值,也可以是引用值。如果特性存放的是函数,它将被看作对象的方法( method ),否则该特性被看作属性( property )。
    • 本地对象、内置对象和宿主对象
  • 32. JavaScript- 本地对象
    • ECMA-262 把本地对象( native object )定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。
    • Object , Function , Array , String , Boolean , Number , Date , RegExp , Error , EvalError , RangeError , ReferenceError , SyntaxError , TypeError , URIError
  • 33. JavaScript- 内置对象
    • ECMA-262 把内置对象( built-in object )定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象,在 ECMAScript 程序开始执行时出现”。
    • 这意味着开发者不必明确实例化内置对象,它已被实例化了。
    • ECMA-262 只定义了两个内置对象,即 Global 和 Math (它们也是本地对象,根据定义,每个内置对象都是本地对象)。
    • Global 对象根本不存在
  • 34. JavaScript- 宿主对象
    • 所有非本地对象都是宿主对象( host object ),即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM ( Browser Object Model )和 DOM ( Document Object Model )对象都是宿主对象。
  • 35. JavaScript-BOM
    • window 对象是整个 BOM 的核心,所有对象和集合都以某种方式回接到 window 对象。
  • 36. JavaScript-DOM
    • DOM 给予开发者空前的对 HTML 的访问能力,并使开发者能将 HTML 作为 XML 文档来处理和查看。
  • 37. JavaScript- 库
    • jQuery : JavaScript 库中的新成员,提供 css 和 xpath 选择符查找元素, ajax ,动画效果等
    • dojo :一个巨大的库,包括的东西很多, dijit 和 dojox 是 dojo 的扩展,几乎你想要的各种 JavaScript 程序都包括了
    • prototype :一个非常流行的库,使用了原型链向 JavaScript 中添加了很多不错的函数
    • YUI : Yahoo !用户界面,非常实用,提供各种解决方案
  • 38. 参考资料
    • http://www.w3school.com.cn
    • http://docs.jquery.com/Main_Page
    • http://www.dojotoolkit.org/docs
    • http://www.prototypejs.org/api
    • http://developer.yahoo.com/yui
    • http://jslint.com/
    • http://www.crockford.com/javascript/jsmin.html

×