前言：今天上助教课，闲着无聊学了一下前端的知识。感觉确实很容易被AI代替，也很容易入门。但是我感觉这样更好啊，每个人的掌握工具的能力似乎越来越强了。
目录
一、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的区别在于是否会对内容进行解析，前者解析，后者不。
此外还可以设置标签的大小和颜色
获取标签之后还可以绑定事件
此外还有很多，记忆没什么意义。