1、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
行内元素:a b span img input select strong
块级元素:div ul ol li dl dt dd h1 h3 h4 p
空元素:<br> <hr> <img> <input> <link> <meta>
2、清除浮动的几种方式,各自的优缺点。
方法一:
结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
方法二:
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
父级div定义 伪类:after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
方法三:
父级div定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
3、移动端常用的自适应布局方案,简述他们的特点
目前比较常用的方法有:
首先要让页面大小铺满屏幕又不能溢出。只需要在html<head>标签内加入viewport(如下),参数分别表示:页面速度 = 屏幕宽度,最大和最小伸缩比都是1,不允许用户拉缩。
<meta name="viewport" content="width=device-width,maxmun=1.0,minmun=1.0,user-scalable=no">
百分百自适应:把长度单位转化为百分比来表示,这样在不同的宽度下,元素的长宽也会随之变化。
优点:宽度之间无缝对接,操作起来也相对比较方便。
缺点:字体大小需要另外一套自适应方法来调整;当屏幕宽度大于700px后,继续按照百分比元素会偏大,这个时候调整起来会比较麻烦。
rem、em自适应:用媒体查询的方法,确定在不同屏幕宽度下,改变<html>或<body>的fontsize。
再用em、rem替代px作为单位实现自适应。
优点:可以根据不同屏幕设置,可以完美解决上面说的屏幕偏大时的比例问题,字体的大小也不存在问题。
缺点:根据宽度区间来设置,无法实现无缝变换。
4、JSONP的原理及应用场景
解释:在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获取数据。
1、同源:
同源是一种浏览器的一种安全策略,所谓同源是指,域名,协议,端口号完全相同
目的:保护用户信息安全
限制:cookie、localStorage和IndexDB无法获取
无法操作跨域的iframe里的DOM
ajax请求不能发送
2、跨域
不同源则为跨域
http://api.csdn/detail.html 不同源 域名不同
https://www.csdn.com/detail.html 不同源 协议不同
http://www.csdn.com:8080/detail.html 不同源 端口不同
http://api.csdn.com:8080/detail.html 不同源 域名、端口不同
https://api.csdn.com/detail.html 不同源 协议、域名不同
https://www.csdn.com:8080/detail.html 不同源 端口、协议不同
http://www.csdn.com/detail/index.html 同源 只是目录不同
3、jsonp原理
本质上是利用<script>标签具有可跨域的特性,由服务端返回预先定义好的javascript函数的调用,并且将服务端数据以该函数参数的形式传递过来。如:
1 <script>
2 function fuc(data){
3 console.log(data.name);
4 }
5 </script>
6 <script src="http://www.baidu.com/api.php?callback=fuc"></script>
比如说我们可以利用jsonp访问百度天气
1 $(function () {
2 // 发送jsonp请求
3 $.ajax({
4 type:"get",
5 url:'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',
6 data:{
7 location:$("#city").val()||"上海"
8 },
9 dataType:"jsonp",
10 success: function (data) {
11 //渲染模版
12 var html = template('template',{list:data.results[0].weather_data})
13 $('tbody').html(html);
14
15 }
16 });
17 });
使用template加载数据
<script type="text/template" id="template">
<% for(var i=0 ; i< list.length ;i++){ %>
<tr>
<% var item = list[i]; %>
<td><%=item.date%></td>
<td><img src="<%=item.dayPictureUrl%>" alt=""/></td>
<td><img src="<%=item.nightPictureUrl%>" alt=""/></td>
<td><%=item.temperature%></td>
<td><%=item.weather%></td>
<td><%=item.wind%></td>
</tr>
<%}%>
</script>
5、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?
如何区分HTML和HTML5?
新特性
拖拽释放(Drag and drop)API
语义化更好的内容标签(header、nav、footer、aside、article、section)
音频、视频API(audio、video)
画布(canvas)API
地理(Geolocation)API
本地离线存储 localStorage长期存储数据、浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
表单控件 calendar、date、time、email、url、search
新技术 webworker、websocket、Geolocation
移除的元素
纯表现的元素:basefont、big、center、fonts、strike、tt、u
对可用性产生负面影响的元素:frame、framset、noframes
支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让浏览器支持HTML5标签
浏览器支持新标签后,还需要添加默认标签的样式
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!-- [if It IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script >
<![endif]-->
如何区分:
DOCTYPE声明\新增的结构元素\功能元素
HTML5和HTML的区别:
1、在文档类型声明上
HTML声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5声明:<!doctype html>
上面的两种声明,HTML5声明简洁方便人们的记忆,HTML声明太长了并且很难记住这段代码。
在结构语义上
HTML:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
HTML5:在语义上却有很大的优势,提供了一些新的HTML5标签比如: article、footer、header、nav、section,这些通俗易懂。
6、请简述什么是事件代理
事件代理又称事件委托,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
事件代理是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,比如说:页面上有这样的节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件会一层一层的往外执行,执行顺序是a>li>ul>div,有这样的机制,那么给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托他们父级为执行事件。
JavaScript事件代理和委托(Delegation)
s中的事件委托或是事件代理详解
7、简述ajax请求的时候get和post方式的区别。
1、使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2、使用Get请求发送数据量少,Post请求发送量大
Get方法
用get方式可以传简单数据,但大小一般限制在1kb一下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,他会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如账号和密码等。因此,在某些情况下,get方法会带来严重的安全问题。
POST方法
当使用post方法时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给web服务器,而不是作为URL地址的参数进行传递,使用post方式传递的数据量要比使用GET方式传送的数据量大的多。
总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。
8、JQuery框架中$.ajax()的常用参数有哪些?写一个post请求并带有发送数据和返回数据的样例
$.ajax({
url:'请求地址',
type:'POST', //请求方式 GET or POST
async:true, //是否异步 true or false
data:{//发送数据
name:'zhangsan',
age:25
},
timeout:5000, //超出时间
dataType:'json', //返回数据的格式: json/xml/html/script/jsonp/text
beforeSend:function(){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
9、谈谈你对闭包的理解
闭包的作用
①可以读取函数内部的变量
②让这些变量始终保持在内存中
举个例子:
(function(){
var hello = "hello,world";
function welcome(hi){
alert(h1);//解析到作用域的第一个对象的属性
alert(hello); //解析到作用域链的第二个对象
}
welcome("It's easy");
})();
运行结果很简单,一个弹出”It’s easy”,一个弹出hello world;
解析:
对于函数welcome(),定义welcome的时候会产生一个作用域链对象,为了表示方便,记作scopechain。scopechain是个有顺序的集合对象。
scopechain的第一个对象:为了方便表示记作sc1, sc1有若干属性,引用本函数的参数和局部变量,如sc1.hi ;
scopechain的第二个对象:为了方便表示记作sc2,sc2有若干属性,引用外层函数的参数和局部变量,如sc2.hello;
…
scopechain的最后一个对象:为了方便表示记作scn,scn引用的全局的执行环境对象,也就是window对象!,如scn.eval();
这里之所以可以弹出hello,world,原因就是变量解析时在welcome函数作用域链的第一个对象上找不到hello属性,然后就去第二个对象上找去了
所有闭包根本上还是变量解析,而之所以可以实现,还是因为变量解析会在作用域链中依次寻找对应属性导致的。
10、display、position有哪些属性,并解释作用
display的常用属性有
none //此元素不会被显示;
block //此元素将显示为块级元素;
inline //默认,显示为内联元素
inline-block行内元素
inherit 规定应该从父元素继承display属性的值。
position 常用的属性有:
absolute 绝对定位
fixed 相对于浏览器窗口进行定位
relative生成相对定位
static默认值,没有定位
inherit 规定应该从父元素继承position属性的值。
代码题:
实现冒泡排序,并做简单优化。
function bubbleSort(arr){
var len=arr.length,j;
var temp;
while(len>0){
for(j=0;j<len-1;j++){
if(arr[j]>arr[j+1]){
temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
i--;
}
return arr;
}
冒泡排序的思想,比较相邻两个数,如果前者大于后者,就把两个数交换位置;这样一来,第一轮就可以选出一个最大的数放在最后面;那么经过n-1轮,就完成了所有数的排序;
1、video有哪些属性?
autoplay //视频就绪后马上播放
controls //向用户显示控件
height 视频播放器高度
width 视频播放器宽度
loop 是否循环播放
preload //在视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。
src //要播放的视频url
1、如何阻止事件冒泡和默认事件
//阻止事件冒泡,使成为捕获事件触发机制
function stopBubble(e){
//如果提供了事件对象,则这是一个非IE浏览器
if(e && e.stopPropagation){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
//当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.
//阻止浏览器的默认行为
function stopDefault(e){
//阻止默认浏览器动作(w3c)
if(e && e.prevetDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
return false;
}
}
2、b继承a的方法
function A(name){
this.name = name;
this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
this.temp = A;
this.temp(name); //相当于new A();
delete this.temp;
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}
3、写一个获取非行间样式的函数
function getStyle(obj,attr,value) {
if (!value) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
}else {
obj.getComputedStyle(attr,false)
}
}
else {
obj.style[attr] = value
}
}
4、javascript的本地对象、内置对象和宿主对象
http://www.cnblogs.com/sun-mile-rain/p/4037424.html
http://www.cnblogs.com/luckyXcc/p/5892896.html
5、强制类型转换和隐式类型转换
JS 数据类型转换主要有三种 方法主要有三种
转换函数、强制类型转换、利用js变量弱类型转换
①、转换函数:
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN
②、强制类型转换
还可使用强制类型转换(type casting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。
ECMAScript中可用的3种强制类型转换如下:
Boolean(value)——把给定的值转换成Boolean型;
Number(value)——把给定的值转换成数字(可以是整数或浮点数);
String(value)——把给定的值转换成字符串。
最后一种强制类型转换方法String()是最简单的,因为它可把任何值转换成字符串。要执行这种强制类型转换,只需要调用作为参数传递进来的值的 toString()方法,即把1转换成 “1 “,把true转换成 “true “,把false转换成 “false “,依此类推。强制转换成字符串和调用toString()方法的唯一不同之处在于,对null或undefined值强制类型转换可以生成字符串而不引 发错误;
隐式类型转换
隐式类型转换是最为隐蔽的地方,不加注意的话很容易在这一点上出错,对这一点的掌握也体现了JavaScript程序员经验。 JavaScript会自动转换表达式中对象的类型以完成表达式求值。
四则运算
加法运算符+是双目运算符,只要其中一个是String类型,表达式的值便是一个String。
对于其他的四则运算,只有其中一个是Number类型,表达式的值便是一个Number。
对于非法字符的情况通常会返回NaN:
判断语句
判断语句中的判断条件需要是Boolean类型,所以条件表达式会被隐式转换为Boolean。 其转换规则同Boolean的构造函数。比如:
var obj = {};
if(obj){
while(obj);
}
6、前端页面有哪三层构成,分别是什么?作用是什么?
分成:结构层、表示层、行为层
结构层(structural layer)
由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。”
表示层(presentation layer)
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层(behaviorlayer)
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
7、css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
8、事件绑定和普通事件有什么区别?
普通事件中的onclick是DOM0级事件只支持单个事件,会被其他onclick事件覆盖,而事件绑定中的addEventListener是DOM2级事件可以添加多个事件而不用担心被覆盖
9、javascript的同源策略
脚本只能读取和所属文档来源相同的窗口和文档的属性。
注意一点:脚本本身的来源并不作为判断是否同源的依据,而是将脚本所属文档的来源作为判断依据。
如果两个页面拥有 相同 的 协议(protocol),端口(如果指定),和 主机,那么这两个页面就属于同一个源(origin)
10、编写一个数组去重的方法
http://blog.csdn.net/xyphf/article/details/51855190