0. html引用css和js文件夹

1. css文件夹需要在head里面放

<link rel = "stylesheet" href = "css/style.css">
//rel是relationship的缩写，意思是当前文件和被引入文件之间的关系是样式表
//href里面的意思是在css的文件夹里面找到style.css文件

这个时候css的文件夹直接写样式代码

h1 {
}

2. js文件夹需要在body最后面放

<script src = "js/script.js"></script>

这个时候js的文件夹直接写内容

console.log("hello");

1. html

<1>常用文本标签

1. 标题标签

<h1>  </h1>
...
<h6>  </h6>

2. 段落标签

<p></p>
<p>
    更改文本样式：
    <b>加粗</b>,
    <i>斜体</i>,
    <u>下划线</u>,
    <s>删除线</s>
</p>

3. 无序列表和有序列表

无序列表去掉前面的圆点：list-style：none
ul 作为 HTML 里的列表标签，浏览器会给它加「默认样式」：margin-top/margin-bottom：默认有几像素的外边距；padding-left：默认有 40px 左右的内边距
我们在css里面要讲内外边距都设置成0，才可以更好的装饰

//无序
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

//有序
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

4. 表格

<!-- table row行 -->
<!-- table date列 -->
<!-- table header列标题 -->
<!-- border表格边框 -->
<table border="1">
    <tr>
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
    </tr>
    <tr>
        <td>元素1</td>
        <td>元素2</td>
        <td>元素3</td>
            
    </tr>
</table>

<2>标签属性

1. 大部分元素的属性：class（类名），id，style
   常见属性

a超链接去掉横线：text-docoration：none
color：inherit可以让字体的颜色继承父元素，比如在ul嵌套li，li嵌套a的情况下，这个字体颜色由父元素li决定，li如果没有设置，就由ul决定，如下图

<ul>
  <li>
    <a href="#">首页</a>
  </li>
</ul>

<!-- 超链接：创建链接到其他网站  -->
<a href=""></a>
<!-- href里面填写网站 -->
 <a href="" target=""></a>
 <!-- target是打开方式，self当前页面打开，blank新页面 -->

 <img src="" alt="" width="" height="">
 <!-- src填写路径，alt填写图像的代替文本,width宽度，height高度 -->

<3>块元素和行内元素

1. 块元素：独占一行，可以包含其他块元素和行内元素

div p h1
ul ol li
table form

2. 行内元素：不会独占一行，只能包括行内元素
   （宽高由包含的内容决定，不接受height和width这两个属性）

