html + css +js
前言：今天上助教课，闲着无聊学了一下前端的知识。感觉确实很容易被AI代替，也很容易入门。但是我感觉这样更好啊，每个人的掌握工具的能力似乎越来越强了。
目录
一、html
1.html简介
2.常见的文本标签
（1）标题标签
（2）段落标签
（3）无序列表与有序列表
（4）表格元素
3.html标签属性
（1）基本概念
（2）a标签和属性
（3）img标签和属性
4.html区块
（1）.基本概念
（2）.常见的块标签
Ⅰ：div标签
（3）.常见的行内元素
Ⅳ：span
5.html表单
（1）form标签
二、CSS
1.css基本概念
（1）概述
（2）.css简单使用方法
（3）.css的三种导入方式
2.选择器
（1）类选择器
（2）id选择器
（3）选择所有元素
（4）子元素选择器
（5）后代选择器
（6）相邻元素选择器
（7）伪类选择器
3.css常用属性
（1）复合属性
（2）行内块元素
（3）3种元素的相互转换
4.盒子模型
（1）基本概念
（2）实战
5.浮动
6.定位
（1）相对定位
（2）绝对定位
（3）绝对定位
三、JavaScript
1.简介
2.变量和数据类型
3.js的控制语句
（1）条件语句
（2）循环语句
4.函数
5.DOM
一、html
1.html简介
html其实就是标签和属性组成的，属性是一个键值对。仅仅通过上述两个，就可以确定一个网页的骨架了。
标签一般是双标签，表示一个区域的开始和结束，也有单标签，比如换行。
2.常见的文本标签
（1）标题标签
html有6个标题标签，分别用h1-h6表示
（2）段落标签
段落标签用p表示
（3）无序列表与有序列表
无序列表是ul，有序列表是ol，
（4）表格元素
表格标签是table
表格的每一行的标签是tr
每一行里面的元素的标签是td
第一行标题的标签是th
3.html标签属性
（1）基本概念
（2）a标签和属性
a标签非常重要的属性是href，表示超链接
还有个target属性，可以通过设定这个值来设定打开超链接是从当前页面转换，还是新打开一个页面。
多个a标签写在一起的时候不带换行，也就是说a标签是行内元素。如果换行需要使用br标签。hr标签表示一个分割线。
（3）img标签和属性
img标签也是行内元素，不独占一行
src属性表示图片的路径或者url
alt属性表示如果图片找不到的话，默认加载的内容
4.html区块
（1）.基本概念
（2）.常见的块标签
Ⅰ：div标签
没有任何语义，仅仅负责创建页面的布局结构。
（3）.常见的行内元素
Ⅳ：span
和div一样，没有什么语义，只不过是行内元素，负责组织结构的。
5.html表单
（1）form标签
input标签表示输入框，通过type可以调整是文本输入框（text）或者是选择框（radio）
当type是radio的时候，可以设置input的name属性来设置单选，也就是form里面的所有类型为radio的选择框只能选一个。如果不设置name属性就可以多选
input还有一个placeholder的属性，表示在文本框中不输入东西的时候他的默认值。
label标签顾名思义 就是标签名，用在文本框前面，他有一个for属性，可以和一个input绑定在一起，不过这个input此时需要有id号。
input还有type为checkbox的时候可以设置多选，此时有name也是多选。
input还有一个submit的类型，使用这个类型点击后可以跳转页面。跳转后的页面是form里面的action里面写的url。
二、CSS
1.css基本概念
（1）概述
html搭建好了网页的骨架和内容，而css用来构建网页的样式。
（2）.css简单使用方法
（3）.css的三种导入方式
html标签都有style属性，通过这个属性设置对应标签的样式，优先级最高
内部样式表就是在head标签里面设置对应标签的style
外部样式表，就是讲css单独写一个文件导入
下面详细介绍第三中方法，首先在一个.css文件中设置style
之后再html的head标签中link一下
2.选择器
上面我们就单独对一类标签的格式进行操作，选择器允许你对特定的一组元素定义样式。
（1）类选择器
现在我有两个h3标签，我希望我的style只作用其中的一个h3，这两个h3属于不同的类，那么我的方法是通过类选择器选择对应的h3。
这个.类名表示类选择器。
（2）id选择器
id选择器是 #id名称
（3）选择所有元素
使用*，直接匹配所有的元素。
（4）子元素选择器
使用方法是通过 > 不断的向内迭代。
（5）后代选择器
后代选择器格式就是直接 空格隔开，向内迭代。
如果两个选择器同时选中了一个元素，存在一个优先级的问题，id>类>元素
（6）相邻元素选择器
+表示选择h3同级下面的一个元素。
（7）伪类选择器
这个就是用户交互的时候可以改变元素的格式，鼠标放上去就变色。#element表示id是element， 中间使用：隔开，之后hover表示交互操作是悬停。
3.css常用属性
（1）复合属性
对于字体，同时设置颜色，大小，样式
（2）行内块元素
和行内元素区别在于可设置宽高。和块元素区别在于不会换行。
给行内元素设置宽高没有意义，他会自适应调整的，
（3）3种元素的相互转换
讲块转换为行内元素
行内元素转换为行内块元素
行内元素转化为块元素
4.盒子模型
（1）基本概念
（2）实战
可以设置块的宽高，再次基础上可以设置文字的放置位置，是居中还是其他的，这个是padding
之后可以设置边框的属性，样式，宽高，颜色等等。
之后块和块之间可以设置距离啊什么的。
5.浮动
无论之前元素是什么类型，添加浮动属性之后全部变成行内块。之后浮动是相对于父亲浮动的。
浮动可能覆盖父元素，看不到父元素后面的东西，那么需要解除浮动。设置overflow为hidden，这样就可以撑开了。
6.定位
（1）相对定位
他有父亲，设置position为relative，之后可以使用left和top等，设置相对于父亲的位置。他的特点是不会脱离正常文档流。 也就是即使中间的有位置，他也不会自动上去。
（2）绝对定位
这个就是当绝对定位的元素位置空出来之后，这个紫色可以自动调整，而不是处于第三行。
（3）绝对定位
设置绝对定位的话，无论怎么滑动窗口，元素相对于窗口的位置不变。
三、JavaScript
1.简介
在script标签下写代码，可以从外部的js文件导入。可以写在body下也可以写在head下。
2.变量和数据类型
let 声明一个变量
const 声明一个常量
3.js的控制语句
（1）条件语句
（2）循环语句
for循环
while循环
一些其他的
4.函数
5.事件
5.DOM
可以直接根据document.getElement来获取这个html文件中的元素。由于ID唯一的，那么只能获取一个元素，通过Tag呢，由于不唯一，可以获得一个数组等等。
获取标签后，可以更改标签内容
innerhtml和innertext的区别在于是否会对内容进行解析，前者解析，后者不。
此外还可以设置标签的大小和颜色
获取标签之后还可以绑定事件
此外还有很多，记忆没什么意义。