• 手机号码一般使用什么数据类型存储? char（11）
• QQ号 varchar（12）
• 性别一般使用什么数据类型存储? tinyint(1) 1-男，2-女 char(1) 男，enum 单选女
• 年龄信息一般使用什么数据类型存储? Unsigned tinyint(3)
• 照片信息一般使用什么数据类型存储? varchar(60) 直接存唯一的图片名
• 薪水一般使用什么数据类型存储? decimal(10,2) php要判断小数位不能有第三位
• 学员姓名允许为空吗? 不能（使用情况）
• 家庭地址允许为空吗? 个人中心设置可以为空，购物不能为空
• 电子邮件信息允许为空吗? 可个人中心可以，用邮箱注册账号
• 考试成绩允许为空吗? 不可以 给一个默认值0
• 在主键列输入的数值，允许为空吗? 不能
• 一个表可以有多个主键吗? 不能
• 在一个学校数据库中，如果一个学校内允许重名的学员，但是一个班级内不允许学员重名，可以组合班级和姓名两个字段一起来作为主键吗？ primary key(id,name)
• 表中没有合适的列作为主键怎么办？ 给他添加一个编号id
• 一个表可以没有主键吗？ 可以，一般使用没有主键的表都是中间表（存储两个表之间的关系）
• 如果标识列A的初始值为1，增量为1，则输入三行数据以后，再删除两行，下次再输入数据行的时候，标识值从多少开始？ 4

运算符

算术运算符

+ 加

– 减

*乘

/ 除 如果除数为0怎么办？ 得出的结果是null

% 取模(求余) 如果除数为0怎么办？ 得出的结果是null

算术运算符一般是应用到，结果字段运算上

Select (字段运算)字段表达式 [from ] [where]

关系运算符

< 小于

>大于

<= 小于等于

>=大于等于

= 等于(比较)

<> != 不等于

关系运算符主要用在哪个类型上 数值类型，也可以用在字符串类型

Select * from 表名 id>5

Select * from 表名 name=’李明’;

Select * from 表名 name!=’李明’;

逻辑运算符

and 条件同时满足为真

or 条件有一个满足为真

not 取反

高级查询

高级查询的格式

Select [all/distinct] 字段/字段表达式

[from 子句]

[where子句]

[group by 子句]

[having子句]

[order by子句]

[limit 子句]

子句的顺序固定

All

含义就是把查询出来的结果全部展示出来

distinct去除重复数据

as别名

使用方式 as 新名字，as关键字可以省略

Where条件

In

在某个范围内

找出type 是打野，或输出的英雄信息

一般会：select * from hero where type=’打野’ or type=’输出’;查询

其实还可以使用in来查询

字段名 In (值1，值2….);含义就是 该字段的值是小括号里边的任意一个

比较：or 和in

In比or使用更方便，如果需要再加满足的条件，只需要在小括号里边加一个值就行了而or需要使用两次or运算这样执行效率慢，语法繁琐

Is null /is not null

Is是判断，一般只和null连用，判断字段的值是否是null，如果是null就返回1，如果不是就返回0；

between…and

在什么范围之内，这个范围主要指数字

大于3小于8

Between 3 and 8; 包括3和8的

Between…and…表示不了不连续的范围，比如 在这些数字里边的 1,6,8,9

like模糊查询

模糊查询就是知道要查询信息的一部分内容，不是精确的内容的查询

英雄名字我只知道第一个是‘牛’ 那么我怎么查到这些英雄的信息呢？

通配符

就是占位的符号，有一定含义

1、’t_m’下列选项符合的条件的是（）

A：tm B：tom C:toom D:tam E:tmo

2、’张%’ 下列选项符合的条件的是（）

A：张三 B：张三丰 C：张牙舞爪 D：张 E：小张

3、’%诺基亚%’ 下列选项符合的条件的是（）

A：诺基亚2100 B :2100诺基亚 C：我的诺基亚质量很好 D：诺基亚

4、SELECT * FROM 数据表 WHERE 编号 LIKE ’00_A5%C’ （）

A、0890AC B、007_A51C C、00A54C D、00AA5C

