---

---

前言：

“前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默
经过小新缜密的思考与亲身体验，忍不住分享一下给大家。有人工智能兴趣的朋友们，推荐大家一起学习 🎉点击直接访问🎉
里面有丰富的人工智能学习资料，真正做到从入门到入土，还不快来一起学习🎏🎏🎏

---

个人名片：

🐼作者简介：一名大一在校生
🐻‍❄️个人主页：小新爱学习.
🐼个人WeChat：hmmwx53
🕊️系列专栏：零基础学java ----- 重识c语言
🐓每日一句：.还有星月可寄望，还有山川可浪漫。

---

---

WEB前端🎐🎐🎐

HTML✨✨✨

HTML 超文本标记语言

• HTML(Hypertext Markup Language)超文本标记语言。
• 它负责网页的三个要素之一结构。
• HTML使用标签的形式来标识网页中的不同组成部分
• 所谓超文本指的就是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

---

标签 ✨✨✨

1.标签名属性名都要用小写字母✨✨✨

2.浏览器会自动数略多余空格和换行 ✨✨✨

• br/换行 单标签
• hr/水平线 单标签
• pre标签 保持文章格式 原本输出
• p 段落标签 双标签
• h1-6 标题标签 双标签
• strong 加粗 双标签 重要东西
• em 斜体双标签
• b加粗 双标签 无所谓
• < !-- -->注释标签

特殊符号✨✨✨

 ； 空格 >； 大于号 <；小于号 "；引号 ©；版权符号

图片链接🎐🎐🎐

alt=图片无法显示提示文字 title=图片悬浮文字 height=高 后四个可写可不写 全部双引号 >

a链接 双标签链接🎐🎐🎐

1. 页面间链接

我是链接 点击图片进入链接：图片链接在a链接跳转 直接加入其内 如上
target="" 设置跳转页面 不写默认_self 新增页面跳转 _blank
title=悬浮文字

2.功能性链接🎐🎐🎐

生成代码 直接百度搜索 < a href ="">
3.锚链接
< a href="#"> < a href=""> 上下呼应

列表🎐🎐🎐

1.无序列表< ul> < li>双标签 < li>在< ul>里面
2.有序列表< ol>双标签 < li>在< ol>里面
3.定义列表< dl>大列表 < dt>表标题 < dd>表内容 皆为双标签

表格

表格

< tr>表示行 行里套列 < td>代表列 双标签 < td>里加内容

另加表格得在该行该列下加table colspan rwsopan都在< td>里

音频标签

框架

*< frameset cols=列 rows= 行 表示剩下全部 双标签 不可写在body里面 >
< frame src 依次代表其上数值>
另加框架在其框架下新加frameset noresize表示禁止调节框架

表 单

在boby里面 双标签

表单控件

语法

单行文本框
单选按钮< input type=“radio”单选按钮 name=“sex” value="” 必须写 男
< input type=“radio” name=“sex”> 女 name要一样
​ < label for=“nv”> 跟前面产生关联 ID一样
button标签 按钮 默认submit 清空reset 普通button
复选按钮< input tyoe=“checkbox”
checked表默认选中
列表框 双标签 < select name size表默认显示列 >
selected表默认选中项目< optgroup label=“山西”> 分组
< /select>
多行文本域< textrea cols=显示列数 rows=显示行数>文本内容 < /textrea>
W文件域 邮箱 网址 日期 数字
搜索框
只读 read only
禁用 disabled
隐藏域hidden
表单验证 1.placeholder 文本框提示
2.required 非空验证
3. patern 验证规则 正则表达式

css 样式表

简介

可以对html以及xhtml进行包装

优势

1 内容与表现分离
2网页表现统一容易更改
.3丰富样式 是布局灵活
4.减少网页代码量 增加网页浏览速度 节省 网络带宽
5.运用独立页面的css 有利于网页被搜索引擎收录

语法

选择器{声明1
声明2} 得写在head 里

选择器

​ 类选择器 class 针对. 多次使用
​ ID选择器 id针对# 使用一次 大范围使用
​ 标签选择器 无符号所有都适用
​ 并集选择器 多个选择器通过,分割可以为多个选择器设置同样样式
​ 交集选择器 选择同时满足多个选择器要求的元素 用.操作符链接 中间不能添加空格
选择器优先级 id选择器> 类选择器>标签选择器
分离 建立css文本文件 不需要< style>标签
写好后在html文件head标签里引入css 俩种方式 1连接式 < link href=路径 rel type>属于 html 标签
2 导入方式< style/>@inshiziprot url（“路径”）< /style> 属于 css样式

