导图社区 知了堂1-4天体验班思维导图
这是我在知了堂参加10天夏令营培训中,前四天所学到的知识,我将他们做成了思维导图,以此来强化我对前端基础知识的巩固和学习。
社区模板帮助中心,点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
web前端(知了堂1-4天内容总结)
JS
基础
数据类型
基本数据
number
string
boolean
null(空对象)
undefined
引用数据
object
数组
属性
索引(index)
长度(length)
方法
push()向数组最后添加元素
unshift() 向数组最前面添加元素
pop()删除数组的最后一个元素
shift()删除数组第一个元素
splice(开始,长度,新元素)替换某一元素
splice(开始,0,新元素)某位置插入指定元素
splice(开始,长度)删除指定元素
sort(函数)数组排序
typeof
可返回对应数据的数据类型
运算符
算数运算符
+、-、*、/、%
比较运算符
==、===、>、<、>=、<=、!=、!==、?
逻辑运算符
&&、||、!
类型运算符
typeof、instanceof
隐式转换
算数运算符会将字符串类型的数字转换为数字类型,在进行运算。如:'1'+2=3
parseInt
解析一个字符串,并返回一个整数。
parseFloat
解析一个字符串,并返回一个浮点数。
分支语句
if
if...else
if...else if...else
switch...case
循环语句
for循环
while循环
do...while循环
数学对象(Math)
Math.PI 圆周率
Math.random() 随机数
Math.floor() 地板除,向下取整
Math.ceil() 向上取整
Math.round() 四舍五入
日期对象(Date)
new Date().getFullYear() 获取年
new Date().getMonth() 获取月(按照美国月份,实际月份要加一)
new Date().getDate() 获取日
new Date().getHours() 获取小时
new Date().getMinutes() 获取分钟
new Date().getSeconds() 获取秒
样式的引入
外部
<link rel="stylesheet" href="css/style.css">
内联
<body style="background:deepskyblue"></body>
行间
<style>body{ background:deepskyblue; }</style>
导入
@import url('01.css');
选择器
类别
元素选择器
p
类选择器
.class
ID选择器
#box
属性选择器
input[type='text']
伪元素选择器
.box::after
伪类选择器
.box:hover
通配符选择器
*
兄弟选择器
p+h1
子元素选择器
p>h1
后代选择器
p h1
优先级
id>类>元素
权重
id(100)>类(10)>元素(1)
浮动
产生的问题
1.脱离文档流 但是不完全脱离
2.造成父元素塌陷
3.盒子大小会变成内容的实际大小或者是width height属性决定
解决方法
1.父元素设置固定宽高
2.父元素设置overflow:hidden
3.父元素结束标签之前,设置div,并且设置样式为clear:both
4.用伪元素来清除浮动
padding与margin的区别
padding(内边距)
元素中与文字的距离
margin(外边距)
元素与元素之间的距离
定位
含义
可定义一个元素出现在你想出现的位置
绝对定位(absolute)
特性
①完全脱离文档流
②释放原本文档流中的空间,定位到上一层空间中(类似与书本的每一页)
③以谁做参考(如果所有父元素都没有定位的情况,以body的左上角作为原点参考,否则以父元素作为参考)
相对定位(relative)
①不脱离文档流
②以原本正常文档流作为参考
③主要目的是给子元素起参考、调整层级
固定定位(fixed)
①脱离文档流
②宽度变成内容的实际大小或者width
③以浏览器的可视窗口作为参考
谁有定位,谁的层级高
谁后定位,谁的层级高
HTML
简介
HTML(HyperText Markup Language),不是编程语言,是标记语言。通过浏览器进行编译渲染。
按单双标签分
双标签
p、div、h1、h2、h3、h4、h5、hX、button、ul、li、table、body、head、style、script、span、ol、dd、dl等
单标签
hr、img、input、br等
按行块级元素分
块级元素
定义
默认占据一整行 可以设置宽高 但是设置之后 后面空间依然属于它
元素
p、div、h1、h2、h3、h4、h5、hX、ul、li、table、hr等
行级元素
span、a、small、big、em、i、input
默认的空间是内容的大小,默认不可以设置宽高