校内华为大数据项目实训

校内华为大数据项目实训一、实践目的根据我的理解，python这种应用性和实践性极强的知识，当然需要一边实践一边学习，用以致学，学以致用，通过学习python解决一些重复性、无创造性、能通过机器运行而自动解决的问题。python算是一门计算机语言。语言是一种工具，经由它实现沟通。计算机语言，按照我的理解，就是寻找到一种让机器和人都能够理解的符号实现二者之间的沟通现在的人工智能非常的火爆，其工般我们用爬虫爬到了大量的数据之后，我们需要处理数据用来分析，不然爬虫白爬了，我们最终的目的就是分析数据，在这方面关于数据分析的库也是非常的丰富的，各种图形分析图等都可以做出来。也是非常的方便，其中诸如Seaborn这样的可视化库，能够仅仅使用一两行就对数据进行绘图，而利用Pandas和numpy、scipy则可以简单地对大量数据进行筛选、回归等计算。而后续复杂计算中，对接机器学习相关算法，或者提供Web访问接口，或是实现远程调用接口，都非常简单。二、实践内容一python的基础（一）代码格式强制缩进！Python开发者有意让违反了缩进规则的程序不能通过编译，以此来强制程序员养成良好的编程习惯。并且Python语言利用缩进表示语句块的开始和退出（Off-side规则），而非使用花括号或者某种关键字。增加缩进表示语句块的开始，而减少缩进则表示语句块的退出。缩进成为了语法的一部分。根据PEP的规定，必须使用4个空格来表示每级缩进。（二）关键字（三）基本语法弱类型变量必须先赋值再使用小心引用！2和3的常见差异xrangeprint保留字是Python语言中已经被赋予特定意义的一些单词，开发程序时，不可以把这些保留字作为变量，函数，类，模块和其他对象的名称来使用。标识符：可以理解为一个名字，它主要用来标识变量，函数，类，模块和其他对象名称。由字母，下划线和数字组成，并且第一个字符不能是数字可以使用的标识符字符有：a-z，A-Z，0-9，“_”如：USERID，book，user_idmyclassbook011.不能是Python的保留字2.不能包含空格，@，%，$3.可以中文，但是我们不建议使用中文4.严格区分大小写错误的标识符：4wordclass@bookuseridPython中用下划线开头的标识符都有特殊的意义。在使用的时候要特别注意。如：单下划线开头表示不能直接访问的属性。双下划线开头表示类的私有成员。双下划线开头，双下划线结尾是Python专用标识符。“__init()__”表示构造函数（四）变量（五）数据类型整数包括正整数，负整数，0，并且它的位数是任意的浮点数由整数部分和小数部分组成，主要用于处理包括小数的数字符串属于不可变序列，通常使用单引号‘’或者双引号“”或者三引号‘’‘’‘’或“”“”“”括起来这三种引号形式再语义上没有差别，只是再形式上有差别。其中单引号和双引号的字符串序列必须再一行上，而三引号内的字符序列可以分布再连续的多行上。False或None数值中的零，包括0，0.0，虚数0空序列，包括字符串，空元组，空列表，空字典自定义的对象的实例，该对象的__bool__方法返回False，或者__len__方法返回0（六）运算符+ 加- 减* 乘/ 除% 求余// 取整除#返回商的整数部分** 幂#返回x的y次方注意：1运算符*还可以使用字符串中，计算结果就是字符串重复指定次数的结果2使用/和//运算符和%运算符时，除数不能为0，否则会出现异常= 赋值运算+= 加赋值-= 减赋值*= 乘赋值/= 除赋值%= 取余数赋值**= 幂赋值//= 取整除赋值> 大于< 小于== 等于!= 不等于>= 大于等于<= 小于等于and 逻辑与or 逻辑或not 逻辑非短路效果andor& 位与| 位或^ 异或~ 取反<< 左移>> 右移（七）流程控制流程控制，顾名思义，就是控制程序走向的结构。顺序结构顺序执行，表示逐行执行相应的语句，不涉及任何的关键字。分支结构分支控制，则需要按照判断条件动态的去执行符合条件的语句循环结构循环控制，则需要按照循环判断条件动态的去执行循环语句。作用（循环结构中）break语句终止某个循环，程序跳转到循环块外的下一条语句continue跳出本次循环，进入下一次循环选择结构二python序列（一）容器序列序列是一块用于存放多个值的连续的内存空间并且按一定顺序排列，每一个值称为元素，每个元素都有一个位置称为索引。可以通过索引取出相应的值。列表（list）是由一系列有序排列的元素组成的。内置可变序列。形式上使用[]表示一个序列，每个元素中间使用逗号分隔。内容可以是整数，实数，字符串，列表，元组等任何类型的内容放在列表中，同一个列表中可以有不同的类型的元素。创建列表：listname=[element，element2，.....]索引列表中的每一个元素都有一个编号，也称为索引。索引是从0开始的。索引可以是复数，这个索引从右向左计数。最后一个元素的索引值为-1切片切片操作时访问列表元素的一种方法，他可以访问一定范围内的元素，通过切片操作可以生成一个新的列表。切片的语法：sname[start_index:end_index:step]step：正负数均可，其绝对值大小决定了切取数据时的‘‘步长”，而正负号决定了“切取方向”，正表示“从左往右”取值，负表示“从右往左”取值。当step省略时，默认为1，即从左往右以增量1取值。start_index：表示起始索引（包含该索引本身）；该参数省略时，表示从对象“端点”开始取值，至于是从“起点”还是从“终点”开始，则由step参数的正负决定，step为正从“起点”开始，为负从“终点”开始。end_index：表示终止索引（不包含该索引本身）；该参数省略时，表示一直取到数据“端点”，至于是到“起点”还是到“终点”，同样由step参数的正负决定，step为正时直到“终点”，为负时直到“起点”。遍历列表1.直接使用for循环foriteminlistname: #输出item：用来保存每个元素的变量listname：列表的名字使用for循环和enumerate()函数可以实现同时输出索引值和元素内容的功能forindex,iteminenumerate(list): #输出index和item添加元素第一种是通过+来拼接一个列表第二种通过append(item)方法想该列表的末尾在添加一个元素第三种通过insert(index，item)来指定需要在特定的索引位置上添加一个元素第四种通过extend(list)将一个列表全部追加到另一个列表中删除元素删除元素主要有两种情况：一种是根据索引删除dellist[index]二种是根据元素值进行删除list.remove(item)列表的乘法使用数字乘以一个序列生成一个新的序列，新的序列时原来序列被重复了多次的结果检查某个元素是否序列的成员使用in关键字检查某个元素是否是序列的成员，即检查某个元素是否包含子该序列中语法是：valueinlistvalue：元素list：列表得到的结果为True表示在序列中，为False表示不在序列中notin关键字来表示检查某个元素是否不包含在指定的序列中通过内置函数来计算序列的长度，最大值，最小值。len(list)函数计算序列的长度，即返回序列包含多少个元素max(list)函数返回序列中的最大值min(list)返回学列中的最小值统计列表数据获取指定元素的出现次数count()：listname.count(obj)获取指定元素首次出现的下标index()：listname.index(obj)统计数值列表的元素和sum():sum(listname)list()将序列转换为一个列表str(list)将序列转换为字符串sum(list)计算元素之和sort对元素进行排序，原列表的顺序发生改变listname.sort(reverse=False)reverse:其值指定为True表示降序排列，为False表示升序排列，默认为升序排列sorted(list)对元素进行排序产生一个列表，原列表顺序不变sorted(listname,reverse=False)reverse:其值指定为True表示降序排列，为False表示升序排列，默认为升序排列reversed(list)反向序列中的元素enumerate(list)将序列组合为一个索引序列，多用于for循环中列表推导式：1.生成指定范围的数值列表list=[Expressionforvarinrange]list:表示生成的列表名Expression:表达式，用于计算新的列表的元素var：循环变量range：采用range()函数生成range对象2根据列表生成指定需求的列表 newlist=[Expressionforvarinlist]例：定义一个记录商品价格的列表，然后应用列表推导式生成一个将全部商品价格打五折的列表3从列表中选择符合条件的元素组成新的列表：newlist=[Expressionforvarinlistifcondition]condition:条件表达式，用于筛选例：定义一个记录商品价格的列表，然后应用列表推导式生成一个商品价格高于5000的列表（二）元组元组（tuple）是由一系列有序的元素组成，但是它是不可变序列，因此元组称为不可变的列表形式上：元组用（）来表示元组，每个元素用逗号隔开。元素的内容可以是整数，实数，字符串，列表，元组等任何内容的放入到元组中，并且在同一个元组中，元素的类型可以不同。通常状况下，元素用于保存程序中不可修改的内容。1使用赋值运算符直接创建元组。tuplename=(element1,element2,element3,...)创建空元组emptytuple=()空元组可以应用在为函数传递一个空值或者返回空值时；访问元组元素1通过索引来访问元组的元素，索引的值从0开始。2元组也可以使用切片3同样元组也可以使用for循环修改元组元素元组是不可变序列，所以不能对它的单个元素进行修改。改变的方案可以对元组进行重新赋值对元素进行连接组合元组和列表的区别：1列表属于可变序列，它的元素可以随时修改或者删除，而元组属于不可变序列，其中的元素不可以修改，除非整体替换。2列表可以使用append()、extend()、insert()、remove()、和pop()等方法实现添加和修改列表元素，而元组则没有这个几个方法，因为不能想元组中添加和修改元素，同样也不能删除元组3列表可以使用切片访问和修改列表中的元素，元组也支持切片，但是它只支持通过切片访问元素，不支持修改。4元组比列表的访问和处理速度快，所以如果只需要对其中的元素进行访问，而不进行任何修改，建议使用元组。5列表不能作为字典的键，而元组可以。（三）字符串字符串字符串就是连续的字符序列，可以是计算机所能表示的一切字符集合。字符串属于不可变序列，通常使用单引号‘’或者双引号“”或者三引号‘’‘’‘’或“”“”“”括起来这三种引号形式再语义上没有差别，只是再形式上有差别。其中单引号和双引号的字符串序列必须再一行上，而三引号内的字符序列可以分布再连续的多行上。拼接字符串使用+号运算夫可以完成多个字符串的拼接，可以连接多个字符串并产生一个字符串对象计算字符串的长度通过len()函数来计算字符串的长度。不同的字符所占字节数不同，在实际开发中使用encode()函数来进行编码后再进行计算长度。截取字符串由于字符串也属于序列，所以要截取字符串可以采用切片方法实现，string[start:end:step]字符串的索引同学列的索引是一样的，也是从0开始，并且每个字符占一个位置。分隔字符串分隔字符串是把字符串分割为列表。字符串对象的split()方法可以实现字符串分割，也即是把一个字符串按照指定的分隔符切分为字符串列表，该列表的元素中，不包括分隔符。str.split(sep,maxsplit)sep:用于指定分割符，可以包含多个字符，默认为None，即所有空字符(包括空格，换行\n,制表符\t)maxsplit:可选参数，用于指定分隔的次数，如果不指定或者为-1，则分隔次数没有限制，否则返回结果列表的元素个数最多为maxsplit+1返回值：分隔后的字符串列表。分隔字符串分隔字符串是把字符串分割为列表。字符串对象的split()方法可以实现字符串分割，也即是把一个字符串按照指定的分隔符切分为字符串列表，该列表的元素中，不包括分隔符。str.split(sep,maxsplit)sep:用于指定分割符，可以包含多个字符，默认为None，即所有空字符(包括空格，换行\n,制表符\t)maxsplit:可选参数，用于指定分隔的次数，如果不指定或者为-1，则分隔次数没有限制，否则返回结果列表的元素个数最多为maxsplit+1返回值：分隔后的字符串列表。分隔字符串分隔字符串是把字符串分割为列表。字符串对象的split()方法可以实现字符串分割，也即是把一个字符串按照指定的分隔符切分为字符串列表，该列表的元素中，不包括分隔符。str.split(sep,maxsplit)sep:用于指定分割符，可以包含多个字符，默认为None，即所有空字符(包括空格，换行\n,制表符\t)maxsplit:可选参数，用于指定分隔的次数，如果不指定或者为-1，则分隔次数没有限制，否则返回结果列表的元素个数最多为maxsplit+1返回值：分隔后的字符串列表。2.find()方法用于检索是否包含指定的子字符串，如果检索的字符串不存在，则返回-1，否则返回首次出现该子字符串时的缩影。str.find(sub[,start[,end]])3.index()方法index()方法与find()方法类型，也时用于检索是否包含指定的子字符串，只不过如果使用index()方法，当制定的字符串不存在时会抛出异常。str.index(sub[,start[,end]])4.startswith()方法该方法用于检索字符串是否以指定子字符串开头，如果是则返回True，否则返回Falsestr.startswith(prefix[,start[,end]])prefix：表示要检索的子字符串5.endswith()方法该方法用于检索字符串是否以指定子字符串结尾，如果是返回True，否则返回Falsestr.endswith(suffix[,start[,end]])suffix：表示要检索的子字符串字母的大小写转换lower()方法用于将字符串中的大写字母转换为小写字母。得到一个新字符串。str.lower()