三种样式

内部样式表 写入html内head里面
外部样示表 用的多 最符合css优势
行内样式表一般不用 调试用
优先级 就近原则 行内>内部样式表>外部样式表

css的高级选择器

层级选择器

​ 父子关系
​ 1.后代选择器 .选择所有子元素 可以嵌套 用空格连接
​ 2.子选择器 只选择直接的元素 用>连接
​ 兄弟关系
​ 3.相邻兄弟选择器 只选择紧跟其后的一个 用+连接 只能向后选择
​ 4.通用兄弟选择器 选择紧跟其后的所有元素 用~连接 只能向后选择

伪类选择器

伪类样式

a： hover{} a:link未访问超链接样式
a：visite 单击后样式
a：hover鼠标悬浮其上样式
a：active单击未释放样式
顺序 a:link>a：visite > a：hover> a：active

伪类结构选择器

1.选择第一个子元素/ ul li:first-child{ color:red; }

2./*选择最后一个子元素 ul li:last-child{ color:blue;}

3./*选择索引位置寻找子元素 从1开始 ul li:nth-child(4){ color: green; }

4.选择奇数类子元素 ul li:nth-child(odd)

5.选择偶数类子元素 ul li:nth-child(even)

6. 选择第一个特定元素 .box p:first-of-type{

7. 选择最后一个特定元素 .box p:last-of-type{

8. 选择某个特定元素 .box p:nth-of-type()

属性选择器

1. 按钮包含某个元素 input[placeholder]{ width: 200px;}
2. 按钮 包含某些元素 input[type^=“pass”]{ border: 1px solid red; }
3. 按钮 必须包含这些元素 input[type=“password”]{ border: 1px solid blue; }
4. 按钮以某个元素结尾 input[type$=“t”]{ border: 1px solid green; }
5. 按钮只要包含某个元素 input[type=“t”]{ height: 50px; }*

默认标签分类

1.块状标签 （block） 独占一行 可改变宽高 hn div p hr header footer section

2. 内联标签（inline） 不独占一行 不可改变宽高 a span lable

3. 行内块元素 （inline-block） 可改变宽高 不独占一行 img

   改变块状元素方式display inline-bock 内敛块状并存 block内敛变块状 inline 块状变内敛 none隐藏

   代码语义化

css3美化网页元素

< span>标签 < /span>
字体样式 font family 字体类型 fontsize （12px）字体大小 fontstyle 字体风格 fontweight 字体粗细 也可以只写font 顺序不能变
文本样式 colro 文本颜色 text-align 水平对齐方式 text-indent 首行文本缩进 line-height文本行高 letter-spacing字间距
文本装饰 text-decoration none默认值 underline下划线 overline 上划线 line-through删除线
文本阴影 text-shadow 水平偏移量 垂直编译量 隐影大小 阴影颜色
列表样式 list-style-tybe
list-style-image：
list-style-
背景定位 background—image图片路径 url（） repeat重复模式 position 位置　颜色　像图定位　重复方式background-size 背景图片定位
渐变1.线性渐变linear-gradinet（ 方向 颜色 颜色）
2.径向渐变

div盒子模型

双标签< div>< /div>
1. 边框 border 三个值都要写border-color边框颜色
border-width边框粗细
border-style边框样式 double 双划线 solid实线
简写为border 粗细 样式 颜色

2. 2.外边距 margin 网页居中对齐 margin：0px auto 取消

3. 3.内边paddding 同上

4. 边框颜色

         1. 一个值 代表 四个方向所有颜色
         2. 两个值代表 春之方向第一个值 水平方向第二个值
         3. 三个值  在两个值的基础上设置底部使用第三个值	
         4. 四个值 分别代表上 右 下 左 四个方向上的值
   1
   2
   3
   4

​ 盒子模型总尺寸=border+padding+margin+内容宽度

​ box-sizing: border-box; 不改变盒子宽高…0

     圆角边框border-raduys：四个属性按顺时针排列
1

盒子阴影 box-shadow ：inset x轴 y轴 模糊半径

​ 标准文档流钟父元素的高度是所有子元素高都之和 如果子元素产生浮动 就会脱离标准文档流 就不能为父元素贡献高度了 如果所有子元素都产生浮动 name父元素高度会变为0

​ 解决子元素浮动之后父元素高度塌陷的方法

  1. 直接给父元素设置高度  （简单 不能自适应子元素高度） 不推荐
  2. 给父元素添加overflower hidden 属性（简单 能自适应子元素高度  可能会导致子元素超出的部分被裁减）不推荐
  3.  在父元素中增加子元素 设置clear.both属性（这是W3C推荐的方案 增加了无用的html标签） 
	4. 为父元素添加伪元素 .parent::after{      content: '';      display: block;      clear: both;    }
1
2
3
4

magin高度塌陷问题

​ 两个垂直相邻的元素 设置margin外边距时 会以最大的外边距为准 较小的会忽略 调整边距较大的值即可

​ 父子元素中 子元素的margin-top默认会失效 1.给父元素加边框2.给父元素添加 overflow: hidden;

     ​    改变块状元素方式1.浮动float 脱离标准文本流. 
     ​                                清除浮动clear both 清除俩测浮动  left 清除左侧浮动  right 清除右侧浮动）用处（）
     ​                             2.转变display inline-bock 内敛块状并存  block内敛变块状   inline 块状变内敛  none隐藏 
     ​              溢出处理 适用于css样式overflow  hidden 隐藏   auto自动适应 （不好用）剩下不美观            
1
2
3
4

定位position 目标元素 定位模式 偏移量

 1.static默认静态定位 不受上下左右影响  根据页面标准文档留定位 可以清除以下所有定位
   
     ​	2.relative 相对定位  相对于其正常位置进行定位   通过top left rignt botton 等属性设置偏移量  不脱离标准文档流 
3.fixed 固定定位    bottom right  相对于浏览器窗口定位  永远不动  脱离标准文档流  100%宽度会失效  背景色会变透明
   
     ​	4.absolute绝对定位     绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于  脱离标准文档流   
     2 3  4 都有上 右right下bottom 左left  遵循规则 父相子绝（父亲相对定位 子绝对定位）
1
2
3
4
5
6
7

动画

变形

平移transform: translate(-100px , 200px

水平垂直移动 一个盒子水平垂直居中

•    1. position: fixed;left: 50%;top: 50%;    			 
  1

•    	2.transform:translate(-50% , -50% );
  1

旋转transform: rotate(360deg); 以某个顶点旋转 transform-origin: top left;

缩放transform: scale(0.8);

倾斜transform:skewX(30deg)

自定义动画

创建自定义函数

@keyframes dh{ from{transform: rotate(0deg); } to{ transform: rotate(360deg); } }

然后再需要盒子里面 animation: dh 1s 2 linear;

javaScript

html超文本标记语言 表内容 +css表现 +js行为
客户端脚本语言
运行在客户端浏览器中的， 每个浏览器都有解析就是引擎
不需要编译 直接运行
功能：可以增强用户与html之间的交互 可以控制HTML元素 让页面有一些动态效果 增强用户体验
发展史 第一个浏览器网景 布兰登兰克
js=ECMAScript+js自己的东西（DOM+BOM)

壹.ECMAScript 标准语法

一.基本语法

1.与HTML结合

​ 三种输出方式：1 alert 弹框提示 2console.log 控制台打印 3 document.write body里面输出
​ < 1>内部js 定义< script>标签 标签体内写入js代码（写在html任意位置 但定义的位置会影响执行顺序 ：可以定义多个 ）
​ < 2>外部js 创建js文件 通过 script标签的src属性标签引入 js不加< script>标签 html里< script src="js ">< /script>

2.注释

​ <1>单行注释//
​ <2>多行注释/**/
​ const 用于定义常量 并且必须初始化 常量不能重复赋值
​ parseint 可以将字符串转变为整数 parseFloat 可以将字符串转变为浮点数

