前端总结

萝らか妹 提交于 2020-02-02 14:35:04

HTML

<!doctype> #规定文档类型

<!-- 注释 -->

转义字符以&;包裹  #在&;中间单词简写,详情查看8-1

<head>  头标签

<body> 体标签

<html>  根标签,全局的属性写在这里 ,标签种类等详情查看8-3

<div> 用来搭建页面结构的标签

width: 200px  # 标签的宽

height: 200px  # 标签的高

border-radius: 50%;  #边框圆角设置

background-color: blue;  #标签的底色设置

border: 1px solid black;  # broder边框,1px就是1像素,solid就是实线,black就是定义边框的颜色

color: hotpink;  #字体颜色

font-size: 30px;  # 字体大小

transition: 1s 1s all linear;  # 就是动画效果过渡效果,1s 1s过渡效果展开的时间和延迟时间,延迟时间一般不会写,用户体验度不好,动画属性默认all,渡曲线linear(线性)

.box:hover{}  # hover给鼠标添加悬停效果

cursor:pointer; # 鼠标样式

list-style: none;  # 清除列表样式

text-decoration: none;  # 清除字体下划线

margin: 0;  # 清除盒模型的margin属性

padding: 0; # 清除盒模型的padding属性

margin-top: 100px;  # 设置外边距顶部

margin-left: 100px; # 设置外边距左边

border: 1px solid black; # 设置边框区间,solid就是边框样式实线和虚线,

margin: 100px 0 0 200px; # margin四个参数上下左右,用来设置整个标签在页面的什么位置

padding: 10px 20px 30px 40px;  # pading四个参数上下左右,用来设置padding区域在色块区域的位置

float: left; # 设置浮动布局,左浮动

margin-right: auto;  #设置外边距右边的属性为自动

calc(-155px - 157px) # clac函数是在html页面中做计算的,括号中一定要用空格分开

background-position-y:-48px;  # 用来定位图像,这句是定位y轴

position: relative;  # 就是相对定位

position: absolute; # 绝对定位

z-index: 66;  # 定位布局中,可以用这个设定显示的层级,以数字的大小来获取显示优先级

position: fixed;  # 固定定位,就是窗口上下拖动,这个窗口不会被拖动,一般网页的悬浮广告原理

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

css

选择器:head标签的后面写一个style,在style标签下,将需要控制的标签的类名或者id名写在这个标签下,后的{}就是作用域,作用域内写的参数就是样式块,这样一个组合可以达到控制html的样式,这就是选择器

css样式引入的方式

行间式:直接将css的样式写在标签的style属性中

内联式:在head标签下写style标签,在style标签内写样式块

外联式:在html文件内写好选择器和样式块,通过link标签导入

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

 

普通选择器

1、标签选择器 | 语法:div{}

2、通配选择器 | 语法: *{}

3、class选择器(类选择器) | 语法: .class{]

4、id选择器 | 语法: #box

