12.10

 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.特殊字符&lt; <
          &gt; >
          &nbsp; 空格
                 &copy; 
          &quot; 
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))
------------------------------------------