基础题整理

Coderfei
419 阅读30分钟

1、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。在HTML元素中，没有内容的 HTML 元素被称为空元素。 块级元素，会自动占据一定空间，可以通过设置高度、宽度、内外边距等属性，来调整样子；与之相反，行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

行内元素：

span、img、a、label、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select（下拉列表）、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

块级元素：

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

空元素：(没有内容的 HTML 元素)

<br><hr><img><input><link><meta>

2、css引入的方式有哪些？link和@import的区别是？

1. 行内样式又称为内联样式，直接在HTML标签的style属性中添加css.

会导致 HTML 代码变得冗长

2. 内部样式表又称为嵌入方式，是在HTML<head>的<style>标签中写css代码

因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

3. 外部样式表可以通过,HTML 头部的 <head> 标签引入外部的 CSS 文件.

(1)、链接式 ：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />

(2)、导入式
<style type="text/css">
@import url("css文件路径");
</style>

区别：

1. link属于XHTML标签，除了加载CSS之外，还可以定义其他业务，@import属于css2.1，只能加载CSS。

2. link 引入CSS时，在页面载入时同时加载，@import在页面加载完全后，再加载css.

3. link无兼容性问题， @import是在CSS2.1提出的，故只可在 IE5+ 才能识别，低版本的浏览器不支持。

4. 可以通过JS操作DOM，插入link标签来改变样式。

CSS 权重优先级顺序简单表示为：

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

3、什么是盒子模型？

什么是盒子模型？

把所有的网页元素都看成一个盒子，它具有：

content，padding，border，margin

四个属性，这就是盒子模型。

盒子模型有两种形式：标准(W3C)盒子模型，怪异(IE)盒子模型

首先，两种模式可以利用box-sizing属性进行自行选择：

　　标准模式：box-sizing:content-box;

　　怪异模式：box-sizing:border-box;

两种模式的区别：

　　标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。

　　例：

.box{            
    box-sizing:border-box; //没有添加时，按照标准模式计算， 添加时按照怪异模式解析            
    width:200px;            
    height:200px;            
    border:2px solid black;            
    padding:50px;            
    margin:50px;      
}

　　 标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。效果：

怪异模式：盒子总宽度/高度 = width/height + margin。效果：

4、css选择器有哪些？有哪些属性可以继承？

1. id选择器（ # myid）

2. 类选择器（.myclassname）

3. 标签(元素)选择器（div, h1, p）

4. 相邻选择器（h1 + p）

5. 子选择器（ul > li）

6. 后代选择器（li a）

7. 通配符选择器（ * ）

8. 属性选择器（a[rel = "external"]）

9. 伪类选择器（a:hover, li:nth-child）

伪元素选择器、分组选择器。

继承性：

可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；

不可继承的样式：border, padding, margin, width, height

5、display 与 visiblity 有何异同？

css控制元素不可见的方法

{ display: none; /* 不占据空间，无法点击 */ }

{ visibility: hidden; /* 占据空间，无法点击 */ }

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }

{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

{    zoom: 0.001; -moz-transform: scale(0); 
    -webkit-transform: scale(0); 
    -o-transform: scale(0); 
    transform: scale(0); 
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ }

{ position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); 
/* 不占据空间，无法点击 */ }

最常用的为 display:none 和 visibility:hidden

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失。

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置。

display:none和visibility:hidden的区别？

1.visibility具有继承性，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示

2.visibility不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验

4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘 ；

6、js数据类型分为哪几类？

基本数据类型：

string，number，null，undefined，boolean

引用数据类型：

object,arrary,date,RegExp(正则)，Function

7、如何在html文件中添加js代码?？

有两种，

1、内部写入JavaScript程序

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的第一个JavaScript程序</title>
</head>
 
<body>
  <a href="JavaScript:alert('Hello,JavaScript!');">点击我</a>
</body>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的第一个JavaScript程序</title>
<script type="text/javascript">
 alert('Hello,JavaScript!');