3.数据类型

​ <1>原始数据类型

​ (1)number:数字 整数/小数/NaN(一个不是数字的数字类型)

​ （2）string:字符串 “abc”“a”最好双引号

​ （3）boolean：true和false

​ （4）null：一个对象的空占位符 运算后得到的是object

​ （5）undefined：未定义 的对象

​ （6）symbol 主要用于创建私有属性

​ （7）bigint 数字后加N

​ <2>引用数据类型：对象

4.变量 可重复定义 同名文件覆盖 最好和java同样写法

​ var 变量名=初始化值；
​ typeof 获取变量的 数据类型

5.运算符

​ <> <1>一元运算符 ++、–
​ ++、–符号在其后先运算在增减 符号在其前先增减在运算 自增或自减
​ ±号正负数：string转number按照字面值转化 如果字面值不是数字转为NaN
​ boolean转number true=1 false是0
​ <2>算术运算符+ 、-、 * 、 / 、%、
​ <3>赋值运算符 必须赋值 var =、+=、-=、*=、/=、%=
​ <4>比较运算符 只能返还 boolean的true或者false >、<、 >=、<=、===（全等于 js里面才有） 单等于是赋值 ==双等于是比较 自动转换数据类型
​ 比较方式（1）类型相同 直接比较
​ 字符串比较 按照字典顺序进行比较
​ （2）类型不同 先进行类型转化 再比较
​ ===：全等于在比较前 先判断类型 类型不同直接false 在进行比较
​ <5>逻辑运算符&&、（与） ||、 （或） ！（非）除了0
​ ！非（取反运算）：其他类型转boolean number： 0或NaN为true 其他为false
​ string ： “”空字符串为true 其他为false
​ null和undefind为ture
​ 对象： 所有对象都为false
​ <6>三元表达式 ？ ：表达式?值1：值2；
​ 如果表达式为true执行值1内容
​ 如果表达式为flase 执行值2的内容
​ <7>流程控制语句
​ （1）if…else… 表达式 if（ boolean表达式）{ 内容 } else{ 内容} 如果正确执行其一 否则执行其二 与三元表达式相同 可互换
​ （2）switch … case… switch（ 变量 可以接受任何原始数据类型 ）{case1 … break case2…break default } 与if…else if…else…相同
​ （3）while while（ boolean表达式 初始化变量）{ 循环条件 自增量 } 先判断后执行
​ （4） do…while… do（ 初始化变量）{ 自增量 } while{ 循环条件} 最起码执行一次 先执行一次 后判断条件
​ （5）for for（初始化变量 循环条件 自增量 ）{ }

