HTML，CSS 思维导图模板_ProcessOn思维导图、流程图

JavaScript

组成

ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象）

使用方法

1、在文档中任意位置写script标签，建议写在body中；2、在外部创建js文件，通过script标签里面的src属性链接。

基本数据类型

Number 数值类型

数值，NaN也是数值类型，但是表示非数值

Boolean 布尔类型

值为true和false，值为false的有6种情况，false 0 undefined "" null NaN

String 字符串类型

用引号引起来，在js中部分单双引号

Undefined 未定义类型

1、声明了变量但是未赋值，结果也是undefined；2、另一种是变量的值就是undefined

Null 空类型

空对象或者尚不存在的对象，值也会null

数据类型转换

查看数据类型

typeof

强制转换为字符串

toString()

强制转换为整型

parseInt()

强制转换为浮点型

parseFloat()

判断和循环

条件判断

if条件判断

switch条件判断

循环

for循环

while循环

do-while循环

数组

创建数组

var arr = [];

获取数组元素

数组名[索引值] 索引值是从0开始递增一直到数组的长度减1

获取数组的长度

数组名.length

修改数组元素的值

数组名[索引值] = '新的元素值'

后置追加

数组名.push()

返回的是数组长度

后置删除

数组名.pop()

返回的是被删除的元素

前置追加

数组名.unshift()

返回的是数组的长度

前置删除

数组名.shift()

返回的是删除的元素

数组的删除

delete 数组名[索引值]

delete和pop(),shift()不同的是delete删除的是数组的元素，但是不改变数组的长度，而pop()和shift()删除的是数组里的元素，而且连元素位置也删掉，数组长度也会跟着改变

字符串分割符

join 指定字符串的分割符，默认是以逗号为分割符

数组拼接

concat 数组1名.concat(数组2名)

数组翻转

reverse

截取数组

slice slice(开始的位置，结束的位置+1)

数组排序

sort

指定位置的删除

splice（开始的位置，要删除的元素个数）

指定位置的增加

splice（开始的位置，0，内容，内容，...）

获取元素

获取ID

document.getElementById()

获取类名

document.getElementsByClassName()

获取标签

document.getElementsByTagName()

获取Name值

document.getElementsByName()

事件

键盘事件，鼠标事件，系统事件

鼠标事件

单击事件 onclick

双击事件 ondblclick

移入事件 onmouseover

移出事件 onmouseout

鼠标按下事件 onmousedown

鼠标松开事件 onmouseup

鼠标移动事件 onmousemove

键盘事件

键盘按下事件 window.onkeydown

键盘松开事件 window.onkeyup

标签

设置属性值

标签.setAttribute('属性名','属性值')

获取属性值

标签.getAttribute('属性名')

移除属性值

标签.removeAttribute('属性名')

获取标签内容

标签.innerHTML （获取标签里面的内容和文字）

标签.innerText ）（获取标签利里面的文字）

获取系统时间

var date = new Date() ，获取当前系统时间

date.getFullYear() ，获取到当前系统对应的年份

date.getMonth()+1 ，获取到当前系统对应的月份{因为下标是从0开始的，所以要+1}

date.getDate() ，获取当前系统对应的天数

date.getDay() ，获取到当前系统对应的星期数

date.getHours() ，获取当前系统对应的小时数

date.getMinutes() ，获取到当前系统对应的分钟数

date.getSeconds() ，获取到当前系统对应的秒数

date.getTime() ，获取到当前系统对应的毫秒数

字符串

获取字符串长度 .length

获取对应下标的元素 .charAt(下标)

获取对应下标的ASCII码 .charCodeAt(下标)

获取首次出现该字符的下标 .indexOf('字符')

获取最后一次出现该字符的下标 .lastIndexOf('字符')

替换字符 .replace('旧的字符','新的字符')

定时器

设置定时器

setInterval(函数，间隔的时间)

清除定时器

clearInterval()

延时器

设置延时器

setTimeout(函数,延迟的时间)

清除延时器

clearTimeout()

标签选择器

块级元素

标签

div（盒子模型）、p（段落标签）、ul（无序列表）、ol（有序列表）、li、h1-h6（标题标签）、center（居中标签）、dl（自定义列表）、dt、dd...

块级元素可以设置宽高，默认宽度跟父级一样，排列方式是上下排列

