主要交流以下5个方面的内容ppt课件

1、主要交流以下5个方面的内容：什么是前端开发技术前端开发需求掌握的技艺html开展简介前端开发根本流程前端开发的一些建议一、什么是前端技术前端技术包括JavaScript、ActionScript、CSS、HTML等“传统技术,Adobe RIA、Google Gears等新技术，以及概念性较强的交互式设计,艺术性较强的视觉设计等等。 通俗来讲：经过阅读器到用户端计算机的统称为前端技术，相反存贮于效力器端的统称为后端技术。前端开发任务通常需求视觉设计师、交互设计师和网页设计师相互配合完成，当然，也可以一人兼任多种角色。前端开发主要有两大方向：前端开发主要有两大方向：1.网页设计重构：根据设计图用

2、网页设计重构：根据设计图用HTML和和CSS完完成页面制造与视觉设计师和交互设计师配合成页面制造与视觉设计师和交互设计师配合2.web前端开发：主要担任交互设计。根据网站的前端开发：主要担任交互设计。根据网站的可用性分析和用户反响改良网站的前端优化。利可用性分析和用户反响改良网站的前端优化。利用用javascript，flash actionscript3.0结合结合html+css技术开发出用户体验更好的网站页面。技术开发出用户体验更好的网站页面。二、前端开发所需技艺和工具 知晓HTML/XHTML、CSS等网页制造技术，熟习页面架构和规划盒模型，定位，浮动，段落、图片、文字的属性控制，阅读

3、器bug熟习W3C规范，对表现与数据分别、Web语义化等有深化了解 至此即可实现静态页面开发知晓JavaScript、Ajax等Web开发技术 对算法、数据构造以及后台开发(C/C+/PHP/Java等)有一定了解 可实现交互、动画等功能前端开发工具1.1.选择适宜的选择适宜的IDEIDE虽然用记事本也可以编辑网页，但是强大的提示和分色虽然用记事本也可以编辑网页，但是强大的提示和分色显示功能、自动补全等一系列功能会使我们的开发更显示功能、自动补全等一系列功能会使我们的开发更便利。便利。IntelliJ IDEAIntelliJ IDEA、SublimeSublime、Notepad+Notep

4、ad+、InTypeInType、E-E-Text EditorText Editor、AptanaAptana、 DreamWeaver DreamWeaver 2.2.选择适宜的阅读器和调试工具选择适宜的阅读器和调试工具 引荐运用火狐和引荐运用火狐和firebugfirebug插件插件3.3.运用运用 验证工具：火狐插件验证工具：火狐插件Web Developer ToolbarWeb Developer Toolbar。具有非常强大的分析调实验证功能具有非常强大的分析调实验证功能在编码过程中随时运用在编码过程中随时运用HTMLHTML规范验证和规范验证和“CSS“CSS规范规范验证。不严

5、谨的代码会让他的页面破绽百出，问题验证。不严谨的代码会让他的页面破绽百出，问题不断，一个好的方法就是不断，一个好的方法就是边开发边验证，验证，边开发边验证，验证，验证，再验证！。验证，再验证！。前端开发工具三、html开展简介第一阶段：HTMLHyperText Markup Language超文本标志言语第一版在1993年6月HTML 2.02019年11月作为RFC 1866发布，HTML 3.22019年1月14日，W3C引荐规范HTML 4.02019年12月18日，W3C引荐规范HTML 4.012019年12月24日，W3C引荐规范ISO/IEC 15445:2000“ISO HT

6、ML2000年5月15日发布，基于严厉的HTML 4.01语法，是国际规范化组织和国际电工委员会的规范。特点：开展历史缘由导致松散语义，规范化程度不够。比较适宜新手上手，一些简单的脱漏、错误不影响页面展现。第二阶段：XHTML XHTML 1.0 用XML句法来规范HTML4。 比如doctype类型选择、标签属性必需小写、属性值要用引号、img、br、meta标签自闭合等。分类款式和内容。废除、粗体和斜体等XHTML 1.1 页面必需用新的MIME type来分发。这个规范并没有很多人采用。XHTML 2.0 试图发明一个实际纯粹的标志言语，不思索向前兼容。最终夭折。XHTML是学术派的w3