upper()方法用于将字符串的小写字母转换为大写字母。得到一个新字符串。str.upper()去除字符串中的空格和特殊字符这里的特殊字符指的是制表符\t,回车符\r，换行符\nstrip()方法用于去掉字符串左右两侧的空格和特殊字符str.strip([chars])chars:可选参数，用于指定要去除的字符，可以指定多个，如果chars为“@.”,则去除左右两边的“@”或者“.”,如果不指定，则默认去除空格，制表符，回车符，换行符。lstrip()方法用于去掉字符串左侧的空格和特殊字符str.lstrip([chars])

rstrip()方法用于去掉字符串右侧的空格和特殊字符str.rstrip([chars])使用“%”操作符要实现格式化字符串，可以使用“%”操作符。‘%[-][+][0][m][.n]格式化字符串’%exp-:可选参数，用于指定左对齐，正数前方无符号，负数前方加负号+：可选参数，用于指定右对齐，正数前方加正号，负数前方加负号0：可选参数，表示右对齐，正数前方无符号，负数前放加负号，用0填充空白处，（一般和m配合使用）m：可选参数，表示占有宽度。.n：可选参数，表示小鼠点后保留的位数。格式化字符：用于指定类型。 %s 字符串使用str()显示 %c 单个字符 %d或者%i 十进制数 %x 十六进制数 %f或者%F 浮点数 %r 字符串repr()显示 %o 八进制数 %e 指数 %E 指数 %% 字符%（四）字典(dict)字典和列表类似，也是可变序列，不过它是无序的可变序列，以键值对的方式存放数据。特点：通过键而不是通过索引来读取。字典是任意对象的无序集合字典是可变的，并且可以任意嵌套字典中的键必须唯一字典中的键必须不可变字典的创建每个元素都包含两个部分“键”和“值”。创建字典时，在键和值之间使用冒号分隔，相邻两个元素使用逗号分隔，所有元素放在一个大括号中。格式：dictionary={‘key1’:’value’,‘key2’:‘value2’,...,‘keyn’:‘valuen’}dictionary:字典名称key1、key2、...keyn：表示元素的键，必须时唯一的，并且不可变，可以是字符串，数字或者元组value1、value2、...valuen：表示元素的值，可以是任何数据类，不是必须唯一。通过映射函数创建字典:dictionary=dict(zip(list1,list2))zip()函数用于将多个列表或元组对应位置的元素组合为元组，并返回包含这些内容的zip对象。如果想得到元组，可以使用tuple()函数将zip对象转换为元组，如果想得到列表，则可以使用list()函数将其转换为列表2.通过给定的“键值对”创建字典dictionary=dict(key1=value1,key2=value2,....,keyn=valuen)3.还可以使用dict对象的fromkeys()方法创建值为空的字典dictionary=dict.formkeys(list1)（六）字典通过已经存在的元组和列表创建字典删除字典：同列表和元组一样，不再需要的字典也可以使用del命令删除整个字典。清空字典：可以让字典变为一个空字典字典的访问可以通过key来单独访问字典中某个值如果访问了不存在的key会报错。

