python知识点总结框架_python学习第六十五天：前端知识点总结

前端知识点串讲

1 HTML

1.1 组成

HTML标签： 单 双

HTML标签属性 class id

1.2 HTML标签

# 页面结构标签

html body head

# HEAD 头部标签

meta title style link script

# 格式标签

p h1~6 pre br hr

# 文本标签

em strong sub sup del ins i

# 列表

ul ol li dl dt dd

# 表格

table thead tbody tfoot tr td th caption

td属性 colspan rowspan

# 表单

form

input 属性 type maxlength size value placeholder autocomplete=‘on/off‘ max min step name pattern multiple

type: text / password / radio / checkbox / button / submit / reset / email / number / tel / search / date / time / week / datetime-local / range / url / file

select multiple

option

textarea

label

button

1.3 块状元素好内联元素

#块状 块级 独占一行

div p hr br tr table header footer h1 h2 h3 ...

布局的元素 格式类 列表

#内联 行内

span em strong a img input button sub sup del ...

文本类、表单控件

2 CSS

2.1 CSS选择器

# 基本选择器

#idName .className tagName *

# 层级选择器

s1 s2

s1>s2

s1+s2

s1~s2

# 属性选择器

[attrName]

[attrName=value]

[attrName*=value]

[attrName^=value]

[attrName$=value]

# 伪类选择器

:link

:visited

:hover

:active

:focus

:first-child li:first-child

:last-child

:nth-child(n)

:last-nth-child(n)

:only-child

:first-of-type

:last-of-type

:nth-of-type(n)

:last-nth-of-type(n)

:only-of-type()

# 伪元素选择器

::before content:‘‘

::after

::first-letter

::first-line

::placeholder

::selection

2.2 取值

长度单位

px em 百分比 rem

颜色单位

colorName

rgb()

rgba()

HEX 十六进制

hsl()

hsla()

2.3 CSS属性

# 字体

font-family

font-size

font-weight

font-style

font-variant: small-caps

font 复合属性

# 文本

text-align:

vertical-align: 长度单位

line-height

text-decoration: underline/overline/line-through/none

word-wrap:

white-space:pre/pre-line/nowrap

word-spacing

letter-spacing

text-indent

# 颜色

color

opacity: 不透明度

# 背景

background

backgorund-color

background-image

background-repeat

background-postion

background-attachment

background-size: cover / contain / 长度

# 边框

border

border-color

border-width

border-style

border-top

border-top-width

border-top-color

border-bottom-style

....

border-radius

border-top-left-radius

...

box-shadow

# 列表

list-style

list-style-type

list-style-position

list-style-image

# 表格

table-layout

border-collapse

border-spacing

empty-cells

caption-side

# 浮动

float

clear

# 定位

postion:relative / absolute / fixed

left

top

right

bottom

z-index

# 布局

display

overflow

overflow-x

overflox-y

width

height

max-width

min-width

max-height

min-height

box-sizing: border-box / content-box

# 外边距

margin

margin-left

margin-top

margin-right

margin-bottom

# 内边距

padding

padding-left

padding-right

padding-top

padding-bottom

# 变换

transform: translate() translatex() translate()

rotate()

skew() skeyx() skewy()

transform-origin

# 过渡

transition-name

transition-duration

transition-timing-function：ease / linear

transition-delay

transition

# 动画

@keyframes 动画名称 {

0% {

}

100% {

}

}

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-play-state:runing pasued

# CSS3 网络字体

字体图标

# 其他

* 渐变

3 JavaScript

3.1 基本语法

指令结束符 ；或者换行

注释 // /* */

变量 变量名规范 (不能是关键字)

3.2 数据类型

String

Number

Boolean

Null

Undefined

Object

Array

Function

........

RegExp

3.3 运算符

算术 ++ -- + - * / % **(ES6)

比较 > >= < <= == != === !==

逻辑 && || !

位运算符

赋值 = += -= /= *= %=

其他 +(字符串拼接) typeof delete ?:

3.4 内置对象

# String对象

length

substr()

substring()

slice()

indexOf()

lastIndexOf()

search() 可以写正则

split()

trim()

# Number

toFixed()

toString()

# Array

length

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

push()

unshift()

pop()

shift()

splice()

reverse()

sort()

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

concat()

join()

indexOf()

lastIndexOf()

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

forEach()

map()

filter()

some()

every()

reduce()

# Function

apply()

call()

# Math

PI

abs()

pow()

max()

min()

ceil()

floor()

round()

random()

# Date

getFullYear()

getMonth()

getDate()

getDay()

getHours()

getMinutes()

getSeconds()

getMilliseconds()

getTime()

getUTC....

set...

setUTC...

#RegRxp

test()

exec()

字符串方法： search() match() replace()

4 BOM/DOM

4.1 BOM

浏览器对象模型

#window 浏览器中运行JS的全局对象

setInterval()