group by分组

什么是group by分组查询，作用

分组查询是按照指定的字段来分组，分组的目的是为了统计

聚合函数

聚合函数就在分组的基础上求某一个字段的相关信息，返回的是一个单独的数据，也就是 ‘一行一列’

Sum求和

Avg平均值

Max最大值

Min 最小值

Count 数量

having条件

在原有查询出来的结果上过滤

比较having和where的区别

相似的地方都是条件—–过滤数据

不同的地方

• Where在分组之前执行，having在分组之后执行说白了，having就是在where过滤之后的结果之上，再次过滤数据
• Having过滤只能使用查询结果中有的字段，where过滤数据能使用表中的任何字段

回溯查询 with rollup

就是在分组的结果基础之上，再次进行相同的分组查询

扩展：我想在一次结果中查看到不同英雄的平均伤害，和所有英雄的平均伤害

order by排序

排序，按照某一字段从大到小排，从小到大排

从大到小排序 desc order by 字段名 desc 按照某个字段从大到小排序

从小到大排序 asc order by 字段名 asc按照某个字段从小到大排序

如果没有设置排序，会按照id从小到大排序展示出来

Id从大到小排序

limit限定

限定查询出来的结果显示多少条，从第几条开始显示显示多少条

Limit 数字 –从第一条开始显示多少条数据

Limit 数字 ，数字 —从第几条开始显示，显示多少条 不包括开始的那一条

实现：显示前四条数据

实现：从第5条开始，显示3条

高级查询案例

测试数据

• 找出伤害是前三的英雄信息

select name from hero order by hurt desc limit 3;

• 找出英雄名字中有’德’字的英雄

select name from hero where name like ‘%德%’;

• 找出每种技能的平均伤害

select skill,avg(hurt) from hero group by skill;

• 找出每种技能的平均伤害 和所有技能的平均伤害

select skill,avg(hurt) from hero group by skill with rollup;

• 找出平均技能伤害大于60的技能

select skill,avg(hurt) as 平均伤害 from hero group by skill having 平均伤害>60;

• 找出伤害最高的英雄信息（不要求掌握）

select name,hurt from hero where hurt= (select max(hurt) from hero);

高级新增

之前学的新增:insert [into] 表名 [(字段列表)] values (值列表);

要求，字段列表和值列表一致，每一次执行插入一条数据的

多值插入

语法： insert [into] 表名 [(字段列表)]

values (值列表), (值列表), (值列表)……;

例如：

insert into hero values

(null,’a’,1,2,50,60),

(null,’b’,1,2,50,60),

(null,’c’,1,2,50,60);

set方式插入

很少用，只需要知道就可以了

语法： insert 表名 set 字段1=值1，字段2=值2…；每次只插入一条数据

例如：

insert into hero set name=’d’,type=1,skill=2,hurt=23,waittime=6;

蠕虫复制

什么是蠕虫复制，这个类似细胞分裂

1 变 2

2 变 4

4 变 8

每次进行一个蠕虫复制的话，数据表的数据就是成倍的增加

当前表有10条数据，蠕虫复制了10次—-现在有多少条数据？1024*10

再蠕虫复制10次 1024*1024*10—-千万级数据

所以蠕虫复制需要防止；

例如：

语法 insert [into] 表名 values select 语句

Select 语句的查询结果字段和插入的字段列表一致（数量，类型）;

扩展：怎么防止蠕虫复制

加入unique key

replace插入

替换插入，如果插入的数据中在表中有（一个字段上—唯一建），那么会先把表中已有的数据删除，然后再插入

Replace[ into] 表名 [(字段列表)] values (值列表);

高级修改

Update 表名 set 字段1=值1 ,字段2=值2… where 修改条件;

排序限定条数修改

语法：update 表名 set 字段1=值1 ,字段2=值2… [where 条件] [order by 子句] [limit子句]

在修改的过程中可以限定修改的条数，和排序

我要修改英雄前三的伤害值 ，让伤害值加倍；

这里用到了排序 英雄伤害从高到低排序 order by desc

限定 修改前三条信息，让信息值加倍 limit 3