python中推荐使用字典对象的get()方法获取指定键的值。dictionary.get(key,[default])遍历字典使用字典对象的items()方法可以获取字典的键值对元组列表dictionary.itmes()遍历字典使用字典对象的items()方法可以获取字典的键值对元组列表dictionary.itmes()遍历字典使用字典对象的items()方法可以获取字典的键值对元组列表dictionary.itmes()遍历字典使用字典对象的items()方法可以获取字典的键值对元组列表dictionary.itmes()（五）集合集合（set）用于保存不重复的元素。无序可变序列，集合的所有元素都放在一对大括号中，两个相邻元素使用逗号分隔创建集合1.直接使用{}创建setname={element1,element2,....,elementn}没有个数限制，只要python支持的类型都可以。如果在创建集合时，有相同的值，集合只会保留一个。创建集合1.直接使用{}创建setname={element1,element2,....,elementn}没有个数限制，只要python支持的类型都可以。如果在创建集合时，有相同的值，集合只会保留一个。使用set()内置函数创建setname=set(iteration)iteration:表示要转换为集合的可迭代对象，而可以时列表，元组，range对象，也可以是字符串，如果时字符串，返回的集合将时包含全部不重复字符的集合。添加向集合中添加元素使用add()方法来实现setname.add(element)element:这里只能使用字符串，数字，布尔类型的True或False，不能使用列表，元组等可迭代对象。删除可以使用del删除整个集合集合的交集、并集、和差集运算进行交集运算时使用&符号进行并集运算使用|符号进行差集运算使用-符号三python函数函数（function）即通过将一段有规律的，重复的代码定义为函数，来达到一次编写多次调用的目的。使用def关键字来实现语法：deffunctionname([parameterlist]): [‘’’comments’’’] [functionbody]

