学习web（前端）的知识点汇总，初学者稳稳拿捏!!!

目录

         1、HTML知识点汇总

        2、CSS知识点汇总

        3、JS知识点汇总

 

---

一、HTML5（网页的骨架）

常用开发软件：Hbuilderx

使用过程：创建项目—创建目录—编写代码—运行（crtl+R）    >>>   

<1>标签：

6类：

1. 标题标签：h1-h6

*用之标题标记，六级标题之间不可嵌套，默认换行、变粗（h7和普通标题标记相同的样式）

1. div标签:（块级标签）

*有换行默认样式

1. p标签：

*换行、有上下行距默认属性；不可嵌套div标签（块级标签）

1. span隔离标签（无任何样式）（行级标签）

*针对元素有隔离作用

1. br（换行）

*为特殊标签，无结束标签

1. hr（水平分割线）

*特殊标签，无结束标签

8类：

1. b /strong（加粗字体）
2. i/em（字体变成倾斜样式）
3. big/small（使文本变大/变小）
4. sup/sub（上/下标）
5. u/del（下划线/删除线）

*em和strong 可以理解为暂时变斜体/加粗，在不同的浏览器中，不同的标准中不一是变斜体/加粗

6类：

1. ul/ol（无序/有序列表，有上下边距，做内部补充）

*ul/ol 为列表框架，列表的内容需要使用li来包裹起来进行编码

1. li（放置列表的内容）
2. dl（自定义列表框）

*有上下边距

1. dt（列表项目）

*换行，和div类似

1. dd （列表项目具体内容）

*有上下边距，做內补

4类：

1. a （超级链接）

*用于页面的跳转，结合herf 属性，所有的html 的属性放开始标签，herf（跳转的网页地址），target（决定跳转的是本页面/新页面，默认值self，blank新页面）

1. 锚点（在本页面滚动herf=”#id”属性）
2. img（src属性值，显示本地/网络图片地址，./代表当前html同级目录；../代表上级 目录，也同有width和height属性，alt属性是图片加载失败显示的文本）
3. video （加载视频）
4. audio （加载音频）

*video和audio 可以结合control 展示控件

4类：

1. table（外框）；tr（行）；td（普通单元格）；th（表头单元格）
2. border （边框）；cellspacing（单元格间距）；cellpadding（单元格内部）
3. 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>选择器（为了选择特定的标签，要更精确一些）

1. 通配符选择器（直接选择所有标签）
2. 标签选择器（直接使用选中元素标签）
3. 类名选择器（直接使用元素类名）
4. id选择器（直接使用元素id）
5. 逗号选择器（逗号前后都是完整选择器，两者都可以选择）

eg：.top  .nav  li  a：hover ，.top  .nav  li  a .relative{

background-color: red；

}

1. 空格选择器（空格前的标签存在，空格后的子孙级标签，在空格前标签的内部也存 在）
2. 大于号选择器（大于号前的标签存在，大于号后的子级标签，在大于号前标签的内 部也存在）
3. 加号选择器（加号前面选中的标签紧邻的元素）
4. 破折号选择器（破折号前面选中的标签，其后面同级别的标签所有满足的元素）
5.  a.index （拥有类名为index的a标签）{

..............

}

>>>：link 可用于a标签的普通状态

>>>：visited 可以用于a标签访问过的状态

>>>：hover可以用于所有标签的鼠标划入状态

>>>：active 可用于所有标签鼠标点击状态
*选择器越精确(越长)优先级越高  id选择 >class选择 >标签选择器

<3>样式

1. 字体样式

font-family（调字体）

font-size（调字体大小，单位：px/em）

font-style（调字体倾斜效果，normal(不倾斜)；italic(倾斜)）

font-weight（调字体粗细，100级（最小）；900级（最大）；400=normal,700=bold）

1. 文本样式

text-transform（大小写英文字母切换，capitalize（首字母大写）；uppercase（全部大 写）；lowercase（全部小写））

text-decoration（文本装饰，underline（文字加下划线）；line-through（文字加删除 线）；overline（文字加上划线）；none（除去超级链接(a)的下划线） ）

text-indent（缩进，典型例子：2em）

text -align（文本水平位置，行标签才存在，left（左对齐）；right（右对齐）；center （居中对齐），要求行级标签，文本铺满一整行）

1. 背景样式（background的组合属性）

background ：color（背景色）

background ：image（背景图片，可定义多背景）

background：url（通过url函数来加载本地图片/网络图片）

background ：（定义背景图片的显示方式，repeat（重复）；repeat-x（横向重复）； repeat-y（纵向重复）；no-repeat（不重复）；background-position（定义背景图片的 位置））

1. 列表样式

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；

1. 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：内边距的背景色是标签的背景色；

1. margin（外边距（外补） ）

相邻标签之间的空白区域，外边距的设置有叠加效果，综合属性（margin:1px;）/单边设置（margin-left：10px；）

1. box-sizing：border-box （赋值宽高：內补宽高、內补、边框）
2. 外补、內补只能定义宽度（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）

}

1. 直接用div + a标签

line-height : 等于height，标签内的元素可以设置垂直居中

text-decoration: none；取消样式

text-align:center; 文本居中

margin: 0px auto;（导航条居中）

1. 使用列表浮动

list-style：none；（列表无样式）

1. 使用列表 + 行内块（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.com: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 鼠标在点下区域，抬起时触发

1. 找到元素
2. 赋予事件监听
3. 修改属性、内容

操作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