web前端.pptx

WEB前端WEB前端 前端简介 前端技术 前端工具前端简介前端是什么？HTML/CSS/JavaScript……与后端相比前端客户端环境不可预知代码开源数据无法隐藏更关注页面性能和用户体验前端简介前端主要职能：把网站界面更好的呈现给用户前端技术前端技术W3C 标准视觉/交互设计兼容性技术性能及安全前端技术W3C 标准 WEB三项组成：结构、表现、行为 前端人员遵守的第一原则：“结构与表现分离”结构标准（HTML/XHTML/XML）表现标准（CSS）行为标准（JavaScript）前端技术W3C标准-结构标准结构标准 HTML ：超文本标记语言 XML：可扩展标记语言 XHTML：可扩展超文本标记语言 简史：1989年，Tim Berners-Lee发明HTML1998年2月，发布XML 1.01999年12月，发布HTML4.01版本2000年1月，发布XHTML1.02014年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 新增标签：canvasprogressheaderarticlevideorubytimenavaudioasidemarksectionfooterfigurefigcaption前端技术W3C标准-结构标准HTML—— WEB应用的基石 HTML 4 与 HTML 5 结构区别前端技术W3C标准-表现标准表现标准 CSS ：层叠样式表 简史：1994年 H?kon Wium Lie 提出了CSS的最初建议1996年12月，发布 CSS 1.01998年5月，发布 CSS 2.01999年开始制订 CSS 3.02011年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.02009年，发布ECMAScript 5.0ECMAScript 6.0 （harmony）制定中2013年，ECMAScript 7.0草案确定前端技术W3C标准-行为标准JavaScript JavaScript实现了网页实时的、动态的、可交互式得表达能力。 语言特性：高阶函数可以将函数作为参数也可以返回函数动态类型延迟绑定可以赋给变量任意的值，并可以随时更改类型灵活的对象模型使用原型继承前端技术W3C标准-行为标准JavaScript——语言特性 对