parameterlist:参数列表，多个参数之间用逗号隔开‘’’comments’’’:表示函数指定注释，如果写了注释，再调用的的时候就会出现以帮助用户。functionbody：用于指定函数体，即函数被调用后，要执行的功能代码，如果有返回值，可以使用return语句返回。deffilterchar(string):

"""

功能：过滤危险字符，并过滤后的结果输出

about：要过滤的字符串

没有返回值

"""

importre

pattern=r'(黑客)|(抓包)|(监听)|(Trojan)'

sub=re.sub(pattern,'@_@',string)

print(sub)about='我是一个程序员,喜欢看黑客方面的书籍，想研究一下Trojan'

filterchar(about)pass语句pass语句表示空语句，它不做任何事情，一般起到占位作用。python3中可以在使用表达式的地方使用...来表示省略代码，由于省略号自身什么都不做，因此可以表示pass的代替参数传递形参，实参，值传递，引用传递位置参数位置参数也称为必备参数，必须按照正确的顺序传到函数中。即调用时的数量和位置必须和定义时是一样的，少参数和错误的位置都回使程序出错。关键字参数关键字参数是指使用形参的名字来确定输入的参数值。通过该方式指定实参时，不再需要与形参的位置完全一致，只要将参数名写正确即可为参数设置默认值调用函数时，如果没有指定某个参数将抛出异常，即在定义函数时，直接指定形式参数的默认值，当没有传入参数时则直接使用定义函数时，设置的默认值。语法：deffunctionname(....,[parameter1=defalutvalue1]): [functionbody]注意在定义函数时，指定默认的形参必须在所有参数的最后，否则将参数语法错误。每个函数都是一个对象注意：使用可变对象作为参数的默认值时，多次调用可能回导致意料之外的情况发生可变参数可变参数可称为不定长参数，即传入函数中的时间参数可以是0个，1个，2个到任意个。定义可变参数时，主要有两种形式：第一种：*parameter第二种:**parameter

