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

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表示禁止调节框架

单选按钮< 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>

表单验证 1.placeholder 文本框提示

2.required 非空验证

3. patern 验证规则正则表达式

css 样式表

4.减少网页代码量增加网页浏览速度节省网络带宽

5.运用独立页面的css 有利于网页被搜索引擎收录

ID选择器 id针对# 使用一次大范围使用

标签选择器无符号所有都适用

并集选择器多个选择器通过,分割可以为多个选择器设置同样样式

交集选择器选择同时满足多个选择器要求的元素用.操作符链接中间不能添加空格

选择器优先级 id选择器> 类选择器>标签选择器

分离建立css文本文件不需要< style>标签

写好后在html文件head标签里引入css 俩种方式 1连接式 < link href=路径 rel type>属于 html 标签

2 导入方式< style/>@inshiziprot url（“路径”）< /style> 属于 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

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

行内块元素（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.外边距 margin 网页居中对齐 margin：0px auto 取消

3.内边paddding 同上

边框颜色

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

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

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

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

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

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

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

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

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自动适应（不好用）剩下不美观

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

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;

缩放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

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

++、–符号在其后先运算在增减符号在其前先增减在运算自增或自减

±号正负数：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

（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. 如果一个函数 可以接受另一个函数 并作为返回值 返回

2.Array数组对象

<1>创建

var 数组名=new Array(元素列表)；

var 数组名=new Array（默认长度）；

<4>方法（1）push（）：向数组的末尾添加一个或多个元素，返回一个新长度

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

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

reverse() 反转数组

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

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

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

3.Date：日期对象

<1>创建 var 变量名=new Date（）；

<2>方法 getTime（）；获取毫秒值

tolocalestring（）；可以获得当前本地时间以字符串形式展现

4.Boolean 对象

5.String

6.Number

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

math.方法名（）；

方法：round();四舍五入最接近的整数

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修改标签内容属性

<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.核心DOM 针对任何结构的文档的标准模型

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

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

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

②创建其他DOM对象的方法

方法	说明
createAttribut （）	创建DOM属性对象
createElement（）	创建DOM元素对象
createComment（）	创建DOM注释对象
createTextNode（）	创关键DOM节点对象

innerhtml会进行标签转义 innertext不会

②removeAttribut（）删除属性

Nede节点对象

方法

appenChild（）：向节点的子节点列表的结尾添加新的子节点添加

removeChild（）：删除当前节点的指定子节点

- replaceChild（）：用一个新节点替换一个子节点

属性:parentNade:返回节点的父节点

HTML DOM: innerHTML:标签体的设置和获取

控制元素样式“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 重置按钮被点击