一. html:超文本标记语言,运行在浏览器上,由浏览器解析
1.格式
<!doctype html> 声明文档类型,说明html版本号
<html> 说明代码格式
<head> 网页的头部
<meta charset="utf-8"> 定义网页字符集,关键词等内容:例如:<meta name=”keywords” content=”html”>
<title>无标题文档</title> 网页的标题
<link rel="shortcut icon" href="../monkey.ico"> 标题前面的图标
</head>
<body> 网页的主体部分
</body>
</html>
2.注释
<!--这是注释内容-->
3.html代码
a.标签的写法: <标签名 属性名=”属性值”>内容</标签名>
b.标签可以嵌套:将一个标签作为另一个标签的内容
c.标签特性:①:行标签,不能改变宽高,大小随内容改变,不默认占一行
②:行内块标签:可以设宽高,不默认占一行 <span></span>
③:块标签:可以设宽高,默认占一行 如<div></div>
注意事项:先写完整的标签,再添加内容和属性 所有符号都是英文 注意缩进
4.无序列表和有序列表
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
5.锚点链接
<a href="" name="top">顶部</a>
<a href="#top">返回顶部</a> 点击返回本页面顶部的位置
6. 表单
普遍文本框：<input type=”text” name=”名称” value=”值：不写value默认为空” />
密码框：<input type=”password” name=”名称” value=”值，不写value默认为空” />
单选按钮：<input type=”radio” name=”一组名称” value=”值” ./>
多选框：<input type=”checkbox” name=”一组名称” value=”值” />
下拉菜单：
<select name=”名称”>
<option value=”值”>描述</option>
<option value=”值”>描述</option>
</select>
提交按钮：<input type=”submit” value=”显示到按钮上名称” />
普通按钮：
<input type=”button” name=”值” value=”名称” />
隐藏域：在浏览器中看不到的传递数据表单
<input type=”hidden” name=”值” value=”值” />
多行文本域：<textarea value=”值” name=”名称”></textarea>
Form标记，是表单域的显示，需要用form标记把表单内容括起来，这个时候才可以提交，原因是form的属性中有：提交方式(get和post)、提交地址(具体提交页面)、上传文件的设置(如果不设置无法上传)
提交地址：action=”具体提交地址”
提交方式：method 值：get和post,在网站中数据直接的传递，只有get和post方式
7. 表格
<table>
<tr>
<th></th> 表头
<th></th>
<th></th>
</tr>
<tr>
<td></td> 单元格
<td></td>
<td></td>
</tr>
</table>
border:边框
cellpadding：内填充（边框到内容的距离） 值：数字
cellspacing：间距（单元格到单元格之间的距离） 值：数字
二. css:层叠样式表 cascading style sheets,给html标签添加样式
1.语法
选择器 {属性名:属性值}
2. 引入方式
①. 内嵌:将css放到html的<head></head>中:例如:<head><style>div{100px;}</啊style></head>
②. 行内:直接写到标签里面:<div style=”width=’100px’”></div>
③. 外联:引用一个外部的css文件 :<link rel=”stylesheet” type=”text/css” href=”css文件的位置”></link>
3. 选择器
①通配符选择器:* 选择所有标签
②元素(标签)选择器:标签名作为选择器
③类选择器:一类元素(class名字相同的一组标签), .class名字
④id选择器:某个元素 #id名字
⑤多元素选择器:div,p,ul{}
⑥后代选择器: 第一代 第二代 第三代... {} 例如: .div p span{}
<div class=”div”>
<p>
<span></span>
</p>
</div>
⑦子类选择器:第一代的(子孙)例如: .div>span{}
<div class=”div”>
<p>
<span></span>
</p>
</div>
⑧伪类选择器:
.div:hover{color:red}
4. 常用的css属性
① 文字属性
font-size:文字大小 px %
font-family:字体类型
font-style:斜体 italic
font-weight:加粗 bold 100-900
②文本属性
color 文本颜色 3种写法:rgb(0-255,0-255,0-255) 十六进制(#000000-ffffff) 单词(red blue)
text-align 文本水平对齐方式(必须在块元素中) left center right
text-decoration 文本修饰线 underline(下划线) overline(上划线) line-through(删除线) none(a标签删除默认的下划线)
line-height 行高
③ 尺寸属性
Width 宽 px %
Height 高 px %
④ 列表属性
对ul ol进行样式修改
list-style-type 列表前面的符号 none(无)
border 边框
border-bottom 下边框
border-top 上边框
border-left 左边框
border-right 右边框
⑤ 背景属性
background-color 背景颜色 3种写法:rgb(0-255,0-255,0-255) 十六进制(#000000-ffffff) 单词(red blue)
background-image 背景图片 url 路径
background-repeat 背景平铺 no-repeat不平埔
background-position 背景定位 x轴和y轴定位 例如:background-position:50px 50px;
background 简写形式 颜色 图片 平铺方式 定位
⑥ 盒子模型
在html中的每个元素可以是一个盒子形状来存在
外边距:margin 边框:border 填充:padding
padding-top 上内填充 如：padding-top:10px;
padding-right 右内填充 如：padding-right:20px;
padding-bottom 下内填充 如：padding-bottom:30px;
padding-left 左内填充 如：padding-left:40px;
padding 简写形式 padding:10px; //4边都是10
padding:10px 20px; //上下各10.左右各20
padding:10px 20px 30px; 上10，左右各20，下30
padding:10px 20px 30px 40px; 按上右下左的顺序
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
margin 简写形式:margin:10px; //4边各10
margin:10px 20px; //上下各10，左右各20
margin:10px 20px 30px; //上10，左右各20，下30
margin:10px 20px 30px 40px; //按上右下左的顺序
⑦ 浮动float
Float 浮动 left right
⑧ 定位
position 定位 fixed:固定定位 relative:相对定位 absolute:绝对定位
fixed 以浏览器窗口来定位
relative 定位元素相对与原来的自己进行的定位,原来的位置依然占用
absolute 定位元素相对于他的父级及以上级进行的定位
⑨兼容性
浏览器的显示效果不一样造成浏览器在显示上有差异
这就要求在网页布局时考虑其兼容性: a,给页面设置最大最小宽
B,在css中设置 *{margin:0px;padding:0px;}
⑩优先级
选择器: id>class类>后代>子类>元素(标签)>通配符
形式: 行内>内嵌>外链
⑪其他常用属性
overflow hidden 溢出部分隐藏
z-index 元素的叠加层级,值越高显示的层级越高 例如:z-index:10
cursor 鼠标显示效果 例如变小手:cursor:pointer
三. 6Javascript
1. 应用场景
网页的动态效果
用户和浏览器之间的交互
Html文件与服务器之间的交互
2. js语法
① 嵌套: 可以放在html中,head标签里面,body标签里面......但javascript的代码必须在<script></script>标签中
② 外部引用: <script type=”text/javascript” src=”路径”></script>
3. 变量(全局变量 局部变量)
① 变量就是计算机中保存数据的容器
② 在javascript中通过关键字var来声明变量
③ 命名规范: 变量名由字母 数字下划线组成 以字母开头 不能用纯数字作为变量名 区分大小写 不要与js的关键字重复
④ 输出变量 alert() 浏览器弹窗输出变量内容
console.log() 在控制台输出
document.wirte() 向body里面写入内容
document.title() 向标题里面写入内容
4. javascript的数据类型
① 字符串
② 数值类型 整数int 小数float
③ 布尔类型 true false
④ 数组类型
⑤ 对象类型{属性名:属性值} js的变量都是一个对象,当声明一个变量时就创建了一个对象
⑥ Null 空
⑦ Undefine 变量不含有值
5. javascript数据类型转化
① 自动类型转化
当字符串和数值类型的数据,进行加法运算时,数值会自动转化为字符串
Var a=’1’//字符串; var b=1//数值; console.log(a+b);//11 字符串
② 强制类型转化
通过javascript函数,强制转换
number() 将其他类型的数据强制转化为数值
parseInt() 将其他类型的数据转换为整数
parseFloat() 将其他类型的数据转换为小数
string() 将其他类型的数据转换为字符串
boolean() 将其他类型的数据转换为布尔类型
Var str = ‘abc123’;
var num=number(str);//NaN
Var num = parseInt(str);//123
6. javascript运算符
① 算数运算符
+ - * / % ++ --
说明:+可以拼接字符串
++或--在前:先增值或减值,再运算
++或--在后:先运算,再值改变
② 赋值运算符
= += -= *= /= %=
③ 比较运算符
> < == === != !== >= <=
说明:==比较值是否相等
===比较值和数据类型是否相等
④ 逻辑运算符
&&与 || 或 !非
⑤ 三元运算符
条件 ==true ?true执行这里:false执行这里
例如: var result = age>=18 ? ‘可以谈恋爱’:’不能谈恋爱’;
7. javascript流程语句
单路分支:if(){}
双路分支:if(){
}else{}
多路分支:
条件是一个范围时:
if(){
}else if(){
}else if(){
}
条件是固定的几个点时:
switch(){
case:
break;
}
嵌套分支:if(){
if(){}
}
循环
for循环:计数循环 遍历数组(索引数组)
while()
do while()
8. javascript内置对象
Javascript是基于对象的编程语言,就是由一个一个的对象组成的编程语言
① 数组对象
length: 数组的长度,数组元素的个数
concat:合并数组: var arr1=[‘zhangsan’,’lisi’]; var arr2 = [‘wangwu’,’maliu’]
Var arr = arr1.concat(arr2);
join():将数组的元素链接成字符串: var arr1=[‘zhangsan’,’lisi’]; var result = arr1.join(‘@’);
push():向数组的末尾推加元素 var arr1=[‘zhangsan’,’lisi’]; arr1.push(‘wangwu’);
unshift():向数组的开头添加元素
pop():将数组最后一个元素删除 var arr1=[‘zhangsan’,’lisi’]; arr1.pop();
shift():删除数组第一个元素
reverse():颠倒数组的顺序 var arr1=[‘zhangsan’,’lisi’];arr1.reverse();
slice(开始的索引,结束的索引) 截取数组的元素;var arr1=[‘zhangsan’,’lisi’,’wangwu’]; var arr2=slice(0,1);
splice(开始的索引,删除元素的个数,代替删除的内容(可选)) 删除数组的元素
toString() 将数组转化为字符串 var arr1=[‘zhangsan’,’lisi’];var result = arr1.toString();
② 字符串对象常用的方法
indexOf() 获取字符在字符串中第一次出现的位置 也可以着数组元素的位置
例如:var str = “hello”; var index=str.indexOf(o);//index结果为4
lastIndexOf() 获取字符在字符串中最后一次出现的位置
split() 按照分隔符将字符串拆分成数组
例如:var str = “zhangsan@lisi”; var arr = atr.split(“@”);//arr的结果为[‘zhangsan’,’lisi’]
slice() 截取字符串 同数组
substr(开始截取位置,截取长度)
③ 数学对象
Math.abs() 取绝对值
Math.ceil() 向上取整数(取天花板数) 例如:Math.ceil(5.2)结果为6
Math.floor() 向下取整数(取地板数) 例如:Math.ceil(5.2)结果为5
Math.round() 四舍五入取整数
Math.max() 取最大值
Math.min() 取最小值
Math.random() 取0到1之间的随机数
④ 日期对象
Var date=new Date();//日期对象
Var year = date.getFullYear();//年
Var month = date.getMonth()+1//月 值是0到11 所以要加1
getHours()//小时
getMinutes()//分钟
getSeconds()//秒
getTime() 获得当前的时间戳,单位为毫秒
9. Javascript dom对象
Js里面的dom就是将html里面的标签转化为js的对象(找到对象,操作对象)
document.getElementById
document.getElementsByclass
document.getElementsByname form表单有name属性,所以该方法主要针对的是表单选项
document.getElementsByTagName
① 操作属性
Dom为对象:
方法一:dom.属性名 如:dom.id=””;
方法二:dom.setAttribute(‘id’,’age’);//设置id为age
dom.getAttribute(‘id’);//读取id属性的值
dom.removeAttribute(‘id’);//移除id属性
② 操作内容
innerText 仅操作标签中文字内容部分
innerHTML 可以操作标签及标签的文字
③ 操作样式
Dom.style.color........
10. Javascript location对象
操作url地址栏
11. Javascript 定时器
setInterval() 设置定时器//每隔一定时间运行一次
clearInterval() 清除定时器
setTimeout() 设置延迟执行//延迟一定时间后执行一次(就执行一次)
clearTimout() 清除定时器
12. Javascript 事件
用户和网页发生交互时的一些行为 鼠标点击 鼠标移入移出 键盘按下 弹起
① 事件分类
鼠标事件:
click() 单击
dblclick() 双击
mouseover() 鼠标移入
mouseout() 鼠标移出
mousemove() 鼠标移动
mousedown() 鼠标按下
mouseup() 鼠标松开
scroll 鼠标滚动
键盘事件
keydown 按键按下
keyup 按键弹起
表单事件
submit 表单提交
select 文本框文本被选中
focus 获得焦点
blur 失去焦点
change 内容改变
页面加载完成事件
load
四. Ajax
异步的javascript和xml,在不重新加载整个页面的情况下,就可以与服务器交换数据并更新部分网页
① 创建对象的兼容性:
var xhr = new XMLHttpRequest();//这是主流的浏览器
Ie6:new ActiveXObject(“Msxml.HTTP”)
Ie5.5:new ActiveXObject(“Microsoft.HTTP”)
创建对象想兼容别的浏览器可以这样:
var xhr;
try{
xhr = new XMLHttpRequest();
}catch(e){
try{
xhr = new ActiveXObject("Msxml.HTTP");
}catch(e){
try{
Xhr = new ActiveXObject("Microsoft.HTTP");
}catch(e){
}
}
}
②写法
说明:open中的第三个参数可以省略,默认为true(异步),false为同步
Get和post请求的区别:
Get方式请求,在url地址栏传递数据,并且send里面为null,传输的数据比较小2k左右
Post方式请求,需要设置头信息,数据是通过send发送的 传输的数据大小原则上不受限制,可从php配置文件中更改
五. jQuery
jQuery是一个javascript函数库,较js代码量更少,更简洁
①. jQuery选择器
Id选择器:$(‘#id’)
Class选择器:$(‘.class')
元素选择器:$(‘标签名’)
特殊的选择器:$(this)
②. 操作元素
说明:jqDom为jQuery对象
查询属性:jqDom.attr(属性名)
设置属性:jqDom.attr(属性名,属性值)
删除属性:jqDom.removeAttr(属性名)
③. 操作内容
说明:jqDom为jQuery对象
获取内容:jqDom.html()
设置内容:jqDom.html(要设置的内容)
获得标签的文本内容:jqDom.text()
设置标签的文本内容:jqDom.text(要设置的文本内容)
获得表单的value值:jqDom.val()
设置表单的value值:jqDom.val(值内容)
④.css样式的操作
说明:jqDom为jQuery对象
jqDom.css(属性名,属性值) 例如:jqDom.css(‘background’,’red’)
⑤.Ajax
$ajax({
url:’li.php’,//请求后台的php页面
data:{type:’init’},//传的参数
type:’post’, //提交数据的方式
dataType:’json’, //返回数据的格式,不填默认为text格式
success:function(data){ //请求成功后返回数据的函数
alert(data);
}
})
六. 数据库(mysql)
1. mysql的基本语法
①. 注释
单行注释:#注释内容
单行注释:-- 注释内容(两个-后面有个空格)
多行注释:/*注释内容*/
②. 语句
一条语句也称为一条命令,以分号结束,也可以通过’delimiter 新结束符’来修改结束符
③. 大小写:mysql中的系统关键字及命令本身不区分大小写
④. 命名规范
数据库名,表名,字段名,视图名,函数名等等,建议用字母和下划线,字母全用小写
2. 库操作
①. 创建数据库
库选项: 字符集 校对集
create database 数据库名字 库选项;
例如:create database school charset utf8;
②. 查询所用数据库
show databases;
③. 查询数据库创建语句
show create database school;
④. 修改数据库
不能修改数据库名,只能修改字符集和校对集
alter database school charset=gbk collate=gbk_chinese_ci;
⑤. 删除数据库
drop database 数据库名;
⑥. 选择数据库
use 数据库名;
3. 表操作
①. 创建表
create table 表名(
字段名1 字段类型 字段选项,
字段名2 字段类型 字段选项,
......
)表选项
例如:create table student(
sno varchar(20) not null primary key comment '学号',
sname varchar(20) not null '学生姓名',
ssex varchar(20) not null comment '学生性别',
sbirthday datetime comment '学生出生年月',
class varchar(20) comment '学生所在班级'
) charset=utf8 collate=utf8_general_ci;
字段类型:
②. 删除表
drop table 表名;
③. 查看表
查看所有表:show tables;
查看表结构:desc 表名;
查看创建表语句:show create table 表名;
④. 修改表
修改表名:alter table 旧表名 rename[to] 新表名;
添加新字段: alter table 表名 add 新字段 字段类型 字段选项;
修改表字段:alter table 表名 change 旧字段名 新字段名 新字段类型 新字段选项;
删除字段: alter table 表名 drop 字段名;
4. 数据操作
①. 插入数据:
insert into 表名 [(字段1,字段2....)] values(值1,值2....);
说明:字段名可以省略,省略时values值必须与创建表时的字段顺序一一对应
例如:insert into student values
(108,'曾华','男','1977-09-01',95033),
(105,'匡明','男','1975-10-02',95031),
(107,'王丽','女','1976-01-23',95033),
(101,'李军','男','1976-02-20',95033),
(109,'王芳','女','1975-02-10',95031),
(103,'陆君','男','1974-06-03', 95031);
②. 删除数据
delete from 表名 where条件 [orde by排序] [limit限定]
③. 修改数据
update 表名 set 字段名1=值1 ,字段名2=值2.....where 条件;
④. 查询数据
select 字段列表 [from] 表名 [where] [group by] [having] [order by] [limit];
Where 条件语句中:
算数运算符:+ - * / %
比较运算符:> >= < <= != =
逻辑运算符:and与 or或 not非
in:单独查询某些数据:字段名 in (值1,值2...)
between:字段名 between 小值 and 大值 (表示在小值和大值之间)
like: 模糊查询: like ‘要查询的字符’
like ‘%要查询的字符%’ %代表任意字符
like ‘_要查询的字符_’ _代表一个字符
Group by:分组
Select 字段或聚合函数 from 表名 group by 分组字段;
聚合函数常用的有:取平均值:avg() 取个数:count() 取总和:sum() 取最大值max() 取最小值:min()
Order by:排序
正序:asc 倒序desc
Limit:分页查询 例如:limit 0,3 第一个数是开始数据的下标 第二个数是每次显示的数量
七. PHP
Hypertext Preprocessor 超文本预处理器,是一种开源的脚本语言
1. php基础语法
①.php标识符
<?php 代码?>如果当前页只有php代码时后面的 ?>可以省略
<? 代码?> 短标签 需要更改php的配置文件
<script language=”php”>代码</script>
②.语句结束符
分号
③.注释
单行注释://这是注释内容
多行注释:/*这是注释内容*/
2.php变量
存储信息的容器
$变量名 = 变量值; 变量名是字母 数字 下划线组成 不能以数字开头
Php中定义变量时必须给变量赋值
①. 可变变量
将一个变量放到另一个变量的名字中:$name = ‘zhangsan’; $$name = ‘’;
②. 变量的传值方式
值传递:将一个变量的值复制一份,然后赋值给另一个变量,此时两个变量是没有任何关系的
例如:$a = 3; $b = $a; 此时$b = 3;
引用传递:将一个变量与其值的引用关系给另一个变量,此时两个变量公用一个引用关系,当一个变量发生改变时,另一个变量也随之改变
例如:$a = 3; $b=&$a; 用&符号取到$a的引用关系
③. 变量的范围
全局变量:在函数外定义的变量
局部变量:在函数内部定义的变量,只能在函数内部有效
④. 变量常用的函数
isset():判断变量是否存在
unset():删除或销毁变量
empty():判断变量是否为空
echo:将php数据打印
var_dump():打印值 数据类型 长度
⑤. 预定义变量
Php系统自带的变量,这些变量一般都是超全局变量,超全局变量是可以跨页面的
$GLOBALS:获取当前页面所有变量的内容
$_SERVER:自动获取服务器和客户端的信息,他包含了头信息,路径,及脚本位置等信息
$_FILES:获取上传文件的信息
$_GET:变量用于收集来自 method="get" 的表单中的值
$_POST:变量用于收集来自 method="post" 的表单中的值
$_REQUEST:包含了$_GET和$_POST的全部内容
⑥. 常量
常量值被定义后，在脚本的其他任何地方都不能被改变
常量的定义:define(常量名,常量值)
使用常量时,直接使用常量名即可
⑦. 魔术常量
有些常量是随着环境变化会发生改变
__LINE__:文件中的当前行号
__FILE__:当前文件路径和文件名
__DIR__文件所在目录
3.数据类型
标量类型:int float string boolean
复合类型:array object
特殊类型:null resource(资源)