返回值可以在函数体内使用return语句位函数指定返回值，该返回值可以时任意类型，并且无论return语句出现在函数的什么位置，只要得到执行，就会直接结束函数的执行。return语句的语法格式：return[value]如果返回一个值，那么，在调用函数的表达式会得到一个值，如果返回的是多个值，那么在调用函数的返回值会得到一个元组。如果一个函数中没有return，那么整个函数将返回None，即返回一个空值。返回值可以在函数体内使用return语句位函数指定返回值，该返回值可以时任意类型，并且无论return语句出现在函数的什么位置，只要得到执行，就会直接结束函数的执行。return语句的语法格式：return[value]如果返回一个值，那么，在调用函数的表达式会得到一个值，如果返回的是多个值，那么在调用函数的返回值会得到一个元组。如果一个函数中没有return，那么整个函数将返回None，即返回一个空值。（四）初识CSS什么是CSS？CSS(CascadingStyleSheet)级联样式表表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定CSS的基本语法结构语法： 选择器{ 声明1; 声明2; } 声明 属性：值在HTML中引入CSS样式的几种方式行内样式使用style属性引入CSS样式标签style=“属性1:值;属性2:值;”></标签>内部样式表在<head>标签中引入<style>标签写CSS样式表<styletype=“text/css”> 选择器{声明;}</style>外部样式表写.css样式表文件，通过链接式或者导入式引入CSS样式表外部样式表分为两种方式： 链接式在<head>标签中使用<link>标签 <linkhref="style.css"rel="stylesheet"type="text/css"/> 导入式在<head>标签中使用<style>标签并在其中用@import<styletype="text/css"> @importurl("style.css");</style>区别：link是将css布局文件先加载如网页文件中，所以这时无论网速再慢，最终实现的网页效果都是一样的。而@import则是先将网页文件加载，再加载布局文件，这时候如果网速过慢的话，则会先出现没有布局的网页效果，就会显得很难看。CSS的基本选择器，语法规则在内部样式表和外部样式表我们如何找到页面中的要修饰的元素呢？font-size 字号大小font-family 字体样式font-weight100-900 字体粗细font-style 字体风格（斜体）统一设置，必须按照下的顺序：选择器{font:font-stylefont-weightfont-size/line-heightfont-family;}color 文本颜色line-height 行间距text-align 水平对齐方式text-indent 首行缩进（只能让块元素进行缩进）text-decoration 文本的装饰 none默认。定义标准的文本。 underline定义文本下的一条线。 overline定义文本上的一条线。 line-through定义穿过文本下的一条线。伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果为了和我们刚才学的类选择器相区别，类选择器是一个点比如.demo{}而我们的伪类用2个点就是冒号比如:link{}:link/*未访问的链接*/:visited/*已访问的链接*/:hover/*鼠标移动到链接上*/:active/*选定的链接*/注意写的时候，他们的顺序尽量不要颠倒按照lvha的顺序。四背景和盒子模型背景1.背景颜色background-color颜色和transparent透明色2.背景图像background-image属性3.背景重复方式background-repeat属性repeat：沿水平和垂直两个方向平铺no-repeat：不平铺，即只显示一次repeat-x：只沿水平方向平铺repeat-y：只沿垂直方向平铺4.背景定位background-position属性5.background简写形式：background:#C00url(../image/arrow-down.gif)205px10pxno-repeat;6.background-size7.linear-gradient：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等background:linear-gradient(totop,color1,color2);方向：totop，tolefttoright，tobottom盒子模型12边框颜色border-color3.border-widththinmediumthick像素值4border-style：nonehiddendotteddashedsoliddouble5同时设置边框的颜色、粗细和样式6marginmargin-topmargin-rightmargin-bottommargin-leftmargin7网页居中对齐网页居中对齐的必要条件块元素固定宽度8paddingpadding-leftpadding-rightpadding-toppadding-bottompadding9盒子模型总尺寸=border+padding+margin+内容宽度10border-radius:20px10px50px30px;四个属性值按顺时针排列11利用border-radius属性制作圆形的两个要点元素的宽度和高度必须相同圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%12利用border-radius属性制作半圆形的两个要点制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值13利用border-radius属性制作扇形遵循“三同，一不同”原则“三同”是元素宽度、高度、圆角半径相同“一不同”是圆角取值位置不同14box-shadow:insetx-offsety-offsetblur-radiuscolor五浮动和定位浮动1标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式标准文档流组成：块级元素（block）<h1>…<h6>、<p>、<div>、列表内联元素和行级元素（inline）<span>、<a>、<img/>、<strong>...内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立2可以使用什么属性使块元素排在一行？1.inline-block2.float3属性值说明left元素向左浮动right元素向右浮动none默认值。元素不浮动，并会显示在其文本中出现的位置4浮动元素脱离标准文档流清除浮动值说明left在左侧不允许浮动元素right在右侧不允许浮动元素both在左、右两侧不允许浮动元素none默认值。允许浮动元素出现在两侧6浮动元素后面加空div：<divid="father"><divclass="layer01"><imgsrc="image/photo-1.jpg"alt="日用品"/></div><divclass="layer02"><imgsrc="image/photo-2.jpg"alt="图书"/></div><divclass="layer03"><imgsrc="image/photo-3.jpg"alt="鞋子"/></div><divclass="layer04">浮动的盒子……</div><divclass="clear"></div></div>.clear{clear:both;margin:0;padding:0;}7设置父元素的高度<divid="father"><divclass="layer01"><imgsrc="image/photo-1.jpg"alt="日用品"/></div><divclass="layer02"><imgsrc="image/photo-2.jpg"alt="图书"/></div><divclass="layer03"><imgsrc="image/photo-3.jpg"alt="鞋子"/></div><divclass="layer04">浮动的盒子……</div></div>#father{height:400px;border:1px#000solid;}8overflow属性：属性值说明visible默认值。内容不会被修剪，会呈现在盒子之外hidden内容会被修剪，并且其余内容是不可见的scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容9父级添加overflow属性<divid="father"><divclass="layer01"><imgsrc="image/photo-1.jpg"alt="日用品"/></div><divclass="layer02"><imgsrc="image/photo-2.jpg"alt="图书"/></div><divclass="layer03"><imgsrc="image/photo-3.jpg"alt="鞋子"/></div><divclass="layer04">浮动的盒子……</div></div>#father{overflow:hidden;border:1px#000solid;}10父级添加伪类after<divid="father"class="clear"><divclass="layer01"><imgsrc="image/photo-1.jpg"alt="日用品"/></div><divclass="layer02"><imgsrc="image/photo-2.jpg"alt="图书"/></div><divclass="layer03"><imgsrc="image/photo-3.jpg"alt="鞋子"/></div><divclass="layer04">浮动的盒子……</div></div>.clear:after{content:'';/*在clear类后面添加内容为空*/display:block;/*把添加的内容转化为块元素*/clear:both;/*清除这个元素两边的浮动*/}11清除浮动，防止父级边框塌陷的四种方法1浮动元素后面加空div简单，空div会造成HTML代码冗余2设置父元素的高度简单，元素固定高会降低扩展性3父级添加overflow属性简单，下拉列表框的场景不能用4父级添加伪类after写法比上面稍微复杂一点，但是没有副作用，推荐使用12display:inline-block可以让元素排在一行，并且支持宽度和高度，代码实现起来方便位置方向不可控制，会解析空格IE6、IE7上不支持float可以让元素排在一行并且支持宽度和高度，可以决定排列方向float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式定位position属性 static：默认值，没有定位 relative：相对定位 absolute：绝对定位 fixed：固定定位1static属性值2relative属性值 相对自身原来位置进行偏移偏移设置：top、left、right、bottom3absolute属性值偏移设置：left、right、top、bottom4fixed属性值偏移设置：left、right、top、bottom类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口5相对定位的特性相对于自己的初始位置来定位元素位置发生偏移后，它原来的位置会被保留下来层级提高，可以把标准文档流中的元素及浮动元素盖在下边相对定位的使用场景相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量6绝对定位的特性绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位元素位置发生偏移后，原来的位置不会被保留层级提高，可以把标准文档流中的元素及浮动元素盖在下边设置绝对定位的元素脱离文档流绝对定位的使用场景一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景7固定定位的特性相对浏览器窗口来定位偏移量不会随滚动条的移动而移动固定定位的使用场景一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等8调整元素定位时重叠层的上下位置z-index属性值：整数，默认值为0设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系z-index值大的层位于其值小的层上方六CSS3动画1会使用transform2D变形设置网页元素样式1如何在网页中实现动画效果？动态图片FlashJavaScriptCSS3变形CSS3过渡CSS3动画2CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化变形函数translate()：平移函数，基于X、Y坐标重新定位元素的位置scale()：缩放函数，可以使任意元素对象尺寸发生变化rotate()：旋转函数，取值是一个度数值skew()：倾斜函数，取值是一个度数值translateX（tx）表示只设置X轴的位移translateY（ty）表示只设置Y轴的位移translateX（tx）表示只设置X轴的位移translateY（ty）表示只设置Y轴的位移scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等scaleX(sx)：表示只设置X轴的缩放scaleY(sy)：表示只设置Y轴的缩放可以仅设置沿着X轴或Y轴方向倾斜skewX（ax）：表示只设置X轴的倾斜skewY（ay）：表示只设置Y轴的倾斜skew()函数是倾斜，元素不会旋转，会改变元素的形状参数a单位使用deg表示参数a取正值时元素相对原来中心顺时针旋转rotate()函数只是旋转，而不会改变元素的形状transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等CSS3transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡过渡属性（transition-property）定义转换动画的CSS属性名称IDENT：指定的CSS属性（width、height、background-color属性等）all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all过渡所需的时间（transition-duration）定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）过渡所需的时间（transition-duration）定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）过渡动画函数（transition-timing-function）指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式ease：速度由快到慢（默认值）linear：速度恒速（匀速运动）ease-in：速度越来越快（渐显效果）ease-out：速度越来越慢（渐隐效果）ease-in-out：速度先加速再减速（渐显渐隐效果）过渡动画函数（transition-timing-function）指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式ease：速度由快到慢（默认值）linear：速度恒速（匀速运动）ease-in：速度越来越快（渐显效果）ease-out：速度越来越慢（渐隐效果）ease-in-out：速度先加速再减速（渐显渐隐效果）过渡延迟时间（transition-delay）指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发负值：元素过渡效果会从该时间点开始显示，之前的动作被截断0：默认值，元素过渡效果立即执行伪类触发：hover：active：focus：checked媒体查询：通过@media属性判断设备的尺寸，方向等JavaScript触发：用JavaScript脚本触发2会使用transition制作过渡动画在默认样式中声明元素的初始状态样式声明过渡元素最终状态样式，如悬浮状态在默认样式中通过添加过渡函数，添加一些不同的样式3会使用animation制作网页动画七Ajax理解Ajax技术Web2.0的特点用户贡献内容内容聚合RSS更丰富的“用户体验无刷新：不刷新整个页面，只刷新局部无刷新的好处只更新部分页面，有效利用带宽提供连续的用户体验提供类似C/S的交互效果，操作更方便差异方式说明发送请求方式不同传统Web浏览器发送同步请求Ajax技术异步引擎对象发送请求服务器响应不同传统Web响应内容是一个完整页面Ajax技术响应内容只是需要的数据客户端处理方式不同传统Web需等待服务器响应完成并重新加载整个页面后用户才能进行操作Ajax技术可以动态更新页面中的部分内容不影响用户在页面进行其他操作Ajax：异步刷新技术掌握jQuery的$.ajax()方法传统方式实现Ajax的不足步骤繁琐方法、属性、常用值较多不好记忆处理复杂结构的响应数据（如XML格式）比较烦琐浏览器兼容问题$.ajax({"url":"url",//要提交的URL路径"type":"get",//发送请求的方式"data":data,//要发送到服务器的数据"dataType":"text",//指定传输的数据格式"success":function(result){//请求成功后要执行的代码 },"error":function(){//请求失败后要执行的代码 }});掌握JSON的使用JSON（JavaScriptObjectNotation）一种轻量级的数据交换格式采用独立于语言的文本格式通常用于在客户端和服务器之间传递数据JSON的优点轻量级交互语言结构简单易于解析掌握jQuery的$.get()和$.post()方法$.get(url[,data][,success][,dataType]);$.get(url,data,function(result){ //省略将服务器返回的数据显示到页面的代码});$.ajax({ "url":url, "data":data, "type":"get", "success":function(result){ //省略代码 }});$.post(url[,data][,success][,dataType]);$.post(url,data,function(result){ //省略将服务器返回的数据显示到页面的代码});$.ajax({ "url":url, "data":data, "type":"post", "success":function(result){ //省略代码 }});七使用jQuery操作DOM1使用jQuery操作CSS样式DOM操作分为三类：DOMCore：任何一种支持DOM的编程语言都可以使用它，如getElementById()HTML-DOM：用于处理HTML文档，如document.formsCSS-DOM：用于操作CSS，如element.style.color="green"jQuery对JavaScript中的DOM操作进行了封装jQuery中的DOM操作样式操作内容及Value值操作节点操作节点属性操作节点遍历CSS-DOM操作使用css()为指定的元素设置样式值或获取样式值追加样式selector).removeClass("class");或$(selector).removeClass("class1class2…classN");toggleClass()模拟了addClass()与removeClass()实现样式切换的过程hasClass()方法来判断是否包含指定的样式html()可以对HTML代码进行操作，类似于JS中的innerHTMLtext()可以获取或设置元素的文本内容val()可以获取或设置元素的value属性值jQuery中节点操作查找节点（前面章节已讲）创建节点插入节点删除节点替换节点复制节点工厂函数$()用于获取或创建节点$(selector)：通过选择器获取节点$(element)：把DOM节点转化成jQuery节点$(html)：使用HTML字符串创建jQuery节点jQuery提供了三种删除节点的方法remove()：删除整个节点empty()：清空节点内容detach()：删除整个节点，保留元素的绑定事件、附加的数据，将移出的元素作为返回值，并且带有数据和事件replaceWith()和replaceAll()用于替换某个节点clone()用于复制某个节点attr()用来获取与设置元素属性removeAttr()用来删除元素的属性children()方法可以用来获取元素的所有子元素jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素jQuery中可以遍历前辈元素parent()：获取元素的父级元素parents()：元素元素的祖先元素each()：规定为每个匹配元素规定运行的函数end()：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态除css()外，还有获取和设置元素高度、宽度等的样式操作方法使用jQuery操作网页元素使用jQuery操作文本与属性值内容使用jQuery操作DOM节点使用jQuery遍历DOM节点使用jQuery操作CSS-DOM八表单校验1掌握String对象的用法减轻服务器的压力保证输入的数据符合要求日期格式表单元素是否为空用户名和密码E-mail地址身份证号码会使用表单选择器选择页面元素表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素语法描述示例:input匹配所有input、textarea、select和button元素$("#myform:input")选取表单中所有的input、select和button元素:text匹配所有单行文本框$("#myform:text")选取email和姓名两个input元素:password匹配所有密码框$("#myform:password"

)选取所有<inputtype="password"/>元素:radio匹配所有单项按钮$("#myf