12.10
1.加粗字体<strong></strong> <b></b>
2.横向移动<marquee></marquee>背景色bgcolor=“”(属性)
3.标签可以嵌套
4.i/em 文字变斜体
5.u 文字下划线
6.del 删除线
7.br 换行
8.p 段落
9.pre 预格式化段落10.span 标准行内标签,一般用来修饰文本
11.div 标签块标签,一般用来布局页面 划分区域
12.sub 下标
13.sup 上标
14.hr 水平分割线
15.hn 标题标签(共六级,h1,h2......)
16.dl 自定义列表
ul 无序列表
ol 有序列表
17.超链接<a href="">
18.锚链接<a href="#id">
< id="">
19.图片标签
20.文字对齐align=""
21.与图片水平距离hspace 竖直vspace
22.视频标签<video src="" controls>循环loop
23.音频标签<audio>
24.特殊字符< <
> >
空格
©
"
25.表单标签 <form action="#">
<input type="text" name="" id=""> </form>
<input type="radio" name=”xingbie“>男
<input type="radio" name=”xingbie“>女
<input type="checkbox" name=”hobby“>吃 checked默认选
submit提交
<button>确认输入</button> vaule="点击"(值)
文本域<textarea name="" id="" cols="" maxlength="最多输入"></textarea>
表单禁用disabled
下拉框<select name="city" id="">
<option value="地名">地名</option>
disable placeholder="提示"
26.表格标签 <table></table>只能表示行
th头 加黑
tr表示一行
边框<tbody border="10px" width="" height="" cellspacing="0">
水平align竖直valign
合并单元格<td colspan="几个单元格(数字)">跨行 要删一个
跨列<td rowspan="">
bgcolor背景色
27.扩大标签<label></label> <label for="nv">男</label>
28.iframe标签 <iframe src="">
29.可以关闭的对话框 <diallog open>默认关闭
30.<details></detials> 详情 中间可以加<summary></summary>改变(详情)
31.全局属性
复习
32.font-family 字体名称
font-size 字体大小
font-style:italic;倾斜
font-weight:bold;字体加粗
文本样式 text-indent
font-size
line-height行高
居中:text-align right/center/justify(文本行间对齐方式)
word-spacing改变单词间隔的
标签水平居中margin:0 auto;
文本装饰 text-decoration:underline下划线
文本颜色 color
文本方向 direction:rtl;
列表样式 去小黑点list-style-type:none;(设置列表样式)
list-style-image:url(地址);
list-style:none;
背景图片background-image: url(地址)
background-repeat:no-repeat;
background-position:left top;
background-size:cover;
background-attachment:fixed;
css层叠样式表
1.tabindex 使标签能被tab便利
contenteditable=“可以被修改”
2.style标签引入css
3.外联link rel="stylesheet" href=""
4.基本选择器
标签选择器 标签{}
id选择器#id{}
类选择器.{}
通配符选择器*{}
包含选择器:
子代选择器 .名字>li{}
后代选择器 空格li{}
复合选择器 标签,
属性选择器 标签【type=“属性”】{颜色}
type^=选择以什么开头
type*=
type$=选择以什么结尾
伪类选择器 一个标签不同的状态,不同的样式(伪类有顺序)
hover鼠标悬停时
active鼠标下放
visited访问后
5.伪元素
伪元素选择器:li::before/after{content:“ ”}
ul li:nth-child(){}
11.28
1.块级元素 默认情况下独占一行 div,h,li等 块级元素可以设置宽,高,行高,内外边框 ol,dl也是块级元素
2.内联元素:span等 和其他元素在同一行
不能设置宽高,内外边距不能设置
3.内联块级元素:img,input标签 不能独占一行 ,可以设置宽高,可以设置内外边距
4.边框 加边框border
border-widyh边框的宽度
border-style边框的样式
border:1px solid red;
border-radius:20px/百分比 边框的弧度
border-top-right-radius:40%;
5.合并相邻边框 table
border-collapse
6.文本域 不可以拖拽resize:none;
文字对齐vertical-align:middle;(中)
7.鼠标样式 cursor:;
8.相对定位 position:absolute;
9.定位中优先级 z-index:
10.固定定位 position:fixed
11.粘性定位 position block
11.22
盒子的大小border/content/padding
弹性盒子布局:flex-direction(设置主轴的方向)
允许弹性盒子的子项进行换行;flex-content/flex-wrap
把剩余空间平均分配给每个元素justify-content:space-around
space-around两边元素贴边,剩余平分
交叉轴上的元素的对齐方式:
alain-items:center
alain-content:space-between
flex-grow:
不想压缩:flex-shrink:
flex:;
flex-content:space-start
grid布局
grid-tempkate-columns
row-gap
column-gap
gap
max-width
11.29
css样式的继承
1.会继承的css属性
字体属性,文本属性,文字颜色....
不会继承的css属性
边框,内外边距,宽高.....
a链接的属性最好添加在自身,否则可能不生效
2.过渡属性
transition-property:width
transition-duration:3s
transition-delay:2s
transition-timing-function:steps()
transition:all 2s;
3.2d转换
transform:translatex()
transform:rotatex()延x轴旋转
先位移再旋转
缩放scalex以x轴缩放
skew拉两角
4.3d转换
transform:translatez
perspective:眼深;
transform-style
backface-visibility:hiddin;设置元素背面是否可见
5.转换基点
transform-orgin:top;可以给具体的位置
6.动画animation
animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state开始暂停
7.媒体查询
@media only screen and (max-width:)
8.渐变
background-image:linear-gradient
9.字体图标
js编程语言
1.js的引入方式:<button οnclick="alert('')";alert(‘’)>点击</button>
<script>alert()</script>
<script scr=""></script> index.js
2.对话框
//警示框alert("")
//输入框prompt("")
//控制台打印console.log(“”)
//页面打印document.write(“”)
3.注释
//单行注释
/***/多行注释
4.变量:程序运行时存储数据的容器
声明变量
var 变量名
let 变量名
回车会解析成一个分号
变量的初始化
let 变量名 = 变量值
let关键字声明的变量不能重复声明
var关键字声明的变量能重复声明,只会覆盖前一个关键字
在Javascript中,变量的名称命名规范
只能由有效符号构成(大小写的字母,数字,下划线,$)
不能数字开头
不能够使用关键字和保留字
变量名最好有意义
尽量的遵循小驼峰命名法(下划线分格法)
类的名称采用大驼峰命名法
6.常量
const PI =3.1415926
PI=不可以被更改
document.write(PI)
7.数据类型
内置的基本类型
1‘数字类型 int
float(浮点型)浮点的计数不精确
typeof():数据类型
console.log(typeof())
字符串类型 string 被单引号或双引号括起来的字符序列
2‘ 模板字符串
`反引号
变量本身不存在数据类型,变量值的数据类型是什么,变量就是什么
3’ +号完成字符串的拼接
document.write(”用户名是:“+ username)
4‘ 布尔值boolean ture,false
5’ undefined 变量定义但未被赋值,默认数值为undefined
6’ null
var bb = null
8.数据类型转换
显示转换
一,转换为数字类型
let pwd = prompt(”“)
1.number
2.parseint()/parseintloat()
parseint尽可能的将数据转化成整型
3.+
console.log(typeof(+undefinef))
4.tofixed()
let num =3.141592654
console.log(num.tofixed(2))
二,转换为字符串
tostring()
console.log(typeof(string(1234)))
三,转换为布尔值
boolean()
9.算数运算符
+
-
*
/
%求余数
**求幂
10.比较运算符>,<,==,<=,>=,!=
=是赋值运算符
==:存在隐式转换,把”2“转换成2,然后进行比较
===:表示全等,判断值,数据类型全部一致
11.赋值运算符
let a = 12
console.log(a)
a += 12
12.自加自减运算符
赋值运算符的优先级大于后加加,因此先进行赋值,在进行自增
赋值运算符的优先级小于前加加,因此先进行自增,在进行赋值
//let a = 12
//let b = ++a
//console.log(b)
13.逻辑运算符
&&(俩真则真,一假则假) ||(一真则真,俩假才假) !(非)
14.单分支
if(条件){条件成立时执行的代码}
let age = +prompt(”请输入您的年龄:“)
if (age>=18){console.log("恭喜你成年了,去上网吧")}
let name = prompt("请输入用户名:")
let mima = prompt("请输入密码:")
if (name == "admin" && mima == "123456"){
console.log("登录成功!!")
}
15.双分支
let age = +prompt(”“)
if (age>=18){console.log("")}
else{console.log("")}
16.多分支
17.判断平闰年
18.三元运算符
//条件?条件成立时的代码:条件不成立时的代码;
let age = +prompt(””)
if(age>=18){alert("")}
else{alert("")}
age >= 18? alert(""):alert("")
let age = +prompt ("请输入数字:")
let result = age < 10 ?'0'+age:age;
alert(result)
19.switch多分支语句
let week = prompt(“”)
switch(week){
case“1”:(“”)
alert(“”)
break跳出;阻止流动
case“2”:(“”)
alert(“”)
break
case“3”:(“”)
alert(“”)
break
case“4”:(“”)
alert(“”)
break
case“5”:(“”)
alert(“”)
break
case“6”:(“”)
alert(“”)
break
default:
alert(“你是猴子派来的救兵吗”)
break}
循环12.4
周而复始是循环
1.for循环
for(临时变量;循环条件;条件变更){循环体}
<script>
for(let i = 0;i<= 99;i++){
document.write(i)
}
</script>
2.while循环
声明变量
while(条件){循环体;变量的变化//(变量的改变值)}
let i = 0
do{console.log()
}while()
3.数组:存储数据
直接通过[]声明一个数组
读取数组中的元素 数组下标重0开始
alert(标注[])
array第二种声明
是JavaScript原生对象
用来创建数组
数组的遍历
数组的常见方法
添加
arr1.unshift(“”)
unshift向数组的开头添加一个或者多个元素
arr1.push(“”)向数组的结尾添加一个或者多个元素
删除
arr1.shift()删除并返回数组的第一个元素
arr1.pop()删除并返回数组的最后一个元素
arr1.splice(删除位置的数组下标,删除几个元素)
arr.splice(要添加元素的位置的数组下标,0,添加的元素)
concat():连接两个或者多个数组,并且返回结果
join()
arr1.reverse()翻转数组中的数据
arr1.slice()截取
b.sort()对数组里数字进行排序
默认按字母排序
alert(c.valueof())
alert(b.indexof(""))
lastindexod("")
常见的内置对象
math.floor向下取整
math.ceil向上取整
math.abs取绝对值
math.max取最大值
math.min取最小值
math.random
math.round四舍五入
math.sqrt开平方根
math.pow(9,2)幂次方 9的2次方
break,continue循环
break跳出整个循环
continue跳出本次循环
01.date 12.6
let timer = new date()
console.log(timer)
let year = date.getfullyear()年
let month = date.getmonth()+1月
let day = date.getdate()日
let huor = date.gethuors()时
let min = date.getminytes()分
let ss = date.getseconds()秒
string
let str=new string()
lenth
获取下标对应的字符
console.log(str.charat())
console.log(str.indexof())
console.log(str.indexx())
使用正则匹配想要的内容
let a = str.math(/)
console.log()
使用正则去替换
alert(str.replace(/a/g,“”))
console.log(str.slice(2,4))截取2~4
let str4="nanhangjichneg"
按照特定的符号分割字符串
console.log(str4.split(""))
join()
console.log(b1.join(“”))
转大写
console.log(str.touppercase())
转小写
console.log(str.)
函数
function 函数名(参数){代码块}
getsum(1,2)//函数提升
function getsum(a,b){
//let a = 1
//let b = 2
alert(a+b)
return a+b
}
getsum(3,4)
let a = getsum(3,4)
console.log(a)
作用域 名字生效的范围
全局作用域,函数作用域
函数作为参数进行传递
function a(){”“}
默认值参数
默认值参数放在所有参数的最后面
function a (r,pi=3.14){alert(pi*r*r)}
a(3)
arguements对象
匿名函数
箭头函数
let a = function(){alert(”“)}
let a =()=>alert(”“)
a()
let fn =(x)=>X+5
alert(fn(3))
递归
函数自身调用自身
function jiecheng(n){
if(n===1){
return 1
}else{
return jiecheng(n-1)*n}
}
consile.log(jiecheng(9))
--------------------------------------
function fb(n) {
if (n===1||n===2) {
return 1
} else {
return fb (n-1)+fb(n-2)
}
}
console.log(fb(n))
------------------------------------------