web前端_互联网_IT计算机_专业资料.pptVIP

WEB前端 刘梅花 2014.12.24 WEB前端 前端简介 前端技术 前端工具 前端简介 前端是什么？ HTML/CSS/JavaScript…… 与后端相比 前端客户端环境不可预知 代码开源 数据无法隐藏 更关注页面性能和用户体验 前端简介 前端主要职能：把网站界面更好的呈现给用户 前端技术 前端技术 W3C 标准 视觉/交互设计 兼容性技术 性能及安全 前端技术 W3C 标准 WEB三项组成：结构、表现、行为 前端人员遵守的第一原则：“结构与表现分离” 结构标准（HTML/XHTML/XML） 表现标准（CSS） 行为标准（JavaScript） 前端技术 结构标准 HTML ：超文本标记语言 XML：可扩展标记语言 XHTML：可扩展超文本标记语言 简史： 1989年，Tim Berners-Lee发明HTML 1998年2月，发布XML 1.0 1999年12月，发布HTML4.01版本 2000年1月，发布XHTML1.0 2014年10月底，HTML 5标准规范制定完成 W3C标准-结构标准 前端技术 HTML—— WEB应用的基石 HTML 应用原则：语义化 W3C标准-结构标准 前端技术 HTML—— WEB应用的基石 HTML 标签（94个） 文档：html、head、body、title、meta、base、style、link、script、noscript 结构：div、span、iframe 表格：table、thead、tbody、tfoot、tr、td、th、col、colgroup、caption 表单：from、input、textarea、button、select、optgroup、option、label、fieldset、legend 列表：ul、ol、li、dl、dt、dd 文本：a、i、b、big、small、em、strong、code、cite、sup、sub 文章：h1 - h6 、p、br、pre、abbr、blockquote、q、ins、del、address 媒体：img、map、area、object、param 特殊标签：!DOCTYPE、!-- —、hr W3C标准-结构标准 前端技术 HTML—— WEB应用的基石 HTML 5 新增标签： W3C标准-结构标准 section header article aside footer video audio progress ruby canvas nav time mark figure figcaption 前端技术 HTML—— WEB应用的基石 HTML 4 与 HTML 5 结构区别 W3C标准-结构标准 前端技术 表现标准 CSS ：层叠样式表 简史： 1994年 Håkon Wium Lie 提出了CSS的最初建议 1996年12月，发布 CSS 1.0 1998年5月，发布 CSS 2.0 1999年开始制订 CSS 3.0 2011年9月开始设计CSS 4.0 W3C标准-表现标准 前端技术 CSS—— 程序员的画笔 W3C标准-表现标准 前端技术 CSS—— 程序员的画笔 CSS 3.0 重要模块 选择器——新的伪类 :last-child，属性选择器 [att^=“value] 框模型——box-sizing 背景和边框——多背景图，border-image，border-radius 文本效果——text-shadow，@font-face属性 2D/3D 转换——transform 动画——创建动画 @keyframes，animation 多列布局—— column-count，column-gap，column-rule 用户界面——调整元素尺寸resize …… W3C标准-表现标准 前端技术 CSS—— 程序员的画笔 优化你的CSS 外部引入样式文件； 尽量少使用子选择器； 减少规则数量（3层）； css sprite技术； 避免使用滤镜和表达式; …… W3C标准-表现标准 前端技术 行为标准 DOM ：文档对象模型，定义了访问 HTML 和 XML 文档的标准，目前使用3.0版本 ECMASCript：由Ecma国际通过ECMA-262标准化的脚本程序设计语言 简史： 1995年 JavaScript 诞生 1996年 ECMAScript 诞生，1997年首版 1998修正，1999年发布 ECMAScript 3.0 2009年，发布ECMAScript 5.0 ECMAScript 6.