Update hero set hurt=hurt*2 [hurt+hurt] order by hurt desc limit3;

修改前，伤害前三的英雄信息

扩展：

回想limit 3；

Limit 4,2; 修改英雄伤害排名是5,6的伤害，让其加倍—update修改没有这样的用法

高级删除

delete from 表名 [where 条件] [order by 子句] [limit 子句]

排序限定条数删除

英雄伤害前2两名，英雄删除

Delete from hero order by hurt desc limit 2

删除前数据

删除伤害排名前两位的英雄，如果成功，德玛和诺克消失

扩展：能不能指定从第几条开始删除？

也就是delete语句中支不支持 limit 数字,数字;的用法

测试；删除伤害排名在第3，4的两个英雄

Sql: delete from hero order by hurt desc limit 2,2;

Truncate删除

清空表，除了清空表中的数据，还可以把表的自动增长归成1

Truncate请空表

清空完成的效果

联合查询

含义

什么是联合查询

联合查询是把两个查询结果放在一起来显示

联合查询就是把这个两个展示出来的结果放在一块展示

既然是纵向的连接：首先是字段的个数必须一致

基本形式

语法：select 语句 union [all/distinct] select 语句

注意点

• 第一纵向连接，两个结果集字段数量必须一致
• 第二如果需要对连接过后的结果集 进行排序那么必须把两个select语句用小括号包括起来

这个order by是对联合过后的结果进行排序

• 第三如果我们前边的select 语句查询的结果字段名，有别名，那么排序的时候必须用别名

错误原因：因为联合查询出来的结果集中没有id这个字段名，原来的id改成了编号，如果想用id进行排序，难么只能使用 ‘编号’这个名称；

• 第四联合查询结果的字段名，默认是第一个select语句查询出来的字段名

PHP语法（三）

运算符

算术运算符

脚下留心：

1. PHP中的“+”只能做数字运行，不能做字符串运算。
2. ++和–要注意前置和后置的问题

比较运算符（关系运算符）

注意：比较运算符的运算结果是布尔型的

不等于

逻辑运算符

逻辑运算符是用来连接比较运算符的。

练习

true && true true

true && false false

false && true false

false && false false

true || true true

true || false true

false || true true

false || false false

!true false

!false true

例题

赋值运算符

总结 ：= 赋值 == 等于 === 全等

字符串连接符（.）

错误控制运算符（错误抑制符 @）

@用来屏蔽表达式错误，只对表达式有效。

三元运算符（?:）

语法：表达式?值1：值2

如果表达式为真，返回值1，否则返回值2

位运算符（了解）

例题

运算符的优先级

1. 第一步：小括号的优先级最高
2. 第二步：先乘除后加减
3. 第三步：算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符

$a=5;

$b=6;

$a>$b && ($a+$b)>$b*2 || !($a==$b)

=false && false || true

=true

两个常用于判读变量的函数

在处理一个没有定义的变量的时候回报错

我们在使用变量之前，向判读一下变量，判读变量的函数有两个

例题：

流程控制的三大基本结构

1. 顺序结构
2. 判断
3. 循环

判断语句

语法结构

1. 单分支

if(条件){

}

1. 双分支

if(条件){

}else{

}

1. 多分支

if(条件){

}

elseif(条件){

}

elseif(条件){

}

else{

}

注意：多分支else和if之间是没有空格的。

1. 多路选择

Switch(表达式){

case 常量:

[break];

case 常量:

[break];

default

}

例题：判断闰年（双分支）

1. empty()：如果$_POST为空表示没有post提交，不为空表示表达有post提交
2. trim()：去除字符串两边的空格
3. is_numeric()：判断变量是否是数字或数字字符串
4. $year+=0;将$year转成数字类型
5. is_int()：判断变量是否是整型

<?php

