前端基础

前端基础

引言，学习前端之前先要搞清楚前端和后端的区别吧！前端是任何与用户直接打交道的操作界面都可以称之为 '接待员'。而后端是不直接与用户打交道主要负责内部真正的业务逻辑的执行可以理解为 '幕后操作者'

前端三剑客
网页的骨架HTML
网页的样式CSS
网页的动态JavaScript

先学习HTTP协议相关的必会知识吧

1.HTTP的四大特性

基于请求响应；客户端发送请求、服务端回应响应
基于TCP、IP作用于应用层上的协议；该协议属于应用层
无状态；服务端不会保存客户端的状态、记不住人
无/短链接；客户端与服务端不会长久保持链接

2.数据格式

请求格式
请求首行(请求方式及协议版本)
请求头(一大堆K:V键值对)
换行
请求体(存放敏感信息并不是所有请求体都有请求体)
响应格式
响应首行(状态码及协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)

3.响应状态码

1XX：服务端接收到了你的请求正在处理客户端可以继续发送或等待
2XX：200 OK 请求成功服务端发送了对应的响应
3XX：302(临时) 304(永久) 重定向(想访问A网页但是自动跳转到了B网站)
4XX：403访问权限不够 404请求资源不存在
5XX：服务端内部错误
自定义响应状态码通常以10000起步(聚合数据)

一、网页骨架HTML

HTML(Hyper Text Markup Language的缩写，翻译成中文就是超文本标记语言)html语言是一种标记语言，编写后通过浏览器来识别，不属于程序语言。只是一种排版网页中资料显示位置的标记结构语言。

1.HTML注释语法

<!--注释内容-->

2.HTML文档结构

<!DOCTYPE html>
<html lang="en">固定格式HTML包裹
<head>主要放跟浏览器交互的配置
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>主要放给用户查看的花里花哨的内容

</body>
</html>

3.HTML标签分类

单标签比如
双标签比如

4.常见符号

&nbsp ; 空格
&gt ; 大于
&lt ; 小于
&amp ; &符号
&yen ; ¥
&copy ; ©
&reg ; ®

5.body内基本标签

标题系列标签h1~h6
段落标签 p
其他标签(行内标签) u下划线、i 斜体、s 删除线、b加粗
换行与分割线 br 换行 hr 分割线

6.body内布局标签

标签之间可以相互嵌套并且理论上可以无限套娃；块级标签内部可以嵌套块级标签和行内标签，p标签虽然是块级标签但是它的内部不能嵌套块级标签；行内标签内部只能嵌套行内标签

块级标签 div
行内标签 span

7.body内常用标签

<a href=""></a>

a标签 链接标签
href="url" 具备跳转功能
href="#id" 具备锚点功能
target默认_self原网页跳转
target指定_blank新建网页跳转

<img src="" alt="">

img标签 图片标签
src=""填写图片地址
alt=""图片加载失败提示的信息
width/height图片尺寸是等比例缩放两者调整一个即可

8.列表标签

<ul>
    <li>手机</li>
    <li>衣物</li>
    <li>电子</li>
</ul>

无序列表：页面上所有的有规则排列的横向或者竖着的数据一般使用的都是无序列表

<ol type="I">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

有序列表：还可以通过type竖向切换数字

<dl>
	<dt>大标题</dt>
        <dd>小标题1</dd>
        <dd>小标题2</dd>
	<dt>大标题</dt>
        <dd>小标题1</dd>
        <dd>小标题2</dd>
        <dd>小标题3</dd>
</dl>

标题列表

9.表格标签

<!--先写基本骨架-->
<table>
    <thead></thead>
    <tbody></tbody>
</table>

<!--再写表头及表单数据-->
<tr> 一个tr标签表示一行
    <th>编号</th> th主要用于表头字段中用来加粗显示
    <td>1</td> td主要用于表达数据中

<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>almira</td>
        <td>18</td>
    </tr>
    </tbody>
</table>

10.表单标签

可以获取到用户的数据并发送给服务端

<form action=""></form>

form表单属性

action控制数据的提交地址
method控制数据的提交方法
name相当于字典的键
value相当于字典的值

<input type="text">

input标签的type属性

text普通文本
password密文展示
date日期选项
email邮箱格式
radio单选
checkbox多选
file文件
submit触发提交动作
reset重置表单内容
button暂无任何功能

<select name="" ></select>  select标签下拉框
<option value=""></option>   一个个选项

<textarea name="" ></textarea>  获取大段文本

二、网页样式CSS

1.CSS语法结构及其注释语法另外引入CSS的方式

