前端开发知识总结芳姐

XHTML是一种基本的web网页设计语言,XHTML是一个基于XML的置标语言XHTML元素必须被正确的嵌套XHTML元素必须被关闭标签名必须用小写字母XHTML文档必须拥有根元素

2.前端页面有哪几层构成,分别是什么?作用是什么?

1.结构层HTML(页面结构内容)表示层2.CSS(网页的样式和外观)3.js(实现网页的交互,动画效果)

3.form表单中input标签的readonly和disabled属性有何区别?

readonly=“readonly”是只读,不可以修改,disabled=“disabled”是禁用,整个文本框是显示灰色状态form中method是数据传递的方式,action是与后台数据库提交的

4.内联标签有哪些?块级标签有哪些?

行内标签:abimgembrispaninputselect块级标签:divph1-h6formuldloltable

5.内联标签和块级标签有什么区别?

内联标签不可以设置宽高,不独占一行;块级标签可以设置宽高,独占一行

6.简述form标签的功能和属性

功能:表单用于项服务器传输数据,从而实现用户与web服务器的交互属性:1.action:表单提交到哪,一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理;2.method:表单的提交方式post/get默认取值是get

7.图形标签是什么,它的主要属性有哪些?

标签主要属性:src:要显示图片的路径alt:图片没有加载成功时的提示title:鼠标悬浮时的提示信息width:图片的宽,height:图片的高(宽高两个属性只有一个会自动等比缩放)

8.input标签都有哪些类型

TYPE:text文本输入框password:密码输入框radio:单选框checkbok:多选框submit:提交按钮button:按钮(需要配合js使用)file:提交文件

9.input标签都有哪些属性?

name:表单提交项的键value:radio和checkbok默认被选中readonly:只读,text和passworddisabled:对所用input都可以使用

11.选择器中id,class有什么区别

在网页中,每个id名称只能用一次,class可以允许重复使用

1.CSS的基本语法

2.CSS的引入方式有哪些?

3.CSS的选择器有哪些?

1.基本选择器通配符选择器标签选择器id选择器类选择器2.组合选择器子代选择器后代选择器群组选择器交集选择器毗邻选择器兄弟选择器3.属性选择器

4.CSS伪类的作用

CSS伪类是用来添加一些选择器的特殊效果超链接未被访问时的状态:a:link{background-color:blue;}鼠标悬停时的状态:a:hover{color:green}鼠标单击时的状态:a:visited{color:yellow;}鼠标不松手的状态:a:active{color:blue;}获取焦点时的状态:input:focus{background-color:red;}

5.什么是CSS优先级,其基本规则是什么?

CSS优先级,是指CSS样式在浏览器中被解析的先后顺序。基本规则:行内样式>内部样式表>外部样式表ID选择器>类选择器>标签选择器

6.CSS隐藏元素的几种方法(至少说出三种)

1.Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;2.Visibility:与opacity唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏3.Display:Display设为none任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不好读到元素的内容。这种方式产生的效果就像元素完全不存在4.Position:不会影响布局,能让元素保持可以操作5.Clip-path:clip-path属性还没有在IE或者Edge下被完全支持,如果要在你的Clip-path中使用外部的SVG文件,浏览器支持度还要低

7.CSS清除浮动的几种方法(至少两种)

1.给父元素添加overflow:hidden(推荐使用).wrap{overflow:hidden;}2.after伪元素(官方推荐).wrap:after{content:"";clear:both;display:block;height:0;visibility:hidden;}3.给父盒子设定固定高度;缺点:不灵活4.给浮动元素最后一个加一个空的块级元素,且该元素为不浮动float:none,设置clear:both,就会撑开盒子缺点:结构冗余

8.页面导入样式时,使用link和@import有什么区别?

9.介绍一个CSS的盒子模型

有两种:IE盒子模型和标签w3c盒子模型IE的content部分包含border和padding;盒子模型:内容(content),填充(padding),边界(margin),边框(border)

10.Display:none和visibility:hidden的区别是什么?

visbility:hidden------------将元素隐藏,但是还占用位置Display:none------------将元素的显示设为无,不占任何的位置

11.设置一个div的最小宽度为100像素,最大高度为50像素

min-width:100px;max-height:50px;

12.在变形CSS样式的赎回,如果想要设置标记容器和主容器之间的补白,用什么来表示?

marker-offset

13.CSS属性是否区分大小写?

不区分。(HTML,CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML中元素名称和属性是必须小写的。)

