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(){}
<p onclick="code...">

# 事件
鼠标  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()  自定义事件

# 插槽

# 动态组件
<component is="组件名">

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

时间: 2024-10-15 05:21:48

python学习第六十五天:前端知识点总结的相关文章

python学习之第十五天

本节内容: 项目:开发一个简单的BBS论坛 需求: 整体参考"抽屉新热榜" + "虎嗅网" 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被置顶 可进行多级评论 就先这些吧... 知识必备: Django HTML\CSS\JS BootStrap Jquery 设计表结构 + CSRF(Cross Site Request Forgery, 跨站域请求伪造) CSRF 背景与介绍 CSRF(

python学习笔记-(十五)RabbitMQ队列

rabbitMQ是消息队列:想想之前的我们学过队列queue:threading queue(线程queue,多个线程之间进行数据交互).进程queue(父进程与子进程进行交互或者同属于同一父进程下的多个子进程进行交互):如果两个独立的程序,那么之间是不能通过queue进行交互的,这时候我们就需要一个中间代理即rabbitMQ 消息队列: RabbitMQ ZeroMQ ActiveMQ ........... 一. 安装 1. ubuntu下安装rabbitMQ: 1.1 安装: sudo a

Python学习笔记(十五)用Python获取本地数据

f1 = open(r'E:\Python\Data\data1.txt') #读取data1.txt文件,使用系统默认缓冲区大小, 为了读取快点,使用缓存吧! f = open(r'E:\Python\Data\data2.txt', 'w') f.write('Hello World !') f.close() f = open(r'E:\Python\Data\data2.txt', 'r') p1 = f.read(5) # 先读5个字节 p2 = f.read() # 余下的都读出来f

Python学习笔记(十五)

一.进程与线程 一个操作系统可以有多个进程 一个进程可以有多个线程,且必须有一个线程 二.多进程 from multiprocessing import Process import os # 多进行要运行的函数 def run_proc(name): print("Hello,",name,os.getpid()) if __name__ == "__main__": print("Parent process %s " % os.getpid

python学习之第十五课时--存址方式及拷贝

不同数据类型在内存中的存址方式 字符串str,一次性创建,不能被修改,只要有修改字符串,就是在重新创建新的字符串 Python底层是c语言写的,c语言没有字符串的说法,字符串是字符数组,所以在内存址是字符数组的方式 图示: 列表list 图示: copy.copy()浅拷贝:只拷贝第一层,下面的指向的原始地址 copy.deepcopy()深拷贝:除底层的字符串或数字外,其他的上层都拷贝,底层的字符串或数字还是指向的原始地址 注意:在使用拷贝时,必须先引入拷贝模块 import copy 一.数

JAVA学习第六十五课 — 正則表達式

正則表達式:主要应用于操作字符串.通过一些特定的符号来体现 举例: QQ号的校验 6~9位.0不得开头.必须是数字 String类中有matches方法 matches(String regex) 告知此字符串是否匹配给定的正則表達式. regex,就是给定的正則表達式 public static void checkQQ() { //第一位是数字1-9,第二位以后是0-9,除去第一位数剩下数字位数范围是5到8位 String regex = "[1-9][0-9]{5,8}";//正

JAVA学习第六十五课 — 正则表达式

正则表达式:主要应用于操作字符串,通过一些特定的符号来体现 举例: QQ号的校验 6~9位,0不得开头,必须是数字 String类中有matches方法 matches(String regex) 告知此字符串是否匹配给定的正则表达式. regex,就是给定的正则表达式 public static void checkQQ() { //第一位是数字1-9,第二位以后是0-9,除去第一位数剩下数字位数范围是5到8位 String regex = "[1-9][0-9]{5,8}";//正

python学习第六十天:BootStrap

UI框架 包含CSS.JS特效插件的工具集,快速开发网页 经典的UI框架:BootStrap.JQueryUI.MeiziUI-- BootStrap 2.1 版本 用于生产环境(CSS\JavaScript) 源码(LESS)(LESS是CSS预处理器) SASS(SASS也是CSS预处理) 中文网网站地址:http://www.bootcss.com/ 响应式布局 3.1 手机屏幕的分辨率 现在绝大部分手机视网膜屏幕,有物理分辨率,和渲染分辨率.iphone8物理分辨率为750*1334渲染

python学习第七十五天:多表查询

创建模型 class Book(models.Model): nid = models.AutoField(primary_key=True) name = models.CharField(max_length=32) price = models.DecimalField(max_digits=5, decimal_places=2) publish_date = models.DateField() # 阅读数 reat_num=models.IntegerField(default=0)