if(!empty($_POST)) { //数组不为空说明点击了提交按钮

$year=trim($_POST[‘year’]); //获取年份,trim()用来去字符串两边的空格

if($year==”){

echo ‘您没有输入’;

}else{

if(!is_numeric($year)){

echo ‘您输入的不是数字’;

}else{

$year+=0; //将$year转成数字类型

if(is_int($year)){ //is_int()检查变量是否是整型

if($year<1)

echo ‘您输入的年份必须正整数’;

else {

/**

*润年的条件

*1、能被4整除，但是不能被100整除

*2、能被400整除的年份

*/

if($year%4==0 && $year%100!=0 || $year%400==0)

echo “{$year}是闰年”;

else

echo “{$year}是平年”;

}

}else{

echo ‘您输入的年份不是整数’;

}

}

}

}

?>

<form method=”post” action=””>

请输入年份： <input type=”text” name=”year”> <br />

<input type=”submit” name=”button” value=”判读闰年”>

</form>

例题：判断成绩（多分支）

<?php

if(!empty($_POST)) {

$ch=trim($_POST[‘ch’]); //获取语文成绩

$math=trim($_POST[‘math’]); //获取数学成绩

if($ch==” || !is_numeric($ch) || $ch<0 || $ch>100)

echo ‘语文成绩必须在0-100之间’;

elseif($math==” || !is_numeric($math) || !($math>=0 && $math<=100))

echo ‘数学成绩必须在0-100之间’;

else{

$avg=($ch+$math)/2;

echo ‘您的平均分是：’.$avg.'<br>’;

if($avg>=90)

echo ‘孩子，你是我的骄傲’;

elseif($avg>=80)

echo ‘好样的，宝贝’;

elseif($avg>=70)

echo ‘您离优秀不远了’;

elseif($avg>=60)

echo ‘您还是有潜力的’;

else

echo ‘看来你不努力是不行了’;

}

}

?>

<form method=”post” action=””>

语文： <input type=”text” name=”ch”> <br />

数学： <input type=”text” name=”math”> <br />

<input type=”submit” name=”button” value=”提交”>

</form>

例题：switch-case

<div id=”shi” class=””>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。

</div>

<form method=”post” action=””>

<select name=”color”>

<option value=””>—请选择颜色—</option>

<option value=”1″>红色</option>

<option value=”2″>绿色</option>

<option value=”3″>蓝色</option>

</select>

<input type=”submit” name=”button” value=”确定”>

</form>

<?php

if(!empty($_POST)) {

$color=$_POST[‘color’];

switch($color) {

case 1:

$color=’#FF0000′;

break;

case 2:

$color=’#009900′;

break;

case 3:

$color=’#0000FF’;

break;

default:

$color=’#000000′;

}

/*

echo ‘<script type=”text/javascript”>’;

echo “shi.style.color='{$color}'”;

echo ‘</script>’;

*/

//换一种写法

?>

<script type=”text/javascript”>

shi.style.color='<?php echo $color?>’;

</script>

<?php

}

?>

注意如下两种写法

替代语法

左大括号变冒号（:），右大括号变endXXX

单分支

if(条件):

endif;

双分支

if(条件):

//代码1

else:

//代码2

endif;

多分支

if(条件):

//代码1

elseif(条件):

//代码2

else:

//代码3

endif;

switch-case

switch(表达式):

case :

break;

endswitch;

else if和elseif的区别

elseif是多分支；else if是嵌套if语句

else if等价于

else{

if(){

}

}

验证一下

循环语句

循环的分类

1. for
2. while
3. do-while
4. foreach

语法

1. for循环

for(初始值;条件;增量){

//循环体

}

1. for循环的替代语法

for(初始值;条件;增量):

//循环体

endfor;

1. while循环

while(条件){

//循环体

}

1. While循环的替代语法

While(条件):

Endwhile;

do-while循环

do

{

//循环体

}while(条件)

注意：判断和循环体中如果有一句代码，大括号是可以省略的。

循环的思考

1. 在一个循环了n次的循环中，初始值、条件、增量各执行了几次

答：初始值1次，条件n+1次，增量n次

1. for($i=1;$i!=5;$i++)循环了几次？

答：循环4次

1. 循环执行完毕后，$i的变量是否存在？

答：存在

例题：三种循环实现从1加到任意数

<?php

