来黑马学习半个月了,整理一点最近学习的内容
java基础知识整理
字节 :
1B=8bit
1KB=1024B
1MB=1024KB
1GB=1024MB
1TB=1024GB
1PB=1024TB
1EB=1024PB
1ZB=1024EB
MS-DOS 命令提示符(cmd)
启动:win+R 输入cmd
常用命令:
切换盘符:盘符名称:
进入文件夹:cd+文件夹名称
进入多级文件夹:cd+文件夹1\文件夹2\文件夹3
返回上一级:cd ..再上级 \..
返回根路径:cd \
查看当前内容:dir
清屏:cls
退出:exit
JAVA跨平台原理:
jvm虚拟机
JRE:运行环境,包含jvm和核心类库,用于运行。
JDK:程序开发工具包,包含JRE和工具,用于开发。
JDK下载安装
进入Oracle公司官网或搜索JAVA.SE-downloads-archire-dow
环境变量
1.计算机或此电脑右键-属性
2.选择高级设置
3.高级-环境变量
4.点击新建-变量名:JAVA_HOME
5.变量值:JDK安装目录 如:c:java9\jdk-9.0.1
6.点击 path-编辑 变量名:path 变量值最前面:%JAVA_HOME%\bin;
helloworld程序的代码编写:
编写-编译-运行
编译:win+R Javac helloworld.java
转化为 helloworld.class
运行:Java helloworld
注释:单行注释://
多行注释 /* */
IDE集成开发环境(提高java开发效率的软件)
安装网址:www.jetbrains.com
项目结构组织:project-module-package
便捷快捷键
alt+enter 修复代码 (常用)
ctrl+D 复制光标所在行
ctrl+Y 删除光标所在行
ctrl+alt+L 格式化代码(常用)
ctrl+/ 光标所在行添加注释
ctrl+shift+/ 多行注释 再按取消
alt+ins 自动生成代码
alt+shfit+上下箭头 移动当前代码(常用)
关键字:特点
1,完全小写的纯英文字母
2,有特殊颜色
public,class,static,void 等
标识符(自定义名称)
命名规则(硬性)
1,英文字母,0-9数字,(美金符号),_(下划线)
2,不能以数字开头
3,不能使用关键字
命名规范(软性)
1,类名规范:首字母大写,后面每个单词首字母大写(大驼峰式)
2,方法名规范:首字母小写,后面每个单词字母大写(小驼峰式)
3,变量名:全部小写
常量:程序运行期间,始终固定不变的量
分类:
1,字符串常量:凡是双引号(英文)引起来的部分
2,整数常量:直接写上的数字,无小数点
3,浮点数常量:直接写上的数字(包含小数点,负号等)
4,字符常量:用单引号引起来的单个字符
5,布尔常量:(只有两个值)true,false
6,空常量:null (代表无任何数据)
public class helloworld{
public static void main(String[] args){
System.out.println("helloworld!");
}
}
数据类型
引用数据类型:字符串(String),数组,类,接口,lambda
基本数据类型:四类八种
整数型:byte,short,int,long
浮点型:float,double(小数)
字符型:char
布尔型:boolean
注意事项:
1,字符串不是基本类型,而是引用类型
2,浮点型可能只是一个近似值,并非精确的值
3,数据范围与字节数不一定相关
4,浮点数当中默认类型式double,如果一定要使用float类型,需要加上一个后缀F
如果是整数,默认为int类型,如果一定要使用long类型需要加上后缀L
变量:程序运行期间,内容可以发生改变的量
创建一个变量并使用的方法:
数据类型 变量名称;
变量名称=数据值;把数据值赋值到变量名称 右→左
完整格式:数据类型 变量名称=数据值;
注意事项:
1,多个变量不可重名
2,float和long数值后缀字母F,L不要丢掉
3,byte和short类型,右侧数据值不能超过左侧范围
4,没有赋值的变量不可使用
5,变量使用不能超过作用域的范围
【作用域】:从定义变量的一行开始,一直到直接所属的大括号为止
6,可通过一个语句创建多个变量(不推荐)
数据类型转换
自动类型转换:
1,特点:代码不需要进行特殊处理,自动完成
2,规则:数据范围由小到大 如:int→long
一个等号代表赋值,右侧的int常量交给左侧的long变量进行存储,自动转换
从小到大: byte-short-char-int-long-float-double
强制类型转换:
1,特点:代码需要进行特殊格式处理,不能自动完成。
2,格式:范围小的类型 范围小的变量名=(范围小的类型)原本范围大的数据
如:int num=100L(long-int 从大到小,不符合自动转换,需要强制转换)
— int num=(int)100L
注意事项:
1,不推荐使用强制类型转换,因为有可能发生精度损失和数据溢出
2,byte/short/char这三种类型都可以发生数字运算,如加法“+”
byte/short/char这三种类型在在运算时都会先被提升成为int类型
一旦char(字符)进行数字运算,字符会按规则翻译成数字,如'A'=65
3,boolean(布尔)类型不能发生数据类型转换
编译器优化
1,对于byte/short/char三种类型来说,如果右边赋值的数值没有超过范围,
那么javac编译器将会自动隐含的为我们补上一个(byte)(short)(char)
2,再给变量进行复制的时候,如果右侧的表达式当中全部都是常量,没有任何变量,
那么javac编译器将会直接将若干个常量表达式计算得到结果
short A=5=8; 等号右边全都是常量,没有任何变量参与运算
编译之后,得到的.class字节码文件当中相当于直接就是:
short A=13;
ASCII编码表:数字,字符对照关系
48代表0,65代表A,66代表B,97代表a,98代表b
运算符:进行特定操作的符号,例如:+
表达式:用运算符连起来的式子,例如:20+5,又例如:a+b
算术运算符:+,-,*,/,%,++,--
四则运算:加 减 乘 除
取模(取余数):%
(变量和常量可以混合运算)
除法:被除数/除数=商...余数
对于一个整数的表达式来说,除法用的是整数,结果仍是整数,只看商,不看余数。
如果要看余数,就是用%取模,只有对于整数的除法来说,取模运算符才有余数的意义。
注意事项:1,一旦运算当中有不同类型的数据,那么结果将会是数据类型范围大的那种。
加法+三种使用方法
1,对于数值就是加法
2,对于字符char类型计算之前提升为int再计算
3,对于字符串(String)是连接作用,(连接符)
字符串连接其他类型都等于字符串
自增自减运算法:
++:让一个变量涨一个数字;--:让一个变量降一个数字。
格式:写在变量名之前或者之后,如:++num,num++;
使用方法:1,单独使用,不和其他任何操作混合,自己独立成为一个步骤(前++和后++无区别)
2,混合使用,和其他操作混合使用,如:赋值、打印等操作。
区别:前++:变量立刻马上+1【先加后用】
后++:变量先运算使用再+1【先用后加】
注意事项:常量不可以使用++,--。
赋值运算符:”=“(基本)”+=“”-=“"*=""/=""%="(复合运算符)
”+=“ a+=1 相当于 a=a+1
”-=“ b-=2 相当于 b=b-2
”*=“ c*=3 相当于 c=c*3
”/=“ d/=4 相当于 d=d/4
”%=“ e%=5 相当于 e=e%5
注意事项:常量不可使用,隐含了数据类型转换。
比较运算符:”==“等于 ”<“小于 ">"大于 "!="不等于 ”<=“小于等于 ”>=“大于等于
结果成立:true 结果不成立:false
不可以连这些,结果只有true和false
逻辑运算符:与(并且)、或(或者)、非(取反)
与:操作(shift+7)“&&”左右都是true,结果才是true
或:”||“左右只要有一个是true,结果就是true
非:”!“本来是true,前面加上!就变成false,反之成立。(单独使用)
注意事项:与或具有短路效果;短路效果:如果根据左边已经可以得到结果,那么右边将不再运算。
三元运算符:需要三个数据才能进行操作的运算符
格式:数据类型 变量名称=(条件判断)? 表达式A:表达式B;
流程:条件判断为true,则运行结果为表达式A,
条件判断为false,则运行结果为表达式B.
如:int A=a>b a:b;
jshell:dos命令行直接输入jshell命令,编写代码,无需写类和方法,
同时无需编译和运行,直接回车即可。
流程控制:
概述:在一个程序执行的过程中,各条语句的执行顺序对程序的结果是由直接影响的,
也就是说,程序的流程对运行结果有直接的影响。所以,我们必须清楚每条语句的执行流程。
而且,很多时候我们要通过控制语句的执行来实现我们要完成的功能。(顺序结构,选择结构,)
顺序结构:根据编写顺序,由上到下依次执行。
选择结构:
1,if:
格式:if(关系表达式){
语句体1;
语句体2;
}
执行流程:首先判断关系表达式看其结果是true还是false
如果是true就执行语句体
如果是false就不执行语句体
2,if...else:
格式:if(关系表达式){
语句体1;
}else{
语句体2;
}
执行流程:首先判断关系表达式看其结果式true还是false
如果是true就执行语句体1
如果是flase就执行语句体2
3,if ... else if ... else:
格式:if(关系表达式1){
执行语句体1;
}else if(关系表达式2){
语句体2;
}
...
}else if (关系表达式n){
执行语句体n;
}else{
执行语句体n+1;
}
执行流程:首先判断关系表达式1看其结果是true还是false
如果是true就执行语句体1
如果是false就继续判断关系表达式看其结果是true还是false
如果是true就执行语句体2
如果是false就就行判断关系表达式...看其结果是ture还是false
...
如果没有任何关系表达式为true,就执行语句体n+1
if语句和三元运算符的互换:
在某些简单的应用中,if语句是可以和三元运算符互换使用的
如:public static void main(String[]args){
int a =10;
int b=20;
// 定义变量,保存a和b的较大值
int c;
if(a>c){
c=a;
} else{
c=b;
}
//可以将上述功能改写为三元运算符形式
c=a>b? a:b;
}
判断语句:
switch:
格式:switch(表达式){
case 常量值1:
语句体1;
break;
case 常量值2:
语句体2;
break;
...
default:
语句体n+;
break;
}
执行流程:首先计算出表达式的值
其次,和case依次比较,一旦有相对于的值,就会执行相应的语句,
在执行的过程中,遇到break就会结束。
最后,如果所有的case都和表达式的值不匹配,就会执行default语句体部分
然后程序结束掉。
case的穿透性:
在switch语句中,如果在case的后面不屑break,将出现穿透现象,
也就是不会再判断下一个case的值,直接向后运行,直到遇到break,或者整体switch结束。
循环语句1:
1,for
格式:for(初始化表达式①; 布尔表达式②; 步进表达式④){
循环体③
}
执行流程:
执行顺序::①②③④>②③④>②③④…②不满足为止。
① 负责完成循环变量初始化
②负责判断是否满足循环条件,不满足则跳出循环
③具体执行的语句
④循环后,循环条件送所涉及变量的变化情况
2,while
格式: 初始化表达式①
while(布尔表达式②){
循环体③
步进表达式④
}
执行流程:
执行顺序::①②③④>②③④>②③④…②不满足为止。
①负责完成循环变量初始化。
②负责判断是否慢则循环条件,不满足则跳出循环
③具体执行的语句
④循环后,循环变量的变化情况
3,do...while
格式: 初始化表达式①
do{
循环体③ 步进表达式④
}while(布尔表达式②);
执行流程:
执行顺序:执行顺序:①③④>②③④>②③④…②不满足为止。
①负责完成循环变量初始化。
②负责判断是否满足循环条件,不满足则跳出循环
③具体执行的语句
④循环后,循环变量的变化情况
do...while循环的特点:无条件执行一次循环体,即使我们将循环直接写成false,
也依然会循环依次,这样的循环具有一定的风险性,因此不建议初学者使用。
跳出语句
break
使用场景:终止switch或者循环
如:public static void main(String[]args){
for(int i=1;i<=10;i++){
// 需求:打印完两次你好之后结束循环
if(i==3){
break;
}
System.out,println("你好"+i);
}
}
continue
使用场景:结束本次循环,继续下一次循环
如:public static void main(String[]args){
//需求:不打印第三次你好
for(int i=1;i<=10;i++){
if(i == 3){
continue;
}
System.out.println("你好"+i);
}
}
死循环:也就是循环的条件永远欸true,死循环的式永不结束的循环。
如:
whil(true){}。
嵌套循环:是指一个循环的循环体是另个循环,比如for循环里面还有一个for循环,
就是嵌套循环,总共循环次数=外循环次数*内循环次数
嵌套循环格式:
for(初始化表达式①; 循环条件②; 步进表达式⑦) {
for(初始化表达式③; 循环条件④; 步进表达式⑥){
执行语句⑤;
}
}
嵌套循环流程:
执行顺序:①②③④⑤⑥>④⑤⑥>⑦②③④⑤⑥>④⑤⑥
外循环一次,内循环多次
比如跳绳:一共跳5组,每组跳10个。5组就是外循环,10个就是内循环。
方法
1,修饰符:public static (固定写法执行后将结果返回给调用者
2,返回值类型:表示方法运行的结果的数据类型,方法定义:前面的课程中,使用过嵌套循环出矩形,控制台打印出矩形就可以了,
因此将方法定义为void,没有返回值,在主方法main中直接被调用。
定义方法的格式:
修饰符 返回值类型 方法名(参数列表){
// 代码。。。
return 结果;
}
3,参数列表:方法在运算过程中的未知数据,调用者调用方法时传递
4,return:将方法执行后的结果带给调用者,方法执行到return,整体方法运行结束
调用方法的两个明确
需求:定义方法实现两个整数的求和计算。
1,明确返回值类型:方法计算的是整数的求和,结果也必然是个整数,
返回值类型定义为int类型。
2,明确参数列表:计算哪两个整数的和,并不清楚,但可以确实是整数,
参数列表可以把定义两个int类型的变量,有调用者调用方法时传递
调用方法流程(原理):
1,【起点】方法开始调用
2,【过程】实际参数传递
3,【过程】方法体内执行
4,【终点】方法结束返回
将返回值返给开始调用位置
注意事项:
1,类中方法外面。
2,返回值类型,必须要和return语句返回的类型相同,否则编译失败。
调用方法的三种形式:
1,直接调用,在main主方法中直接写方法名调用
2,赋值调用,在方法前面定义一个变量,接受方法返回值
2,输出语句调用,在输出语句中调用方法, System.out.println( (方法名));
方法重载(over load):
概念:多个方法名称一样,但是参数列表不一样。
好处:只需要记住一个方法名称,就可以实现类似的多个功能。
数组:是一种容器,可以同时存放多个数值。
特点:
1,数组是一种引用数据类型
2,数组内数据类型必须一致
3,数组的长度在程序运行过程中不可以改变
格式:1,动态初始化(制定长度)
2,静态初始化(制定内容)
动态初始化格式:
数据类型[]数据名称=new 数据类型[长度]
左侧数据类型:也就是数组当中存的数据的类型,全部都是统一的类型
左侧的中括号:代表我是一个数组
左侧的数组名称:给数组取一个名字
右侧数据类型:必须和左侧数据类型保持一致
右侧中括号的长度:也就是数组当中到底可以保持多少个数据,是一个int值。
如:int[]arr=new int[3];
在创建数组的时候,直接制定数组当中的数据个数
静态初始化:在创建数组的时候,不直接指定个数,而是直接制定数据内容
基本格式
数据类型【】数组名称=new 数据类型【】{元素1,元素2,...};
int【】arr=new int【】{10,15,25};
注意事项:虽然静态初始化没有直接告诉长度,但根据大括号里的元素具体内容,
也可以自动推算出长度。
静态初始化的省略模式:
数据类型【】数组名称={元素1,元素2};
int【】 arr={10,15,25};
注意事项:
静态初始化的标准格式可以拆分为两个步骤
int 【】arry;
arry=new int【】{1,2,3,4};
动态初始化也可拆分
int【】arryb;
arrb=new int【5】;
静态初始化的省略格式不能拆分为两个步骤
建议:如果不确定数据内容,使用动态初始化
确定内容用静态初始化。
访问数组元素并获取
静态访问格式:输出 system.out.println(arry[0]);
数组名称【索引值】
索引值是一个int数字,代表数组房中的编号(从0开始)
注意:索引值从0开始,一直到“数组的长度-1”为止
数组元素赋值给变量
int num=arry【0】
动态:int【】arry=new int【4】;
使用动态初始化数组的时候,元素含有默认值 规则如下:
如果是整数类型:默认为0;
如果是浮点类型:默认为0.0;
如果是字符型:默认为‘\u0000’;
如果是布尔型:默认为false;
如果是引用类型:默认为null;
将数据123赋值给1号元素 格式 arry【1】=123;
静态初始化也有默认值的过程,只不过系统自动将默认值替换成为了大括号中的具体数字
java内存的五个部分:
1,栈:方法运行时使用的内存,比如main方法
2,堆:存储对象或数组,new来创建的都在堆里
3,方法区:保存 .calss文件
4,本地方法栈:jvm在使用操作系统的时候使用,与开发有关
5,寄存器:给cpu使用,与开发无关
测试基础知识整理
计算机基础
计算机是一种可以自动高效进行计算操作的电子设备,
组成:由硬件系统和软件系统组成
硬件系统部分根据冯诺依曼理论分为五个部分
1,输入设备,以不同的形式给计算机提供数据,如键盘
2,输出设备,将计算机处理后的结果显示出来,如屏幕
3,计算器
4,控制器
(3,4 统称cpu,中央控制器,计算机的大脑)
5,存储器:分为内存和外存
内存:断电数据会消失 分为只读rom内存和随机ram内存
外存:断电数据不会消失
软件系统基本结构:
1,系统操作软件:
1,图形化桌面操作系统:windowns(微软推出,用户量很大);
macos(苹果,底层也是一家linux)
2,移动设备操作系统:android 安卓(底层也是一家linux);ios
3,服务器操作系统:linux(开源,稳定)windows server(微软,免费)
应用软件:我们可以认为就是安装在操作系统上的第三方软件
二进制基本知识:
1,二进制是一种数字进制,只有0和1
原理:高低点位,高电位为1,低电位为0;1代表true ,00代表false
常见的数字进制:
二进制:逢二进一:0,1
八进制:逢八进一:0,1,2,3,4,5,6,7
十进制:逢十进一:0,1,2,3,4,5,6,7,8,9
十六进制:逢十六进一:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
编码
编码:就是将人类可以理解的自然语言翻译成计算机可以理解的计算机语言
1,ASCII码表(英文)
2,UTF-8(中文)
字符集:和编码表是类似概念
dos命令
语法格式:命令【参数1 参数2】参数可能有可能无
1,shutdown:设置自动关机
格式:shutdown /s /t 秒数
/s和/t左右都有空格
取消自动关机:shutdown /a
/a左侧有空格
2,ipconfig -all 显示计算机网卡信息
找到 以太网适配器-本地连接或以太网-物理地址(mac地址)
3,ping 检查当前网址网络是否连接
ping 网址或域名或ip地址
ping后有空格
4,上下键:翻看最忌使用过的命令
盘符命令的切换
盘符名:如 c:, d:
cd .. 返回上一级
cd /返回根目录
cd 目录名称 (进入文件夹)
dir 查看当前文件夹
md 名称(新建目录)
“echo 内容>文件名称”创建有内容的文件
rd 名称(删除空目录)
del 文件 删除文件
rd 名称 /s 强制删除非空目录
copy 文件原地址 文件新地址 (复制文件到其他地方)
rmve 文件原地址 文件新地址(剪切文件到其他地方)
前端-HTML
1,前端三大组成部分--html(结构)-css(样式)-js(行为)
2,html-超文本标记语言,负责的是页面结构
HTML骨架
1,<!DOCTYPE HTML>--文档类型是html
2,<html></html>-页面中最外层标签-根标签
3,<head></head>网友头部标签-里面的主要内容给浏览器看
4,<meta charset=”utf-8“>-页面编码标准
5,<title></title>网页标题标签-里面的内容会显示在浏览器窗口标签上
6,<body></body>网页主体标签,里面内容显示在浏览器窗口中
html语法规则
1,html页面有正确嵌套的标签(标记)构成
2,标签分为单标签和双标签
a,单标签-<单标签名称 />
b,双标签-<双标签名称></双标签名称>
3,标签属性的写法
a,键值对:属性名=“属性值”
b,<标签名 属性名1=“属性值”属性名2=“属性值”>
4,空格和换行的实现方法
a,空格实体- ;
b,换行标签-<br />
5,基础html:
标签语义化的好处-搜索引擎中排名更考勤
标签 含义 注意
<h1>一级标题</h1> 标题标签h1-h6 双标签,共六级
<p>文章段落<p> 段落标签 双标签
<b>普通加粗<b> 文字标签-加粗 双标签,弱语义
<s>删除线<s> 文字标签-删除线 双标签,弱语义
<i>倾斜效果<i> 文字标签-倾斜 双标签,弱语义
<strong>强调加粗<strong> 文字标签-加粗 双标签,强语义
<del>删除线效果<del> 文字标签-删除线 双标签,强语义
<em>倾斜效果<em> 文字标签-倾斜 双标签,强语义
<div>大盒子<div> 布局(结构)标签-大盒子 双标签,独占行
<span>小盒子</span> 布局(结构)标签-小盒子 双标签,非独占行
<!--注释内容--> 注释-快捷键cyrl? 源码中可见,运行不显示
<img src="图片路径"/> 图片标签 单标签
属性名=“属性值”--键值对语法 title-图片标题 悬停显示
alt-图片描述 失败显示
路径:绝对路径和相对路径
绝对路径:文件或图片在计算机中的完整路径,经过的目录都要用/隔开,不推荐使用
相对路径:
1,同级路径:目录文件在同级目录-直接写目标文件
格式:<img src=''1.png''/> 注:1.png为图片名称
2,下级查找:目录文件在下级目录-下级目录/目标文件
格式:<img src=img/1.png/> 注:等号右边的img是下级文件名称
3,上级查找:目录文件在上级目录-../目标文件
格式:<img src=../img/1.png/>或<img src=../1.png/>
超链接:超文本传输
标签:<a herf="填写要跳转的网页或本地文件路径">点击就跳转</a>
注意:如果跳转到线上网站,需要在网址前加上:http//:(超文本传输协议)
新窗口打开超链接:
<a herf="网址或路径" target="_blank">点击就跳转</a>
空连接:无法确定连接的跳转就可以写空连接
<a herf="###">点我</a>
<a herf="javascript">点我</a>
<a herf="javascript viod(0)">点我</a>
注意:三种格式都可以,如果是一个#,有返回顶部的作用。
表单标签
表单的作用:在web网页上手机用户数据,并提交给后台的一个程序,
定义一个form标签称之为表单域
标签格式:<form action="某一个后台程序" method="post或get">
</form>
form标签就是表单数据的根标签,post代表加密传输,get代表明文传输
普通文本框:<input type="text"/>
<input type="text" placeholder="文本框内的提醒文字">
密码框:<input type="password"/>
单选标签:<input type="radio"/>男
<input type="radio"/>女
a,互斥效果(二选一): <input type="radio" name=“xb”/>男
<input type="radio" name=“xb”/>女
两者取相同name。
b,扩大点击范围(点文字也可选中):
<input type="radio" name=“xb” id="nan"/><label for="nan">男</label>
<input type="radio" name=“xb” id="nv"/><label for="nv">女</label>
c,设置默认值(如设置女为默认性别):
<input type="radio" name=“xb” id="nv" checked=”checked“/><label for="nv">女</label>
注:id属性的值与for后面的值一致,实现联通。
复选框(多选):
标签:<input type="checkbox"/>选项1
<input type="checkbox"/>选项2
<input type="checkbox"/>选项3
a,扩大点击范围:
<input type="checkbox id=“xx1"/><label for="xx1">选项1</label>
<input type="checkbox id=“xx2"/><label for="xx2">选项2</label>
<input type="checkbox id=“xx3"/><label for="xx3">选项3</label>
b,设置默认值(选项1):
<input type="checkbox id=“xx1" checked=”checked“/><label for="xx1">选项1</label>
下拉菜单:
标签:<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select>
设置默认选项:<option value="" selected="selected">选项1</option>
文本域:可以用来输入更多内容
标签:<tsxtarea name="" id=“” cols=“数字”rows=“数字" placeholder="提醒文字">
</textarea>
注:cols和rows分别代表列和行,程序员一般不使用这两个属性,因为有兼容性问题。用css解决
文本域右下角按钮要关闭。
按钮
普通按钮:<input type="button" value="按钮"/>
重置按钮:<input type="reset" value="重置"/>
提交按钮:<intput type="submit" value="提交"/>
列表标签:有序列表和无序列表
无序列表:<ul>
<li>选项1<li>
<li>选项2<li>
</ul>
有序列表:<ol>
<li>选项1<li>
<li>选项2<li>
</ol>
CSS(层叠样式表):网页样式设置
书写格式:写在head标签最后面
<style type="texr/css">
目标元素{样式名:样式值;样式名2:样式值2;}
如:div{color:red;font-size;}
</style>
标签选择器:怎样选择要处理的元素
简单选择器
a: 标签名选择器:通过标签名称来选择
格式:标签名{样式名:样式值;}
b:id选择器:选择唯一一个元素且该元素有id
格式:#id名{样式名:样式值;}
如:<p id="dl">这是一个段落标签</p> dl即为id名或id属性值
注意:id名不可重复
id命名规则:数字不可开头,不可用符号(下划线除外)不推荐中文
c:类名(class)选择器:.类名{样式名:样式值;}
如: <p class="pp"> 内容1 </p>
<h1 class="pp"> 内容 2</h1>
<div class="pp"> 内容 3</div>
三者创建同一个类:class=”pp“
类名可重复使用,同一标签可以取多个类名,在{}内用空格隔开
命名规则:数字不可开头,不可用符号(下划线除外)不推荐中文
同一个标签可以设置id和class不会冲突,且值一致也可以
继承性:子孙元素可以继承祖先元素的css文字属性
覆盖性:同权重(同一选择器,同一标签)后写的覆盖先写的
符合选择器
后代选择器:以某个祖先元素为七点,查找子孙元素
格式:祖先元素 子孙元素{样式名:样式值;} 用于嵌套标签中
并列(并集)选择器:多个选择器同时选择样式
格式:目标元素1,目标元素2,目标元素3...{样式名:样式值;}
如:div,p,span,#id名,.一个类名,...{样式名:样式值;}
选择器权重:
1. 基本选择器的权重
a. id选择器 > 类名选择器 > 标签选择器>继承(最低)
2. 复合选择器的权重
a. 使用的简单选择器之和
css存放位置(引入方式):
1,内嵌式:style标签中
2,外链式:样式存入外部css文件
a.单独将css内容写入新建的css文件中-写值选择器和样式内容
b.在html文件中head最后通过link标签引入css文件-href=“css文件路径”
3,行内式:写在目标标签的style属性中--stlyle={样式内容}
4.三种引入方式的选择
a.内嵌式--结构和样式(html和css)混在同意文件
好处:不需要加载外部css文件,加载速度快-电商首页必须使用
b.外链式--代码分离--解雇和样式分离--方便代码的修改
好处:除了电商网站的其他情况都使用
c.行内式--一定不要用
引入方式权重:
内嵌式=外链式
行内式权重最高
盒子模型:
重要组成部分:内容,边框,内边距,外边距
a.边框:选择器{border:10px solid red;}
10px代表边框的像素;solid代表边框是实线;red代表边框颜色
分别设置样式
border-top:(边框顶部)
border-bottom:(边框底部)
border-left:(左边框)
border-right:(右边框)
b.内边距:内容和边框之间的距离(padding)
格式:选择器{padding:10px;} 四周间距一致
选择器{padding-top:10px;} 顶部间距
选择器{padding-bottom:10px;} 底部间距
选择器{padding-left:10px;} 左边间距
选择器{padding-right:10px;} 右边间距
选择器{padding:10px 20px;} 上下间距 左右间距
选择器{padding:10px 20px 30px;} 上 左右 下
选择器{padding:10px 20px 30px 40px ;} 上 右 下 左(顺时针)
c.外边距:两个盒子时间的距离(margin)
格式:选择器{margin:10px;} 四周间距一致
选择器{margin-top:10px;} 顶部间距
选择器{margin-bottom:10px;} 底部间距
选择器{margin-left:10px;} 左边间距
选择器{margin-right:10px;} 右边间距
选择器{margin:10px 20px;} 上下间距 左右间距
选择器{margin:10px 20px 30px;} 上 左右 下
选择器{margin:10px 20px 30px 40px;} 上 右 下 左(顺时针)
html5
1,语义化结构布局标签
a.头部:<header></header>
b.导航:<nav></nav>
c.侧边栏:<aside></aside>
d.文章:<article></article>
e.底部:<footer></footer>
2,数据列表标签:
a.创建输入框:<input type="text"/>
b.创建数据:<datalist>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
</datalist>
c.实现a,b关联:
a步骤<input type="text" list="选项">
b步骤<datalist id=“选项”>
注:input中的list值与datalist中的id值相同。
表单验证属性:(放在form标签里)
a.非空验证:<input type="text" required="required"/>
b.自动获取焦点:<input type="text" autofous ="autofous "/>
c.自动填写:<input type="text" autocomplete=“on” name=“内容”/>
输入框标签
a.邮箱输入框:<input type="email"/>
b.网址:<input type="url"/>
c.数字:<input type="number"/>
d.搜索框:<input type="search"/>
e.详细日期时间:<input type="datatime-local"/>
f.月份:<input type="month"/>
g.星期:<input type="week"/>
h.时间:<input type="time"/>
i.年月日:<input type="date"/>
j.滑块:<input type="range"/>
音频标签:audio
单个音频格式:<audio src="yinyue.mp3" controls="controls"
autoplay="autoplay" loop="loop"></audio>
注:
src--文件路径
controls 代表控制播放的面板
autoplay 代表自动播放
loop 代表循环播放
多个音频格式:
<audio controls="controls" autoplay="autoplay"
loop="loop">
<source src="yinyue.mp3"></source>
<source src="yinyue.ogg"></source>
</audio>
注:
source标签--加载音乐文件
视频标签:video
<video width="800" controls="controls" loop="loop"
autoplay="autoplay">
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.ogg" type="video/ogg"></source>
<source src="movie.webm" type="video/webm"></source>
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="movie.mp4">下载视频</a> </video>
样式圆角属性(CSS3新增):
1. 样式名 -- border-radius--单位像素
2. 一个值: 四个角
3. 四个值:左上 右上 右下 左下 -- 顺时针
4. 两个值:左上和右下 右上和左下
格式:选择器{圆角样式:样式值;}
目标元素{border-radius:10px;}
盒子阴影:box-shadow:0px 0px 10px red;(外)
四个值分别代表:水平方向,垂直方向,阴影大小,颜色。
box-shadow:0px 0px 10px red inset;
inset代表阴影方向向内。
格式:选择器{box-shadow:0px 0px 10px red;}
文字阴影:text-shadow 0px 0px 10px red;
选择器{texr-shadow:0px 0px 10px red;}
四个值分别代表:水平方向,垂直方向,阴影大小,颜色。
透明背景:选择器{background:rgba(255,255,255,0.1);}
小括号内前三个值为红绿蓝的色值,可以使用浏览器调试工具设置新的色值。
最后一个值为透明度的值,透明度的值为0-1之间,0代表全透明,
1代表全不透明,可通过0-1之间的小数来代表透明的百分比
背景图的设置:选择器(body){background url(图片路径);}
渐变背景色:
1,background:linear-gradient(to rihgt,red,blue);
小括号里第一个值表示方向是从左到右渐变
to top (从下往上) to bottom(从上往下) to left(从右往左)
2,background:linear-gradient(180deg,色值 0%,色值 90%,色值 100%);
渐变方向可以用角度值,颜色值后面空格加半分比,从0-100%设置颜色渐变区域
转换:样式名:transform
样式值:rotate scale translate
旋转:选择器:hover{transform:rotate(180deg);}
X轴旋转:img:hover{transform:rotateX(180deg);}
Y轴旋转:img:hover{transform:rotateX(180deg);}
小括号里为旋转的角度
缩放:选择器:hover{transform:scale(0.3);}
小括号里为缩放的比例,大于1放大,小于1缩小
位移:选择器:hover{transform translate(100px,10px) ;}
小括号里第一个值代表水平方向的位移像素,第二个值代表垂直方向位移像素。
过度属性:选择器:hover{} 含义:鼠标悬停时展现的样式
如:div:hover{transform:scale(0.3) background:rgba(255,255,255,0.1)}
然后在目标元素div最初样式里写 transition:all 1s;}
想要过渡的属性一般都用all代表,只要变化了都可以过度动画的形式。
设置transform的时候如果要设置两个或以上变化,必须在每个属性之间添加
一个空格来间隔。
如:
<style type="text/css">
div{width: 200px; height: 50px; background:rgba(255, 96, 96, 0.3);margin: 50px;
transition:all 2s}
div:hover{transform: scale(2);background: rgba(255,255,255,0.3);}
</style>
<body>
<div class="div2">传智播客</div>
</body>
transition:all 1s 2s ease;}
1s为动画执行的时间,2s为延时执行的时间,
ease为默认匀速,ease-in:变加速,ease-out:变减速,ease-in-out:先加速再减速
正方形变长圆形:bored-radius:50%;}
自定义动画:
1,设计动画:@keyframes 动画名字{from{开始样式} to{结束样式}}
2,添加动画:div{animation : 动画名字 持续时间 alternat infinite}
如:div{animation : name 1s alternat infinite}
alternat 代表逆向动画 infinite代表无限循环
目标元素中设置animation属性,把设计的动画名字拿过来,写时间,
就可以实现动画效果。
多步骤变化格式:
@keyframes 动画名字{
0%{rotate(-5deg)}
50%{rotate(1deg)}
100%{rotate(5deg)}
}
使用百分比替代默认的from和to,实现多步骤变化
javascript作用:控制web前端标准的前两者,结构和样式。
基本语法:写在html文件的最后面
<script type="text/javascript">
alert("");
</script >
"text/javascript"可有可无
alert表示弹出对话框,括号里的内容用英文的单引号或双引号
分号代表语句结束
找元素:
<script>
document.getElementById("元素id属性值");
(通过id在文档里找元素) document:文档
</script>
设置样式:document.getElementById("元素id属性值").style.样式名="样式 值";
这是宽高背景色:
document.getElementById'id名'.style.width(100px);
document.getElementById'id名'.style.height(100px);
document.getElementById'id名'.style.backgroud="red";
想设置谁就找到谁,使用英文状态下的点来进行连接,
用分号结束,等号前后用空格更美观。
JS变量:
定义变量:var 变量名=变量值;
var var_name = var_value;
var name=document.getElementById("元素id属性值");
命名规则:数字字母下划线,数字不可以开头,不可以用保留字(JS中已占用的单词)
JS事件
1. 概念:捕捉用户的行为--在什么时候做什么事情
2. 事件三要素:(当事件源发生了事件类型就执行指定命令)
a. 事件源 b. 事件类型 c. 执行的命令
事件源.事件类型 = function() { 执行的命令 }
如:
举例: document.getElementById("id值").onclick=function(){ //命令 document.getElementById("id值").style.width="200px"; }
var btn = document.getElementById("id值") var box = document.getElementById("id值")
btn.onclick=function(){ //命令 box.style.width="200px";
}
|
|