前端基础总结

一、HTML

1.定义

HTML是超文本标记语言，是结构化标准语言

2.基本信息

• DOCTYPE:规范
• head
• meta:描述网页,可以用来搜索引擎优化！
• body

3.基本标签

• 标题标签
• 段落标签
• 水平线标签
• 换行标签
• 粗体/斜体
• 特殊符号：&xx；

4.图像标签

<img src ="" alt ="">
src:图片地址（必填）,（推荐）相对地址(../ --上一级目录),绝对地址
alt:图片名字（必填）
-->

5.超链接标签

<a href="" target="">显示信息</a>
href:必填
target：_blank /_self

---锚链接---
<a name="书签名"></a>
<a href="#书签名"></a>

---邮件链接：mailto：---
<a href="mailto:727869952@qq.com"></a>

6.列表

• 无序列表 ul li
• 有序列表 ol li
• 自定义列表 dl dt/dd

7.表格

<table>
    <tr>:行
        <td>：列（colspan：跨列|rowspan：跨行）
        </td>
    </tr>
</table>

8.视频和音频

• 视频元素：video
• 音频元素：audio

9.iframe内联框架

<iframe src="" name="名字" width="" height=""></iframe>
<a href="" target="名字"></a>

4.表单

1.表单提交方式

<form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
        get方式：我们可以在url中看到我们要提交的信息，不安全，高效
        post方式：比较安全，传输大文件
>
</form>

2.表单语法

1.使用 : type,name,value

• 文本框 text
• 密码框 password
• 单选框 radio
• 多选框 checkbox
• 按钮 button/image/submit/reset
• 文件 file

2.自己的标签

• 下拉框

• 文本域

3.表单应用

• 只读:readonly
• 禁用:disabled
• 隐藏:hidden

4.表单初级验证

• placeholder：提示信息
• required：非空判断
• pattern：正则表达式

二、CSS

1.定义

Cascading Style Sheet 层叠级联样式表，是表现标准语言

2.语法

<style>
    选择器{
        声明1;
        声明2;
        声明3;
    }
</style>

3.导入方式

• 行内样式：位于标签内
• 内部样式：写在style中
• 外部样式：link标签链接/@import导入

优先级:就近原则!!!

4.选择器

1.基本选择器

• 标签选择器
• class选择器
• id选择器 （全局唯一：在DOM中用到）

优先级: : id选择器>class选择器>标签选择器

2.层次选择器

• 后代选择器：选择body后面所有的p（祖籍）

/*后代选择器*/ 空格
body p{
    background: red;
}

• 子选择器：选择body后的同级p（一代）

/*子选择器*/ 大于号
body > p{
    background: blue;
}

• 相邻兄弟选择器:同类

/*相邻弟选择器，只有一个，相邻（向下）*/ +号
.active + p{
    background: brown;
}

• 通用选择器

/*通用弟选择器,当前选中元素的向下的所有兄弟元素*/ ~号
.active~p{
    background: green;
}

3.结构伪类选择器

• first-child 第一个子元素

• last-child 最后一个子元素

• p：nth-child(1) 父级元素下的第几个p标签 （以父级）

• p：nth-of-type(1) 父级元素下属于p标签的第几个 （以p）

4.属性选择器

• a[id]
• a[id=first]
• a[class*=“links”] (正则表达式：= *= ^= $=)

5.样式

1.span标签

重点突出的字！

2.字体

• font-family:字体
• font-size：大小
• font-weight：粗细
• color：颜色

3.文本

• 颜色：color
• 文本对齐的方式 ：text-align:center
• 首行缩进 ：text-indent
• 行高 ：line-height（上下居中：行高和块的高度一致）
• 装饰 ：text-decoration
• 文本图片对齐：vertical-align:middle

4.阴影

text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色;

5.超链接伪类

a：hover

6.列表

list-style：none/circle/decimal/square

7.背景

• background-color:red
• background-image:url(…/images/d.fig)
• background-position:270px 10px （设置图片位置，重点！！！）
• background-repeat:no-repeat （设置不重复）

6.盒子模型

盒子计算：margin+border+padding+内容宽度

1.边框

border:粗细，样式，颜色 （border: 1px solid red;）

2.内外边距

设置：按照顺时针旋转

margin:0px padding：0px

margin:0px 0px padding：0px 0px

margin:0px 0px 0px 0px padding：0px 0px 0px 0px

3.圆角边框

4个角 圆圈：圆角=半径+边框

border-radius:50px 20px 10px 5px;

4.盒子阴影

margin:0 auto 居中：（块元素有固定宽度）

box-shadow:10px 10px 100px yellow

7.浮动

1.标准文档流

所有的元素都在一个框框内

