WEB前端🎐🎐🎐
HTML✨✨✨
HTML 超文本标记语言
HTML(Hypertext Markup Language)超文本标记语言。
它负责网页的三个要素之一结构。
HTML使用标签的形式来标识网页中的不同组成部分
所谓超文本指的就是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
标签 ✨✨✨
1.标签名属性名都要用小写字母✨✨✨
2.浏览器会自动数略多余空格和换行 ✨✨✨
br/换行 单标签
hr/水平线 单标签
pre标签 保持文章格式 原本输出
p 段落标签 双标签
h1-6 标题标签 双标签
strong 加粗 双标签 重要东西
em 斜体双标签
b加粗 双标签 无所谓
< !-- -->注释标签
特殊符号✨✨✨
； 空格 >； 大于号 <；小于号 "；引号 ©；版权符号
图片链接🎐🎐🎐
alt=图片无法显示提示文字 title=图片悬浮文字 width= 宽 height=高 后四个可写可不写 全部双引号 >
a链接 双标签链接🎐🎐🎐
页面间链接
我是链接 点击图片进入链接：图片链接在a链接跳转 直接加入其内 如上
target="" 设置跳转页面 不写默认_self 新增页面跳转 _blank
< a href="#"> < a href=""> 上下呼应
1.无序列表< ul> < li>双标签 < li>在< ul>里面
3.定义列表< dl>大列表 < dt>表标题 < dd>表内容 皆为双标签
< tr>表示行 行里套列 < td>代表列 双标签 < td>里加内容
另加表格得在该行该列下加table colspan rwsopan都在< td>里
*< frameset cols=列 rows= 行 表示剩下全部 双标签 不可写在body里面 >
另加框架在其框架下新加frameset noresize表示禁止调节框架
单选按钮< input type=“radio”单选按钮 name=“sex” value="” 必须写 男
< input type=“radio” name=“sex”> 女 name要一样
< label for=“nv”> 跟前面产生关联 ID一样
button标签 按钮 默认submit 清空reset 普通button
列表框 双标签 < select name size表默认显示列 >
selected表默认选中项目< optgroup label=“山西”> 分组
多行文本域< textrea cols=显示列数 rows=显示行数>文本内容 < /textrea>
css 样式表
并集选择器 多个选择器通过,分割可以为多个选择器设置同样样式
交集选择器 选择同时满足多个选择器要求的元素 用.操作符链接 中间不能添加空格
写好后在html文件head标签里引入css 俩种方式 1连接式 < link href=路径 rel type>属于 html 标签
2 导入方式< style/>@inshiziprot url（“路径”）< /style> 属于 css样式
3.相邻兄弟选择器 只选择紧跟其后的一个 用+连接 只能向后选择
4.通用兄弟选择器 选择紧跟其后的所有元素 用~连接 只能向后选择
顺序 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
内联标签（inline） 不独占一行 不可改变宽高 a span lable
行内块元素 （inline-block） 可改变宽高 不独占一行 img
改变块状元素方式display inline-bock 内敛块状并存 block内敛变块状 inline 块状变内敛 none隐藏
字体样式 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 水平偏移量 垂直编译量 隐影大小 阴影颜色
背景定位 background—image图片路径 url（） repeat重复模式 position 位置 颜色 像图定位 重复方式background-size 背景图片定位
渐变1.线性渐变linear-gradinet（ 方向 颜色 颜色）
1. 边框 border 三个值都要写border-color边框颜色
border-style边框样式 double 双划线 solid实线
2.外边距 margin 网页居中对齐 margin：0px auto 取消
1. 一个值 代表 四个方向所有颜色 2. 两个值代表 春之方向第一个值 水平方向第二个值 3. 三个值 在两个值的基础上设置底部使用第三个值 4. 四个值 分别代表上 右 下 左 四个方向上的值
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing: border-box; 不改变盒子宽高…0
盒子阴影 box-shadow ：inset x轴 y轴 模糊半径
标准文档流钟父元素的高度是所有子元素高都之和 如果子元素产生浮动 就会脱离标准文档流 就不能为父元素贡献高度了 如果所有子元素都产生浮动 name父元素高度会变为0
1. 直接给父元素设置高度 （简单 不能自适应子元素高度） 不推荐 2. 给父元素添加overflower hidden 属性（简单 能自适应子元素高度 可能会导致子元素超出的部分被裁减）不推荐 3. 在父元素中增加子元素 设置clear.both属性（这是W3C推荐的方案 增加了无用的html标签） 4. 为父元素添加伪元素 .parent::after{ content: ''; display: block; clear: both; }
两个垂直相邻的元素 设置margin外边距时 会以最大的外边距为准 较小的会忽略 调整边距较大的值即可
父子元素中 子元素的margin-top默认会失效 1.给父元素加边框2.给父元素添加 overflow: hidden;
清除浮动clear both 清除俩测浮动 left 清除左侧浮动 right 清除右侧浮动）用处（）
2.转变display inline-bock 内敛块状并存 block内敛变块状 inline 块状变内敛 none隐藏
溢出处理 适用于css样式overflow hidden 隐藏 auto自动适应 （不好用）剩下不美观
1.static默认静态定位 不受上下左右影响 根据页面标准文档留定位 可以清除以下所有定位
2.relative 相对定位 相对于其正常位置进行定位 通过top left rignt botton 等属性设置偏移量 不脱离标准文档流
3.fixed 固定定位 bottom right 相对于浏览器窗口定位 永远不动 脱离标准文档流 100%宽度会失效 背景色会变透明
4.absolute绝对定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 脱离标准文档流
2 3 4 都有上 右right下bottom 左left 遵循规则 父相子绝（父亲相对定位 子绝对定位）
平移transform: translate(-100px , 200px
1. position: fixed;left: 50%;top: 50%;
2.transform:translate(-50% , -50% );
旋转transform: rotate(360deg); 以某个顶点旋转 transform-origin: top left;
@keyframes dh{ from{transform: rotate(0deg); } to{ transform: rotate(360deg); } }
然后再需要盒子里面 animation: dh 1s 2 linear;
功能：可以增强用户与html之间的交互 可以控制HTML元素 让页面有一些动态效果 增强用户体验
js=ECMAScript+js自己的东西（DOM+BOM)
三种输出方式：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>
parseint 可以将字符串转变为整数 parseFloat 可以将字符串转变为浮点数
(1)number:数字 整数/小数/NaN(一个不是数字的数字类型)
（4）null：一个对象的空占位符 运算后得到的是object
++、–符号在其后先运算在增减 符号在其前先增减在运算 自增或自减
±号正负数：string转number按照字面值转化 如果字面值不是数字转为NaN
<3>赋值运算符 必须赋值 var =、+=、-=、*=、/=、%=
<4>比较运算符 只能返还 boolean的true或者false >、<、 >=、<=、===（全等于 js里面才有） 单等于是赋值 ==双等于是比较 自动转换数据类型
===：全等于在比较前 先判断类型 类型不同直接false 在进行比较
<5>逻辑运算符&&、（与） ||、 （或） ！（非）除了0
！非（取反运算）：其他类型转boolean number： 0或NaN为true 其他为false
（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> var 变量名=new Function(参数列表,方法体）;不常用
<3>var 方法名=function（参数列表）{方法体} 方法名相同 覆盖 下面覆盖上面
3.特点(1)在方法的声明中 有一个隐式内置对象 是一个数组arguments 里面封装了所有实际参数
1. 如果一个函数 可以接受另一个函数作为参数 2. 如果一个函数 可以接受另一个函数 并作为返回值 返回
<4>方法（1）push（）：向数组的末尾添加一个或多个元素，返回一个新长度
some任何一个元素满足条件 返回true 全部不满足才是false
a3.sort((*a*,*b*)=>*a*-*b*)*//升序排列* 一定要为sort传递比较函数
（2）join（）：将数组中的元素按照指定的分隔符拼接为字符串
tolocalestring（）；可以获得当前本地时间 以字符串形式展现
math.floor（math.random（）*100+1） 1-100随机数
方法：test(参数)验证指定的字符串是否为合规的正则表达式
URL解码： decodeURLConoinent() 编码字符更多
document.getElementByID（“id值”）通过id获取html元素id获取元素对象
<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数量
将我们的html的标记语言文档的各个组成部分，封装成对象 我们可以使用这些对象，对html标记语言文档进行CRUD操作
方法 |
说明 |
获取Element对象 getElementByID（） |
根据id属性获取元素对象 id一般是唯一的 |
getElementsByTagName（） |
根据元素的名称获取元素对象 返回是数组 |
getElementsByClassName（） |
根据元素的class属性来获取元素对象 、返回是数组 |
getElementsByName() |
根据 元素的name属性来获取元素对象 返回是数组 |
②创建其他DOM对象的方法
方法 |
说明 |
createAttribut （） |
创建DOM属性对象 |
createElement（） |
创建DOM元素对象 |
createComment（） |
创建DOM注释对象 |
createTextNode（） |
创关键DOM节点对象 |
appenChild（）：向节点的子节点列表的结尾添加新的子节点 添加
- replaceChild（）：用一个新节点 替换一个子节点
控制元素样式“1 使用元素的style属性来设置 元素对象.style.样式 className来设值类名称
事件 1 点击事件①onclick 单击事件 ②ondbclick双击事件 2 焦点事件① onblur失去焦点 ②onfocus 获得焦点 3 加载事件onload 一个页面或者一个图片加载完成后 4鼠标事件 onmousedown 鼠标按钮被摁下 定义方法参数时 有一个 形式参数 接受event对象的 event对象的button属性可以返回鼠标按键标识 onmouseup 鼠标按钮被松开 onmousemove鼠标被移动 onmouseover 鼠标移到某元素之上 onmouseout 鼠标从某元素移开 5 键盘事件 onkeydown 某个键盘被摁下 event对象获取键盘的标识 使用keycode属性 onkeyup 某个按键被松开 onkeypress 某个按键摁下并松开 keydown 跟keypress 相同点 都是键盘按下后触发keydown 不支持大小写 keypress支持大小写 可以识别功能键 不能识别 6 选择和改变 onchange域的内容被改变 onselect 文本被选中 7.表单事件 onsubmit确认按钮被点击 返回值如果为false 阻止表单提交 onreset 重置按钮被点击
1他是一个JS的框架 用于简化js的开发 本质就是一些js文件 里面封装了js原生的代码而已
JQuery对象 本质是一组伪数组 属性名师连续数字 包含length属性 只有jq对象才能使用jq函数库
4 事件 $(“选择器“）.click（function（）{代码}
5 控制CSS样式 $(选择器“）.css（”样式属性“，”样式值“）
js的 window.onload和jq的入口函数区别 js入口函数只能定义一次 jq入口函数可以定义多次
③类选择器 ( " . c l a s s 的 属 性 值 " )④ 并 集 选 择 器 (".class的属性值") ④并集选择器(".class的属性值")④并集选择器(“选择器1 选择器2”)
<2>层级选择器① 后代选择器：选择父元素内部所有的子元素$(“父 子”)
③ 复合选择器 $(“元素名【属性名=值】【1】【 0】【2】 【3】…】”)
<4>过滤选择器 ①首选选择器 :first 获得我们选择元素中的第一个元素
attr 和prop的区别 如果你操做的元素是固有属性建议用prop 若果操作的元素是自定义属性 建议使用attr
<3>对class属性操作 addclass（）添加class属性
9. CRUD操作 append（）： 父元素将子元素追加到末尾 对象1.append对象二 将对象二添加到对象一内部并且在末尾
appendTo（） 对象1.appendTo对象二 将对象一添加到对象二内部 却在末尾
prependTo() 将对象以添加到对象二内部 且在开头、
after（） 对象1.after对象二 将对象二添加到对象1的后边 添加元素到元素的后边 对象1和对象二是兄弟关系
before（） 对象1.before 对象二 将对象2添加到对象1的后边 对象1和对象二是兄弟关系
insetAfter（） 对象1.insetAfter 对象二 将对象二添加到对象1的后边 对象1和对象二是兄弟关系
insetbefore（） 对象1.insetbefore 对象二 将对象二添加到对象1的前边 对象1和对象二是兄弟关系
10.动画 <1> 默认的显示和隐藏 show（[参数]） speed 动画的播放速度 三个预定的值（slow normal fast）
easing：动画的切换效果 默认的是swing 先慢中间快 最后又慢
hide（【speed，【easing】，【fn】】） 隐藏
toggle（【speed，【easing】，【fn】】） 切换
<2>滑动的显示和隐藏 slideDown（【speed，【easing】，【fn】】）下拉
slideUp（【speed，【easing】，【fn】】） 上拉
slideToggle（【speed，【easing】，【fn】】）切换
<3>淡入淡出显示和隐藏 fadeIn（【speed，【easing】，【fn】】）
fadeOut（【speed，【easing】，【fn】】）
fadeTgogle（【speed，【easing】，【fn】】）
12.遍历 js的遍历方式 for（初始值；循环条件；步长）
jq的遍历方式 jq对象.each（fuction（index element）{} ）
13事件绑定 <1>标准事件绑定jq对象.事件方法 （回调函数）