选择器{
    样式名1:样式值1；
    样式名2:样式值2；
}

/*注释内容*/

head内style标签内部编写(学习的时候使用)
head内link标签引入(标准的方式)
标签内部通过style属性直接编写(不推荐)

2.CSS选择器前四个及其组合后四个

div {
    color:red;
}
/*标签选择器直接按照标签名查找标签*/

.c1 {
    color:green;
}
/*类选择器按照标签的class值查找标签*/

#d1 {
    color:yellow;
}
/*id选择器根据标签的id精准查找标签*/

* {
    color:blue;
}
/*通用选择器直接选择页面所有的标签*/

div span {
    color:black;
}
/*用空格来表示后代选择器*/

div>span {
    color:orange;
}
/*用大于号表示儿子选择器*/

div+span {
    color:yellow;
}
/*用加号表示毗邻选择器*/

div~span {
    color:green;
}
/*用小波浪号表示弟弟选择器*/

3.分组与嵌套

div,p,span {
    color:yellow;
}
/*多个选择器合并查找*/

#d1,.c1,span {
    color:yellow;
}
/*多个选择器合并查找*/

div.c1 {
    color:yellow;
}
/*查找class含有c1的div*/

div#d1 {
    color:yellow;
}
/*查找id是d1的div*/

.c1 p.c2 {
    color:yellow;
}
/*查找含有c1样式值里面含有c2样式值得p标签*/

[username] {
    color:yellow;
}
/*按照属性名查找*/

[username]='almira' {
    color:yellow;
}
/*按照属性名等于属性值查找*/

4.伪类选择器前两个以及伪元素选择器后两个还有选择器优先级

a:hover {
    color:red;
}
/*a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色*/

input:focus {
    background-color:red;
}
/*input获取焦点被点击之后采用的样式*/

p:before {
    content: 'LOL';
    color:red;
}
/*css添加文本无法正常选中*/

p:after {
    content: 'Ahhh';
    color:red;
}
/*css添加文本无法正常选中*/

选择器相同导入方式不同那就就近原则
选择器不同导入方式相同内联样式>id选择器>类选择器>标签选择器

5.CSS样式调节

/*字体样式*/
font-size:14px 24px 28px 36px	字体大小
font-weight: lighter;     	    字体粗细
color有三种表示方式		      字体颜色
color: red;
color: #3d3d3d;
color: rgba(186,11,98,0.5)      a是代表透明度范围是0~1
text-align: center		        文本居中
text-decoration: none;          主要用于a标签取消下划线
text-indent: 32px;		       首行缩进

/*背景属性*/
div {
    width:800px;
    height:800px;
    background-color:red;
    background:url("图片地址") blue no-repeat center center;
    
}
/*
多个属性名有相同的前缀那么可以简写一次性完成
background-image
background-color
background-repeat
background-position
*/

6.边框

border: 10px solid orage;
/*属性分别为宽度实现颜色*/

diplay:none
/*彻彻底底的隐藏标签*/
visibility:hidden
/*隐藏的不彻底*/

7.盒子模型

content   内容
padding   内边距
border    边框
maigin    外边距

margin: 0 auto;针对标签的嵌套 水平方向可以居中
margin与padding用法一致

padding: 20px; 上下左右
padding: 20px 40px;  上下   左右
padding: 10px 20px 30px;上  左右  下
padding: 10px 20px 30px 40px;上 右 下 左
/*padding有以上四种调节方式*/

8.浮动

浮动现象float:left\right
浮动就是用来做页面布局的
浮动带来的影响浮动的元素是脱离正常文档流的会造成父标签塌陷
如何解决浮动的影响 使用关键字clear
提前写好样式类
.clearfix:after {
    content: '';
    display:block;
    clear:both;
}
然后谁塌陷了就给谁添加clearfix样式类即可 浏览器会优先展示文本内容

9.溢出

div {
    height: 150px;
    width: 150px;
    border: 5px solid greenyellow;
    border-radius: 50%;
    overflow: hidden;
        }
div img {
    max-width: 100%;
        }

10.定位

标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
	1.static静态(标签默认的状态 无法定位移动)
 	2.relative相对定位(基于标签原来的位置)
 	3.absolute绝对定位(基于某个定位过的父标签做定位)
	4.fixed固定定位(基于浏览器窗口固定不动)
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }

/*模态框属性z-index*/
body {
            margin: 0;
        }
.cover {
            background-color: rgba(127,127,127,0.5);
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 100;
        }
.modal {
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 101;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
        }