2.行内元素与块元素

• 行内元素：不独占一行

• 块级元素：独占一行

3.display实现行内与块的转换

display：

• inline：行内元素
• inline-block：是块元素，但是可以内联，在一行！
• none：消失

4.float

• float:left;
• float:right;

难题：父级边框塌陷问题？

• 1.增加父级元素的高度

• 2.增加一个空div标签，设置样式clear：both

• 3.父级元素增加overflow：hidden

• 在父类添加一个伪类：after（常用）

#father:after{
    content: '';
    display: block;
    clear:both;
}

8.定位

1.相对定位

相对于原来的位置进行偏移

position：relative；

它仍然在标准文档流中！原来的位置会被保留。

2.绝对定位

对于父级或浏览器的位置，进行指定的偏移,

position: absolute;

它不在标准文档流中！原来的位置不会被保留。

3.固定定位

position: fixed;

4.z-index

图层，默认是0，最高999

设置了absolute，才能设置z-index

9.opcity：设置透明度

opcity：0.5

三、JavaScript

1.定义

一门世界上最流行的脚本语言，一个合格的后端人员，必须要精通javaScript！

2.引入

• 内部标签

3.数据类型

1.整体概述

1.变量 es6 let

2.number

3.字符串 ‘’ （推荐） “ ”

4.布尔值

5.逻辑运算

6.比较运算符 ===

7.浮点数

8.数组 :不需要保证元素是相同类型

9.对象：

• 每个属性之间使用逗号隔开，最后一个不用
• 对象是大括号，数组是中括号！

2.重点数据

1.字符串

• 正常字符串我们使用单引号（’’）或双引号（ “”）
• 多行字符串：tab上面的键(``)
• 模板字符串：${变量名}
• 长度:str.length
• 字符串不可变！！！
• 大小写 toUpperCase() toLowerCase()
• 模式匹配 indexOf()
• 截取 substring()

2.数组

思想：如何存？如何取？

• 可以包含任意的数据类型
• 长度：arr.length 可变！！
• 模式匹配
• 截取 slice()
• 尾部操作：push() 入 pop() 出
• 头部操作: unshift() 入 shift() 出
• 排序：sort()
• 反转: reverse()
• 连接: concat()
• 连接符: join

3.对象

若干个键值对,JS中的所有的键都是字符串，值是任意对象

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

• 赋值：person.name = “xiaohei”
• 删除：delete person.name
• 添加：person.haha = “haha”
• 判断：
  • “toString” in person —（继承的也算）
  • person.hasOwnProperty(“toString”) —只能允许对象自己拥有这个属性

4.流程控制

• 遍历 :通过for of/for in 下标

var arr = [3,4,5];
for(var x of arr){
    console.log(x);
}

4.严格检查格式

ES6，写在JS第一行

‘use strict’

5.函数

1.定义方式

• function abs(x){}

• var abs = function(x){}

2.参数问题

• arguments代表传递进来的所有的参数，是一个数组

• rest 获取除了已经定义的参数之外的所有参数（ES6）–可变参数

  function aaa(a,b,...rest){
      console.log("a="+a);
      console.log("b="+b);
      console.log(rest);
  }
  

3.变量作用域

• 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

• 内部函数可以访问外部函数的成员，反之不行！(内部类与外部类)

• 内部函数变量和外部函数的变量重名时，由“内”向“外”查找，如果外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

• 规范：声明都在最前面，赋值并不会被提前！！

4.全局变量

• JS实际上只有一个全局作用域，任何变量（函数也可以视为变量）,假设没有在函数作用范围内找到，就会向外查找。如果在全局作用域都没有找到，报错Reference
• 把自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突的问题！

5.局部变量 let

6.常量 const

7.方法

1.定义

把函数放在对象的里面，对象只有两个东西:属性和方法

2.this

this是无法指向的，默认指向调用它的那个对象

3.apply

可以控制this指向：

getAge.apply(xiaoxiao,[]);//this指向了xiaoxiao这个对象，参数为空

6.内部对象

1.Date

var now = new Date();//Wed Jan 20 2021 17:32:41 GMT+0800 (中国标准时间) {}
now.getFullYear();//年
now.getMonth();//月 0-11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours()//时
now.getMilliseconds();//分
now.getSeconds();//秒
now.getTime(); //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数

new Date(1611135283415)//时间戳转为时间！
//Wed Jan 20 2021 17:34:43 GMT+0800 (中国标准时间)
now.toLocaleString()//调用本地时间(方法)
//"2021/1/20 下午5:34:43"

2.JSON

格式:

• 对象都用{}
• 数组都用[]
• 所有的键值对都使用key：value

JSON.stringify(user);