span（无语义，用于弥补div在行内使用的不足） a strong（加粗） em(斜体）img
br（换行）input（输入）

3. 行内块元素
   (可以设置宽高）
   特征：既继承了行内元素的同行排列的布局特性，又拥有块级元素可以自定义宽高的特性

img

<4>表单

l

<form action="">
    <!-- 1.文本输入框-->
    <input type="text" placeholder="" >
   
    <!--type填写输入类型 
    placeholder填写文本框里面的内容 -->
     <!-- 2.密码框 -->
    <input type="password">
    <!-- 3.单选框 -->
     <input type="radio" name="gender">男
     <input type="radio" name="gender">女
     <!-- 4.多选框 -->
      <label>爱好</label>
      <input type="checkbox" name="hobby">唱歌
      <input type="checkbox" name="hobby">画画
      <!-- 5.提交 -->
       <input type="submit" value="上传">


</form>

---

checkbox（勾选框）
自定义样式

appearance:none;//去掉默认样式
border：1px solid 颜色//边框
display: grid;
place-items: center;//实现绝对居中
:checked {//勾选后
  background: #3d7ce9;
}

---

label
表单文字说明，需要和输入框input搭配使用，作用点击文字，可以自动选中输入框

<label for="username">用户名</label>
<input id="username" />

---

补充：多文本输入框中出现一行一行的横线
textarea

line-height：20px;
//1.每一行文字占20像素高度
background-image：linear-gradient（
transparent 19px,
black 20px
）;
//2.前19px是透明的，第20px是一条线
background-size:100% 28px;
//background-size：宽 高
意思是宽度铺满整个textarea，高度每28px重复一次

<5>按钮

<button type = "submit"></button>
//默认：提交表单的操作
<button type = "button" onclick = “”></button>
//只执行onclick的操作
<button type = "reset"></button>
//清空表单所有内容

2. css

<1>语法

1. 选择器 {
   属性1：属性值1；
   属性2：属性值2；
   }

---

选择器：
类选择器：点+class名
ID选择器：#+id名
元素选择器：html里面的标签
通用选择器：*

选中页面上的所有元素
因为浏览器有默认样式
所以通过* {margin：0；padding：0}重置css

子元素选择器：父元素内部的子元素

.father > .son { }

后代选择器：父元素和内部的子元素没有直接关系

>father p(标签）

并集（兄弟）选择器
伪类选择器：

:hover//当鼠标移动到元素上触发的效果
:active//点击时

---

：是伪类(表示某种状态）
：：是伪元素（不是状态，是在元素里面生成一个假元素）

input：checked：：after
//意思是当input被勾选时，在内部生成一个after元素

---

2. css变量

定义：变量名必须以–开头，通常在：root（全局可用）选择器下定义，也可以在具体选择器下定义（仅在该选择器和子元素可用）

/* 全局定义 CSS 变量 */
:root {
  /* 背景色变量 */
  --box-bg: #f5f5f5;
  /* 主色调变量 */
  --main-color: #2c3e50;
  /* 主要强调色变量 */
  --primary: #007bff;
  /* 也可以定义尺寸、字体等变量 */
  --base-font-size: 16px;
}

/* 局部定义（仅.box 类生效） */
.box {
  --local-padding: 20px;
}

使用：通过var（）函数调用使用好的变量，还可以给var（）加第二个参数作为默认值（当变量为定义时生效）

 border: 1px solid var(--primary, #000); /* 变量存在则用 --primary，否则用 #000 */

<2>常见属性

4. 布局定位

display
position
top
left
bottom
right
float
z-index

---

控制元素显示类型：display
决定这个元素是否可以独占一行，决定能不能设置宽高

display：block
//块级元素 独占一行 可以设置宽高
display：inline
//行内元素 不独占一行 不能设置宽高
display：inline-block
//行内块元素 不独占一行 可以设置宽高
diplay：grid
//网格布局
//这个网格布局+place-items：center；可以让内容绝对居中

//现代布局flex
//flex有两个轴，默认情况主轴横向，交叉轴纵向
.父元素{
display:flex;
flex-direction：
//控制排列方向，默认row横向，纵向是column
justify-content：
//主轴对齐方向，居中center，靠右flex-end
align-items：
//交叉轴对齐，垂直居中center
gap：
//子元素间距

}

---

2. 动画基础：

• 变形：transform
  改变元素的形态

//1.位移（百分比是相较于自己的尺寸，不是父元素）
transform: translateX(50px);
transform: translateY(20px);
transform: translate(-50%, -50%);
//2.旋转
transform：rotate（45deg）;
//3.缩放
transform: scale(1.5);
//4.倾斜
transform: skew(10deg);
//补充：居中常见写法
left: 50%;
transform: translateX(-50%);

• 过渡：transition
  当属性改变时，产生平滑动画

transition：属性 时间 速度曲线 延迟;

• 关键帧：animation
  自己定义动画过程
  步骤
  （1）定义动画关键帧

@keyframes 动画名 {
  0% { transform: translateX(0); } /* 开始：不移动 */
  100% { transform: translateX(-50%); } /* 结束：向左移50% */
}

（2）绑定动画到元素

/* 格式：animation: 动画名 时长 速度曲线 循环次数; */
animation: 动画名 时长 linear infinite;

3. 背景相关：background

background-color
background-image
background-size//背景尺寸
background-repeat
background-position
background-repeat//重复

背景尺寸核心

contain:完整展示，不剪裁图片
cover:铺满盒子，会剪裁

4. 文字相关

font-size
font-weight
font-family//字体
text-align//对齐方式
text-decoration//下划线
color//颜色

5. 控制元素是否显示

display：none//隐藏
display：block//显示

<3>盒子模型

1. context：内容
2. width
3. height
4. padding：内边距
5. border：边框
   border复合属性：
   宽度，
   样式（solid实线，dashed虚线，dotted点线，double双实线），
   颜色
6. margin:外边距

<4>布局方式

1. 浮动

选择器 {
float：left/right/none 
}

特性：

• 脱离标准流
• 一行显示，顶部对齐
• 具备行内块特征

什么是标准流？
标准流就是按照块级元素和行内元素的顺序去排列的队伍

在标准流里面，父容器的高度是又所有子元素的总高度自动撑开的，而浮动会让元素脱离正常的位置，又因为它的脱离，导致父容器在计算自己高度的时候，会完全忽略这个浮动的子元素，从而没办法撑开父容器的高度，最终导致父容器的样式失效和布局混乱

解决方案：overflow:hidden
原理：触发了BFC，父容器进入这个状态以后，会自己重新计算自己的高度

2. 定位
   css中position默认是static（静态定位），也就是按照文档流排序，这个时候top/bottom/left/right不起作用，只有把position设为absolute/relative/fixed等，top这些才起作用，可以控制元素的位置

• 相对定位

position：relative
left：//距离原本的盒子向左偏移

• 绝对定位

position：absolute
//相对于已经定位了的最近的父级元素进行定位

• 固定定位

position：fixed
//相较于浏览器的窗口进行定位，无论怎么滚动页面，盒子都在那个位置

3. js

<1> 语法

1. 数据类型
   （1）基本数据类型（变量直接存值）：
   number
   string
   (字符串可以使用单引号或者双引号)
   boolean
   null
   undefined

（2）引用类型（变量存地址）：
数组[ ]
对象{firstName:“john”,age:50 }
函数funtion myFunction(a,b){ return a*b ;}

2. JS变量
   const常量

---

const锁的是地址，不是地址里面的内容
在基本数据类型里面，例如const a = 10，a是直接等于10，不是指向10，所以a = 20是错误的，这个时候就是重新指向新值
在引用类型里面，例如const arr = [ ],arr不是等于[ ],arr是指向一个内存地址，所以arr.push(1)是可以的，地址没变，只是地址里面的内容变了

---

var 变量

---

let 变量：创建一个可以改变的变量
let a = 10；a=20；这个是可以的
（更安全，灵活）

3. JS语句

条件语句

if ( ) { }
if ( ）{ } else { }

循环语句

for（初始化，满足条件，迭代器）{ }
while（循环条件）{ }

throw

抛出错误

try-catch

实现错误处理，与catch一块使用
try放置可能会抛出异常的代码，当try中抛出异常时，会转义到catch，在这里捕捉和处理异常，finally（可选）无论try是否抛出异常，都会执行这个代码

5. JS函数
   JS语句可以写在函数内，函数可以反复调用
   引用一个函数=调用函数(执行函数内的语句)

function 函数名（参数）{
}

function add（a，b） {
return a + b；
}
add（2，3）；

6. 函数表达式
   把函数存进变量

const add = function（a，b）{
return a + b；
}

7. 箭头函数
   简写版函数(把function当作=>)

const add = （a，b） => {
return a + b ;
}
//再简写
const add = （a，b) => a + b;

8. 对象
   一组键值对{ }

//{键：值}
const person = {
name :''Tom'',
age :13
};
//访问
person.name
person.age

9. 数组
   [ ]
   map可以遍历数组的每一个元素（也就是把单个的元素都拿出来，做点处理，然后组成一个新数组）

const numbers = [1, 2, 3];
const result = numbers.map(
function（n）{
return n*2;
}
);
//简写
numbers.map(n => n*2);

react经常要把数组数据变成一堆html，这时就要用到map

const users = ["Tom", "Jack", "Lucy"];

users.map(name => <li>{name}</li>);

---

map补充：

item只是一个变量名，表示数组当前的这个元素
const numbers = [10, 20, 30];
number.map((item) => {
console.log(item);
});//输出是10 20 30

const [todolist, setTodolist] = useState([]);
<div className="list">
  {todolist.map((item) => (
 //意思是item = {id：1，text：“吃饭”}
    <div className="todoItem" key={item.id}>
      {item.text}
    </div>
  ))}
</div>
//这段代码就是把数组遍历，分别建小盒子

---

…是展开运算符（把数字拆开）

const arr = [1,2,3];
console.log([...arr,4]);
//这个时候的结果是[1,2,3,4]

9. 解构
   从对象里面拆出值

const person = { name: "Tom", age: 18 };
//普通写法
const name = person.name;
//解构写法
const {name} = person；

• 数组解构：把数组里面的元素，按顺序赋值给方括号里的变量

//普通数组赋值
//假设useState（0）返回一个数组
const stateBox = React.useState(0)//存数组到stateBox
const count = stateBox[0]//数组第一个索引赋值给count
const setCount = stateBox[1]//数组第二个索引赋值给setCount
//数组解构写法（上面三行的简写）
const [count,setCount] = React.useState(0)

10. 模块导入导出
    一个大型的项目不可能写在一个文件里面，必须一个文件一个功能，需要用的时候再拿过来

就像一本书，先发布，然后别人拿来用

• 导出：export（发布出去）
• 导入：import（别人拿来用）

//App.js文件夹里面
//写了一个允许别的文件使用的函数
export default function sayHello（）{
//default是默认导出，一个文件只能有一个默认导出
//默认导出时，导入写法：import 任意名 from "路径"
//不默认，导入写法：import {原名} from "路径"
return "Hello"
//main.js文件夹里面
//从App.js里面把sayHello函数拿过来，使用它
import sayHello from "./App.jsx";
console.log(sayHello());
}

<2> 事件处理

事件就是浏览器识别到的用户操作，让页面能识别动作，并且做出反应，产生交互的效果

1. 常见事件

onClick 点击事件
onMouseOver 鼠标经过
onMouseOut 鼠标移出
onChange 文本内容改变事件
onSelect 文本框选中
onFoucus 光标集聚
onBlur移开光标

2. 事件绑定的方式

• html属性

//任意html标签，直接加on+事件名="要执行的js代码"
<botton onclick="alert('点击了按钮')">提交</botton>

• DOM属性

DOM是什么？

js是不认识html标签的，而浏览器会自动把整个html页面翻译成js能操作的元素对象，整个翻译后的页面就是DOM

//DOM绑定事件

<body>
//1.写id
<button id="Btn"> 点击按钮</button>
<script>
//找DOM元素
    const btn = document.getElementById('Btn');
//绑定点击事件
    btn.onclick = function(){};
    //或者简写btn.onclick = ()=>{};
//2.写class 只返回一个元素，用querySelector()
//3.写class 返回多个元素（列表），用querySelectorAll()
</script>
</body>

• addEventListener方法

//找到的DOM元素.addEventListener('事件名',触发后的函数），整个事件名不带on前缀
<!-- 1. 先写HTML元素，加唯一ID（方便找DOM） -->
<button id="myBtn">点我触发事件</button>

<script>
  // 2. 找DOM元素：通过ID获取按钮对象，存到变量里
  const myBtn = document.getElementById('myBtn');

  // 3. 用addEventListener绑定点击事件（核心）
  myBtn.addEventListener('click', () => {
    alert('addEventListener绑定的点击事件触发啦！');
  });
</script>

<3> 定时器

隔一段时间，自动执行一些代码

• setInterval（一直执行）

//setInterval（要执行的代码，时间）
//每一秒，自动打印一次你好
//写法1
setInterval(function(){
    console.log("你好");
}, 1000)
//写法2
function sayHi(){
    console.log("你好");
}
setInterval（sayHi，1000）；

• setTimeout（只执行一次）