7、c开发的，只是用XML来规范HTML，试图用XML来抹平HTML设计的一些缺陷。没有一致的容错体系导致不同阅读器容错机制不同，页面千差万别，甚至不能正常任务。第三阶段：HTML5优点： 语法较弱，编写简单 向后兼容了html4和xhtml1.0. HTML5由网络公司Google, Adobe和阅读器厂商Moz, Opera, Apple开发的，对HTML的容错方法做出一致定义，这样无论是什么阅读器，只需根据规范实现容错方法，即使网页出现缺陷，其渲染结果也是完全一样的。网页设计师在迁移到HTML5的时候，根本可以不做任何事情。以前即使存在一定缺陷的非规范网页也能正常而且同一地被渲染出来。提供了

8、一系列语义更明晰的标签。 多设备 跨平台，便于移植交互性更强。更多的系统JS API。比如新增表单属性、表单验证、 多媒体支持、canvas, websocket , webstorage等等。游戏开发，挪动开发等等。经过调用 html5.js 可以使 ie6,7,8 支持 html5 标签。 Html5缺陷还在开展过程中，有些新特性缺乏一致的阅读器支持四、前端开发根本流程进展需求分析，设计UI界面构建HTML框架构造编写外部款式编写外部js文件页面细节的完善和优化页面兼容性和js效果测试及修正上传效力器及后期维护五、前端开发的一些建议1.1.制定详细的开发规范，无论是一个人开发还是团队开发。

9、制定详细的开发规范，无论是一个人开发还是团队开发。目录规范：在不改动现有构造的前提下，以最少的层次提供目录规范：在不改动现有构造的前提下，以最少的层次提供最明晰简便的访问构造。最明晰简便的访问构造。命名规范：以最少的字母到达最容易了解的意义。尽量用英命名规范：以最少的字母到达最容易了解的意义。尽量用英语翻译、下划线衔接进展标示区分，驼峰式命名法。语翻译、下划线衔接进展标示区分，驼峰式命名法。htmlhtml书写规范。一致文档类型声明、一致言语声明和字符编书写规范。一致文档类型声明、一致言语声明和字符编码，添加一致的头部信息。码，添加一致的头部信息。csscss书写规范：书写规范：JsJs书写规

10、范书写规范注释规范注释规范开发工具和测试工具商定开发工具和测试工具商定更多开发规范例如详见：更多开发规范例如详见：chenchaojun/f2e/Front-end-development-process-and-chenchaojun/f2e/Front-end-development-process-and-specification.htmlspecification.html比如采用哪个css rest，有些属性bug的处置方法、款式命名规那么、class和id的运用、图片背景能否采用sprite和如何划分模块、CSS属性书写顺序商定等。需求引入的js库，变量、类、函数命名规那么，存在

11、兼容性问题的方法的处置原那么，js文件与html分别要求、注释规那么等。我的感受：这些规范商定有些看似是无关紧要，有些甚至是可有可无的，在一人开发时觉得作用不是非常明显，但是在多人开发、团队开发的过程中就非常重要了。开场学习时我们能够不清楚哪些是需求规范的东西、该如何去规范，但是只需我们知道哪些应该规范、知道如何规范，哪怕只需一点点，也要尽量去做好规范。养成习惯积累的多了，才干在大的工程开发中做的更好。另外这一条是个总的规那么，后面是一些详细的建议。2.2.养成好习惯，不要怕费事，完善页面构造细节。养成好习惯，不要怕费事，完善页面构造细节。HTML5页面根本构造/设置文档主言语My Blog另

12、外，html5新增了很多语义化的标志，比如header，nav，footer，aside，article，section等，尽量运用这些新标签，防止满世界的div。此处不区分大小写，引号也可有可无，但是尽量一致运用一种严厉的格式.Htmlbodyhead这些元素虽然可以省略，解析时阅读器会自动加上，但是ie有些版本要求必需有，并且这样做会使他人看不懂他的代码。3.3.按照按照XHTMLXHTML要求规范页面标志语法。便于团队交流和要求规范页面标志语法。便于团队交流和后期维护，加强代码可读性。比如闭合一切标签，标后期维护，加强代码可读性。比如闭合一切标签，标签属性小写、属性值要用引号、签属性小写