5、!import选择器 | 语法: div{">!important;}

PS:这个语法比较特殊,在语句的值和结束符中间写

优先级!import > 行间式 > id > class> 标签 > 通配

 

高级选择器

群组选择器

div,p,h1{ }  # 同时选中div标签下的几个类名的标签做控制

 

后代选择器(使用率最高),有两种写法 空格 和 >

空格写法  .sup .sub{}

PS:.sup可以为.sub的父亲,也可以为父辈

>号写法

.sup > .sub{}

PS:.sup只能为.sub的父亲

 

兄弟选择器,有两种写法 ~ 和 +

~ 写法  .div1 ~ .div2{}

PS:.div2在.div1下的兄弟,.div1是修饰词,.div1与.div2之间可以有其他兄弟,可以直接定位到其他兄弟

+写法  .div1 + .div2{}

PS:.div2在.div1下的兄弟,.div1是修饰词,.div1与.div2之间不可以有其他兄弟,可以直接定位到其他兄弟

 

交叉选择器

h2.hd{}  

PS:是h2标签且有一个class名为hd

 

多类名选择器

.h.h61{}

PS:有一个标签有多个类名

 

伪类选择器的语法: 选择器类型:语法(数字)  #详情见8-8

class-name:nth-child(number){}

PS:伪类选择器是从页面结构开始查找,number代表结构层,填写数字即可

伪类选择器优先级:高于标签低于id等于class

 

盒模型

盒模型解析:盒模型就是标签,标签显示存在四个部分

1、最外面是margin :位置区间(外边距),就是控制在页面的位置

2、然后是border :边框区间

3、然后是padding :留白区间(内边距,就是内容和border之间留白)

4、然后是宽 X 高(content) :内容区间

PS:每一个区间不会重叠,都有自己独立的区域 

 

字体操作

text-align: center;  # 改变文本的水平居中方式

line-height: 100px;  # 行高

font-weight: 900;  # 字重:字越粗越重,越细越轻,范围100~900的整数

font-size: 30px;  # 字体大小

font-family: SimSun-ExtB,Shruti;  # 字族 = 字体,可以写备用字体,就是字体后面以逗号分隔,再写一个字体,备用字体一般选用系统默认字体

font: 900 30px/100px "SimSun-ExtB","Shruti" # 以上所有功能的简写方式,整体写法:font: 字重 字体大小/行高 字族

精灵图操作

background-image: url("img/bg.png"); # 加载背景图片

background-repeat: no repeat; # 处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺

background-size: 100px 200px;  # 背景尺寸(这个不常用),会缩放背景图

background-position: 10px 20px; # 背景定位,往右移10(x轴左右偏移)、往下移20(y轴上下偏移)(-10、20往左移10,往下移20)

background: url("img/bg.png") red no-repeat 10px 20px;  # 以上所有功能的简写方法:这叫整体赋值

 

清浮动

这个就是清浮动的写法,用父类伪类来写,子浮动,父级开启清浮动,父级的兄弟显示区域正常

.sup:after{content: "";display: block;clear: both;}

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

javaScript

什么是javaScript

HTML用来做页面的架构,CSS用来做页面样式的布局

javaScript就是用来完成页面用户交互的,JS写的就是叫脚本

js就是弱语言类型,不同类型的时候可以相互转换

 

js写在script标签内,script标签可以出现在html的任意位置

script标签一般书写在body标签的最底部,但写在body标签和html标签之间,会被解析在body的最底部,所有代码书写在该位置也是合理的

PS:html的解析是由上而下的,所以脚本的执行也是根据html标签的顺序执行的

 

常用语句

alert('弹出警告')   # alert 会在网页的上部弹出一个窗口

<script src="js的引入.js">   # js需要通过script标签从外部引入脚本

var 变量名 = 变量值;   # var是定义变量的关键词

var m = new Number(100)   # new是创建新的对象的关键词

print   # 这个功能就是通过浏览器调用打印机打印页面

console.log (xxx)   # 在终端打印

//   # 这个是js的注释

!   # 是取反的意思

isNaN  # 检查是不是NaN

var n=10;   # 定义一个数字类型的变量

var s = 'str' ;   # 定义一个字符串类型的变量

var b = true;   # 定义一个布尔值类型的变量

console.log(m,typeof (m))   #在终端查看值的类型,查看类型m时候可以不加括号

var x = Number('123');   # 值类型的转换,这里是将字符串123转换成数字123

var s = '字符串';  # 定义字符串,'' "" 单双引号都可,js中没有 ''' '''三引号

var abc;   # 定义一个未定义类型

==   # 这个是用来判断值是否相等,这个是做值比较

===   # 判断本质上是否相等,就是做值与类型比较

var num = 666 + '';  # 数字转换成字符串

var res1 = '10' + 5;   # js中字符串的拼接优先级高于数字运算的加法,所以这里识别成字符串的拼接

var res2 = '10' - 5;   # 这里有减法,字符串不能做减法,所以字符串10识别成数字做了减法

var res = '888' - 0;   #字符串转换成数字,-0就是表示值不变,字符串不能做减法,所以自动识别成数字做计算,类型也改变了

var ress = +'888';   #字符串转换成数字的另外一种方式,字符串必须是纯数字的字符串,不能是数字加字幕的字符串

isNaN(结果) # 判断转换的结果是否是非数字类型

res = parseInt('3.1.4abc');   # 将非纯数字的字符串转换成数字类型,这个方法就会从前往后找,找到的第一个数字就是返回值

res = parseFloat('3.1.4abc');   # 将非纯数字的字符串转换成数字类型,这个方法就会从前往后找,找到的第一个小数点后的第一个数字就是返回值

var arr = [1,2,5,3,4];   # 定义数组,js中数组就是列表

console.log(arr[2]);   # 数组的查询 => 索引即可

delete arr[4];   # 数组的索引删除

delete arr[arr.length - 1];   # 删除数组中最后一个,arr.length - 1就是最后一个,以此类推-2就就是删除最后第二个

arr[4] = 100;   # 修改数组中索引的值

arr.unshift(123);   # 在数组的头位置增加值

arr.shift();   # 删除数组头位置的值

arr.push(888);   # 在数组的尾部增加一个值

arr.pop();  # 将数组的尾部的值删除

arr.splice(1,1,999);   # splice可以完成除了查的所有功能,包含插入。spilce(从什么索引开始,操作多少位,操作成什么(这个可以用逗号添加多个值,如果是空不写值就是删除))(省略第三个参数就是从第几位开始索引,操作几个位进行删除)

newarr = arr.splice(1,2);   # slice 切片操作,切片之后数组内的值就没有了,被切掉了。slice (n,m) 从索引位置n开始截取到索引位置m之前。这里将切片后的值放入一个新的变量中

var str =arr.join('-');   # 将数组中的值以指定的符号拼接成字符串

narr = str.split('-');   # 字符串对应有一个逆运算,将字符串以指定的符号拆分成数组,拆分后数组内的值是以字符串形式存在,可以通过索引修改类型

narr[2] = narr[2] - 0;   # 索引数组内指定位置的值改变类型

var dic = {name:'liuxx',age:'100'};   # js没有字典类型,但可以通过对象完全表现字典类型,对象可以当成字典来使用

console.log(dic.name);   # 查找字典中指定的值,对象的调用就是对象加.来调用

console.log(dic['age']);   # 查找字典中指定的值,对象中对象中所有的key都是字符串形式,和42的指令是一样的效果,知识写法不同

dic.sex = 'male';   # 字典的增加

dic.age = 99;   # 修改字典内的指定key的值

delete dic.age;   # 字典内的值删除

函数的定义 function fn1() {console.log('我是函数fn1');}

fn1();   # js中函数的调用方法

var fn2 = function () {console.log('我是函数fn2');}; # 定义函数的另一种方式

匿名函数的定义 (匿名函数只能在定义阶段被调用一次)(第一个(),是将定义的代码作为整体拿到内存地址,后面的()就是调用的意思,这就是匿名函数的定义方式和原理(function () {console.log('我是匿名函数')})();

onmouseout  \  onmouseover   # 添加鼠标悬浮事件out是离开,over是悬浮(就是鼠标悬停)

 

s的基本数据类型(值类型、引用类型、特殊类型)

值类型:

1、number:数字类型   # js里面没有整型和浮点型,负数小数的区别,只有一个类型就是数字类型

2、string:字符串类型

3:boolean : 布尔类型

4、underfined : 未定义类型

 

--------------------------------------------------------------------------------------------------------------------------------------------------------

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!