web前端复习

HTML中CSS基本知识

行内块属性：

块属性： div p ul　ol h1-h6

特点 1，可以设置宽高　2. 不可以与别的共处一行 3.不设置宽高的情况下，宽度为100%；

行内属性 span a

特点 1.不可以设置宽高 2.可以与别人共处一行 3.其宽高有由内容撑开

行内快属性 img input 特点 1.可以设置宽高 2.可以与别人共处一行

定位：

类型	定义	注意
相对定位(relative)	相对于原本文档流中的位置定位	占据原先文档流中的位置
绝对定位(absolute)	相对于离它最近的已经定位 父级定位	如果没有已定位父级，则根据HTML定位，脱离文档流
固定定位(fixed)	相对于浏览器窗口 （HTML）定位	IE8及以下不支持，脱离文档流（不会占据文档流体积），可能跟别人重叠
粘性定位(sticky)	以浏览器的可视窗口为参照点移动元素（固定定位特点）	占据原本文档流 必须添加 top 、left、right、bottom 其中一个才有效
静态定位(static)	表示保留在原本应该在的位置	不会重新定位

圆角属性

有四种写法

类型	代码	含义
单个属性值	border-radius：50px	四个角度都是50px
两个属性值	border-radius：50px 60px	左上与右下(50px)，左下与右上(60px)；
三个属性值	border-radius：50px 60px 70px	左上(50px) 右上与左下(60px) 右下(70px)；
四个属性值	border-radius：50px 60px 70px 80px	左上(50px) 右上(60px) 右下(70px) 左下(80px)；

z-index属性

类似于 PhotoShop 中的图层概念 仅可以加给已定位元素

Css样式的种类

行内（内联样式表）

<p style="color:pink"></p>

头部（内部）style

<style>
    div{
        backgroud:pink
       }
</style>

外部（外链）link，

<link rel="stylesheet" href="css/index.css">

Css优先级

优先级

后来者居上（后面的优先级高于前面的）

!important 最重要的（优先级最高）

id>class>tag

行内>头部>=外部

优先级权值：内联1000，id100，class10，tag1

Css两大特性

三大特性	定义
层叠性：	可以被后来的样式覆盖（后来者居上）
继承性：	子元素可以继承父元素的某些样式（比如：字体样式属性）

id选择器的命名：

1. 驼峰命名法（区分大小写），要尽可能有具体含义

2. 具有唯一性，不可重复起名都是同一个id

3. 不能以数字开头，

Class选择器的命名：

没有唯一性 其他与id选择器的命名一致

选择器

选择器	用法
类型选择器（标签选择器）	根据标签来选择
通配符选择器	* 选择全部
并集选择器	（使用多个选择器匹配同一组样式） 用逗号， 隔开
后代选择器	div空格a
子代选择器	div>a

紧邻着的下一个兄弟 用+选择器 span + a

Js字符串

'js字符串' " js字符串" js字符串 => `` 反引号包裹

不同数据类型间的类型转换方法

转字符串	注意
toString()方法	不可以转null和underfined
String()方法	都能转

转数值型	注意
Number()	Number()可以把任意值转换成数值 如果要转换的字符串中有一个不是数值的字符，返回NaN
parseInt()	解析一个字符串并返回指定基数的十进制整数
parseFloat()	把字符串转换成浮点数

转布尔值型	注意
Boolean():	0 (空字符串) null undefined NaN 会转换成false 其它都会转换成true

获取Dom

三种方法

获取Dom	代码
根据标签	var divT=document.getElementsByTagName('div')
根据class	var divC=document.getElementsByClassName('divC')
根据id	var div1=document.getElementById('div1')

获取标签里面的内容

document.getElementsByTagName('p').value；

设置输入框里面的内容

document.getElementsByTagName('input').value="你好呀"

字符串方法

方法	注意
length方法	返回字符串的长度
indexOf() 方法	返回字符串中指定文本首次出现的索引（位置）
lastIndexOf() 方法	返回指定文本在字符串中最后一次出现的索引：

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

indexOf(value,50) 从1开始到50结束检索

lastIndexOf(value,50) 从50开始到1结束检索

方法	注意
search("字符串") 方法	搜索特定值的字符串，并返回匹配的位置

• search() 方法无法设置第二个开始位置参数。

• indexOf() 方法无法设置更强大的搜索值（正则表达式）。

  方法	注意
  slice(start，end)方法	提取字符串的某个部分并在新字符串中返回被提取的部分

  如果某个参数为负，则从字符串从后往前开始计数。

   

省略第二个参数

则该方法将返回从第一个数值开始到最后的字符串：

 

方法	注意
substring(start，end)方法	类似于 slice() 但是substring() 无法接受负的索引

省略第二个参数，则该 substring() 将裁剪字符串的剩余部分

方法	注意
substr(start，length) 方法	类似于 slice() 不同之处在于第二个参数规定被提取部分的长度

省略第二个参数，则该 substr() 将裁剪字符串的剩余部分

首个参数为负，则从字符串的结尾开始返回|start|个字符

第二个参数不能为负，因为它定义的是长度

方法	注意
replace(value1,value2) 方法	用另一个值替换在字符串中指定的值

默认地，replace() 只替换首个匹配

replace() 对大小写敏感

如需执行大小写不敏感的替换，请使用正则表达式 /i

var n = str.replace(/MICROSOFT/i, "W3School");

如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

var n = str.replace(/Microsoft/g, "W3School");