</script>
</head>
 
<body>
  <a href="JavaScript:alert('Hello,JavaScript!');">点击我</a>
</body>
</html>

2、外部导入JavaScript程序

outer.js

 alert('Hello,JavaScript!');


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的第一个JavaScript程序</title>
<script src="outer.js" type="text/javascript">
</script>
</head>
 
<body>
  <a href="JavaScript:show();">点击我</a>
</body>
</html>

outer.js

// JavaScript Document
 
 alert('Hello,JavaScript!');
 
 function show(){
	 alert('Hello,JavaScript!');
 }

制作截图：


知识点总结：





8、undefined 与 null 有何异同？

大多数计算机语言，有且仅有一个表示"无"的值，比如，C语言的NULL，Java语言的null，Python语言的None，Ruby语言的nil。

有点奇怪的是，JavaScript语言居然有两个表示"无"的值：undefined和null。这是为什么？

一、相似性

在JavaScript中，将一个变量赋值为undefined或null，老实说，几乎没区别。

var a = undefined;

var a = null;

上面代码中，a变量分别被赋值为undefined和null，这两种写法几乎等价。

undefined和null在if语句中，都会被自动转为false，相等运算符甚至直接报告两者相等。

if (!undefined) 
    console.log('undefined is false');
// undefined is false

if (!null) 
    console.log('null is false');
// null is false

undefined == null
// true

上面代码说明，两者的行为是何等相似！

既然undefined和null的含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加JavaScript的复杂度，令初学者困扰吗？Google公司开发的JavaScript语言的替代品Dart语言，就明确规定只有null，没有undefined！

二、历史原因

最近，我在读新书《Speaking JavaScript》时，意外发现了这个问题的答案！

原来，这与JavaScript的历史有关。1995年JavaScript诞生时，最初像Java一样，只设置了null作为表示"无"的值。

根据C语言的传统，null被设计成可以自动转为0。

Number(null)
// 0

5 + null
// 5

但是，JavaScript的设计者Brendan Eich，觉得这样做还不够，有两个原因。

首先，null像在Java里一样，被当成一个对象。但是，JavaScript的数据类型分成原始类型（primitive）和合成类型（complex）两大类，Brendan Eich觉得表示"无"的值最好不是对象。

其次，JavaScript的最初版本没有包括错误处理机制，发生数据类型不匹配时，往往是自动转换类型或者默默地失败。Brendan Eich觉得，如果null自动转为0，很不容易发现错误。

因此，Brendan Eich又设计了一个undefined。

三、最初设计

JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

Number(undefined)
// NaN

5 + undefined
// NaN

四、目前的用法

但是，上面这样的区分，在实践中很快就被证明不可行。目前，null和undefined基本是同义的，只有一些细微的差别。

null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype)
// null

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined

9、===和==有何异同？

为了减少概念混淆，应该把 =称作（得到或者赋值），==称作（相等），===称作（严格相等）

相同点：

它们两个运算符都允许任意类型的的操作数，如果操作数相等，返回true，否则返回false

不同：

==：运算符称作相等，用来检测两个操作数是否相等，这里的相等定义的非常宽松，可以允许进行类型转换

===：用来检测两个操作数是否严格相等

1、对于string,number等基础类型，==和===是有区别的

不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等

同类型比较，直接进行“值”比较，两者结果一样

2、对于Array,Object等高级类型，==和===是没有区别的

3、基础类型与高级类型，==和===是有区别的

对于==，将高级转化为基础类型，进行“值”比较

因为类型不同，===结果为false

10、setTimeout与setInterval有何异同？

setTimeout()定义和用法

首先让我们看一看W3C上关于setTimeout方法的介绍

定义

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)

参数：

code：必需。要调用的函数后要执行的 JavaScript 代码串。

millisec： 必需。在执行代码前需等待的毫秒数。

提示

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

代码