if(isset($_POST[‘button’])) {

$num=$_POST[‘num’];

//for循环实现

$sum=0;

for($i=1; $i<=$num; $i++) {

$sum+=$i;

}

echo “for循环实现结果是:{$sum}<br>”;

//while循环

$sum=0;$i=1;

while($i<=$num) {

$sum+=$i++;

}

echo “while循环实现结果是:{$sum}<br>”;

//do-while循环

$sum=0;$i=1;

do

{

$sum+=$i++;

}while($i<=$num);

echo “do-while循环实现结果是:{$sum}<br>”;

}

?>

<form method=”post” action=””>

请输入一个数： <input type=”text” name=”num”> <br />

<input type=”submit” name=”button” value=”提交”>

</form>

例题：翻转数组

1. 给数组添加元素
2. 两个变量调换
3. for循环中初始值，条件，增量的部分可以放多个表达式

面试题：不通过第三个变量如何实现两个变量的交换?

foreach循环

foreach循环用来遍历数组

语法：

//语法一

foreach(数组 as 值){

}

//语法二

foreach(数组 as 键=>值){

}

//foreach也支持替换语法

foreach(数组 as 值):

endforeach;

例题

例题：

跳转语句

1. break：中断所有循环
2. continue：跳出当前循环进入下一个循环

注意：

1. break和continue默认中断1重循环。
2. 如果一个循环只循环一次，break和continue的结果是一样的

1. switch的本质是循环了一次的循环

例题

包含文件

相同的代码出现在多个页面中，不便于维护，我们将相同的代码分离开来，在需要用到的页面中引入包含文件即可。

解决：我们将相同的代码分离开来，在需要用到的页面中引入包含文件即可

包含的语法

1. include ‘地址’：可以包含多次，如果有错，报警告错误，继续执行
2. require ‘地址’：可以包含多次，如果有错，报致命错误，终止执行。
3. include_once ‘地址’：只能包含一次，区别和include一样
4. require_once ‘地址’：只能包含一次，区别和require一样

如果HTML包含文件中有PHP代码，包含文件的PHP代码是执行的。 因为包含文件就相当于拷贝粘贴到PHP页面中了。

作业

1. PHP实现计算器

1. 九九乘法表

JavaScript（一）

作业

第一题

<style type=”text/css”>

body{

background-color:#0CF;

}

input[type=’text’]{

border-top:none;

border-left:none;

border-right:none;

border-bottom:#06C solid 1px;

background-color:transparent; /*背景色透明*/

}

input[type=’button’]{

border:none;

background-color:transparent; /*背景色透明*/

cursor:pointer; /*当鼠标移上去的时候变成手形*/

}

</style>

</head>

<body>

<div>请输入信息：<input type=”text” name=”username” /><input type=”button” value=”确定>>>” /></div>

第四题

分析页面结构如下：

页面总宽度：8+206+500+8=722

页面总高度：110+519=629

难点：

实现代码

<style type=”text/css”>

#content{

width:722px;

height:629px; /*为了#left,#right高度100%，指定父元素高度*/

overflow:hidden; /*重新测定子元素的高度*/

margin:auto; /*页面居中*/

}

#content #left,#content #right{

width:8px;

height:100%; /*背景无法撑开盒子，所以要设定高度*/

background:url(images/line1.gif) repeat-y;

float:left;

}

#content #right{

background:url(images/line2.gif) repeat-y;

}

#content #center{

width:706px;

float:left;

}

#content #center>div{

float:left;

}

#content #center #part1{

width:206px;

background-color:#ECDFBC;

/*text-align:center;*/ /*图片居中方法一*/

}

#part1 img{

margin:auto; /*图片居中方法二*/

display:block; /*设置块显示才能使用margin:auto来居中*/

}

#content #center #part4{

width:500px;

height:519px;

background:url(images/b-04.jpg);

padding-top:30px;

}

#part4 #wenzi{

width:90%;

font-size:14px;

font-family:’微软雅黑’;

margin:auto;

}

</style>

</head>

<body>

<div id=”content”>

<div id=”left”></div>

<div id=”center”>

<div id=”part1″><img src=”images/xihuzi2.gif” /></div>

<div id=”part2″><img src=”images/5.jpg” /></div>