居中

①块级元素左右居中可以使用margin: o auto;②上下对齐有三种方式：第一种设置弹性盒子，在父元素中加上align-items:center；第二种设置定位，top: 50%;margin-top: -自身高度的一半；第三种也是设置定位，top: 50%,transform:translateY(-50%)

标签里面的元素上下居中可以用line-height: 盒子的高度；左右居中可以用text-align:center

行内元素

标签

span、a（超链接）、b（加粗）、u（下划线）、i（斜体）、strong（加粗）...

居中

行内元素不能设置宽高，宽度由内容决定，且是左右排列的。还有一个不同的是行内元素设置上下外边距无效，但是可以设置左右外边距

行内元素的左右居中和上下居中跟块级元素的上下居中一样

标签里面的元素上下居中可以用line-height: 盒子的高度；左右居中可以用text-align:center

选择器

+:标签的下一个同级标签

.lis+li 选中的是类名为lis的元素的下一个li标签

~：标签的后面所有标签

.lis~li 选中的是类名为lis的后面所有的li标签

标签[属性名]:选中的是标签中含有这个属性名的元素

img[alt] 选中的是img标签中含有属性名为alt的标签

标签[属性名="属性值"]:选中的是标签中含有这个属性且属性值一样的元素

img[alt="这是一张图片"] 选中的是img标签中含有alt属性且属性值为这是一张图片的标签

伪类选择器

link

未点击的状态，初始状态

hover

鼠标滑过的状态

visited

鼠标点击的一瞬间状态

active

鼠标点中的瞬间，长按可以持续

定位

static

静态定位

如果元素什么定位方式都不给的话就默认是static，它不会以任何方式定位，始终跟着页面正常流进行定位

relative

相对定位

以自身为参照物，相对自身元素位置进行定位

absolute

绝对定位

以父级元素为参照物，相对父级元素的位置进行定位，父级元素移动它也会跟着移动

fixed

固定定位

以浏览器窗口为参照物，相对浏览器大小定位，但是不随着屏幕滚动而动，会一种固定下浏览器屏幕上

sticky

粘性定位

根据用户滚动的位置进行定位

一开始粘性定位会先变成相对定位，当屏幕滑动到给定的位置之后就会变成固定定位固定在屏幕上

表格

caption

表格的标题

表头 thead

th td ，td是每一个单元格

表体 tbody

tr td

表尾 tfoot

合并单元格边框 border-collapse:collapse;

合并两行 rowspan

合并两列 colspan

表单

单行文本域

密码框

数字框

单选框

注意：单选框中必须要有相同的name属性

复选框

下拉框

邮箱

文件上传

多行文本域

注意：rows就是文本域中可以输入的内容行数，cols就是列数

文字标签

大小 font-size

颜色 color

粗细 font-weight

字体 font-family

样式 font-style

背景渐变 background-image: linear-gradient(到哪里的方向，开始的颜色，结束的颜色)

文字渐变色：-webkit-backgrounf-clip:text，-webkit-text-fill-color: transparent;

图片

可以设置宽高，且元素占位置

背景图

背景图不能设置宽高，但是不会占位，而且要路径中不能出现中文

音频，视频

自动播放 autopplay

出现控制条 controls

静音 muted

无限循环播放 loop

transform

translate

可以写两个参数，参数中间用逗号隔开

第一个参数是左右方向的移动，第二个参数是代表上下方向，正数代表向右和向下，负数代表向左和向上

translateX

只需要写一个参数，代表左右方向的移动，正数代表向右，负数代表向左

translateY

只需要一个参数，代表上下方向的移动，正数代表向下，负数代表向上

rotate

旋转方向，里面写需要旋转的读书，默认是顺时针旋转

scale

放大缩小，大于1是放大，小于1是缩小

自定义动画

@keyframes

animation: 动画名称动画持续的时间;

infinite 无限播放 linear 匀速播放

媒体查询

@media

@media (max-width: 200px)

移动端 (max-width: 320px)

平板端 (max-width: 960px) and (min-width: 640px)

PC端 (min-widthL 960px)

H5新增标签

头部 header

导航 nav

文章 articele

区域 section

侧边栏 aside

底部 footer

区块 hgroup

媒体标题 figure

figuration