目录
1、HTML知识点汇总
2、CSS知识点汇总
3、JS知识点汇总
一、HTML5（网页的骨架）
常用开发软件：Hbuilderx
使用过程：创建项目—创建目录—编写代码—运行（crtl+R） >>>
<1>标签：
6类：
- 标题标签：h1-h6
*用之标题标记，六级标题之间不可嵌套，默认换行、变粗（h7和普通标题标记相同的样式）
- div标签:（块级标签）
*有换行默认样式
- p标签：
*换行、有上下行距默认属性；不可嵌套div标签（块级标签）
- span隔离标签（无任何样式）（行级标签）
*针对元素有隔离作用
- br（换行）
*为特殊标签，无结束标签
- hr（水平分割线）
*特殊标签，无结束标签
8类：
- b /strong（加粗字体）
- i/em（字体变成倾斜样式）
- big/small（使文本变大/变小）
- sup/sub（上/下标）
- u/del（下划线/删除线）
*em和strong 可以理解为暂时变斜体/加粗，在不同的浏览器中，不同的标准中不一是变斜体/加粗
6类：
- ul/ol（无序/有序列表，有上下边距，做内部补充）
*ul/ol 为列表框架，列表的内容需要使用li来包裹起来进行编码
- li（放置列表的内容）
- dl（自定义列表框）
*有上下边距
- dt（列表项目）
*换行，和div类似
- dd （列表项目具体内容）
*有上下边距，做內补
4类：
- a （超级链接）
*用于页面的跳转，结合herf 属性，所有的html 的属性放开始标签，herf（跳转的网页地址），target（决定跳转的是本页面/新页面，默认值self，blank新页面）
- 锚点（在本页面滚动herf=”#id”属性）
- img（src属性值，显示本地/网络图片地址，./代表当前html同级目录；../代表上级 目录，也同有width和height属性，alt属性是图片加载失败显示的文本）
- video （加载视频）
- audio （加载音频）
*video和audio 可以结合control 展示控件
4类：
- table（外框）；tr（行）；td（普通单元格）；th（表头单元格）
- border （边框）；cellspacing（单元格间距）；cellpadding（单元格内部）
- rowspan （合并单元格 行）；colspan（合并单元格 列）
1类：
iframe （框架，一般嵌入自己的html页面，也可以嵌套其他html页面）
1类：
form（用于服务器进行交互，action（与服务器那个接口进行交互）；method（与服务 器使用什么方法（get/post）进行交互，其中get（一般用于从服务器获取数据）；post （一般用于向服务器提交数据,大部分用post）；post数据会拼接在请求的form data中））
input（表单提交的内容，name属性；value属性；只有name属性和input元素存在才 会被提交）；
Input （需要写value取决于，input的type）
*语义化标签，无特定样式，类似div标签
header 、footer、slider、main、section、nav
Emmet快速编译：
#代表“id=”；.代表“class=”
div#div$.div.div$*3>{div$}
<div id="div1" class="div div1">div1</div>
<div id="div2" class="div div2">div2</div>
<div id="div3" class="div div3">div3</div>
<2>HTML的属性
a标签的herf、target属性
（a标签的超级链接，有一个默认的样式是：当鼠标划入，鼠标样式从箭头变为小手）
img 标签的src、alt、width、height属性（*图片的超级链接，是img标签外边嵌套一个a标签）
video标签的src属性
audio 标签的src属性
form标签的name、value属性
table 标签的border、cellspacing、cellpadding、colspan、rowspan、width、height属性
*以上为非标准属性（标准属性是可以应用在任何一个html标签上）
id：页面中不允许重复，必须以字母开头
class：同一个标签下，可以有多个类名；不同的标签下，可以有同一个类名
style：用于编写标签的样式
title：鼠标划入的提示
二、CSS（网页的皮肤）
<1>css的使用方式
*修改html标签默认的样式，使页面更加美观
一般情况下：内联>内部样式表>外部样式表
（选择器定位的越精确优先级越高）
id选择器>class选择器>标签选择器
<2>选择器（为了选择特定的标签，要更精确一些）
- 通配符选择器（直接选择所有标签）
- 标签选择器（直接使用选中元素标签）
- 类名选择器（直接使用元素类名）
- id选择器（直接使用元素id）
- 逗号选择器（逗号前后都是完整选择器，两者都可以选择）
eg：.top .nav li a：hover ，.top .nav li a .relative{
background-color: red；
}
- 空格选择器（空格前的标签存在，空格后的子孙级标签，在空格前标签的内部也存 在）
- 大于号选择器（大于号前的标签存在，大于号后的子级标签，在大于号前标签的内 部也存在）
- 加号选择器（加号前面选中的标签紧邻的元素）
- 破折号选择器（破折号前面选中的标签，其后面同级别的标签所有满足的元素）
- a.index （拥有类名为index的a标签）{
..............
}
>>>：link 可用于a标签的普通状态
>>>：visited 可以用于a标签访问过的状态
>>>：hover可以用于所有标签的鼠标划入状态
>>>：active 可用于所有标签鼠标点击状态
*选择器越精确(越长)优先级越高 id选择 >class选择 >标签选择器
<3>样式
- 字体样式
font-family（调字体）
font-size（调字体大小，单位：px/em）
font-style（调字体倾斜效果，normal(不倾斜)；italic(倾斜)）
font-weight（调字体粗细，100级（最小）；900级（最大）；400=normal,700=bold）
- 文本样式
text-transform（大小写英文字母切换，capitalize（首字母大写）；uppercase（全部大 写）；lowercase（全部小写））
text-decoration（文本装饰，underline（文字加下划线）；line-through（文字加删除 线）；overline（文字加上划线）；none（除去超级链接(a)的下划线） ）
text-indent（缩进，典型例子：2em）
text -align（文本水平位置，行标签才存在，left（左对齐）；right（右对齐）；center （居中对齐），要求行级标签，文本铺满一整行）
- 背景样式（background的组合属性）
background ：color（背景色）
background ：image（背景图片，可定义多背景）
background：url（通过url函数来加载本地图片/网络图片）
background ：（定义背景图片的显示方式，repeat（重复）；repeat-x（横向重复）； repeat-y（纵向重复）；no-repeat（不重复）；background-position（定义背景图片的 位置））
- 列表样式
list-style-type（列表样式类型）
list-style-image（列表样式图片）
list-style-position（列表样式位置）
list-style：none；（列表无样式）
<4>盒子模型
1.width和height属性只定义内容，不包括其他边框、边距；若内容过多超过设置的其 属性值，设置的值将被忽略；overflow属性可以显示内容超过width/height属性值，auto 根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚 动条，否则不显示滚地条
hidden 超出部分被隐藏
2.border属性（设置边框）
综合属性有：border ：width/height（边框大小）
border ：color（边框颜色）
border ：style（边框样式）
>>>可分开单独设置，也可使用综合属性（border：yellow 1px solid； (*注意三者无先后顺序，中间用逗号隔开，*用于搞分割线) ）
>>>四条边可独立设置（例如border-left-width：100px；（左边）），也可以用综合属性border-left：green 100px solid；
- padding（设置内边距（內补） ）
*小知识：background: url（图片本地址/网址）no-repeat 6px 7px；
图片是放在padding 上的；no-repeat（生成无重复图片）；6px 7px是background-position：（图片定位位置）
边框和内容之间的空白宽度，无颜色、样式，综合属性（padding：20px；）/单边设置（padding-left：2px；）
padding：10px （内边距上、下、左、右都是一个数值10px）
padding：10px 20px（内边距上、下：10px；左、右：20px）
padding：10px 20px 30px（内边距上：10px；左、右:20px；下：30px）
padding：10px 20px 30px 40px（内边距第一个是上，第二个是右，第三个是下，第四个是左，按顺时针方向）
padding：内边距的背景色是标签的背景色；
- margin（外边距（外补） ）
相邻标签之间的空白区域，外边距的设置有叠加效果，综合属性（margin:1px;）/单边设置（margin-left：10px；）
- box-sizing：border-box （赋值宽高：內补宽高、內补、边框）
- 外补、內补只能定义宽度（width）
<5>float（浮动）
/* 一旦元素浮动以后 会脱离文档流 另起一层 */
/* 元素浮动以后没有换行效果 */
/* 元素左浮动则会排列在上一个左浮动元素的右侧 */
/* 元素右浮动则会排列在上一个右浮动元素的左侧 */
/* 清除浮动以后会在浮动层 另起一行 */
/* 左浮动清除左浮 右浮动清除右浮 */
/* clear both(left,right) */
text-align:center;文本居中
border-left: 1px solid yellow(向左有个为1px的边框)
>>>外部样式：
*该属性可改变padding(内边距)、border(边框)、不可改变margin（外边距）
*{
box - sizing: border-box；
}
在html内部样式中引入css外部样式：link标签
w30p = width: 30%； m0+p0 = margin: 0;padding: 0;(快速编译)
margin: 0px auto;（元素居中）
float: 浮动,脱离文档流（一个网页中一行内从左向右铺满后，再重新另起一行，从 左向右铺，以此类推）,有float：left；（左浮）float：right；（右浮）；
>>>当标签中的元素添加浮动效果，则不换行；
>>>当另一个标签中的元素再次添加左浮动后，会排列在上一个左浮动的右侧；
>>>当另一个标签中的元素再次添加右浮动后，会排列在上一个右浮动的左侧；
>>>清除第一个左浮动，脱离文档流，在另一个选择器中的第二个左浮动会另起一行 浮动层；
>>>清除第一个右浮动，脱离文档流，在另一个选择器中的第二个右浮动会另起一行 浮动层；
>>>在第一个左、右浮动后，想要设置下一个浮动时：左浮动清除left；右浮动清除 right；
>>>clear: both；相当于clear：left；加上clear：rigth；
>>>通过display来控制显示：
display: inline-block；可以将元素变成块，但是不会换行
display：block ；可以将元素变成块
display：inline；可以将块标签变成行标签
none：不显示；
>>>给出width属性值、才可以使用省略或滚动
overflow：hidden；隐藏元素超过的部分
overflow：scroll；都超出width/height属性值会自动生成一个下拉和右拉的滚动条
white-space: nowrap; 在div标签（块级）中给中文元素提供不换行
text-overflow: ellipsis; 在div标签（块级）中使，超过标签的width/height显示省略 号（....）
<6>定位
position: static 默认值,文档流默认位置,left/top不起效
position: relative 相对定位,相对于文档流的位置可以使用left/right
位置发生变化后不影响文档流的位置
position: absolute,绝对定位,相对于外层第一个不为static定位的元素
position: sticky,粘性定位,没有达到粘性定位的位置时,相对于是静态定位,达到位置后 为固定定位
position: fixed,固定定位,完全基于浏览器窗口位置进行定位
transform: 位移变形等,如translate(x,y) rotate(angle) scale()
animation: 播放@keyframes定义的动画帧可以有 from to/% 两种形式
transition: 指定标签使其变化为渐变，后边跟上，时间，all全选
<7>设置导航条
img{
transfrom：scale（1）（图片默认情况下）
transition: all 0.5s；（变化属性，所有的元素前后变化的时间为0.5秒）
*常用于，图片的缩放问题
}
img：hover 【鼠标划入标签元素上，可以发生变化（字体颜色、背景颜色等）】{
//（图片的缩放问题）//
transform：scale（1.03）
}
- 直接用div + a标签
line-height : 等于height，标签内的元素可以设置垂直居中
text-decoration: none；取消样式
text-align:center; 文本居中
margin: 0px auto;（导航条居中）
- 使用列表浮动
list-style：none；（列表无样式）
- 使用列表 + 行内块（display：inline-block；）
清除字体间的空白：最外层ul/ol 标签的font-size：0px；再把列表标签的font-size设置大小，即a标签中的元素与另一个li>a中的元素之间的空白则被清除
三、JS（网页的灵魂）
网页的交互（用户交互功能）
JS学习：
Js能够跨平台、浏览器驱动网页，与用户交互
js脚本语言、可插入html页面的编程代码
Js由所有浏览器可执行
Js外部文件中，也可以用ctrl+/ 来进行注释
Js代码可以引入网页的任何地方，如可以放在网页中header、body、外部；
*如果js库特别大，推荐放在body的最底部，浏览器解释完body后，再去解析库，不行 影网页页面的显示效果
Bom（浏览器对象模型）；Dom（*文档对象模型）
<1>变量 （存储一些数值，打印方式：console.log() ）
var 可定义全局变量，可修改；不初始化就会出现，默认值undefined；特殊效果浏览 器会预先搜素所有的var 关键字，并拿到前方
let 定义局部变量，是es6中添加的；不能重复定义变量
const 也可以定义（const>var>let（推荐使用，效率高）），不能重复定义变量
定义的常量不能更改，定义时必须赋值，否则会报错
<2> 5种基本数据类型（查看数据类型格式为：typeof（））
undefined :当变量无赋值时，默认值为undefined
number ：js中的数字类型
boolean ：布尔类型（两个布尔值 true、false）
string ：字符串类型（用单、双引号括起来的元素）
null：清空变量，不再使用类型为object
<3> 2种复合类型（object）
对象：{obj：value, obj01:value01}，如python中的字典
数组：如python中的列表（）
JS运算符：
<1>算术运算符（+、-、*、/、%、i++、i--、++i、--i）
*不管是i++、++i，执行后，i的值都已 +1；但是i++，i的值是返回自加之前的i，而++i，i的值是返回自加之后的i；
<2>赋值运算符（=、+=、*=、/=、%=）
eg：i%=1，相当于i=i%1
<3>比较运算符（>、>=、<、<=、==、===）
* ===（运算符需要比较值和类型，先判定值，再判定类型）
<4>逻辑运算符（&&（和）、||（或）、！（非））
*返回布尔类型：true、false
*在python或者js中：
not(python)/！(js)返回值为True、False /true、false
and(python)/&&(js)返回值为左侧或者右侧内容
1.当左侧为真返回右侧 ；2.当左侧为假返回左侧
or(python)/||（js）返回值为左侧或者右侧
1.当左侧为真返回左侧；2.当左侧为假返回右侧
<5>三元运算符
表达式？a（表达式为真）：b（表达式为假）；
JS的流程结构
<1>顺序结构
没有任何结构就是顺序，所有语句从上到下，逐条执行，顺序结构：注释语句、赋值语句、输入/输出等语句
**
<2>分支结构
1.单分支：【如果if(条件)是ture，那么执行if(){}所有语句，否则直接跳过if结构】
*格式为：if（条件）{
....；
}
2.双分支/多分支（if...else；if ... else if ... else if ...）
*多分支格式：if（）{}（范围比较）
else if(){}
else{}
*switch格式：（精确比较）
let n=value；
switch(n){（将n与case后的值匹配，匹配成功，则执行break，否则继续下面匹 配）
case value：
console.log(n==value);（若case后的值与n的值相等，则执行此语句）
break;
case value01：
console.log(n==value01);（若case后的值与n的值相等，则执行此语句）
break
default:
console.log(“条件都没有满足”)
break
}
JS循环结构（循环目标是可以被遍历、被迭代；起始条件；终止条件；判断条件）
<1>for循环（for(){}）
*格式为：for(条件1；条件2；条件3；){
console.log（）；
}
<2>while循环（先判断，再执行）
while(条件){
....
}
<3>do...while循环（先执行，再判断）
do{
....
}while(条件)
<4>break、continue的用法
break：终止整个循环
continue：终止本次循环，开始下一次循环
JS函数
*函数使用function声明 后面跟函数名（）中编写形参列表
*函数语句块，使用{}声明，函数默认没有返回值，可以使用return返回
<1>匿名函数
匿名函数不能单独存在
1.可将匿名函数赋予一个变量，变量就代表着函数内存地址，变量名+（）可以执行该匿名函数
2.可将匿名函数赋予一个形参
3.将匿名函数作为对象的键
<2>js延迟函数setTimeout（匿名函数（）{}，时间）；3000mg/s为3秒
js延迟（延迟时间去执行函数）
<3>js计时函数setInterval（匿名函数（）{}，时间）
计时（间隔时间重复执行）
clearInterval 清除计时
JS的数组
<1>获取数组的长度（数组名.length）
<2>为数组添加元素
数组名.push（）；（默认从数组右边开始添加）
数组名.unshift（）；（从左添加）
<3>删除数组元素
数组名.pop（）；（默认删除右边，返回值是删除的元素）
数组名.shift（）；（默认删除左边，返回值是删除的元素）
<4>splice（第一个参数为索引，第二参数是删除的个数，第三个参数开始都是添加的元素）
<5>sort（按字符排序）
<6>reverse（逆序）
<7>indexof（求元素的索引，不存在返回 -1）
<8>join（将元素连接成字符串）
JS的内置对象（命名为大写）
<1>Math（math是js中数学相关的内置对象，可直接使用）
Math.PI 3.14
Math.random 随机数[0，1）
Math.floor 向下取整
Math.ceil 向上取整
Math.round 四舍五入
JS的字符串
<1>js关于字符串常用函数
length属性 求字符串的长度
charAt 求对应位置字符
indexOf 求字符对应索引
lastIndexOf 从右侧开始查找 求字符对应的索引值
substring（start，end） 切片
replace 替换
split 分割字符串，返回类型为数组
JS的Date对象
<1>常用函数
let time = new Date() 现在的时间
time.getFullYear（） 当前的几年份
time.getMonth（） 当前的几月份，月份从0开始，0是一月
time.getHours（） 当前的几时钟
time.getMinutes（） 当前的几分钟
time.getSeconds（） 当前的几秒
time.getMilliseconds（） 当前的几毫秒
JSON对象
<1>序列化（将对象转成JSON字符串（数组，对象））
eg：let strObj = JSON.stringify(obj);
<2>反序列化（就是将字符串转成新对象）
eg：let.newObj = JSON.parse(strObj);
*|| 左边为真返回左边，左边为假，返回右边；从localstorage中取info反序列失败，则obj赋值（let obj = JSON.parse(localStorage.getItem(“info”)) || {}）
BOM浏览器 对象 模型
<1>Windows对象
概念：所有浏览器都支持window对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
<2>History
History对象是window对象的历史记录对象，常见的方法有back、forward、go(count)
<3>Location
Location对象式BOM中比较重要的对象
属性：host、hostname、href、pathname、port、protocol、方法有reload 刷新页面。
http协议://baijiahao.baidu:80 域名 ：80/443 端口/s 虚拟路径?get请求参拼 接
id=1702594533775076008 key=value
*持续化存储:
localStorage.（永久存储，只要不删除存储数据）
setItem（key,value）
getItem（key）
removeItem(key)
SessionStorage.（永久存储，只要不关闭浏览器）
setItem(key,value)
getItem(key)
removeItem(key)
JS的Domument（）
<1>获取目标元素
document.getElementByld() (可以通过id找到唯一的标签)
document.getElementsByTagName 找到所有标签名可匹配的标签
document.getElementsByClassName 根据类名查找所有类名可匹配的标签
document.get（...）:有“Elements”，就说明返回类型为集合
innerText 只包含文本 innerHTML 可以包含标签 （只有js对象才有innerText）
innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容,主要的作用是在标签中设置新的html标签内容,是有标签效果的
<2>修改元素的属性、样式、内容
1.hasAttribute（“属性名”）（判断是否有想要添加的属性）
2.getAttribute(“属性名”)（获取属性名称）
3.setAttribute(“属性名”,“属性值”)（设置属性）
4.hasAttribute（“属性名”）（判断是否有添加的属性）
5.removeAttribute(“属性名”) （移除添加属性）
获取标签元素的内联样式，可以用（.style）
getComputedStyle 计算样式
获取标签元素的内部样式表、外部样式表getComputedStyle（目标）
*设置任何元素的样式都可以通过.style.属性名
操作DOM：绑定事件
on+事件名称 （事件监听；所有事件处理可理解为js对象中的键是时间名，键的值为匿名函数）
onscroll 就是window对象的滚动事件监听
onclick 鼠标点下抬起整个过程触发一次
onmousedown 鼠标点下时触发
onmouseup 鼠标在点下区域，抬起时触发
- 找到元素
- 赋予事件监听
- 修改属性、内容
操作DOM节点
<1>节点的创建和删除
createElement() 创建元素节点
appendChild() 末尾追加方式插入点
insertBefore() （新元素，参考元素） 在指定节点前插入新节点
remove() 删除指定节点
<2>相关节点获取
找元素的父标签 parentElement
找元素的所有子标签 children
第一个子元素 firstElementChild
最后一个子元素 lastElementChild
上一个 previousElementSibling
下一个 nextElementSibling
div一般不给予高度，是div里边的东西撑起来一个高度。
如外层容器，width、height的不满足，内部img的图片的width、height时，可以设置img 的width:100%，设置外层容器overflow:hidden
1.SVG代码：图片新格式（文本内容地址）
2.外层容器（div）设置font-size：0；
使用方式是，内部元素使用inline-block
更多推荐
学习web（前端）的知识点汇总,初学者稳稳拿捏!!!
发布评论