function hello(){
    alert("hello");        
}        
//使用方法名字执行方法        
var t1 = window.setTimeout(hello,1000);        
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法        
window.clearTimeout(t1);//清除定时器

setInterval()定义和用法

代码

 //实时刷新时间单位为毫秒        
setInterval('refreshQuery()',8000);         
/* 刷新查询 */        
function refreshQuery(){        
    $("#mainTable").datagrid('reload',null);        
}

业务场景

  • setTimeout用于延迟执行某方法或功能
  • setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

11、什么是window对象？什么是document对象？

1、 [window对象] 　　

它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。 　　

（1）属性 　　

defaultStatus 缺省的状态条消息 　　

document 当前显示的文档(该属性本身也是一个对象) 　　

frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象) 　　

frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个 对象) 　　

history 窗口的历史列表(该属性本身也是一个对象) 　　

length 窗口内的框架数 　　 

location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location 混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变 

document.location (因为这是当前显示文档的位置) 　　

name 窗口打开时,赋予该窗口的名字 　　

opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引 入的一个新属性) 　　

parent 包含当前框架的窗口的同义词。frame和window对象的一个属性 　　

self 当前窗口或框架的同义词 　　

status 状态条中的消息 　　

top 包含当前框架的最顶层浏览器窗口的同义词 　　

window 当前窗口或框架的同义词,与self相同 　　

（2）方法 　　

alert() 打开一个Alert消息框 　　

clearTimeout() 用来终止setTimeout方法的工作 　　

close() 关闭窗口 　　 

confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击 Cancel返回false 　　 

blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法) 　　

focus() 把指定的窗口带到前台(另一个新方法) 　　

open() 打开一个新窗口 　　 

prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序 　

Onload() 页面载入时触发 　　

Onunload() 页面关闭时触发 

2、 [document 对象] 　　

该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。 　　

（1）属性 　　

alinkColor 活动链接的颜色(ALINK) 　　

anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象) 　　

anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)

bgColor 文档的背景颜色(BGCOLOR) 　　

cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性 　　

fgColor 文档的文本颜色(<BODY>标记里的TEXT特性) 　　

form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象) 　　

forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象) 　　

lastModified 文档最后的修改日期 　　

linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档) 　　

link 文档中的一个<A HREF=>标记(该属性本身也是一个对象) 　　

links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象) 　　

location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位

置)。但是, 可以改变 window.location (用其它文档取代当前文档)window.location本身也是

一个对象,而 document.location不是对象 　　

referrer 包含链接的文档的URL,用户单击该链接可到达当前文档 　　

