《html5个人总结心得.doc》由会员分享,可在线阅读,更多相关《html5个人总结心得.doc(23页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、5个人总结心得5项目总结总结:经过一周多的时间我做了一个属于自己的静态网页这也是我自己独立完成的第一个网页与以前在同学帮助下完成的网页不同这次我们对自己的要求更高不仅要求网页独立完成还要与原网页一模一样。虽然在独立完成的过程中遇到许多小问题但通过自己网上百度后都一一解决了。并且在做网页设计的过程中我对(超文本标记语言)也有了更多的了解在设计中我用的工具主要是Dreamweaver这款软件虽然有提示作用很大程度上给我提供了帮助但由于自己基础比较差。所以还是有很多东西对我而言是陌生的。我知道这次实训是老师对我们学习的一个检验虽然在网页设计中很多知识我们在课堂上都认真听老师讲过但是真正让我们自己动手
2、做的时候还是感到力不从心这说明我们自主动手能力不够同时也提醒了我们:要想成为一个合格的程序员就要具备一种自学能力更要勤于自己动手去做去尝试。一味的依靠别人是不会在程序猿这条路上走太久的。心得:在这次实训中我深刻的了解到为人处事和团队的重要性。做事首先要先做人如何更好的与人相处如何与人顺畅的交流这些都是现代社会最基本的问题对于我们刚步入大学不久的人来说需要学习的东西还有很多。实训中我们7个人组成一个团队大家一起将每个静态网页拆分成很多小部分让基础差的同学可以对独立制作一个静态网页不是那么陌生。再优先将简单的静态网页分配给基础比较差的同学。并不断地在制作过程为他们解决一些自己不能独立解决的小问题。
3、从实训队友的身上我看到了互帮互助细心努力的态度在以后的生活中我会更加留意身边同学的优点从他们身上找寻我所缺少的品质不断学习不断完善自己。在程序猿这条路上越走越远越走越高。优点:通过组长细心讲解和老师的课堂的讲授大家都能很好使用课堂学习的知识点。并熟悉掌握课上知识熟练应用于自己制作的静态网页里。经过几次修改我们网站结构很完整内容和原网站一模一样。缺点:个人基础不够需要同学的帮助才能了解整个静态网页的构造。5前端开发知识小结(面试知识大全)5前端开发知识小结PART1前端综合1.对WEB标准的理解Web标准是一系列标准的集合:结构标准(_/)、表现标准(CSS)和行为标准(ECMAScript/D
4、OM/BOM)。还有这些代码的书写标准。要实现的Web标准是:结构化文档;内容、表现和行为三者间的分离。2.浏览器内核差异IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto现为Blink。PART21.的<!DOCTYPE所谓的“严格模式”和“混杂模式”(1)<!DOCTYPE声明位于文档中的最前面处于<标签之前。告知浏览器的解析器用什么文档类型规范来解析这个文档。(2)严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。(3)在混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏
5、览器的行为以防止站点无法工作。(4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。2.<LINK和IMPORT的区别(1)<link属于_标签而import是CSS提供的;<link会同时被加载(2)页面被加载的时而import引用的CSS会等到页面被加载完再加载;(3)import只在IE5以上才能识别而<link是_标签无兼容问题;(4)<link方式的样式的权重高于import的权重。3.块级元素、行内元素、空(VOID)元素有哪些?(1)块级元素。默认display属性是block。divulollidldtddh1h2h3h4p。(2)行内元
6、素。默认display属性是inline。abspanimginputselectstrong。(3)空元素。功能性元素标签可以不闭合。<br<hr<img<input<link<meta4.常见的浏览器兼容性问题(1)获取标签的自定义属性。IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute获取自定义属性;Firefox下,只能使用getAttribute获取自定义属性。解决方法:统一通过getAttribute获取自定义属性。(2)even对象。IE下,even对象有x,y属性,但是没有page_,pageY属性;Fir
7、efox下,event对象有page_,pageY属性,但是没有x,y属性。解决方法:varx=(event.xevent.x:event.page_)5.语义化(1)用正确的标签做正确的事情!(2)语义化就是让页面的内容结构化便于对浏览器、搜索引擎解析;(3)在没有样式CSS情况下也以一种文档格式显示并且是容易阅读的。(4)搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重利于SEO。(5)使阅读源代码的人对网站更容易将网站分块便于阅读维护理解。6.IFRAME的缺点(1)iframe会阻塞主页面的Onload事件;iframe和主页面共享连接池(2)而浏览器对相同域的连接有限制所以会影
8、响页面的并行加载。解决方法:使用iframe之前需要考虑这两个缺点。如果需要使用iframe最好是通过javascript动态给iframe添加src属性值这样可以可以绕开以上两个问题。PART351.5的离线储存localStoragesessionStorage长期存储数据浏览器关闭后数据不丢失;数据在浏览器关闭后自动删除。2.COOKIESSESSIONSTORAGE和别LOCALSTORAGE的区(1)cookie在浏览器和服务器间来回传递sessionStorage和localStorage不会。(2)sessionStorage和localStorage的存储空间更大。(3)ses
9、sionStorage和localStorage有更多丰富易用的接口。(4)sessionStorage和localStorage各自独立的存储空间。3.如何实现浏览器内多个标签页之间的通信(阿里)调用localstorge、cookies等本地存储方式4.WEBSOCKET如何兼容低浏览器?(阿里)AdobeFlashSocket、Active_File(IE)、基于multipart编码发送_HR、基于长轮询的_HRPART4CSS1.布局Table布局Div+CSS布局响应式设计。2.盒子模型IE的content部分包含了border和pading;(1)有两种IE盒子模型、标准W3C盒
10、子模型;(2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border).3.选择器优先级及使用1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(divp)(选择父元素为<div元素的所有<p元素。)6.后代选择器(lia)7.通配符选择器(_)8.属性选择器(arel=“external”)9.伪类选择器(a:hover,li:nth-child)优先级:1.!importantidclasstag2.important比内联优先级高4.CSS3新特
11、性CSS3实现圆角(border-radius:8px)阴影(box-shadow:10px)对文字加特效(text-shadow、)线性渐变(gradient)旋转(transform)、缩放scale(0.85,0.90)定位translate(0px,-30px)倾斜skew(-9deg,0deg)增加了更多的CSS选择器多背景rgba5.CSS定义的权重标签的权重为1class的权重为10id的权重为100。/_权重为100+1=_/#id1div/_权重为10+1=11_/.class1div/_权重为10+10+1=21_/.class1.class2div6.如果需要手动写动画你
12、认为最小时间间隔是多久为什么?(阿里)多数显示器默认频率是60Hz即1秒刷新60次所以理论上最小间隔为1/601000ms16.7ms7.去除DISPLAY:INLINE-BLOCK显示间隙?(携程)移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing8.CSS的浏览器兼容性Chrome中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust:none;解决。浏览器默认的margin和padding不同。解决方案是加一个全局的_margin:0;padding:0
13、;来统一。PART5JAVASCRIPT:1.NODE.JS的适用场景?高并发、聊天、实时消息推送2JAVASCRIPT如何实现继承?通过原型和构造器3.THIS对象的理解this是js的一个关键字随着函数使用场合不同this的值会发生变化。但是有一个总原则那就是this指的是调用函数的那个对象。this一般情况下:是全局对象Global。作为方法调用那么this就是指这个对象4.如何判断一个对象是否属于某个类?使用instanceof(待完善)if(ainstanceofPerson)alert('yes');5.NEW操作符具体干了什么呢1、创建一个空对象并且this变量引
14、用该对象同时还继承了该函数的原型。2、属性和方法被加入到this引用的对象中。3、新创建的对象由this所引用并且最后隐式的返回this。varobj=;obj._proto_=Base.prototype;Base.call(obj);6.JAVASCRIPT中有一个函数执行时对象查找时永远不会去查找原型这个函数是?hasOwnProperty7.JSON的了解?JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小'age':'12','nam
15、e':'back'8.如何解决跨域问题jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面9.模块化怎么做?立即执行函数,不暴露私有成员varmodule1=(functionvar_count=0;varm1=function/.;varm2=function/.;returnm1:m1,m2:m2;);10.DOCUMEN.WRITE和INNER的区别document.write只能重绘整个页面inner可以重绘页面的一部分11.CALL,APPLY方法区别call,apply方法区别是,从第二个参数起,cal
16、l方法参数将依次传递给借用的方法作参数,而apply直接将这些参数放到一个数组中再传递,最后借用方法的参数列表是一样的.应用场景:当参数明确时可用call,当参数不明确时可用apply给合arguments12.针对JQUERY的优化方法?(1)基于Class的选择性的性能相对于Id选择器开销很大因为需遍历所有DOM元素。(2)频繁操作的DOM先缓存起来再操作。用Jquery的链式调用更好。比如:varstr=$(“a”).attr(“href”);(3)for(vari=size;i<arr.length;i+)for循环每一次循环都查找了数组(arr)的.length属性在开始循环的
17、时候设置一个变量来存储这个数字可以让循环跑得更快:for(vari=size,length=arr.length;i<length;i+)13.那些操作会造成内存泄漏?内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。(1)垃圾回收器定期扫描对象并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0(没有其他对象引用过该对象)或对该对象的惟一引用是循环的那么该对象的内存即可回收。(2)setTimeout的第一个参数使用字符串而非函数的话会引发内存泄漏。(3)闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时就会产生一个循环)14.如何判断当前脚本运行在浏览器还是NODE
18、环境中?通过判断Global对象是否为window如果不为window当前脚本没有运行在浏览器中5实训报告,原创实训总结剖析物理与电子工程学院专业实训报告学生姓名:学专班号:业:级:_20210340000电子信息科学与技术13级电科本1班_指导教师:2021年9月15日物理与电子工程学院专业实训报告专业实训报告实训单位:物理与电子工程学院地点:实验楼信号与系统实验室实训时间:2021.9.52021.9.11指导教师:_1、实训目的及要求:(根据指导教师在教学过程中给出的具体要求填写)通过本次实训旨在以实际参与了解新兴的5语言的发展历程了解这一新技术在IT行业中的应用范围。在进行对H5语言进
19、行初步了解后通过实训课程的安排学习基础的H5语言的指令代码运用所学习的指令代码进行更深入的效果设计如定位、浮动、3D动画设计、轮播图等初级的H5设计最后通过运用所有学习的指令操作完成总体的项目设计对H5语言有比较全面的了解和具备应用能力。要求实训期间认真学习H5的各种指令操作认真完成作业并书写日报不得迟到、早退、旷课。2、实训的流程及内容(包括前期准备及实训过程)实训开始前由承担实训的主要负责人和实训老师蓝鸥公司老师杨成龙对这次实训做了总体概述并说明了本次实训所需要的sublime软件、谷歌浏览器;展示了预期需要完成的设计效果并说明了实训期间的各项要求。实训的具体流程为:第一天总体介绍实训H5
20、语言的发展历程说明了本次实训的任务介绍了所用的sublime软件的操作和相关的插件、安装。标题<style</style格式并学习了一些基础的设置的添加颜色的代码操作。第三天学习了浮动添加图片的操作。第四天学习了JC语言css内联样式的代码书写。第五天学习了css外联样式的代码书写并学习3D动画的代码书写学习了轮播动画的设计并对所学的各种代码操作加以总结复习。第六天学习了当当优品项目的设计和代码书写并开始设计答辩项目。第七天进行对自己设计的项目进行答辩实训结束。1物理与电子工程学院专业实训报告3、实训过程中的相关问题与解决方法(如实填写)在本次实训中主要的问题集中在对JC语言的学习
21、和对CSS内联、外联样式的学习和理解上。由于JC语言是一种偏向于脚本语言的代码书写与C语言有相似之处但是又有不同之处这就使得在理解过程需要花费精力去想明白其原理有些较难的原理、想不明白的原理就及时和老师、同学进行沟通和交流力争在最短时间里解决问题不留下遗留问题。除此之外CSS外联的学习是一个重点也是一个很大的难点。CSS外联是指在书写主程序代码时某一些指令需要单独使用JC语言生成脚本代码然后再在主程序中调用。出现的问题主要表现在一是对JC语言本身学习的不是很充分再加上涉及到两个项目间的调用使得经常出现代码错误且难以自行察觉。解决这些问题的主要方法就是首相寻求同组人的帮助检查错误尤其是首先解决基
22、础性的错误如果仍然无法解决则需要向老师寻求帮助。在CSS内联的学习上出现的问题大体上与外联的问题相同。所谓css内联就是在主程序内部书写的某种功能性代码并对其加以调用。出现的问题不是很多但是存在。最后最主要的问题集中在学习3D动画的过程中。在这一模块的学习时主要涉及到首先要想明白所设计的动画效果是什么。由于涉及到3维空间也就是涉及到绕着那个轴旋转的问题稍有代码错误或者旋转轴出错都不能达到预期效果。问题主要表现为对代码指令的不熟悉导致动画错误对要设计的动画效果不清晰导致代码使用错误基本的动画设计与代码指令衔接不同步导致动画出现的效果不是预期效果等问题。一般出现这些问题时由于涉及到需要有专业知识才
23、能解决基本上都是向老师寻求帮助根据老师的讲解先自行更改仍有错误的则让老师帮助修改代码主程序并找到原因。2物理与电子工程学院专业实训报告4、实训总结(包括心得体会与后期学习计划)为期七天的实训课不经意间就结束了虽然只是短短的七天实训但是却收获很多学习到的关于5语言的知识也比较多。首先我想先来说说的这次实训的主要学习内容即5语言。指的是超文本标记语言(HyperTextMarkupLanguage)标记语言是一套标记标签(markuptag)使用标记标签来描述网页。5区别于的标准基于全新的规则手册提供了一些新的元素和属性在web技术发展的过程中成为新的里程碑。5被推广用于Web平台游戏开发及手机移
24、动领域从市场来看无论是桌面应用还是移动应用5都是当下Web技术中最炙手可热的新宠是创新的主旋律在不久的时间里一定会大有作为。我想这也是这次实训课的主要意义之一。因此从我个人的角度上我也很重视这次的实训课程的学习。在整个实训课程的安排上简要的可以概括为在七天的时间中整体对H5语言的发展和前景有所了解然后进行基础知识的学习最后进行项目的设计和答辩。主要内容是第一天总体介绍实训H5语言的发展历程说明了本次实训的任务介绍了所用的sublime软件的操作和相关的插件、安装。第二天主要学习了在sublime软件中的固定代码格式主要有头文件名网页标题<style</style格式并学习了一些基础
25、的设置的添加颜色的代码操作。第三天学习了浮动添加图片的操作。第四天学习了JC语言css内联样式的代码书写。第五天学习了css外联样式的代码书写并学习3D动画的代码书写学习了轮播动画的设计并对所学的各种代码操作加以总结复习。第六天学习了当当优品项目的设计和代码书写并开始设计答辩项目。第七天进行对自己设计的项目进行答辩实训结束。下面来谈谈我在这次实训中的收获和感受。第一点学习到了5语言的设计和代码指令自然不必再赘述但更重要的是锻炼了思维能力培养了设计创新的能力。在整个H5学习的过程中代码的运用、基础知识的学习可以说只是作为技术的基础层面而要想真正完成一个项目更多的是需要思维能力的锻炼和项目的创新。
26、就学习代码而言3D动画的学习就十分需要空间想象力和思维能力不怕这种能力的不足怕的是不去学习不去培养。因为如果没有这种能力或者比较薄弱一方面难以想出新的项目的构思另一方面无法想出动画的翻转或者各种效果的指令代码的书写。所有的这些都贯穿于H5的实训过程中。再具体的将来就是对于所学的每个指3物理与电子工程学院专业实训报告令并非是记忆住其书写的格式而是需要我们加入自己对每个代码感悟和认识。怎样的情况下去应用如何用使用时的技巧这些都是重要的对于自己能力的锻炼。另外结合于其中的还有对于独立思考的能力的培养。这一点是显而易见的。无论是对于一个新的项目的编写还是对于学习每一条单独的指令老师和同学所能帮助的是引
27、导和解决难题的作用而要想真正做到自己学会指令则离不开独立思考独立学习的过程和环节。第二点通过这次实训使得自己对IT行业有了进一步的了解。在实训的过程中老师也对IT行业和相关的就业前景进行了诸多叙述对于自己和同学们有很大的帮助。5在网页开发上赋予网页更好的意义和结构5手机应用的最大优势就是可以在网页上直接调试和修改。因此在5中的新的标签将有助于开发人员定义重要的内容可以给站点带来更多的多媒体元素(视频和音频)可以很好的替代FLASH和Silverlight并且当涉及到网站的抓取和索引的时候对于SEO很友好。对于这些优势性的几乎也都有相关的工作岗位。由此可见在未来的一段时间里伴随着互联网的不断普及
28、和优化H5的前端开发的相关岗位也必将是很火热的。这也是这次实训的另一意义所在他对于就业是很有帮助的。第三点实训课将理论与实践相结合从直观和整体上带来了很好的效果。在大学本科的学习过程中C语言的学习可以说是不可或缺的、必不可少的。但是就我个人而言在学习C语言时只是为了学习其语法结构而学习语言只是在应试的层面上对其理解记忆编程。但是这次的5的实训课却完全是不同的。最根本之处就是通过在sublime的编写的代码可以在浏览器中直接以直观的音频、视频的形势表现出来给人最直观的感受。这对于激发学习兴趣激发探索学习的精神是很有形影响的。例如在学习轮播项目时就是将事先准备好的素材包括音频和图片放到网页中让其开
29、始的时候以十张图片循环旋转的形势展现当鼠标停留时停留在那张图片上会有视频播放。这就是轮播效果但是在代码编写的过程中国还是要比只管看起来有所繁琐的。它主要涉及到图片的插入视频的插入的代码书写轮播动作的大代码的书写调整轮播效果调整视频、图像的位置格式等问题。尽管如此在书写完所有指令之后再对整体项目进项调试的时候某个参数的设置都会影响不同的展现效果。对于理想效果的追求激励着不断调试程序不断尝试。这就是H5语言的激励作用所在。第四点这次实训加强了自己的团队合作的意识、团结协作的能力。这一点4物理与电子工程学院专业实训报告上我是感受很深的。在最后两天的项目设计上要求以四个人为一个小组进行项目设计从素材动
30、画效果讲解展示都会给出评分。并且是要求在一天内完成项目设计第二天进行项目答辩。诚实的将在刚刚听到任务时感觉是不可能的冷静思考之后运用到这几天所学的指令进行一个简单的项目设计还是可以的但是时间紧任务重技术有限。因此在四个人一组的小组中大家开始分工合作各自负责不同的任务部分。代码编写与调试素材的收集与整理每个人的工作都进行细化再细化定时保量的去完成。这样的结果是的确提高了工作的效率。原本制定的要到第二天早晨才能完成的工作在课程设计的第一天就完成了。我想这就展示出了合作的重要性。如果所有的任务都去一个人完成那么在这么短的时间内又要保证一定质量的完成任务绝对是不可能的。此外有合作就难免有分歧。这次的实
31、训课的项目设计环节也绝对是对我个人沟通、交流能力的锻炼。一开始在确定项目的设计上就出现了两种不同的观点。一种整体画面分为两部分上方一个轮播下方三张静态效果展示另一种方案是将老师给的模板进行简单改造力求按时完成任务。这两种方案都是具有可行性的而且有都有各自的有点和缺点。很明显第一种方案可以很好地给观众以视觉呈现但是在技术上要难于第二种方案;而第二种方案则一定能够保证在要求的时间里完成任务但是很明显的是在视觉效果上并不好。为此对于这两种方案大家进行了充分的讨论最终决定对第一种方案进行改造力求优势互补效果最佳。在这其中的是小组成员的各自的出谋划策也必须需要相互的表达、沟通和交流。我想这一点不仅仅在这次的实训课中被展示出来也一定会在今后的生活和学习交流中充分展现。沟通能力强的人是有利于获得别人的帮助的也是有利于工作展开的。最后简要的对这次实训加以总结。这次的实训课程让我了解到了语言的发展历史和前景;在技能培训上为自己毕业后就业提供了一个很好的方向。通过这次培训锻炼了自己的独立思考和实践操作的能力让自己所学习的相关理论在实践中得以应用;加强了自己的合作能力和沟通交流的能力培养了自己的创新意识收获很大。5第 23 页 共 23 页
限制150内