<div id=”part3″><img src=”images/6.jpg” /></div>

<div id=”part4″>

<div id=”wenzi”>

<header style=”text-align:center”>西湖春天简介 </header>

<p> 　　西湖春天是一家经旅游局批准，工商局登记注册，具有独立法人资格，并足额缴纳旅行社质量保证金的股份制企业。<br />

公司下设组团部、地接部、导游部、财务部、石浦门市部、丹城门市部等机构，承接旅游、休闲、度假、疗养、会务、商务考察等业务，公司管理高度重视人力资源的合理利用和开发，现已拥有一批长期从事旅游工作、精通各项旅游业务、重信誉、讲实效、高素质的管理人员和一支训练有素、经验丰富的导游队伍，并且已做到人人持证上岗。<br />

公司凭借象山旅游发展大好趋势，结合自身的规模优势，全力打造出&ldquo;西湖春天&rdquo;的旗帜品牌形象。目前，公司开发的公司网站，可以让您广泛的了解旅游信息。<br />

公司自成立以来，坚持以&ldquo;质量就是生命&rdquo;的座右铭，虚心接受客户的监督，不断完善管理机制，全体员工积极进取，开拓创新、奋发图强；公司连续获得2003年度《安全生产先进集体》、《浙江省旅游消费推荐单位》、《&ldquo;安康杯&rdquo;竞赛优胜企业》、2004年度《石浦首届旅游消费诚信单位》等荣誉称号。<br />

公司与国内众多旅行社建立了良好的义务关系，在主要城市已形成了客房、餐饮、交通等完善的旅游服务网络，&ldquo;西湖春天&rdquo;全体工作人员将以最合理的旅游线路，最实惠的价格，最细致的服务，热诚期待您的到来。</p>

</div>

</div>

</div>

<div id=”right”></div>

</div>

圆角矩形

区分上下左右四个点

例题

<style type=”text/css”>

div{

width:100px;

height:100px;

border:#000 solid 1px;

margin:5px auto;

}

div:nth-of-type(1){

border-radius:10px; /*四个点的圆角半径都是10px*/

}

div:nth-of-type(2){

border-radius:10px 20px; /*上下10px 左右20px*/

}

div:nth-of-type(3){

border-radius:10px 20px 30px; /*上10px 左右20px 下30px*/

}

div:nth-of-type(4){

border-radius:10px 20px 30px 40px; /*上右下左*/

}

div:nth-of-type(5){

border-radius:50%; /*正圆*/

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

圆角矩形的应用

<style type=”text/css”>

body{

background:#999;

}

div{

width:200px;

height:200px;

padding:10px;

border:#000 solid 1px;

border-radius:10px;

background-color:#CCC;

}

#face{

border-radius:50%;

}

</style>

</head>

<body>

<div><img src=”images4/face.jpg” /></div>

<img src=”images4/face.jpg” id=”face” />

2D转换

在二维平面上桌变化，关键字：transform

2D转换之移动（translate）

例题：让div居于屏幕的中间

<style type=”text/css”>

div{

width:200px;

height:200px;

background-color:#900;

position:absolute;

left:50%;

top:50%;

/*transform:translateX(-50%) translateY(-50%);*/

transform:translate(-50%,-50%)

}

</style>

<div></div>

2D转换之旋转

2D转换之缩放（scale）

<style type=”text/css”>

img{

transform:scaleX(1.5); /*x轴是原来的1.5倍*/

transform:scaleY(0.5); /*y轴是原来的0.5倍*/

transform:scale(0.5,0.5); /*同时设定x轴和y轴的缩放*/

}

</style>

<img src=”images4/face.jpg” width=”200″ height=”200″ />

例题：三角做法

<style type=”text/css”>

div{

width:300px;

height:30px;

border:#999 solid 1px;

margin:100px auto;

position:relative;

}

div:after{

content:”;

width:12px;

height:12px;

display:inline-block;

position:absolute;

right:12px;

border-right:#999 solid 1px;

border-bottom:#999 solid 1px;

transform:rotate(45deg) translateY(10px);;

}

div:hover{

border:#00F solid 1px;

}