二.基本对象

1.Function：函数（方法）对象 与Java相同

​ 函数的全局变量全局可以用 成员变量 只能本函数使用 出了作用域失效

​ 如果对一个没有声明过的变量 进行赋值 那么这个变量自动提升为全局变量*

​ <1> var 变量名=new Function(参数列表,方法体）;不常用
​ <2>function 方法名称（参数列表）{ 方法体}
​ <3>var 方法名=function（参数列表）{方法体} 方法名相同 覆盖 下面覆盖上面
​ 2.属性 length代表参数个数
​ 3.特点(1)在方法的声明中 有一个隐式内置对象 是一个数组arguments 里面封装了所有实际参数
​ (2)方法的定义参数的数据类型不需要写 返回值类型不需要写
​ (3)如果定义方法名相同 会覆盖
​ (4)方法的调用只和方法名相关 和参数列表无关

高阶函数

		1. 如果一个函数 可以接受另一个函数作为参数
		2. 如果一个函数 可以接受另一个函数 并作为返回值 返回
1
2

2.Array数组对象

​ <1>创建
​ var 数组名=new Array(元素列表)；
​ var 数组名=new Array（默认长度）；
​ var 数字名=【 元素列表】；
​ <2>属性 length 数组的长度
​ <3>特点(1)长度可变
​ (2)数据类型可变
​ <4>方法（1）push（）：向数组的末尾添加一个或多个元素，返回一个新长度

​ unfrist 首部添加元素

​ pop弹出末尾元素

​ shift 弹出首部元素

​ splice删除指定元素位置 c

• ​ concat*链接数组

  ​ every每个元素都满足条件 返回ture 否则false

  ​ some任何一个元素满足条件 返回true 全部不满足才是false

  ​ reverse() 反转数组

  ​ sort*//数组默认排序 讲元素转换为字符串 然后排序*

    				a3.sort((*a*,*b*)=>*a*-*b*)*//升序排列*  一定要为sort传递比较函数
  1

​ （2）join（）：将数组中的元素按照指定的分隔符拼接为字符串

3.Date：日期对象

​ <1>创建 var 变量名=new Date（）；
​ <2>方法 getTime（）；获取毫秒值
​ tolocalestring（）；可以获得当前本地时间 以字符串形式展现

4.Boolean 对象

5.String

6.Number

7.Math 算数类 Math对象不需要创建 直接使用

​ math.方法名（）；
​ 方法：round();四舍五入最接近的整数
​ max（）; 取一组数列最大值
​ min()；取一组数列最小值
​ abs（）；绝对值
​ ceil（）；对数进行向上舍入
​ floor（）；对数进行向下舍入
​ random（）；返回0-1之间的随机数
​ math.floor（math.random（）*100+1） 1-100随机数

8.RegExp 对象 正则表达式

​ var 变量名=new RegExp（“正则表达式”）
​ var 变量名=/正则表达式/
​ 方法：test(参数)验证指定的字符串是否为合规的正则表达式

9.Global 全局对象，不需要创建对象 直接调用

​ URL编码：encodeURL（ ）
​ URL解码：decodeURL ( )
​ URL编码：encodeURLConoinent()
​ URL解码： decodeURLConoinent() 编码字符更多
​ parseInt（）：将字符串转成数字
​ isNaN（）：判断值是否为NaN
​ NaN参与==比较全部返回false.包括自己
​ eval（）：执行js脚本
​

	DOM案例:控制html的文档     
          获取HTML元素对象：Element  
          document.getElementByID（“id值”）通过id获取html元素id获取元素对象
          操作Element对象：innerHTML修改标签内容属性
                                         src 修改标签体重src属性的值
           事件：onclick单击事件  通用属性                              
1
2
3
4
5
6

贰.BOM 浏览器对象模型

​ 封装了浏览器各个组成部分
​ 组成: window对象 窗口对象
​ navigator对象 浏览器对象
​ screen对象 显示器对象
​ history对象历史记录对象
​ location 对象 地址栏对象
​

     window对象：
       <1>   创建  不用创建直接用         
        <2>  方法（1）与弹出相关的方法①alert（）：显示带有一段消息和一个确定按钮的警告框
                                                            ②confirm（）：显示带有一段消息和确认取消按钮的对话框
                                                                                    如果用户点击确定按钮 返回值为true
                                                                                    如果用户点击取消按钮  返回值为false
                                                              ③ prompt    显示可提示用户输入的对话框   
                                                              返回值为用户输入的内容， 点击取消返回值为null          
                        （2）打开、关闭的方法①   open（）打开一个新的浏览器窗口 
                                                           ②close（）关闭浏览器窗口   谁调用我，我关闭谁  
                         （3）定时器①setTimeout（）：设置定时器 在指定的毫秒数后执行函数或者脚本
                                                               俩个参数：js脚本或者方法 。 毫秒值
                                                        返回值：唯一标识，用于清除定时器       
                                             ② clearTimeout（唯一标识）：清除参数内定时器   
                                             ③setInterval（）：循环定时器
                                             ④   clearInterval（）：清除循环定时器                       
        <3>  属性 可以获取其他的BOM对象  DOM对象     
        
        location  
         <1>创建 window. location 
                         location.
        <2>方法 reload（）重新加载
        <3>属性 href 设置或者返回完整的URL 路径
        history   
        <1>   创建  window.history、  history         
          <2>   方法① back（） 加载history列表中的前一个URL
                              ②forword（） 加载history列表中的后一个URL 
                            ③ go（参数）加载history列表中的后一个URL 某一个具体页面的URL   
                             正数；前进四个页面  负数 后退几个页面                 
            <3>属性length  返回历史列表中的URL数量         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

叁.DOM：文档相关模型

​ 将我们的html的标记语言文档的各个组成部分，封装成对象 我们可以使用这些对象，对html标记语言文档进行CRUD操作
​ 1.核心DOM 针对 任何结构的文档的标准模型

​ <1>Document 文档对象

​ <2>Element 元素对象

​ <3>Attribut:属性对象

​ <4>Comment:注释对象

​ 2.XML DOM 针对XML文档的标准模型，

​ 3 HTML DOM 针对HTML文档的标准模型

​ Document 文档对象

​ <1> 创建 document

​ window.document

​ <2>方法

方法	说明
获取Element对象 getElementByID（）	根据id属性获取元素对象 id一般是唯一的
getElementsByTagName（）	根据元素的名称获取元素对象 返回是数组
getElementsByClassName（）	根据元素的class属性来获取元素对象 、返回是数组
getElementsByName()	根据 元素的name属性来获取元素对象 返回是数组