title 文档的标题((TITLE>) 　　

vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性 　　

（2）方法 　　

clear 清除指定文档的内容 　　

close 关闭文档流 　　

open 打开文档流 　　 

write 把文本写入文档 　　

writeln 把文本写入文档,并以换行符结尾  

3、区别:

1、window 指窗体。document指页面。document是window的一个子对象。 

 2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变

window.location (用其它文档取代当前文档)window.location本身也是一个对象,而

document.location不是对象 


12、document.write和innerHTML的区别？

1. ducument.write使用举例

html文档：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题</title>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
<p>原有内容</p>
<div id="testdiv">原有内容</div>
</body>
</html>

js文档:

window.onload = function() {
    document.write("现有内容");
}

2. innerHTML使用举例

html文档：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题</title>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
<p>原有内容</p>
<div id="testdiv">原有内容</div>
</body>
</html>

js文档:

window.onload = function() {
    var testdiv=document.getElementById('testdiv');
    testdiv.innerHTML = "<p>I love <em>JavaScript</em>!</p>";
}

执行结果显示：innerHTML只会重写所属元素的内容，即<div>元素中的内容。 

13、python中is和==的区别？

在 Python 中一切都是对象，毫无例外整数也是对象，对象之间比较是否相等可以用==，也可以用is。==和is操作的区别是：

Is

比较的是两个对象的id值是否相等，也就是比较俩对象是否为同一个实例对象，是否指向同一个内存地址。

==

比较的是两个对象的内容是否相等，默认会调用对象的__eq__()方法。


在python中，== 与 is 之间既有区别，又有联系，本文将通过实际代码的演示，力争能够帮助读到这篇文章的朋友以最短的时间理清二者的关系，并深刻理解它们在内存中的实现机制。

扯淡的话不多说，下面马上呈上我的第一张图：



过上面代码的比较，我想很容易看得出，" is" 是用来比较 a 和 b 是不是指向同一个内存单元，而"=="是用来比较 a 和 b指向的内存单元中的值是不是相等。下面敲黑板，如果你自己的实验结果和我的不一致，请不要怀疑我，也不要怀疑自己的编译器，我想你应该遇到了下面的这种情


址完全相同。尼玛，活见鬼了，我们之前的理解是a对应的500和b对应的500应该不在一个内存单元呀！其实这是python解释器搞得鬼，具体是因为python的垃圾回收机制，这个垃圾回收机制会在之后的文章中详细介绍，至于出现上面这种现象是因为一个叫小整数对象池的东西，python为了优化速度，会把【-5,256】之间的数据提前存放在小整数对象池中，程序中只要用的【-5，256】之间的数据不会再重新创建一份，都是指向对象池中的同一份数据，除了这个区间之外的数据，每次使用时系统都会重新申请一块内存，用来存储数据，这样之前的现象也就不奇怪了。 到这里，“ is ”和 “==”之间的恩怨情仇似乎介绍的差不多了，我们接下来再来单独看看“==”。你是否想过python解释器在底层是如何处理“==”的，或者说如何判断两个对象是否相等的呢？ 对于数值类型的数据，只要两个数据大小相等，那么就是相等，但是对于非数值型的数据，比如字符串，类创建的对象又是比较什么呢？答案是python默认去比较两个对象的地址，有图有真相：


我们发现上图中，p1和p2两个对象的内容完全相同，但是python编译器却认为其不相等，这个时候就需要我们自己去定义规则去规定在什么条件下两个对象是相等的，具体操作需要去重写python中的__eq__方法，通常把这个过程叫做运算符重载。下面这张图就是完成运算符重载之后的操作，我们发现这时候两个对象的值是相等的。 


14、分别简述列表、元组、字典、集合的特性。

1、列表

什么是列表呢？我觉得列表就是我们日常生活中经常见到的清单。比如，统计过去一周我们买过的东西，把这些东西列出来，就是清单。由于我们买一种东西可能不止一次，所以清单中是允许有重复项的。如果我们扩大清单的范围，统计我们过去一周所有的花费情况，那么这也是一个清单，但这个清单里会有类别不同的项，比如我们买东西是一种花费，交水电费也是一种花费，这些项的类型是可以使不同的。python的列表个跟清单的道理是一样的，特点就是：可重复，类型可不同。类型不同也是跟数组最本质的区别了。python里的列表用“[]”表示。　 

#定义一个列表
listA = ['a', 'b', 'c', 1, 2]

listA[1] # 'b'

# 向 list 中增加元素

# 1.使用append  向list 的末尾追加单个元素。(把列表当做堆栈使用——后进（后出）)
#listA = ['a', 'b', 'c', 1, 2, 3]
listA.append(3)

# 2.使用 insert  将单个元素插入到list 中。数值参数是插入点的索引
# 在下标为3处插入一个元素，listA = ['a', 'b', 'c', 'd', 1, 2, 3]
listA.insert(3, 'd') 

# 3.使用 extend 用来连接 list
# listA = ['a', 'b', 'c', 'd', 1, 2, 3, 7, 8]
listA.extend([7, 8])

# 获取列表的长度
print len(listA)  # 9

# 在 list 中搜索
listA.index(3)  # index 在 list 中查找一个值的首次出现并返回索引值。
listA.index('100')  # 如果在 list 中没有找到值，Python 会引发一个异常。

print 5 in listA  # 要测试一个值是否在 list 内，使用 in。如果值存在，它返回 True，否则返为 False 。

# 从 list 中删除元素
listA.remove(3)  # remove 从 list 中 仅仅 删除一个值的首次出现。如果在 list 中没有找到值，Python 会引发一个异常

print listA.pop()  # pop 它会做两件事：删除 list 的最后一个元素，然后返回删除元素的值。(把列表当做堆栈使用——（后进）后出)

# 还有一种把列表当做队列使用，最先进入的元素最先释放（先进先出）
# 不过，列表这样用效率不高。相对来说从列表末尾添加和弹出很快；
# 在头部插入和弹出很慢（因为，为了一个元素，要移动整个列表中的所有元素）。

# 遍历list
for item in listA:
    print item

extend (扩展) 与 append (追加) 的看起来类似，但实际上完全不同。  

  • extend 接受一个参数，这个参数总是一个 list，并且把这个 list 中的每个元素添加到原 list 中。 
  • append 接受一个参数，这个参数可以是任何数据类型，并且简单地追加到 list 的尾部。 

>>> li = ['a', 'b', 'c']  
>>> li.extend(['d', 'e', 'f'])   
>>> li  
['a', 'b', 'c', 'd', 'e', 'f']  
>>> len(li)                      
6  
>>> li[-1]  
'f'  
>>> li = ['a', 'b', 'c']  
>>> li.append(['d', 'e', 'f'])   
>>> li  
['a', 'b', 'c', ['d', 'e', 'f']]  
>>> len(li)                      
4  
>>> li[-1]  
['d', 'e', 'f']

2、元组

元组和列表在结构上没有什么区别，唯一的差异在于元组是只读的，不能修改。元组用“()”表示

#定义一个元组
tuple1 = (1,2,'a',4,'5',6)

# 定义了一个元组之后就无法再添加或修改元组中的元素

print tuple1[2] # 'a' 元组的元素都有确定的顺序。元组的索引也是以0为基点的
print tuple1[-1] # '5' 负的索引从元组的尾部开始计数
print tuple1[1:3] # (2, 'a')  元组也可以进行切片操作。对元组切片可以得到（返回）新的元组，原元组不变

# 可以使用 in 运算符检查某元素是否存在于元组中。
print 1 in tuple1   # True

#使用for in 进行遍历元组
for item in tuple1:
    print item

# 如果需要获取item的序号 可以使用下面的遍历方法：
for index in range(len(tuple1)):   #range(len(tuple1))就是生成一个自然排序列表
    print tuple1[index]

# 还可以使用内置的enumerate函数
for index, item in enumerate(tuple1):
    print '%i, %s' % (index, item)


3、字典

字典定义了键和值之间一对一的关系,但它们是以无序的方式储存的。 Python 中的 dictionary 像 Java 中的 Hashtable 类的实例。定义 Dictionary 使用一对大(花)括号” { } “ 

  • Dictionary 不只是用于存储字符串。Dictionary 的值可以是任意数据类型，包括字符串、整数、对象，甚至其它的 dictionary。 
  • 在单个 dictionary 里，dictionary 的值并不需要全都是同一数据类型，可以根据需要混用和匹配。

# 定义一个字典
dict1 = {'name' : 'yeoman', 'age' : 24, 'sex' : 'Male'}

dict1['name'] = 'yuanm' # 为一个已经存在的 dictionary key 赋值，将简单覆盖原有的值。
dict1['Age'] = 25 # 在 Python 中是区分大小写的  age和Age是完全不同的两个key

# 从字典中删除元素
del dict1['sex']  # del 允许您使用 key 从一个 dictionary 中删除独立的元素

dict1.clear()  # clear 从一个 dictionary 中清除所有元素

　Python的集合(set)和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和sysmmetric difference(对称差集)等数学运算.由于集合是无序的,所以，sets 不支持 索引, 分片, 或其它类序列（sequence-like）的操作。 、

4、集合

  • 集合也存在不可变形式,frozenset为固定集合.
  • set和dict类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在set中，没有重复的key。
  • 注意：想要创建空集合，你必须使用 set() 而不是 {} ，后者用于创建空字典
  • 可以通过一个set函数转换成集合，如：

lst = [ 1, 1, 0]

lst_set = set( lst )  #lst_set 为1 , 0

tup = (2, 2, 1)

tup_set = set( tup) # tup_set为2 , 1

for item in lst_set:
    print item


# 使用 set 函数创建集合
list1 = [6, 7, 7, 8, 8, 9]
set2 = set(list1)

set2.add(10)  # 添加新元素
print set2  # set([8, 9, 10, 6, 7])  去掉重复内容,而且是无序的

set3 = frozenset(list1)
#set3.add(10)  # 固定集合不能添加元素，会报错AttributeError: 'frozenset' object has no attribute 'add'

### 集合有并集，交集，求差操作
### a & b 并集：intersection() 方法返回一个新集合，包含在两个集合中同时出现的所有元素。
### a | b 交集：union() 方法返回一个新集合，包含在两个 集合中出现的元素。
### a - b 差集：difference() 方法返回的新集合中，包含所有在 集合A出现但未在集合B中的元素。
### a ^ b 对称差集：symmetric_difference() 方法返回一个新集合，包含所有只在其中一个集合中出现的元素。

# 删除元素
set2.discard(6)   # 当元素不存在时,不会引发异常
set2.remove(6)    # 与discard的区别在于，如果没有要删除的元素，remove会引发一个异常
set2.pop()  # 因为set是无序的，所以pop会随机的从set中删除一个元素


面试题：

1. CSS 属性 position 的属性值？ 

static：默认值。没有定位，元素出现在正常的文档流中。 

fixed：生成固定定位的元素，相对于浏览器窗口进行定位。 

relative：生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。  

absolute：生成绝对定位的元素，相对于除 static 定位以外的第一个父元素进行定位。 inhert：规定应该从父元素继承 position 的属性和值。 

2. link 和 @import 的区别 ？ 

（1）link 属于 HTML 标签，而 @import 是 CSS 提供的。 

（2）页面加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面加载完再加载。 

（3）link 方式的样式的权重高于 @import 的权重。  

3. 描述以下 HTML 和 CSS 代码执行后的效果？

3.1

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>面试题</title>    
    <style>        
        html{            
            font-size: 14px;        
        }        
        span{            
            display: inline-block;            
            font-size: 12px;            
            width: 100px;            
            height: 30px;            
            color: #f00;            
            background-color: #cccccc        
        }        
        .text{            
            font-size: 1em;            
            line-height: 2;            
            height: auto;            
            color: #000;        
        }    
    </style>
</head>
<body>    
    <span class="text">测试文本</span>
</body>
</html>

（1）span 的高度是 28px；

（2）.text 样式中的height : auto去掉，增加 display : inline，这时候 span 元素的高度是 14px。

大家可以输出一下，span的高度确实是 14px ，Goole 浏览器默认字体是微软雅黑，页面显示出来是 19.2 px，这和字体有关系，用 jQuery 输出一下，是14px。

3.2

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>css</title>    
    <style>        
        ul{            
            width: 200px;            
            background-color: #fff;            
            border: 1px solid #999;        
        }        
        li{            
            width: 50px;            
            display: inline-block;            
            border: 1px solid #ddd;            
            box-sizing: border-box;        
        }    
    </style>
</head>
<body>    
    <ul>        
        <li>1111</li>        
        <li>2222</li>        
        <li>3333</li>        
        <li>4444</li>    
    </ul>
</body>
</html>

效果图：

默认情况下是没有清除 margin 和 padding。

3.3

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">   
    <title>2</title>   
    <style>        
        .item{            
            width: 300px;            
            border: 1px solid #999;        
        }        
        .pic{            
            width: 80px;            
            height: 80px;            
            margin: 10px;            
            color: #fff;            
            background-color: #fab;            
            float: left;        
        }        
        .content{            
            margin: 5px;            
            color: #666;            
            text-align: left;            
            background-color: #dec;            
            overflow: hidden;        
        }    
    </style>
</head>
<body>    
    <div class="item">        
        <div class="pic">图片</div>        
        <p class="content">我是测试文本，我是测试文本，我是测试文本</p>    
    </div>
</body>
</html>

效果图：


4. 表单页面中 Label 标签的作用？

最近在设计网页时，只要一加入表单或表单对象，文本框等等，就会在代码中加入一个<label></label>，一直没明白这个label是做什么的，今天正好看到了解释： Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

FOR属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY属性： 

功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。 用法：

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

注释  

LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是，要提交表单，你必须为 LABEL 元素所绑定到的控件指定 NAME。 

有两种方法给所指定的快捷键添加下划线。LABEL 元素的 rich text 支持可以在 ACCESSKEY 属性所指定的快捷键字符两侧加上 U 元素。如果你更愿意使用样式表(CSS)来应用样式，可以将该字符包含在 SPAN 中，并设置样式为“text-decoration: underline”。 如果用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。

5. 定位属性实现 CSS Sprite？

何为CSS Sprite？ 

通常我们把它叫做CSS图像拼合技术，当然还有人把 CSS Sprites 叫做”CSS贴图定位”。

CSS Sprites 原理：

其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS的 “background-image”，“background- repeat”，“background-position” 的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。 

优点：

（1）利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因; 

（2）CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。  

（3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。  

（4）更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

详情查看文章 CSS Sprite定位实现。

6. 实现响应式布局？

（1）添加 <meta>标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

（2）宽度、高度、字体大小，都使用百分比单位；

（3）使用 CSS@media 属性。

7. 描述 iconfont 和 SVG ?

iconfont 和 可以通过 font-size 和 color 设置图片和大小和颜色。

待完善...

8. 关于 CSS transition/animation 的描述？

transition 只能定义开始状态和结束状态，不能定义中间状态；

animation 通过@keyframes 动画规则，可以定义多个状态；

animation 可以指定动画的播放次数。

9. 关于浮动 和 清除浮动。

浮动元素脱离了标准文档流；

浮动元素可能会造成高度塌陷现象；

通过设置父元素的 overflow : hidden 属性，可以清楚浮动；

通过在浮动元素的末尾添加一个空元素，设置 clear : both 属性，可以清除浮动。

10. 写出程序的输出结果。

10.1

<script>        
    var array=[1,2,3];        
    array.push(4);        
    array.push(5);        
    array.pop();        
    array=array.map(function(x){            
        return x%2==0 ? x+1 : x-1;        
    })        
    console.log(array);//[0,3,2,5]        
    console.log(array.splice(1,2));//[3,2]        
    console.log(array);//[0,5]    
</script>

10.2 写出此程序每行输出的结果和输出时间点

for(var i=0;i<5;i++){            
    setTimeout(function(){                
        console.log(i);//5个5，1秒后后全部输出            
    },1000)        
}        
console.log(i)//1个5，立即输出；

1个5，立即输出；

5个5，1秒后后全部输出

10.3 写出此程序的输出结果

<script>
    function Foo(name){            
        this.name=name;            
        this.getName=function(){                
            return '1-'+this.name;            
        };        
    }        
    Foo.prototype.getName=function(){            
        return '2-'+this.name;        
    };        
    Foo.getName=function(){            
        return '3-'+this.name;        
    };        
    getName=function(){            
        return '4-'+this.name;        
    };        
    var hello=function(param){            
        if(param instanceof Foo){                
            console.log('hello'+param.getName());            
        }else{                
            console.log('hello'+getName());            
        }        
    };        
    hello(new Foo('a'));        
    hello(Foo('b'));        
    hello(1);
</script>


avatar
文章
阅读
粉丝