JSON.parse(’{“name”:“xiaoxiao”,“age”:3,“sex”:“男”}’);

可能搞混:JSON和JS对象的区别

var obj = {a:"hello",b:"hellob"};//js
var json = '{"a":"hello","b":"hellob"}';//json

7.面向对象编程

1.原型

//小明的原型是Student
xiaoming.__proto__ = Student;

//给Student新增一个方法
Student.prototype.hello = function (){
    alert("hello");
};

2.class继承

定义类，（属性，方法）–本质：查看对象原型

//定义一个学生的类
class Student{
    //构造方法
    constructor(name) {
        this.name = name;
    }
    //方法
    hello(){
        alert("hello");
    }
}

class XiaoStudent extends Student{
     //构造方法
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
     //方法
    myGrade(){
        alert("我是一名小学生")
    }
}

8.操作BOM对象

1.window

代表 浏览器窗口

2.location

代表 当前页面的URL信息

host: "jwxt.gcu.edu.cn"
href: "http://jwxt.gcu.edu.cn/"
protocol: "http:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign("http://jwxt.gcu.edu.cn")

3.document

代表 当前的页面 HTML DOM文档树

获取cookie：document.cookie

9.操作DOM对象

1.核心

浏览器网页就是一个Dom树形结构！

• 添加：添加一个新的节点
• 删除：先获取父节点，再删除Dom节点
• 更新：先获得Dom节点，再更新Dom节点
• 获得：遍历Dom节点，得到Dom节点

2.获得Dom节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');//标签
var p1 = document.getElementById('p1');//id
var p2 = document.getElementsByClassName('p2');//class
var father = document.getElementById('father');//id
var chiledrens = father.children;//获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;

3.更新Dom节点

<div id="id1">
</div>
<script>
    var id1 = document.getElementById('id1')
</script>

操作文本

id1.innerText="456" //修改文本的值
id1.innerHTML='<strong>1234</strong>'//可以解析html标签

操作css

id1.style.color='red' //属性使用 字符串 包装
id1.style.fontSize="202px"//驼峰命名
id1.style.padding = '2em'

4.删除Dom节点

id才能删除，不是id选择器，获得的是一个数组，使用xx[0]

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = self.parentElement;
father.removeChild(p1)
//删除是一个动态的过程！！！
father,removeChild(father.children[0]);
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

5.插入Dom节点

<script>
    var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
	list.append(js);//追加到后面
    //通过JS创建一个新节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = "newP";
    newP.innerText = 'hello,xiaoxiao';
		//相当于：<p id="newP">hello,xiaoxiao</p>
    list.append(newP);
	//创建一个标签节点
	var myScript = document.createElement('script');
	//通过这个属性，可以设置任意的值
    myScript.setAttribute('type','text/javascript');

	//没有id获得的是一个数组
    var body = document.getElementsByTagName('body');
    body[0].setAttribute('style','background-color:blue');
</script>

6.insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

10.操作表单

1.获得提交信息

<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value='123'
    //对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果是否为true，true则是被选中了
    boy_radio.checked = true;//赋值
</script>

2.提交表单

• 使用mds5加密

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

• 优化

<!--
1.表单绑定提交事件
2.onsubmit = 绑定一个提交检测的函数，true，false
3.将这个结果返回给表单，使用onsubmit接收
4.οnsubmit=" return aaa()"
-->
<form action="http://www.baidu.com/" 
      method="post" onsubmit=" return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username" >
    </p>
    <p>
        <span>密码：</span><input type="text" id="input-password" >
    </p>
    <!--优化表单-->
    <input type="hidden" id="md5-password" name="password">
    
    <button type="submit" >提交</button>
</form>
<script>
    function aaa(){
      var uname = document.getElementById('username');
      var pwd = document.getElementById('input-password');
      var md5pwd = document.getElementById('md5-password');

      md5pwd.value = md5(pwd);
      //可以校验判断表单，true就是通过提交，false就是阻止提交
      return true;
    }
</script>

11.初识jQuery

• 导入jQuery库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

• 公式

$(selector).action();

• 文档工具站:https://jquery.cuishifeng.cn/

1.获取jQuery

<script>
    //选择器就是css的选择器
    $('#test-jquery').click(function (){
        alert('hello,jquery')
    });
</script>

2.选择器

//jQuery
$('p').click() //标签选择器
$('#id1').click() //id选择器
$('.class1').click() //class选择器

3.事件

<script>
    //当网页元素加载完毕之后，响应事件
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>

4.操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

css操作

$('#test-ul li[name=python]').css('color','red');

元素的显示和隐藏

本质：display ： none；

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

5.如何学习jQuery

1.看文档工具站:https://jquery.cuishifeng.cn/

2.不会的地方查！