三、网页的动态JavaScript

1.必备基础知识注释语法、结束符号以及变量与常量

//单行注释
/*多行注释*/

代码写完标志结束用分号;

声明变量需要用关键字var或let 比如var name = 'almira';
声明常量也需要使用关键字const 比如const Pi = 3.14;

2.引入JavaScript的多种方式

head内script标签内编写
head内script标签src属性引入外部JavaScript资源
head内最底部通过script标签src属性引入外部JavaScript资源(最长用)

3.基本数据类型以及运算符

'数值类型'(Number)整型和浮点型不分家 NaN也属于数值类型意思是：不是一个数字(Not A Number)

'字符类型'(String)单引号''双引号""模板字符串``， 字符串拼接推荐使用加号

'布尔类型'(Boolean)JavaScript里面要春小写而Python里面首字母大写

'对象(object)' 
数组(Array)类似于Python中的列表 let l1 = [] 
自定义对象类似于字典 let d1 = {'name': 'almira'}

+ - * / % ++(自增1) --(自减1)

var res1=x++;  加号在后面	先赋值后自增
var res2=++x;  加号在前面	先自增后赋值

!= 弱不相等
!== 强不相等
== 弱值相等
=== 强值相等

&&与
||或
！非

4.流程控制

// 单if分支

if(条件){
    条件成立之后执行的代码
}

// if ··· else分支

if(条件){
    条件成立之后执行的代码
}else {
    条件不成立之后执行的代码
}

// for循环

for(起始条件；循环条件；条件处理){
    循环体代码
}

// while循环

while(循环条件){
    循环体代码
}

5.函数

function 函数名(形参){
    //函数注释
    函数体代码
    return 返回值
}

// 匿名函数

var s1 = function(a, b){
  return a + b;
}

// 箭头函数

var f = v => v;
var f = function(v){
  return v;
}

6.内置对象

var d = new Date(); 
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)


let dd = {name: 'almira', age: 24}
JSON.stringify(dd)	序列化
JSON.parse(ss)	   反序列化


定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
全局模式的规律 lastIndex
test匹配数据不传默认传undefined

7.BOM&DOM操作

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素

# BOM操作
window.open()  // 打开
window.close()  // 关闭
window.location.href  // 定位到指定的网页	
window.history.forward()\back()  // 前一页&后一页
window.location.reload()  // 刷新当前页面
alert()\confirm()\prompt()  // 警告框 确认框 提示框
setTimeOut()\clearTimeOut()  // 设置计时器 取消任务
setInterval()/clearInterval()  // 间隔一段时间执行 取消任务

# DOM操作

DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素

document.getElementById('d1')  // 结果就是标签对象本身
document.getElementsByClassName('c1')  // 结果是数组里面含有多个标签对象
document.getElementsByTagName('span')  // 结果是数组里面含有多个标签对象
    
parentElement           父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

# 操作节点

// js代码创建一个标签
let aEle = document.createElement('a')

// js代码操作标签属性
aEle.href = 'http://www.lsmpx.com/'  只能添加默认的属性
setAttribute()兼容默认属性和自定义属性
getAttribute("age")
removeAttribute("age")

// js代码操作标签文本
aEle.innerText = '这个很攒劲!'

// js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)


.innerText  		 获取标签内部所有的文本内容
.innerText = '文本'  替换/设置标签内部的文本(不识别标签语法)

.innerHTML			获取标签内部所有的标签包含文本
.innerHTML = '文本'  替换/设置标签内部的文本(识别标签语法)

8.事件

事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能

常见事件
onclick        当用户点击某个对象时调用的事件句柄
onfocus        元素获得焦点            
onblur         元素失去焦点              
onchange       域的内容被改变    

绑定事件的多种方式
<!--绑定事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--绑定事件的方式2-->
<input type="button" value="快快快" >

        <script>
            function showMsg() {
                let msg = prompt('你确定要这样吗?');
                console.log(msg)
            }

            let inputEle = document.getElementById('d1');
            inputEle.onclick = function () {
                alert('谁在那里点我!!!')
            }
        </script>
     
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身	
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
 
onload方法 XXX.onload 等待XXX加载完毕之后再执行后面的代码

# 事件相关案例

<input type="text" value="游戏机" >

<script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function () {
            this.value = ''
        }
        inputEle.onblur = function () {
            this.value = '下次再来哟!'
        }