13、、属性值要用引号、imgimg、brbr、metameta标签标签自闭合等。自闭合等。4. 4. 学习一切标签的特点，以及嵌套关系，便于优化构造。学习一切标签的特点，以及嵌套关系，便于优化构造。比如：比如：li li 必需包含在在必需包含在在ul ul或或ol ol中，中，spanspan作为行内标签尽作为行内标签尽量不要用来包含其他块元素，量不要用来包含其他块元素，sectionsection包含在包含在articlearticle中中等等等等尤其要留意检查尤其要留意检查html5html5新标签和属性的阅读器兼容新标签和属性的阅读器兼容性，尽量不用废弃的标签。性，尽量不用废弃的标签。5.5

14、.坚持内容与款式分别的原那么。在内容构造完成之前最坚持内容与款式分别的原那么。在内容构造完成之前最好不要参与款式代码。千万不要写一点代码加一点款式，好不要参与款式代码。千万不要写一点代码加一点款式，缺乏全局观念。最好是按照模块来写缺乏全局观念。最好是按照模块来写CSSCSS代码，层级关代码，层级关系明确，构造更明晰。比如：系明确，构造更明晰。比如：6.6.运用一致的运用一致的id id和和classclass定义格式。用语义起名字定义格式。用语义起名字; ;根据内根据内容展现款式来确定哪些标签用一样的类，哪些用独立的容展现款式来确定哪些标签用一样的类，哪些用独立的id id。防止。防止cssc

15、ss代码中很长很长代码中很长很长的层级承继选择器。的层级承继选择器。书写书写csscss代码前思索好款式代码的重用。代码前思索好款式代码的重用。7.7.不要运用内联不要运用内联javascriptjavascript和内联和内联csscss款式虽然有时很方款式虽然有时很方便便External style sheet * Internal style sheet hr color:sienna; p margin-left:20px; body background-image:url(images/back40.gif); * Inline style This is a paragraph.

16、还有Import方式比较少用，与link方式类似，优点是可以在css中再次引入其他款式表，但是加载较晚、不能用dom控制款式和兼容性不好。8.8.应对应对ie6ie6，运用单独的，运用单独的csscss代码。下面代码只需在代码。下面代码只需在ie6ie6及及更低版本阅读器时才有用更低版本阅读器时才有用 link rel=stylesheet type=text/css media=screen href=path/to/ie.css / 9.9.运用运用reset.cssreset.css。阅读器对于元素有默许。阅读器对于元素有默许csscss参数，且参数，且能够不一致。需求一致对常用元素常用

17、能够不一致。需求一致对常用元素常用csscss参数手动参数手动设定一致效果。开场可以运用已有的，后面可以根据设定一致效果。开场可以运用已有的，后面可以根据需求本人定义。需求本人定义。Normalize.css:Normalize.css:necolas.github.io/normalize.css/necolas.github.io/normalize.css/10.10.给一切图片加上给一切图片加上“alt“alt属性属性11.11.将一切外部将一切外部csscss文件放入文件放入headhead标签内，尽能够减少外标签内，尽能够减少外部部CSSCSS文件数量。这样可以加快页面的渲染速度。

18、文件数量。这样可以加快页面的渲染速度。12.javascript12.javascript文件放在底部文件放在底部,前面。根据情况，前面。根据情况，跟页面展现无关的尽量放在下面，提高加载速度跟页面展现无关的尽量放在下面，提高加载速度13.13.紧缩代码。紧缩代码。js js中不要运用中不要运用/./.这种单行注释方式这种单行注释方式14.14.背景图片尽量运用背景图片尽量运用css spritecss sprite技术，减少技术，减少httphttp恳求。恳求。/*文件用途作者姓名制造日期、版本等信息*/15.15.在公共组件和独立页面前面加上注释阐明信息。在公共组件和独立页面前面加上注释阐明信息。还是不要怕费事！今天的费事是为了以后防止更大还是不要怕费事！今天的费事是为了以后防止更大的费事的费事16.16.不要运用不要运用dwdw等工具的设计视图等自动生成代码工等工具的设计视图等自动生成代码工具具更多细节请参考更多细节请参考: :给给HTMLHTML初学者的