14.对行内元素设置margin-top和margin-bottom是否起作用?

不起作用,(需要注意行内元素的替换元素img,input,他们是行内元素,但是可以为其设置宽高,并且margin属性也是对其起作用的,有着类似于Inine-block的行为)imginput行内块元素,可以设置

15.对内联元素设置padding-top和padding-bottom是否会增加它的高度?

不会。同上题,要注意行内元素的替换元素,img设置padding-top/bottom是会起作用的。

16.screen关键词是指设备的物理屏幕大小还是浏览器的视窗

浏览器的视窗

17.rgba()和Opacity的透明效果有什么不同?

rgba()和Opacity都能实现透明效果,但最大的不同是Opacity作用于元素,以及元素内的所有内容的透明度而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果)

18.css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

垂直方向:line-height水平方向:letter-spacing

19.关于letter-spacing的妙用知道吗?

可以用于消除inline-block元素间的换行符空格间隙问题

20.px和em的区别?

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em的值不是固定的,并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em

21.知道css有个content属性吗?有什么作用?有什么应用?

css的content属性专门应用在before/after伪元素上,用于来插入生成内容。最常见的应用是利用伪类清除浮动。

22.简述css动画的优缺点?

优点:1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)2.代码相对简单缺点:1.在动画控制上不够灵活2.兼容性不好3.部分动画功能无法实现(如滚动动画,视差滚动等)

1.js的引入方式有哪些?

1.直接编写2.导入文件2.如何在js中定义使用变量?

1.数字类型(number)2.字符串类型(string)3.布尔类型(Boolean)4.null类型5.undefined类型4.null和undefined的区别?

null是一个表示“无”的对象,转为数值时为0;undefined是一个表示“无”的原始值,转为数值时为nan5.js有哪些运算符?

1.算术运算符(+-*/%++--)2.比较运算符(>>=<<=!======!==)3.逻辑运算符(&&||!)4.赋值运算符(=+=-=*=/=)5.字符串运算符(+连接,两边操作数有一个或两个是字符串就做连接运算)6.js的typeof返回哪些数据类型?

numberstringObjectfunctionbooleanunderfind7.分别解释数组方法pop()、push()、unshift()、shift()的功能?

shift()头部删除pop()尾部删除Unshift()头部添加push()尾部添加8.ajax请求的时候get和post方式的区别?

get方式参数放在url后面post放在虚拟载体里面有大小限制9.ajax请求时,如何解释json数据?

使用evalparse,鉴于安全性考虑使用parse更靠谱10.事件委托是什么?

事件代理:自己完成不了当前的点击事件,交给父级元素做这件事件$('ul').on('click','.btn',function(){})让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行11.添加删除替换插入到某个节点的方法分别是什么?

添加:obj.appendChild()删除:obj.removeChild()替换:obj.replaceChild()插入:obj.insertBefore()12.简述一下什么是JavaScript的同源策略?

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化,但是有一个总原则,那就是this指的是调用函数的那个对象this一般情况下:是全局对象Global,作为方法调用,那么this就是指这个对象14.编写一个b继承a的方法

functionA(name){this.name=name;this.sayHello=function(){alert(this.name+"sayHello!");};}functionB(name,id){this.temp=A;this.temp(name);deletethis.temp;this.id=id;this.checkId=function(ID){alert(this.id==ID)};}15.如何阻止事件冒泡和默认事件