</script>


    <p>username:
        <input type="text" >
        <span style="color: red"></span>
    </p>
    <p>password:
        <input type="text" >
        <span style="color: red"></span>
    </p>
    <button >提交</button>

    <script>
        // 1.查找提交按钮的标签
        subEle = document.getElementById('suBtn')
        // 2.给按钮标签绑定点击事件
        subEle.onclick = function (){
            // 3.查找获取用户输入的标签并获取数据
            let userNameEle = document.getElementById('d1')
            let passWordEle = document.getElementById('d2')
            if(userNameEle.value === 'jason'){
                userNameEle.nextElementSibling.innerText = '用户名不能是Jason'
            }
            if(passWordEle.value === '123'){
                passWordEle.nextElementSibling.innerText = '密码不能是123'
            }
        }
    </script>
    
    
省:
<select name="" >

</select>

市:
<select name="" >

</select>
<script>
    let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }
    // 提前查找好省和市的select标签
    let proSeEle = document.getElementById('d1');
    let citySeEle = document.getElementById('d2');
    // 1.获取所有的省信息
    for (let pro in data) {
        // 2.创建option标签
        let proOpEle = document.createElement('option');
        // 3.添加文本及属性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value', pro);
        // 4.将创建好的option标签添加到省下拉框中
        proSeEle.appendChild(proOpEle)
    }
    // 5.给省标签绑定文本域变化事件 onchange
    proSeEle.onchange = function () {
        citySeEle.innerHTML = '';  // 每次操作市之前清空市数据
        // 6.获取用户选择的省信息 根据省获取市信息
        let targetProData = this.value;
        let cityDataList = data[targetProData];
        // 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
        for (let i = 0; i < cityDataList.length; i++) {
            let cityOpEle = document.createElement('option');
            cityOpEle.innerText = cityDataList[i];
            cityOpEle.setAttribute('value', cityDataList[i]);
            citySeEle.appendChild(cityOpEle)
        }
    }
</script>

9.jQuery类库

加载快速度快
选择器更多更好用
一行代码走天下
支持Ajax请求
兼容更多的浏览器

准备工作
	1.下载核心文件到本地引入(没有网络也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN网络资源加载(必须有网络才可以使用)
    	https://www.bootcdn.cn/
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
        

jQuery封装了js代码让代码更简单但是有时候js代码速度更快
引入jQuery的方式使用关键字jQuery或用符号$都可以

1.基本选择器
$('#d1')	id选择器
$('.c1')	class选择器
$('div')	标签选择器

2.组合选择器
$('div#d1')			查找id是d1的div标签
$('span.c1') 		 查找含有c1样式类的span标签
$('div,span,p')		 查找div或者span或者p标签
$('#d1,.c1,span')	 查找id是d1的或者class含有c1的或者span标签

3.层级选择器
$('div p')			查找div里面所有的后代p标签
$('div>p')			查找div里面的儿子p标签
$('div+p')			查找div同级别下面紧挨着的p标签
$('div~p')			查找div同级别下面所有的p标签

4.属性选择器
$('[username]')			查找含有username属性名的标签
$('[username="jason"]')	查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')

5.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first')	优化   $('li').first()
        
        
6.表单筛选器
$(':text')
$(':password')
$(':checked')		checked与selected都会找到
$(':selected')		selected

7.筛选器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

// 操作标签
1.class操作
addClass()			    classList.add()
removeClass() 			classList.remove()
hasClass() 				classList.contains()
toggleClass()			classList.toggle()

2.位置操作
$(window).scrollTop()

3.文本操作
text()					innerText
html()					innerHTML
val()					value
jQuery对象[0].files	  files[0]

4.创建标签
document.createElement()  $('<a>')

5.属性操作
attr()/removeAttr()					 xxxAttribute()
attr针对动态变化的属性获取会失真
prop('checked') prop('selected')

6.文档处理
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
    
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
    
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

// jQuery事件

JS绑定事件 标签对象.on事件名 = function(){}
jQuery事件绑定
方式1:jQuery对象.事件名(function(){})
方式2:jQuery对象.on('事件名称',function(){})
 	
clone属性 clone(true)  默认不克隆事件 加true就可以

取消后续事件 事件函数的最后return false即可
阻止事件冒泡 事件函数的最后return false即可
等待页面加载完毕再执行代码
$(function(){})				   缩略写法
$(document).ready(function(){})  完整写法
事件委托
主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行

10.bootstrap页面框架

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
  
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

# 使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		 没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			 划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

表格样式
<table class="table table-hover table-striped">
颜色<tr class="success">

表单标签
class = "form-control"

按钮组
class = "btn btn-primary btn-block"

图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
    
导航条
class="navbar navbar-inverse"