下载文档第一篇：Web前端代码规范
龙图教育，全球游戏50强教育品牌
www.teniu.cc
Web前端代码规范
此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。
前端普适性规范 黄金定律
永远遵循同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果你发现本
规范中有任何错误，敬请指正。
不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。
项目命名
项目名全部采用小写方式，以中划线分隔，禁止驼峰式命名。比如：my-project-name 文件命名
文件命名参照上一条规则，多个单词组成时，采用中划线连接方式，比如说: error-report.html 有复数结构时，要采用复数命名法，比如说： scripts, styles, images, data-models
龙图教育，全球游戏50强教育品牌
www.teniu.cc
文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成，禁止包含特殊符号，比如空格、$等
为更好的表达语义，文件名使用英文名词命名，或英文简写。
不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。
index.shtml 引导页&首页 main.shtml 首页
download.shtml 下载页面 act.html 活动列表页面 video.html 视频 cdkey.html CDKEY页面 base.css 基本样式 layout.css 框架布局 module.css 模块样式 global.css 全局样式 font.css 字体样式 index.css 首页样式 link.css 链接样式 print.css 打印样式
龙图教育，全球游戏50强教育品牌
www.teniu.cc
HTML 规范
语法
使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。
嵌套的节点应该缩进（四个空格）。
在属性上，使用双引号，不要使用单引号。
不要在自动闭合标签结尾处使用斜线-HTML5 规范 指出他们是可选的。
不要忽略可选的关闭标签（例如，和
第二篇：Web前端工作总结
Web前端学习总结
一.名词解释 1.横切
在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2.留白 两个容器或碎片之间的上、下、左、右的空白距离 3.继承
元素可以从其父级元素中获得一些可为自己使用的属性或值。4.图片定位
把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图 5.底图
页面中在标签中使用的背景图 6.齐底(图)线 用于区分横切或碎片结束的线或图 7.页面结构
页面的基础框架，由横切、布局元素组成 8.焦点区(图)最易注意的区域 9.导航
在页面中具有导向性的链接集合 10.头图 页面主题图片 11.间距
碎片或文字间的距离 12.行高
文字段落中行与行之间的距离 13.首行缩进 文字段落首行缩进 14.浮动
使被定义的区域脱离正常的页面文档流 15.碎片 由文字、图片组合成的内容区域 16.通栏广告 与页面内容区同宽的广告区域 17.功能按钮 具有交互属性的按钮 18.私有样式
当前页面独立使用的样式，不具备公用性 19.水平(垂直)居中
在页面中的某个元素处于父级的上下或左右的相同距离 20.标准头(尾)定义相同的页面头或尾元素集合 二.文本格式化 1.段落：p 2.斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3.粗体：strong（重要）b（提醒）4.图片块：figure 5.引述文段，段落缩进：blockquote 6.背景颜色：mark 7.虚线下划线：abbr 8.上标下标：sub/sup 9.下划线：ins 10.删除线：del（标记已删除内容）s（标记不准确内容）11.等宽字体：code 12.预格式化：pre 13.字号减小，表注释：small 14.时间：time 15.换行：br 16.html5定义区块：header nav article section aside footer p span 三.表单表格
1.
2.表单元素的组织： 3.创建各种框: 注：text→password/url/tel/email Id:为了让对应的标签识别，添加CSS Name：为了让服务器和脚本识别，通常与id设为一样 Size：文本框大小 Maxlength：能输入的最大字符数 Pattern：正则表达式4.添加标签： 5.单(多)选按钮：
注：id各自唯一，name必须相同。checked：默认选择 6.下拉框：
注：size:选择框的高度 multiple：允许多选 selected：默认选择 用
10.文本区域： 11.表格 :
1.width：不包括padding，border，margin；max-width设置外围限制； 2.浮动：float:left;清除浮动：clear:both;3.设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐：vertical-align:baseline/middle/text-bottom..5.显示：display:black/inline/inline-block;6.显示：visibility:visible/hiddle;7.相对定位：{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位：{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置：{z-index:50;} 越大的在最上面
10.厂商前缀：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角：{„ „ border-radius:40px/20px;}（x半径/y半径）13.创建圆形：{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径
15.元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明
18.渐变背景：{background:linear-gradient(left,#000,#999);}(left ：渐变线沿逆时针方向转至水平线的角度)六.html5视频音频
1.html5支持3种视频：.ogg/.ogv.mp4/.m4v.webm 2.添加视频： 视频属性：src autoplay controls muted loop poster width height preload 3.为视频添加多个来源： 4.html5支持5中音频：.ogg.mp3.wav.aac.mp4 5.添加音频： 音频属性：src autoplay controls muted loop preload。多个来源同video。七.一些约定
我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
3.设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐：vertical-align:baseline/middle/text-bottom..5.显示：display:black/inline/inline-block;6.显示：visibility:visible/hiddle;7.相对定位：{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位：{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置：{z-index:50;} 越大的在最上面
10.厂商前缀：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角：{„ „ border-radius:40px/20px;}（x半径/y半径）13.创建圆形：{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径
15.元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明
18.渐变背景：{background:linear-gradient(left,#000,#999);}(left ：渐变线沿逆时针方向转至水平线的角度)六.html5视频音频
1.html5支持3种视频：.ogg/.ogv.mp4/.m4v.webm 2.添加视频： 视频属性：src autoplay controls muted loop poster width height preload 3.为视频添加多个来源： 4.html5支持5中音频：.ogg.mp3.wav.aac.mp4 5.添加音频： 音频属性：src autoplay controls muted loop preload。多个来源同video。七.一些约定
我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符； 2.样式名尽量语义化或简写； 3.样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword； 4.使用px(像素)为基本计量单位； 5.页面中空格的使用：全角：中文空格 半角； 6.项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名； 7.减少DIV的嵌套层数；
8.给重要图片加上alt属性；给重要的元素和截断的元素加上title； 9.使用正确的注释方法（详见“注释”章节）； 10.特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font 等；
11.双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：
等，并且有正确的层次； 12.其它特殊符号： 1)<(<)2)>(>)八.命名空间
8.1外挂样式名称 全局：public.css 全局样式为全站公用，为页面样式基础，页面中必须包含。结构：layout.css 页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有：style.css 独立页面所使用的样式文件，页面中必须包含。模块 module.css 产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。默认 default.css 文章 article.css 图片 photo.css 下载 soft.css 主题 themes.css 实现换肤功能时应用。补丁 mend.css 基于以上样式进行的私有化修补。8.2 常用名称(1)页面结构 容器: container 页头：header 内容：content/container/content(A)页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 浮左浮右：fl fr 清除浮动 clear(2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题：title 摘要：summary 路径：path(3)模块化命名 模块头部：hd 模块内容部分：bd 模块底部：ft(4)各内容页对应 标题：title 副标题：subtitle 属性：properties 简介：infor 内容：content 分页：page 插入广告：insert_ad 表情：expression 功能选项：options 上下篇：up_down 评论：comments 相关内容：related 下载地址：download 播放地址：play_add(5)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 日期：date 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的：current 小技巧：tips 图标：icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright 九.基本设置-public.css 9.1 全局设置
上下边距(margin、padding)：0(px)左右边距(margin)：auto(自动)底色(background):#FFF(白色)字体(font-family)、字号(font-szie)、字色(color)：”宋体” 12px #666 代码： /* 全局CSS定义 */ body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体';} p,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input,textarea{font-size:12px} 9.2 页面标签初始化设置 1.常用基本标p,form,ul,ol,li,span,p,dl,dt,dd,img 设置基本标签的间距、边框默认值为0。2.h1～h6标题
默认标题内字号12px，内外间距为0px，文字不加粗。3.ul,ol,li 列表 默认不显示项目符号。4.h2 栏目标题
说明：h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。5.默认链接颜色
常态下不显示文字下划线，颜色为灰(#333)，鼠标悬浮时：显示文字下划线，颜色变为暗红(#ccc)。6.状态：a:link{未点} a:visited{已点} a:focus{键盘选中} a:hover{指针停留} a:active{正在点} 9.3 页面宽度 默认页面宽(命名规范)：按栅格化进行 9.4.clear 结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。以下是清除浮动的几种方法 方法一.clear { clear:both;height:0;font-size:0;line-height:0 } 或.clear { border-top: 1px solid transparent!important;margin-top:-1px!important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;} 或.clear{ clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0 } 使用方法:
第三篇：web前端个人简历
个人简历
个人信息
姓名：xxxx 性别：男
出生日期：1993.03 婚姻状况：未婚 工作所在地：北京 家庭所在地：湖北
联系电话：18xxxxxx
电子邮箱：xxxxxx@qq.com
专业技能
1、熟练使用Sublime、Photoshop等软件，掌握网站效果图的制作、切片以及HTML页面代码优化等技术；
2、精通HTML5+CSS3、DIV+CSS等网站前端技术；
3、能够熟练编写标准前端代码，熟悉浏览器兼容问题解决方案；
4、熟练掌握javascript语言，精通jQuery库、bootstrap库，能够实现网页的动态效果与页面交互；
5、熟练掌握响应式设计，能够开发移动端页面；熟练使用swiper手机端应用库；
6、了解node后台，熟练掌握Ajax技术；
7、了解gulp自动化构建工具，了解less，echarts图表库；
工作经验
202_.07– 至今 工作职责： 北京第嘉传媒文化有限公司 职位名称：前端开发工程师
负责公司产品或项目Web前端开发,根据产品需求和UI效果图利用sublime编程软件进行p/css标准网页制作，Js逻辑设计与开发、jQuery特效编写以及使用插件实现特效，解决主流浏览器兼容性问题，对网站用户体验性能进行优化，完成产品前端展示效果和交互功能。
202_.09– 202_.6
工作职责： 秦皇岛市金銮之巅科技开发有限公司
职位名称：前端开发工程师
负责公司项目的前端修改调试和开发工作，精确的将网站设计图重构成html 页面。从ps切图到p/css标准网页制作及主流浏览器兼容问题的解决，并与后台紧密配合，确保代码有效链接。
项目经历： PC端 中国智力运动网
http://www.teniu.cc）是由泰康人寿保险股份有限公司全资发起成立的大型互联网保险公司，产品涵盖意外险、理财险、健康险、旅游险等多种保险。
个人站
kafeihaoka.github.io
教育背景
202_.09-202_.06 燕山大学里仁学院 电子信息工程 本科 求职意向
职位:Web 前端开发 工作地点:北京
第四篇：web前端个人简历
简历（英语：resume），顾名思义，就是对个人学历、经历、特长、爱好及其它有关情况所作的简明扼要的书面介绍。web前端个人简历模板怎么写？相信很多人都想知道吧？以下是小编为您整理的web前端个人简历模板相关资料，欢迎阅读！
web前端个人简历模板
基本信息
姓名：应届毕业生求职网
性别：男
出生日期：1992-
4婚姻状况：未婚
联系电话：×××××××××××
电子邮箱：×××@yjbys.com
应聘岗位：Web前端开发
专业技能
计算机语言：HTML、CSS、JS、C++、Flash/Flex、Silverlight、XML
网页编辑器：Adobe Dreamweaver、Frontpage、CSSDesk、Drawter
数据库软件：Oracle、SQL Sever、Access
操作系统：Windows、Linux、Unix、iOS
编程软件：Delphi、VC++
Photoshop证书，网页设计师证书
工作经历
20XX.02-20XX.05 ××有限公司 PHP开发工程师
主要是使用HTML标记、p+css+javascript Dom操作等前端WEB技术进行网站的开发与制造
使用mvc思想、oop面向对象思想、ThinkPHP模板框架、基于jQuery的EasyUI框架、Smarty模板引擎等技术来做项目开发
20XX.09-2XXX.08 CRM管理系统 数据库和网页设计
负责编写详细需求分析和客户管理模块
实现了客户添加、客户修改、客户删除、批量删除客户、分页等几大功能
分别用到Myeclipse开发工具、orcal数据库、ssh、javascript、jquery等开发技术，现几大功能运行稳定，运算速度明显变快
教育背景
20XX.09-202_.06 广州大学 计算机网络工程 本科
获得证书
大学英语六级
全国计算机等级证书三级 网络技术
自我评价
工作积极，并且性格开朗，服从安排，吃苦耐劳
第五篇：Web前端开发
Web前端开发_Tip 理论篇
WEB标准
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
结构标准语言 XML XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于202_年10月6日发布的XML1.0，参考（一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
XHTML XHTML是The Extensible HyperText Markup Language可扩展超文本标识语言的缩写。目前推荐遵循的是W3C于202_年1月26日推荐XML1.0（参考http://1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
CSS CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
DOM DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://代码的书写是否规范，css的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步，不是说通过的校验，我的网页就标准化了。我们不是为了虚名，或者向别人炫耀：“看我的页面通过了校验”而去标准化，我们的目的是为了使自己的网页设计工作更有效率，为了缩小网页尺寸，为了能够在任何浏览器和网络设备中正常浏览。
请大家沉下心来，仔细研究和理解web标准的内涵。网络上已经充满了不必要的浮躁和虚荣，请不要将这种风气带到web标准应用中来，这样做只会影响和损害web标准的推广。2.不要用传统的表格思维来套p “CSS布局就是将原来用table的地方用p来替代，原来是表格嵌套，现在是DIV嵌套。”这种观点是错误的！
请跳出原来表格布局的禁锢，抛弃一个td接一个td放置图片和内容的思维方式。我们上面说过web标准的目的是分离内容和表现，你可以这样思考，页面里有的仅仅是内容，没有修饰的情况下，它看上去就是一张白白的页面，上有一些文字和图片(这个图片是指内容中的图片，是有真实意义的图片)。这些文字图片仅仅是依次罗列下来，只有结构，没有任何样式。然后加入表现，将所有修饰的图片作为背景，用C SS来定义每一块内容的位置、字体、颜色等。
这样制作的页面才是内容与表现分离的，就是说，当你抽掉css文件，剩下的就是干净的内容。这样才能在文本浏览器中阅读，才能在手机、PDA中阅读，才能随时修改CSS实现改版。3.不必为每块内容都建立一个id 有网友抱怨css文件太大、太复杂。仔细看他们的代码，发现原因是他们对每块内容、甚至每句话都定义一个p，建立一个ID。这一方面是对样式表应用的不熟悉，另一方面也表现出对web标准没有彻底理解。
我们知道内容都是有结构的(如果不明白，请阅读：[url=http://]理解表现和结构相分离),相同的结构的内容我们可以用同一个样式来定义，比如相同级别的标题、正文、图片。对于多次引用的样式可以用class来定义，不需要每个都用id；另外也不是说一定要用，你完全可以用别的来代替，同样都是块级元素，一样有盒模型的七个参数，仅仅方便浮动。
至于仅仅为了行高、间距、一个修饰图片而增加额外的p，我想随着对CSS的应用和理解，你很快就可以省略掉这些。我们反对用DIV的嵌套取代table的嵌套，这没有任何意义，不能体现内容的结构化。希望大家多研究CSS，写出最简练，最有效的样式表。4.不要因为一点挫折就轻言放弃
我想这是一个态度和处事方法问题，这不仅仅针对学习web标准。学习任何新知识，接受新概念，都有困难，特别是需要你改变原来已有的习惯和思维时。唯一的问题就是：你认为学习web标准是否值得？你可以问问自己：你是否认可web标准带来的这些好处(简化代码、加速开发、压缩文件尺寸、提高下载速度、更好的易用性、获得更多用户、更易于维护、多平台兼容)？你是否觉得世界通用的XML离你还很远？你是否认为现在掌握的HTML知识就已经足够了？
自从99年以后，网页制作技术在国内就没有怎么进步和变革过(除了flash的兴起)，而在国外前进的脚步就一直没有停止过，xhtml1.0、xhtml1.1、xml、xsl...，W3C和各大软件公司都在不断的研究和推进web技术，使它更方便、更有效、更强大。web标准的应用和推广国外已经开展了八年多(以zeldman的web标准组织网站为起点)，虽然困难重重，但正在逐步被人们接受和认可。为什么我们依然陶醉在网站表面的“繁华”上，不去思考页面背后本质的东西。比较AS2.0和AS3.0在面向对象方面的异同 1.定义
ActionScript 2.0：实际上是as1.0的升级版，首次将OOP（Object Oriented Programming，面向对象的程序设计）引入Flash，但并不是完全面向对象的语言，只是在编译过程中支持OOP语法。
ActionScript 3.0：是一个完全基本OOP的标准化面向对象语言，最重要的就是as3.0不是as2.0的简单升级，而完全是两种思想的语言。可以说，as3.0全面采用了面向对象的思想，而as2.0则仍然停留在面向过程阶段，举个例子，就像VB和C#的感觉。在as3.0里，可以看到java和c#的影子，确实，这三种语言大部分思想都是一致的，只有一些小的区别，比如as3.0引入了命名空间的概念，但是不支持比如委托,在包封装及外部访问上也引入了一些新概念。
2.发展过程
一、ActionScript 1.0最简单、最灵活、比较容易理解。既可以用原始的方式一个个地创建影片、设置对象的事件处理函数，等等。
早期的flash 3中的ActionScript 1.0语法冗长，主要的应用是围绕着帧的导航和鼠标的交互.这种状况一直保持到flash 5。到flash 5版本时ActionScript已经很象JavaScript了。它提供了很强的功能和为变量的传输提供了点语法。ActionScript同时也变成了一种prototyped（原型）语言，允许类似于在javscript中的简单的oop功能。这些在随后的flash mx(6)版本中得到的增强。
二、ActionScript 2.0则相对比较规范，是1.0的升级版。首次将OOP引入FLASH。
Flash MX2004(7)引入了ActionScript 2.0,它带来了两大改进：变量的类型检测和新的class类语法。ActionScript 2.0的变量类型会在编译时执行强制类型检测。它意味着当你在发布或是编译你的影片时任何指定了类型的变量都会从众多的代码中剥离出来，检查是否与你现有的代码存在矛盾冲突。如果在编译过程中没有发现冲突，那么你的swf将会被创建，没有任何不可理解变量类型的代码将会运行。尽管这个功能对于flash player的回放来说没有什么好处，但对于flash创作人员来它是一个非常的好工具，可以帮助调试更大更复杂的程序。
在ActionScript 2.0中的新的class类语法用来在ActionSctipt 2.0中定义类。它类似于Java语言中的定义。尽管Flash仍不能超越它自身的原型来提供真正的class类，但新的语法提供了一种非常熟悉的风格来帮助用户从其它语言上迁移过来，提供了更多的方法来组织分离出来As文件和包。
三、ActionScript 3.0更加系统、规范。完全OOP。
接下来我们进入到flash CS3(9;在flash8中没有发生多大的变化)ActionScript 3.这里我们不光有一个带有新的版本号的ActionScirpt 语言，还有一个全新的虚拟机即—Flash Player在回放时执行ActionScript的底层软件。ActionScript 1.0和ActionScript 2.0都使用是AVM1(ActionScript 虚拟机1),因此它们在需要回放时本质上是一样的，记得我们在ActionScript2上说过它增加了强制变量类型和新的类语法，它实际上在最终编译时变成了ActionScript 1，而ActionScript 3.0运行在AVM2上，一种新的专门针对ActionScirpt 3代码的虚拟机。基于上面的原因，ActionScript 3.0影片不能直接与ActionScript 1和ActionScript 2影片直接通讯(ActionScript 1和ActionScript 2的影片可以直接通讯，因为他们使用的是相同的虚拟机；如果要ActionScirpt 3影片与ActionScirpt 1.0和ActionScript 2.0的影片通讯，只能通过local connection),但是你会发现ActionScript 3.0的改变更深远更有意义。
3.flash as2.0 与as3.0的本质区别
一、虚拟机
在编译阶段，as2采用的是AVM1（actionScript vitual machine），而as3采用的是AVM2。新一代虚拟机采用了OOP思想，在执行速度上比起avm1也快了10倍。还提供了异常处理。以前我们在使用AS2时，一旦出错，AVM1选择的是静默失败，让人根本不知道什么地方出错了，会浪费大量的时间去查错，而AVM2与目前主流的编译器一样，会有异常处理，运行出错会输出错误提示，工作效率大大提高。如果做个对比，我想说，AVM1就是大刀长矛，而AVM2就是手枪，大刀和长矛也能杀敌，但是只在面对弱智的敌人才能发挥作用，面对一个大型项目，不用点现代化工具是不行滴。
二、事件机制
这也是很多人拿起as3就不知所措的原因，初学者会发现连一个按钮点击的方法都写不出来。实际上as3的事件机制采用的是监听的方式，和as2的onClipEvent不同，as3里所有的事件都是需要触发器，监听器，执行器三种结构的，这样做的好处就是使得这个语言非常的坚强，非常大标准化。不像as2,奇形怪状的代码漫天飞，可以这样写，也可以那样写，代码变得繁复难懂，可读性太差，执行效率也大大降低。要特别说明的是，as3的所有事件都直接继承event对象，而event是直接继承自BOSS类object,结构多么完美。所以在as3中，所有的事件都继承自相同的父亲，结构相同，提高了重用性。
三、封装性
这是as3与as2最大的不同，as3引入了封装的概念，使得程序安全性大大提高，各个对象之间的关系也通过封装，访问控制而得以确定，避免了不可靠的访问给程序带来的意外产生。
四、XML 我觉得这是最令人激动人心的改变，现在as3程序员可以很轻松也很自豪的说，我们是使用XML人群中最快乐的人。AS2时代对XML的存取仍然需要解析，而AS3则创新的将XML也视作一个对象，存取XML就像存取普通对象的属性一样方便，用点语法就可以，无疑大大提高了效率。
五、容器的概念
AS3.0采用了容器的思想，告别了as2.0一个MovieClip打天下的局面。对于as2程序员来说，可能不能理解，我mc用的好好的，干嘛不让我用啊。但是当你真正的了解as3.0的思想的时候，当你真主的体会到OOP的好处的时候，你会觉得as3.0的容器的思想的完全正确的。as2.0时代，我们做什么都用mc,而as2.0时代的mc也是直接继承自object，这给了mc极大的权限，极其多大方法属性，而有时我们只需要放一个背景图，这样做就造成了极大的浪费。说实在话as2.0和as3.0比起来就是浪费之神，所以as2.0编出的swf绝对比as3.0编译出来的swf要大上几倍。as3.0把所有你用到的显示对象都分开，mc的属性方法都被瓜分开来，举个例子，你去水果超市买水果，就肯定比直接去大型超市买要方便，更节约时间，时间就是金钱，那就是很大的节省。
4.AS3.0新特性
一、OOP方面的增强
通过类定义而生成的实例，在 AS3 中是属于 Sealed 类型，即其属性和方法无法在运行时修改。这部分属性在 AS2 中是通过类的 prototype 对象来存储，而在 AS3.0中则通过被称为 Trait 的概念对象存储管理，无法通过程序控制。这种处理方式一方面减少了通过 prototype 继承链查找属性方法所耗费的时间（所有父类的实现方法和属性都会被直接复制到对应的子类的 Trait 中），另一方面也减少了内存占用量，因为不用动态的给每一个实例创建 hashtable 来存储变量。如果仍然希望使用 AS2 中类实例在运行时的动态特性，可以将类声明为 dynamic。
二、API方面的增强
新增 Display API，使 AS3 可以控制包括 Shape, Image, TextField, Sprite, MovieClip, Video, SimpleButton, Loader在内的大部分 DisplayList 渲染单位。这其中 Sprite 类可以简单理解为没有时间轴的 MovieClip，适合用来作为组件等不需要时间轴功能的子类的基础。而新版的 MovieClip 也比 AS2 多了对于 Scene（场景）和 Label（桢标签）的程序控制。另外，渲染单位的创建和销毁通过联合 new 操作符以及 addChild/removeChild 等方法实现，类似 attachMovie 的旧方法已被舍弃，同时以后也无须去处理深度值。
新增 DOM Event API，所有 在DisplayList 上的渲染单位都支持全新的三段式事件播放机制，以 Stage 为起点自上而下的播报事件到 target 对象（此过程称为 Capture Phase），然后播报事件给 target 对象（此过程称为 Target Phase），最后在自下而上的播报事件（此过程称为 Bubbling Phase）。
新增内置的 Regular Expressions（正则表达式）支持，使 AS3 能够高效地创建、比较和修改字符串，以及迅速地分析大量文本和数据以搜索、移除和替换文本模式。
新增 ECMAScript for XML(E4X)支持。E4X 是 AS3 中内置的 XML 处理语法。在 AS3 中 XML 成为内置类型，而之前的 AS2 版本 XML 的处理 api 转移到 flash.xml.*包中，以保持向下兼容。
新增 Socket类，允许读取和写入二进制数据，使通过 AS 来解析底层网络协议（比如 POP3, SMTP, IMAP, NNTP 等）成为可能，使 Flash Player 可以连接邮件服务器和新闻组。
新增 Proxy 类来替代在 AS2 中的 Object.__resolve 功能。新增对于 Reflect（反射）的支持，相关方法在 flash.util.* 包中。
5.总结
一、AS3.0和2.0的代码不能混用，且不能和装载的as2.0或1.0的swf相互通信
使用AS3.0可以加载AS2.0 或者 1.0的swf。但是AS3.0不可以访问加载swf中变量和函数。为了方便理解，我们可以想成两个虚拟机并行工作，但是不能通信。事实上，我猜实现机制可能就和这个差不多LocalConnection。
使用AS2.0或1.0编写的swf是不可以加载AS3.0的。换句话说Flash 8＆Flex 1.5及之前所有工具生成的swf都不可以加载(load)AS 3.0 swf的。
如果想让AS2.0或1.0的swf与AS3.0 swf协同工作，那么AS2.0＆1.0的文件必须进行移植。就是说转成3.0。
单个的swf文件中是不能混合使用AS3.0＆AS2.0(或者1.0)的。不会像AS2.0＆1.0那样混用了，毕竟是AS2.0&AS3.0是两个不相同的虚拟机。
一句话总结，就是AS3.0可以加载以前的所有版本的swf,但是只是简单加载，不能访问AS2.0(或1.0)的swf内部变量＆函数，无法交互。
二、所采用的编程方式
as 3.0所采用的编程方式是与java C++非常类似的面向对象编程方式，不论在语法上还是在设计思路上。只要你有java C++基础，那学 AS是非常轻松的。不过AS3.0不能像java C++那样操作底层数据，如存储数据等，必须通过后台语言如php asp 等来实现，而且运行大规模数据时会慢一些。as 2.0以往是主要面向过程的编程方式，也就是说想到哪就可以写到哪，但到3.0之后就不行了，你必须把每一块程序都写到一个类中，让类和类之间进行联系。凡事都是类的理念。
其实不同的事情有很多，但是也可以这么讲，AS3.0与AS2.0是一样的，只是语法不同了，编程思路不同了，但核心内容不变，也就是说，如果你精通AS2.0，那么，你离精通3.0就不远了。因为你在编程进对算法的掌握和思想都是相通了。
三、as2.0到as3.0的转换
在AS2项目往AS3转换/移植的过程中，不要想象这只是一个语法转换的过程，实际上，你不得不考虑AS3以及其类库中的一些新机制，所能带来的性能以及程序结构良好性的提升。因此，可能很多东西，你得重新设计，特别是可视元素和事件相关的，也就是用户交互方面的东西，我认为是必须得根据AS3的特点重新设计的，否则转换是无价值的，甚至会得到更差的程序。一些纯算法方面的代码，可能不需要重新设计，直接替换一些语言层面的东西即可。还有FlashPlayer的速度提升使代码执行速度提升10倍左右，可视元素运行/渲染速度平均提升2倍左右，位图渲染速度有比较明显的提升。
一些在AS2里面我们需要的东西，在AS3里面，我们不再需要了；一些用AS2做出来的东西，运行起来效率不够理想，用AS3做出来，运行得更快了；一些AS2里面不可能做到的东西，在AS3里面，我们可以做了。CSS盒子 前言
如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。
理解CSS盒子模型
什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。
现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。
转变我们的思路
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。
实现结构与表现分离
在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：
加进思源社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。
如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：
段落内容
这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离：
用CSS排版
