css其他属性
文字相关
p {
/*1.文字大小*/
font-size: 50px;
/*2.字体颜色*/
color: blueviolet;
/*3.设置字体名*/
font-family: "book antiqua";
/*4.设置字体粗细*/
/*取值100-900，normal，bold，bolder*/
font-weight: 900;
/*5.文字倾斜*/
font-style: italic;
/*6.内容的对齐方式*/
/*center，left，right*/
text-align: center;
background-color: yellow;
/*7.设置行高*/
/*文字一行的高度
* （当文字只有一行的时候设置行高和标签的高度一样，可以让文字垂直居中）*/
height: 500px;
line-height: 200px;
/*8.文字修饰*/
/*none：去掉文字修饰
underline：添加下划线
line-through：添加删除线
overline：添加上划线*/
text-decoration: underline;
/*9.首行缩进
注意单位是em -- 空格*/
text-indent: 4em;
/*10.字间距*/
letter-spacing: 1px;
}
列表相关
li {
background-color: saddlebrown;
}
ul {
background-color: royalblue;
/*1.设置符号样式*/
/*disc实心圆/circle（空心圆）/square（实心方块）/none（去掉列表符号）*/
list-style-type: disc;
/*2.设置图片的符号*/
list-style-image: url(img/icon.ico);
/*3.设置符号的位置*/
/*inside内 outside外*/
list-style-position: outside;
}
背景相关
#d1 {
height: 300px;
/*1.背景图
如果背景图大于盒子的大小，背景图能显示多少就显示多少
如果背景图小于盒子的大小，就会平铺（重复显示）
*/
background-image: url(img/bg.png);
/*2.设置是否平铺*/
background-repeat: no-repeat;
/*3.设置背景图位置*/
/*background-position: x y
x：left/center/right/坐标值
y: top/center/bottom/坐标值*/
background-position: 100px bottom;
/*4.同时设值
background：图片地址 是否重复 x y
background：图片地址 是否重复 x y 背景颜色*/
}
JavaScript
js基础语法
-
- js中的注释
// 这是单行注释
/**/ 这是多行注释
- js中的注释
- 2.语句
现版本js语句结束不用分号
但是一行写多条语句需要使用分号隔开
在控制台中打印括号中的内容，功能和python中的print
console.log('hello world')
3.js没有缩进问题，用{}表示一个块
4.基本数据类型
Number(所有的数字)
String(字符串)
Boolean(布尔)
Array(数组)
Object(对象)
Function(函数)5.字面量
6.标识符
使用标识符来命名
a.由字母，数字，下划线和$组成，数字不能开头
b.不能是关键字
c.大小写敏感
建议规范：顾名思义
var huu9_$
变量的声明
- 1.语法
var 变量名；
var 变量名 = 初值；
说明:var是关键字；
变量名：标识符，不能随意使用_或者$开头；驼峰式命名规则(第一个单词首字母小写，后面每个单词的首字母大写)
var userName;
//给变量赋值
userName = 'Wang';
console.log(userName)
//同时声明多个变量
var name, age, sex;
var name1 = 'sss', age1 = 18, sex1 = 'm';
一个变量可以存储任意类型的值；声明变量没有赋值默认值为undefined
js中的运算符
- 1.数学运算符都和数学运算相同
++，--(单目运算符)
var a1 = 10
var b1 = 10
var c1 = a1++ // c1=10 a1=11
var c2 = --b1 // c2=9 c2=9
注意：++/--写到后面的时候，先赋值，再自加/自减
++/--写到前面的时候，先自加/自减，再赋值
- 2.比较运算符:
a. > < ==(相等) != >= <=
b. ===(完全等于) !== >== <==
结果都是布尔值
==：判断值是否相等 / ===：判断是否完全相等
console.log(5=='5') // true
console.log(5==='5') // false
3.逻辑运算符(&&与 ||或 !非)
4.赋值运算符：=，+=，-=，*=，/=，%=
赋值运算符左变量，右表达式5.三目运算符 ？:
a.格式:
条件语句 ? 值1 : 值2
b.结果:
判断条件语句的结果是否是true,如果是true,那么表达式的结果就是值1,否则值2
var b = 10 < 20 ? 10 : 20 // 10
- 6.优先级同python，()优先级最高
js的分支结构
js中的分支结构有两种：if语句，switch语句
- 1.if语句
a.if(条件语句){满足条件要执行的代码块}else{语句块}
var age = 18
if(age>=18){
console.log('成年')
}else{
console.log('未成年')
}
b.if-else if-else(相对于python的if-elif-else)
if(age<18){
console.log('未成年')
}else if(age<40){
console.log('成年')
}else{
console.log('老年')
}
- 2.switch语句
switch(变量){
case 值1:
语句1;
break;
case 值2:
语句2;
break;
...
default:
语句3;
break;
}
执行过程：使用变量的值依次和后边每个case后面的值进行判断，看是否相等
如果相等就执行那个case后面对应的语句。如果前面每个case后面的值都和变量的值不相等，就执行default后面的语句
var number = 10;
switch (number){
case 1:
console.log('F');
break;
case 4:
console.log('D');
break;
case 10:
console.log('A+');
break;
default:
break;
}
js的循环结构
js中的循环分为for循环和while循环
- 1.for循环
a.for-in(同python的for)
var arr1 = [1,2,'abc']
for(x in arr1){
console.log(arr1[x]) // x为下标
}
var obj1 = {name:'正则',age:20}
for(y in obj1){
console.log(y) // y为属性名
console.log(obj1[y])
}
var str1 = 'asdfgh'
for(z in str1){
console.log(z) // z为下标
console.log(str1[z])
}
b.for(表达式1;表达式2;表达式3){循环体}
执行过程：表达式1为一开始的执行，
表达式2为循环继续的条件，
表达式3为循环体执行后执行的语句
var sum=0
for(var x=1;x<=100;x++){
sum += x;
}
console.log(sum);
- 2.while循环
a.while(条件语句){循环体}
var sum1 = 0
var i = 1
while(i <= 100){
sum1 += i;
i++;
}
console.log(sum1)
b.do-while：do{循环体}while(条件语句);
执行过程：执行循环体后，判断条件语句，成立继续不成立结束
var sum2 = 0
var p = 1
do{
sum2 += p;
p++;
}while(p<=100);
console.log(sum2)
js中的函数
- 1.函数的声明
function 函数名(参数列表){
函数体
}
a.function-关键字
b.函数名-驼峰式：顾名思义
c.参数：参数可以有默认值，有默认值的参数写后面。调用函数传参，按实参位置传参。保证每个参数有值(默认值的直接设置ES6支持)
d.函数体：实现函数的功能，只有在调用的时候才执行
function sum1(num1, num2=1){
return num1 + num2
}
console.log(sum1(10, 3))
console.log(sum1(10))
注：函数没有return时，返回值是undefined
- 2.函数的调用(同python)
- 3.作用域
全局变量：函数外声明 (声明到文件结束)
局部变量：函数内声明 (声明到函数结束)
js的数据类型
数字，字符串，布尔，列表，对象
- 1.数字：包含整数和小数
var num1 = 10
var num2 = new Number()
console.log(num2+10)
- 2.字符串：''或者""括起来的字符集
a.转义字符和python一样
b.字符编码是unicode编码
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'
c.字符串长度：字符串.length
console.log(str1.length)
d.获取单个字符：字符串[下标]
下标：1.范围是0~长度-1 2.越界返回undefined 3.不能切片
console.log(str1[1])
e.运算可+不能*
字符串可以和其他任何数据进行+操作，效果自动转化为字符串
console.log('abc'+100)
console.log('abc'*3)
console.log('213'+'345')
console.log('23'+354)
- 3.对象，构造方法
function Person(name,age,sex){
this.name = name
this.age = age
this.sex = sex
}
var p1 = new Person()
p1.name = 'asd'
p1.age = 23
p1.sex = 'm'
console.log(p1)