HTML+CSS+JS前端总结

2023年6月20日发(作者：)

HTML+CSS+JS前端总结html:(Hyper Text Markup Language）超⽂本标记语⾔基本标签：div p span hr br h1-h6⽂本标签：u del sup sub big small b/strong i/em列表标签：ul ol lidl dt dd表格：table tr td th (cellspacing cellpadding border colspan rowspan)

img video audio (autoplay属性为⾃动播放)超级链接：form input select textarea iframe框架标签表单form :表单标签、表单域、表单按钮action:服务器地址method：get/post 规定在提交表单时所⽤的 HTTP ⽅法表单域: text password hidden radio checkbox(checked) file

select(option selected) textarea submit reset属性：是以键值对的形式出现，⽤空格隔开class id style title快捷键accesskey="" (input中设置) 可编辑contenteditable="true"

⽂字⽅向dir="ltr" dir="rtl" 隐藏hidden="hidden" 选中checked selected事件：窗⼝事件：onload onunload onresize onfocus onblur表单事件：onfocus onblur onchange键盘事件：onkeydown onkeypress onkeyup⿏标事件：onmousedown onmouseup onmouseenter onmouseleave

onmousemove onmousewheel

css:指层叠样式表 (Cascading Style Sheets)基本语法：选择器{属性：属性值}三种样式优先级：内联>内部>外联内联：body中style内部:head中style外联:head中link src="路径"引⼊选择器：基本选择器：id class * 标签符号选择器：, > 空格 + ~属性选择器： [属性名] [属性名="属性值"]

[属性名^="属性值开头"] [属性名$="属性值结尾" ] [属性名*="带属性值符号"] [属性名~="其中⼀个属性值"]伪类选择器： :link初始颜⾊ :visited访问过颜⾊

:hover把⿏标移动到元素上⾯ :active点击元素那⼀下的效果 :enabled :disabled :checked 针对于HTML中的Form元素操作 考虑所有

:first-child :last-child

:nth-child(n) :nth-last-child(n) :only-child

考虑当前：

:first-of-type :last-of-type

:nth-of-type(n) :nth-last-of-type(n) :only-of-type

:empty 没有⼦标签，没有内容

input:not([type="submit"]) {border: 1px solid red;}字体样式：font-family font-size font-weight

font-style 字体倾斜效果 normal不倾斜、oblique和italic倾斜 Italic是使⽤⽂字的斜体，Oblique是让没有斜体属性的⽂字倾斜！⽂本样式：text-transform(capitalize uppercase lowercase)text-decoration(underline下 line-through中 overline上)text-indent(缩进2em汉字)text-align(left right center)word-spacing单词距离 letter-spacing字符距离背景:background-colorbackground-image：url();background-repeat(repeat no-repeat repeat-x repeat-y)background-position(right top 或者 x y坐标)

列表样式：list-style-type(disc circle square)list-style-image***list-style-position(outsiide/inside)盒⼦模型：margin border padding contentwidth和height只定义内容⼤⼩ border: border-width

border-color

border-style border:可以写⼀起四边可独⽴设置： border-left-width

border-left-color

border-left-style border-left：可以写⼀起padding:边框和内容之间的空⽩宽度 综合设置padding:2px; 单边设置padding-left:2px;margin: 标签和它相邻的标签之间的空⽩宽度 **外边距的设置是上下相叠 综合设置margin:2px; 单边设置margin-left:2px; Display属性： CSS使⽤display设置的标签的显⽰ none 隐藏 block 块元素 inline ⾏内元素 inline-block ⾏内块元素 float:浮动(left right)**clear:清除浮动，另起⼀⾏(left right both) position定位: static 默认值使⽤基于“⽂档流”的定位 relative相对定位 即在“⽂档流”的基础上，结合left和top属性，相对定位 absolute绝对定位 脱离“⽂档流”，并基于它的“包含框”，使⽤left和top属性来定位 fixed固定定位 特殊的绝对定位，即它的“包含框”为浏览器 sticky粘性定位 当没有滚动到特殊位置时，跟随滚动条滚动，到达特定位置时位置不再发⽣变化javaScript因特⽹上最流⾏的脚本语⾔，轻量级的编程语⾔，可插⼊html页⾯引⼊： 3.外部⽤script src="路径"注释： //单⾏ /* */多⾏输出： alter("内容");//警告框，会阻断javascript执⾏ ("内容");//向⽂档写⼊html或js代码 ();//控制台输出，调式变量： var全局：如果不初始化会输出undefined，不会报错 let局部：函数内部使⽤let定义后，对函数外部⽆影响。 const常量，不可修改类型检测：typeof(obj)数据类型： 基本： 1.字符串string

2.数字number

3.布尔boolean

空值，⽤来清空

ned不含有值 复合：数组[]，对象{}类型转换：toString() toSting(radis)

运算符： 算数：+ - * / % i++ ++i i-- --i 赋值：= += -= *= /= %= ⽐较：> >= < <= != == === 逻辑：&& || ！ 运算符的优先级:！ > 算术运算符 > 关系运算符 > && > || > 赋值运算符

流程控制语句： 顺序结构： 分⽀结构：if(){} if(){}else{} if(){}elif(){}else{} switch(n){case 1:....break;case 2 :...break;default:....break;} 循环结构：for(){} while(){} do{}while() in(遍历对象)break:结束循环continue:结束当前循环，进⼊下⼀次循环 函数： 系统函数(内置函数) isNaN parseInt() parseFloat() isFinite()⽤来确定参数是否是⼀个有限数值 ⾃定义函数：function 函数名(){}延迟函数：setTimeout(fn,time) clearTimeout(t)计时函数：setInterval(fn,time) clearInterval(t)内置对象：1.数学： ()/floor/round/max/min/abs/pow/：: var mydate = new Date() lYear()/ getMonth()/getDate()/getDay()/getHours()/getMinutes()/getSeconds()/getMillseconds()/getTime()4.数组： length pop()/push()/shift()/unshift()/indexOf()/reverse()/sort()/splice()length/indexOf()/lastIndexOf()/charAt()/replace(str,newstr)/substr(start,length)/subting(start,stop)/toLowerCase()/toUpperCas 对象：var obj = new object() = 'aa' = function(){("⽅法作为对象的键所存储的值")}

序列化：JSON:是⼀种轻量级的数据交换格式，我们称之为JavaScript对象表⽰法(str)将字符串转换为json对象ify(obj)将json转换为字符串 匿名函数：匿名函数就是没有名字的函数1,匿名函数赋值给变量 执⾏函数2,将匿名函数赋值给对象的f键 执⾏函数3, 将匿名函数作为参数传递给fun函数 执⾏fun函数 let a = function(){ ("匿名函数赋值给变量,执⾏函数"); } a();

let obj = {}; obj.f = function(){ ("匿名函数赋值给对象的键"); } obj.f();

function fun(b){ b(); } fun(function(){("匿名函数作为参数传递")})闭包：是指有权访问另⼀个函数作⽤域中的变量的函数1，函数内部嵌套函数2，外部函数将内部函数返回3，内部函数可以访问外部函数局部变量，并且保存变量 function fun(){ ("外部函数执⾏"); function fun1(){ ("内部函数执⾏"); } // fun1(); return fun1; } fun()(); BOM浏览器对象模型Window属性： history:back,forward,go(count) scree:width,height,availWidth,availHeight navigator:⽤来描述浏览器相关信息的 Location:host、hostname、href、pathname、port、protocolWindow事件onload ⼀个页⾯或⼀幅图像完成加载 在对象已加载时触发onresize 随着窗⼝或框架⼤⼩的改变⽽改变 window.οnresize=function(){}onscroll 滚动条滚动事件 DOM⽂档对象模型获取⽂档对象： mentById()

mentsByTagName() 标签 mentsByName() 属性 mentsByClassName()

操作DOM对象内容：innerText innerHTML操作DOM对象的属性： DOM对象.属性名称 DOM对象[属性名称] getAttribute(属性名称)，setAttribute[属性名称，属性值] removeAttrite(属性名称)操作DOM对象样式标签对象.style.样式名称获取内部和外联样式getComputedStyle(对象).width操作DOM节点： createEelement() appendChild() insertBefore() remove() removeChild()

parentElement/ children/ firstElementChild/ lastElementChild/ previousElementSibling/ nextElementSibling操作DOM对象事件 ⿏标：onclick,ondblick 键盘:onmousedown,onmouseup,onmouseenter,onmouseleave, 窗⼝:onload,onscroll,onresize

2023年6月20日发(作者：)

HTML+CSS+JS前端总结html:(Hyper Text Markup Language）超⽂本标记语⾔基本标签：div p span hr br h1-h6⽂本标签：u del sup sub big small b/strong i/em列表标签：ul ol lidl dt dd表格：table tr td th (cellspacing cellpadding border colspan rowspan)

img video audio (autoplay属性为⾃动播放)超级链接：form input select textarea iframe框架标签表单form :表单标签、表单域、表单按钮action:服务器地址method：get/post 规定在提交表单时所⽤的 HTTP ⽅法表单域: text password hidden radio checkbox(checked) file

select(option selected) textarea submit reset属性：是以键值对的形式出现，⽤空格隔开class id style title快捷键accesskey="" (input中设置) 可编辑contenteditable="true"

⽂字⽅向dir="ltr" dir="rtl" 隐藏hidden="hidden" 选中checked selected事件：窗⼝事件：onload onunload onresize onfocus onblur表单事件：onfocus onblur onchange键盘事件：onkeydown onkeypress onkeyup⿏标事件：onmousedown onmouseup onmouseenter onmouseleave

onmousemove onmousewheel

css:指层叠样式表 (Cascading Style Sheets)基本语法：选择器{属性：属性值}三种样式优先级：内联>内部>外联内联：body中style内部:head中style外联:head中link src="路径"引⼊选择器：基本选择器：id class * 标签符号选择器：, > 空格 + ~属性选择器： [属性名] [属性名="属性值"]

[属性名^="属性值开头"] [属性名$="属性值结尾" ] [属性名*="带属性值符号"] [属性名~="其中⼀个属性值"]伪类选择器： :link初始颜⾊ :visited访问过颜⾊

:hover把⿏标移动到元素上⾯ :active点击元素那⼀下的效果 :enabled :disabled :checked 针对于HTML中的Form元素操作 考虑所有

:first-child :last-child

:nth-child(n) :nth-last-child(n) :only-child

考虑当前：

:first-of-type :last-of-type

:nth-of-type(n) :nth-last-of-type(n) :only-of-type

:empty 没有⼦标签，没有内容

input:not([type="submit"]) {border: 1px solid red;}字体样式：font-family font-size font-weight

font-style 字体倾斜效果 normal不倾斜、oblique和italic倾斜 Italic是使⽤⽂字的斜体，Oblique是让没有斜体属性的⽂字倾斜！⽂本样式：text-transform(capitalize uppercase lowercase)text-decoration(underline下 line-through中 overline上)text-indent(缩进2em汉字)text-align(left right center)word-spacing单词距离 letter-spacing字符距离背景:background-colorbackground-image：url();background-repeat(repeat no-repeat repeat-x repeat-y)background-position(right top 或者 x y坐标)

列表样式：list-style-type(disc circle square)list-style-image***list-style-position(outsiide/inside)盒⼦模型：margin border padding contentwidth和height只定义内容⼤⼩ border: border-width

border-color

border-style border:可以写⼀起四边可独⽴设置： border-left-width

border-left-color

border-left-style border-left：可以写⼀起padding:边框和内容之间的空⽩宽度 综合设置padding:2px; 单边设置padding-left:2px;margin: 标签和它相邻的标签之间的空⽩宽度 **外边距的设置是上下相叠 综合设置margin:2px; 单边设置margin-left:2px; Display属性： CSS使⽤display设置的标签的显⽰ none 隐藏 block 块元素 inline ⾏内元素 inline-block ⾏内块元素 float:浮动(left right)**clear:清除浮动，另起⼀⾏(left right both) position定位: static 默认值使⽤基于“⽂档流”的定位 relative相对定位 即在“⽂档流”的基础上，结合left和top属性，相对定位 absolute绝对定位 脱离“⽂档流”，并基于它的“包含框”，使⽤left和top属性来定位 fixed固定定位 特殊的绝对定位，即它的“包含框”为浏览器 sticky粘性定位 当没有滚动到特殊位置时，跟随滚动条滚动，到达特定位置时位置不再发⽣变化javaScript因特⽹上最流⾏的脚本语⾔，轻量级的编程语⾔，可插⼊html页⾯引⼊： 3.外部⽤script src="路径"注释： //单⾏ /* */多⾏输出： alter("内容");//警告框，会阻断javascript执⾏ ("内容");//向⽂档写⼊html或js代码 ();//控制台输出，调式变量： var全局：如果不初始化会输出undefined，不会报错 let局部：函数内部使⽤let定义后，对函数外部⽆影响。 const常量，不可修改类型检测：typeof(obj)数据类型： 基本： 1.字符串string

2.数字number

3.布尔boolean

空值，⽤来清空

ned不含有值 复合：数组[]，对象{}类型转换：toString() toSting(radis)

运算符： 算数：+ - * / % i++ ++i i-- --i 赋值：= += -= *= /= %= ⽐较：> >= < <= != == === 逻辑：&& || ！ 运算符的优先级:！ > 算术运算符 > 关系运算符 > && > || > 赋值运算符

流程控制语句： 顺序结构： 分⽀结构：if(){} if(){}else{} if(){}elif(){}else{} switch(n){case 1:....break;case 2 :...break;default:....break;} 循环结构：for(){} while(){} do{}while() in(遍历对象)break:结束循环continue:结束当前循环，进⼊下⼀次循环 函数： 系统函数(内置函数) isNaN parseInt() parseFloat() isFinite()⽤来确定参数是否是⼀个有限数值 ⾃定义函数：function 函数名(){}延迟函数：setTimeout(fn,time) clearTimeout(t)计时函数：setInterval(fn,time) clearInterval(t)内置对象：1.数学： ()/floor/round/max/min/abs/pow/：: var mydate = new Date() lYear()/ getMonth()/getDate()/getDay()/getHours()/getMinutes()/getSeconds()/getMillseconds()/getTime()4.数组： length pop()/push()/shift()/unshift()/indexOf()/reverse()/sort()/splice()length/indexOf()/lastIndexOf()/charAt()/replace(str,newstr)/substr(start,length)/subting(start,stop)/toLowerCase()/toUpperCas 对象：var obj = new object() = 'aa' = function(){("⽅法作为对象的键所存储的值")}

序列化：JSON:是⼀种轻量级的数据交换格式，我们称之为JavaScript对象表⽰法(str)将字符串转换为json对象ify(obj)将json转换为字符串 匿名函数：匿名函数就是没有名字的函数1,匿名函数赋值给变量 执⾏函数2,将匿名函数赋值给对象的f键 执⾏函数3, 将匿名函数作为参数传递给fun函数 执⾏fun函数 let a = function(){ ("匿名函数赋值给变量,执⾏函数"); } a();

let obj = {}; obj.f = function(){ ("匿名函数赋值给对象的键"); } obj.f();

function fun(b){ b(); } fun(function(){("匿名函数作为参数传递")})闭包：是指有权访问另⼀个函数作⽤域中的变量的函数1，函数内部嵌套函数2，外部函数将内部函数返回3，内部函数可以访问外部函数局部变量，并且保存变量 function fun(){ ("外部函数执⾏"); function fun1(){ ("内部函数执⾏"); } // fun1(); return fun1; } fun()(); BOM浏览器对象模型Window属性： history:back,forward,go(count) scree:width,height,availWidth,availHeight navigator:⽤来描述浏览器相关信息的 Location:host、hostname、href、pathname、port、protocolWindow事件onload ⼀个页⾯或⼀幅图像完成加载 在对象已加载时触发onresize 随着窗⼝或框架⼤⼩的改变⽽改变 window.οnresize=function(){}onscroll 滚动条滚动事件 DOM⽂档对象模型获取⽂档对象： mentById()

mentsByTagName() 标签 mentsByName() 属性 mentsByClassName()

操作DOM对象内容：innerText innerHTML操作DOM对象的属性： DOM对象.属性名称 DOM对象[属性名称] getAttribute(属性名称)，setAttribute[属性名称，属性值] removeAttrite(属性名称)操作DOM对象样式标签对象.style.样式名称获取内部和外联样式getComputedStyle(对象).width操作DOM节点： createEelement() appendChild() insertBefore() remove() removeChild()

parentElement/ children/ firstElementChild/ lastElementChild/ previousElementSibling/ nextElementSibling操作DOM对象事件 ⿏标：onclick,ondblick 键盘:onmousedown,onmouseup,onmouseenter,onmouseleave, 窗⼝:onload,onscroll,onresize