方法	注意
toUpperCase()方法	把字符串转换为大写
toLowerCase()方法	把字符串转换为小写

方法	注意
text1.concat(" ",text2)	连接两个或多个字符串

可用于代替加运算符。下面两行是等效的

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

方法	注意
trim()方法	删除字符串两端的空白符

Internet Explorer 8 或更低版本不支持 trim() 方法

方法	注意
charAt() 方法	返回字符串中指定下标（位置）的字符串
charCodeAt()方法	返回字符串中指定索引的字符 unicode 编码

方法	注意
split(separator,limit)方法	将字符串切割转换为数组,

• separator 从该参数指定的地方分割

• limit 可指定返回的数组的最大长度 如果没有设置该参数，整个字符串都会被分割

数组方法

方法	注意
toString()方法	把数组转换为数组值（逗号分隔）的字符串
join() 方法	将所有数组元素结合为一个字符串(还可以规定分隔符)
pop() 方法	数组中删除最后一个元素
push() 方法	（在数组结尾处）向数组添加 一个新的元素
shift() 方法	删除 首个数组元素 数组的inedx还是1开头
unshift() 方法	（在开头）向数组添加新元素 数组的index依次往后递推
更改元素方法（索引）	索引：从一开始
delete 方法	delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之

方法	注意
splice() 方法	返回一个包含已删除项的数组

splice( x , y , " value1" , "value2" )

第一个参数 : x 定义了应添加新元素的位置

第二个参数 : y 定义应删除多少元素

value1,value2 : 定义要添加的新元素

splice( x , y )

第一个参数 : x 定义了应添加新元素的位置

第二个参数 : y 定义应删除多少元素

方法	注意
concat()方法	通过合并（连接）现有数组来创建一个新数组

concat() 方法也可以将值作为参数： 用于连接值

方法	注意
slice(index1,index2) 方法	数组的某个片段切出新数组

创建新数组。它不会从源数组中删除任何元素

一个参数的话

从索引开始切出数组的剩余部分

两个参数的话

index1 开始参数 选取元素，直到 index2 结束参数 （不包括）为止

插入Dom

innerHTML

document.getElementById(id).innerHTML = new text

HTML转义字符

 

 

网址：https://tool.oschina.net/commons?type=2

文件路径

../ 文件的上层目录

./ 文件的当前目录

动画

animation

animation: name(起的特效名称) 5s(5s转完) linear(转动速度呈线性  匀速) 2s(开始转动之前有2s的延迟) infinite(无限终止的转下去);

要配合@keyframe使用

@keyframes name /*特效名称*/ {
            form{
                transform: rotate(0);
            }
            3%{
                transform: rotate(180deg);
            }
            to{
                transform: rotate(360deg);
            }
​
        }

transition

代码格式

transition: property duration timing-function delay;

值	描述
property	置过渡效果的 CSS 属性的名称
duration	完成过渡效果需要多少秒或毫秒
timing-function（可选）	速度效果的速度曲线
delay	过渡效果何时开始

transform

transform: none|transform-functions;

值	描述
none	定义不进行转换
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵
translate(x,y)	定义 2D 转换
translate3d(x,y,z)	定义 3D 转换
translateX(x)	定义转换，只是用X 轴的值
translateY(y)	定义转换，只是用 Y 轴的值
translateZ(z)	定义 3D 转换，只是用Z 轴的值
scale(x,y)	定义 2D 缩放转换
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(x)	通过设置 X 轴的值来定义缩放转换
scaleY(y)	通过设置 Y 轴的值来定义缩放转换
scaleZ(z)	通过设置Z 轴的值来定义 3D缩放转换
rotate(angle)	定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	定义 3D 旋转
rotateX(angle)	定义沿着X 轴的 3D 旋转
rotateY(angle)	定义沿着 Y 轴的 3D 旋转
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

指定筛选的标签选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="">
        li[class$=aaa]{/*上箭头^代表前面匹配，$代表后面匹配*/
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>11111</li>
        <li class="cl">11111</li>
        <li>11111</li>
        <li class="claaa">11111</li>
        <li>11111</li>
        <li class="dlaaa">11111</li>
        <li>11111</li>
        <li>11111</li>
    </ol>
    <div class="clbbb">
        div1111111
    </div>
</body>
​

标签[class（^前面匹配 / $ 后面匹配）="class名"]{

改变的属性

}

Background-clip属性

代码语法

background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
content-box	背景被裁剪到内容框

定时器

周期性定时器

setInterval()

方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

setInterval(code,millisec,lang)

参数	描述
code	必需。要调用的函数或要执行的代码串
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计
lang	可选。 JScript | VBScript | JavaScript

一次性定时器

setTimeout()

setTimeout(code,millisec,lang)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串
millisec	必需。在执行代码前需等待的毫秒数
lang	可选。脚本语言可以是：JScript | VBScript | JavaScript

= / == / === 的区别

= 意为 后面给前面的赋值

int a = 520；
//意为a的值就为520

== 意为 等于

=== 意为 恒等

日期操作

日期操作	代码
获取现在是星期几	.getDay()
获取当前的秒数	.getSeconds()
获取当前的分钟数	.getMinutes()
获取当前的小时数	.getHours()
获取当前的日期	.getDate()
获取当前的月份	.getMonth()
获取当前的年份	.getFullYear()

Vuex中的 state / payload 的含义

v 单向数据流表示

 

 

 

 

Vue-router中的字段

 

父子间的通信

模板语法

Vue-router的两个核心组件（<router-link/> <router-view/>）

修饰符