div:hover:after{ /*必须先写:hover，后写:after*/

border-right:#00F solid 1px;

border-bottom:#00F solid 1px;

}

</style>

<div></div>

过渡（transition）

动画类型有：

例题（对象移动）：

<style type=”text/css”>

div{

width:200px;

height:200px;

background-color:#F00;

transition:all 1s ease;

}

div:hover{

transform:translateX(500px);

}

</style>

<div></div>

例题：（头像旋转）

<style type=”text/css”>

img{

border-radius:50%;

transition:all 0.5s ease;

}

img:hover{

transform:rotate(360deg);

}

</style>

<img src=”images4/face.jpg” />

例题：（头像变大）

<style type=”text/css”>

ul{

list-style-type:none;

margin:10px auto;

padding:0px;

overflow:hidden;

}

li{

width:200px;

height:200px;

border:#000 solid 1px;

margin:5px;

float:left;

overflow:hidden;

}

img{

transition:all 0.5s ease;

}

img:hover{

transform:scale(1.1);

}

</style>

<ul>

<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>

<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>

<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>

</ul>

Sublime介绍

1. 生成HTML框架结构

按tab键或ctrl+E生成

注意要将页面保存再按快捷键生成

常用的其他技巧

什么是JavaScript

1. JavaScript是一种解释型的，基于对象的脚本语言。
2. Javascript（JS）可以运行在客户端，也可以运行在服务器端。默认是运行在客户端。

script：脚本

页面的执行过程

解释型与编译型

要看一门语言是否是解释型还是编译型，主要看是否会生成中间文件。

运行在客户端的语言都是解释型

运行在服务器端的语言都是编译型。

脚本语言

脚本语言也是语言一种，脚本语言的特点要结合其他语言一起实现功能。

JavaScript的应用场景

1. 客户端特效
2. 验证表单

变量

变量就是一个会变的量

x+1=2 x=1

x+10=20 x=10

变量就是内存中的一段空间

变量的命名规则

1. 变量以字母、下划线，$开头，后面跟的在字母、数字、下划线，$
2. 关键字不能做变量名
3. 变量名区分大小写（aa和Aa是两个空间）

下列变量名是否合法

1. aa 合法
2. a1 合法
3. 1a 不合法（不能以数字开头）
4. _1a 合法
5. a-1 不合法
6. a% 不合法
7. x 合法
8. do 不合法（关键字不可以做变量名 if for else case …）

声明变量

通过var关键字来声明变量。

声明变量有两种方法

1. 显式声明：通过var关键字声明后使用
2. 隐式声明：不声明，直接使用

输出的方法

1、document.write(‘锄禾日当午’); //输出在浏览器上

2、alert(‘锄禾日当午’); //弹出一个对话框（就是window.alert()）

3、prompt()：弹出一个用于输入的对话框

4、弹出一个对话框，有“确定”和“取消”按钮

5、console.log(‘锄禾日当午’)：在控制台输出，用于代码调试

几个需要记忆的单词

1. window：窗口
2. document：文档
3. console：控制台
4. log：日志

变量数据类型

变量的数据类型取决于变量中存储的值。如果存放的是数字就是数字型，存放字符串就是字符串型。

基本数据类型

特殊数据类型

typeof：显示变量的数据类型

多学一招：JS支持八进制，十进制，十六进制。

多学一招：JS支持无穷大

JavaScript的基本语法规则

1. 解释型语言，可以随时运行
2. 大小写敏感
3. 弱类型语言（变量的数据类型取决于存放的数据）
4. 分号表示语句的结束（也可以使用换行替代分号，但不推荐）

注释

1. 单行注释： //
2. 多行注释： /* */

运算符

赋值运算符（=）

a=5：将5付给a

算术运算符

注意：

1、“+”除了做数字运算，还可以做字符串相加，字符串相加就是字符串相连。

2、字符串和数字相加，将数字转成字符串型再相连

3、字符串只能做加法，不能做减法，不能做乘法，不能做除法。

4、取模就是取余数

自增

++前置：先自增，后运行

++后置：后自增，先运算

作业：

1. 实现旋转的效果