setTimeout()

clearInterval()

clearTimeout()

alert()

confirm()

prompt()

innerWidth

innerHeight

#histroy

back()

go()

forward()

#navigator

userAgent

#screen

#location

href

path

hostname

hash

.....

4.2 DOM

文档对象模型

获取页面元素

querySelector()

querySelectorAll()

操作元素的内容、属性、样式

document

document.body body元素

document.documentElement html元素

4.3 事件 Event

# 绑定事件

dom.addEventLister()

dom.on事件 = function(){}

# 事件

鼠标 click dblclick contextmenu mouseenter mouseleave mousemove mousedown mouseup

键盘 keydown keyup keypress

表单 blur focus submit reset select change input

文档 load unload beforeunload

图片 load error abort

其他 scroll resize

# Event对象

keyCode

clientX/clientY

offsetX/offsetY

pageX/pageY

button

target

stopPropagation()

preventDefault()

5 jQuery JS库

5.1 基础

jquery DOM 对象 和 JS dom区别 、 转换

连贯操作

5.2 选择器

# 基础选择器

# 属性选择器

[attr!=value]

# 子元素选择器

child和of-type

# 层级选择器

# 过滤 基本筛选器

:first

:last

:eq(index)

:even

:odd

:lt(index)

:gt(index)

:not(选择器) li:not(‘.item‘) li.item

# 内容

: contains(context)

: has(选择器)

：parent

: empty

# 可见性选择器

:hidden

:visible

# 表单

:input

....

# 表单对象

:disabled

:enabled

:checked

:selected

5.3 筛选器

# 过滤

first()

last()

eq(index)

not()

filter()

has()

slice()

# 查找

parent()

parents()

offsetParent()

parentsUntil()

children()

find(选择器)

prev()

prevAll()

prevUntil()

next()

nextAll()

nextUntil()

siblings()

closest(选择器)

# 串联

add(选择器)

addBack()

end()

5.4 DOM操作 文档操作

# 内部插入

append()

appendTo()

prepend()

prependTo()

# 外部插入

after()

insertAfter()

before()

insertBefore()

# 包裹

wrap()

wrapAll()

wrappInner()

unwrap()

# 替换

replaceWith()

replaceAll()

# 删除

empty()

remove()

# 克隆

clone()

5.5 样式操作

#css

css()

# 尺寸

width() / height()

innerWidth() / innerHeight()

outerWidth() / outerHeight()

# 位置

offset()

postion()

scrollLeft()

scrollTop()

5.6 属性

# 属性

attr()

removeAttr()

prop()

removeProp()

# class

addClass()

removeClass()

toggleClass()

hasClass()

# 取值

text()

html()

val()

5.7 事件

#绑定

on()

one()

#解除绑定

off()

#委派

父元素.on(‘事件‘, ‘子元素’， fn)

#自动触发事件

$(‘btn‘).trigger(‘click‘)

#jqueyr 事件

#Event

5.8 jQuery 动画

# 基本

show()

hide()

toggle()

# 滑动

slideUp()

slideDown()

slideToggle()

# 淡入淡出

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

# 自定义动画

animate()

# 动画控制

delay()

finish()

stop()

5.9 jquery插件

6 Boostrap UI样式库

6.1 基础

响应式 media

bootstrap.css

bootstrap.js 依赖于jquery

6.2 布局

栅格系统

表格

表单

.....

6.3 组件

字体图标

按钮

导航条

..

6.4 插件

模态框

轮播图

.....

7 Vue JS框架

7.1 Vue实例

new Vue ({

el:,

template:,

render:,

data:,

computed:,

watch:,

methods:

//钩子

created:function(){},

mounted: function(){}

})

7.2 Vue视图语法 (模板语法)

# 插值

{{}} v-html v-text v-once

# 属性绑定

v-bind:属性名 :属性名

# 指令

v-for v-else-if v-html v-text v-once v-bind v-on ...

# 样式绑定

:class="{}"

:style="{}"

# 条件渲染

v-if

v-else

v-else-if

v-show

# 列表渲染

v-for

key

# 事件

v-on:事件 @事件

修饰符 .stop .prevent

键盘修饰符

系统按键的修饰符

# 表单

v-model

文本框

checkbox

radio

select

修饰 v-model.number .trim .lazy

7.3 组件

# 注册组件

Vue.component(组件名, {

props

data: function(){

}

同vue实例

comonents: {

局部组件

}

})；

# 组件通信

父组件->子组件 prop

子组件->父组件 $emit() 自定义事件

# 插槽

# 动态组件

7.4 项目

#前端工具 支持环境

node.js

#包管理工具

npm

#模块化

webpack ...

#自动化工具

grunt

glup

webpack

#Vue全家桶

vue

vue-router

vuex

vue-ssr 服务端渲染

element-ui

原文：https://www.cnblogs.com/luck-L/p/9542707.html