functionstopBubble(e){if(e&&e.stopPropagation)e.stopPropagation()elsewindow.event.cancelBubble=true}returnfalse$(function(ev){//1.阻止事件冒泡ev.stopPropagation()//阻止默认事件ev.preventDefault();//阻止了冒泡和默认returnfalse;});16.浏览器端的js包括哪几个部分?

核心(ecmascript)文档对象模型(DOM)浏览器对象模型(BOM)17.js动画有哪些实现方法

用定时器setTimeout执行一次和setInterval18.js动画的优缺点?

优点:1.控制能力很强,可以单帧的控制,变换2.兼容性好,写的好顽强可以兼容IE6,且功能强大缺点:计算没有css快,另外经常需要依赖其它的库19.跨域的几种方式?

jsonp(利用script标签的跨域能力)跨域、websocket(html5的新特性,是一种新协议)跨域、设置代理服务器(由服务器替我们向不同源的服务器请求数据)、CORS(跨源资源共享,crossoriginresourcesharing)、iframe跨域、postMessage(包含iframe的页面向iframe传递消息)20.div标签,最小宽度为300px,最大高度为200px。背景色默认为绿色,通过点击标签,使div背景颜色红绿来回切换

Title*{padding:0;margin:0;}.box{width:300px;height:200px;background:green;}div标签

varoBox=document.getElementsByClassName('box')[0];console.log(oBox.innerText)vara=1;oBox.onclick=function(){a++;if(a%2==0){this.style.background='red';}elseif(a%2==1){this.style.background='green'}}

1.jQuery是什么?

jQuery是一个快速的,简洁的JavaScript库,是用能方便的处理HTMLdocuments,events,实现动画效果,并且方便地为网站提供AjAX交互2.jQUery的优势是什么?

它的文档说明很全,而且各种应用也说的很详细,同时还有很多成熟的插件可供选择3.什么是jQUery对象?

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQUery对象是jQUery独有的,如果一个对象是jQuery对象,那么它就可以使用jQUery里的方法:$("#test").html()4.jQuery都有哪些选择器?

$('span').eq(1).css('color','red');$('span').first().css('font-size','28px');$('span').last().css('color','greenyellow');console.log($('span').parent());$('span').parent('.p1').css({'width':'300px',height:'400px','background':'red'});$('.list').siblings('li').css('color','red');$('div').find('button').css('background','gray');解释:获取第n个元素数值从0开始.eq()获取第一个元素.first()获取最后一个元素.last()获取父元素.parent()选择所有的兄弟元素.siblings()查找所有的后代元素.find()6.简述一下jQuery的筛选器的分类,分别简单举例介绍一下。

过滤筛选器如:$("li").eq(2)$("li").first()$("ulli").hasclass("test")查找筛选器如:查找子标签:$("div").children(".test")$("div").find(".test")向下查找兄弟标签:$(".test").next()$(".test").nextAll()$(".test").nextUntil()向上查找兄弟标签:$("div").prev()$("div").prevAll()$("div").prevUntil()查找所有兄弟标签:$("div").siblings()查找父标签:$(".test").parent()$(".test").parents()$(".test").parentUntil()7.jQuery的美元符号$有什么作用?

其实美元符号$只是“jQuery”的别名,它是jQuery的选择器8.body中的onload()函数和jQuery中的document.ready()有什么区别?

1.我们可以在页面中使用多个document.ready(),但只能使用一次onload()2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像,音频)加载完毕后才会调用9.jQuery中的Delegate()函数有什么作用?

1.如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:$("ul").delegate("li","click",function(){$(this).hide();});2.当元素在当前页面中不可用时,可以使用delegate()//事件代理:自己完成不了当前的点击事件,交给父级元素做这件事件//事件代理$('ul').on('click','.name,.luffy',function(){console.log($(this));});10.请用jQuery实现,在一个表单中,如果将所有的div元素都设置为绿色

$("div").css("color","green")11.jQUery中的hover()和toggle()有什么区别?

hover()和toggle()都是jQuery中两个合成事件hover()方法用于模拟光标悬停事件toggle()方法是连续点击事件12.jQuery表单提交前有几种校验方法?分别为?

formData:返回一个数组,可以通过循环调用来校验jaForm:返回一个jQuery对象,所有需要先转换成dom对象fileValue:返回一个数组beforeSend()13.$(this)和this关键字在jQuery中有何不同?

$(this)返回一个jQuery对象,你可以对它调用多个jQuery方法,比如用text()获取文本,用val()获取值等this代表当前元素,它是JavaScript关键词中的一个,表示上下文中的当前dom元素。你不能对它调用jQuery方法,直到它被$()函数包囊,例如:$(this)14.jQuery中detach()和remove()方法的区别是什么?

15.你要是在一个jQuery事件处理程序里返回了false会怎样?

这通常用于阻止事件向上冒泡16.如何在点击一个按钮时使用jQuery隐藏一个图片?

$('ButtonToClick').click(function(){$('#ImageToHide').hide();});17.jQuery.get()和jQuery.ajax()方法之间的区别是什么

ajax()方法更强大,更具可配置性,让你可以指定等待多久,以及如何处理错误。get()方法是一个只获取一些数据的专门化方法18.用jQuery如何将一个HTML元素添加到DOM树中的?

$('[name=NameOfSelectedTag]:selected')这段代码结合使用了属性选择器和:selected选择器,结果只返回被选中的选项。你可按需修改它,比如用id属性而不是name属性来获取