2018年最新全套Web前端开发学习教程（共五则）

marquee：滚动标签

shape=“circle”

coords=“309,257,20”target=“_blank”

href=“http://5新标签

number：数字输入

date picker：日期选择

datalist：自动提示

video：动画

媒体

radio：音频

autocomplete：是否关闭自动提示（off |

on）html5新标签

autofocus: 自动获得

焦点

required: 表示控件

必须输入内容

controls : 播放控制条

autoplay ：自动播放

loop ：循环播放preload ：预加载，如果设置了autoplay，就可以不用设置preload

CSS知识点总结

内联：直接在标签的style属性上编写

样式样式定义方式

样式块：在style标签中编写样式块，并通过一定规则（选择器）应用到对应的那些标签上(通常写在head中)

外部样式文件：将样式块编写在外部的css文件中(不用写style标签)* 在需要使用样式的页面通过link标签引入样式文件(通常写在head中)

id选择器#xxx 针对id为xxx的标签

类选择器.xxx 针对class属性为xxx的标

签

标签选择xxx 针对标签名为xxx的标签

*选择器选择所有元素选择器

后代元素关系选择selector1 selector2 {...} 针对selector1下的所有的selector2

子元素关系选择selector1 > selector2 {...} 只针对selector1的selector2子元素(如果有后代selector2元素则不会应用)

紧邻兄弟关系选择selector1 + selector2 {...} 只针对紧接在selector1后的selector2元素

所有随后的兄弟关系selector1 ~ selector2 {...} 针对selector1后的所有的selector2兄弟元素

color：字体颜色

font-size：字体大小

font-family：字体样式

字体

font-weight: bolder(加粗)| normal(不加粗)font-style: 设置字体倾斜(normal | italic | oblique)*italic和oblique实际显示效果

几乎一致font-variant: 设置字体显示为小型大写字母

text-align: 水平对齐方式(left | center | right)常用属性

vertical-align: 垂直对齐方式(top | middle |

bottom)

line-height: 设置行高(通常用于设置文本居

中)

white-space: nowrap 不换行, pre 当做pre标签

border: 边框(1px solid

red)

文本

width: 宽度

underline 下划线

height: 高度

overline 上划线

text-decoration: 文本装

饰

line-through 贯穿线(删

除线)

blink 闪烁

none 无

dtext-shadow: 3px 3px 5px red;第一个参数: 阴影水平位置(x轴上的偏移量)

text-shadow: 文本阴影

第二个参数: 阴影垂直位置(y轴上的偏移量)

第三个参数: 模糊程度第四个参数: 阴影颜色

padding：内边距

padding: xxpx;

padding: xxpx xxpx;

padding: xxpx xxpx xxpx;

padding: xxpx xxpx xxpx xxpx;padding: auto;

padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottom盒子模型

margin：外边距

margin: xxpx;

margin: xxpx xxpx;

margin: xxpx xxpx xxpx;

margin: xxpx xxpx xxpx xxpx;margin: auto;

margin: xxpx auto;margin-topmargin-leftmargin-rightmargin-bottom

border：边框

color：颜色；width：宽度；

style：outset|inset|solid|double|dottedborder-radius: 10px;/* 同时设置4个角*/

background-color: 背景颜色

background-image: 背景图片

background-repeat: no-repeat | repeat-x |

repeat-y | repeat背景

background-position: xxxpx xxpx | xx%

xx%;(可以为负数)

background-size: xxxpx xxpx | xx% xx% |

cover | contain;(不能为负数)

cover: 拉伸,可以超出contain: 拉伸不能超出

background-attachment: scroll(随着内容

一起滚动)| fixed(不滚动)

hidden：隐藏

scroll：滚动

overflow：当内容溢出

时的处理方式

visible：直接显示

auto：如果溢出就滚动，否则不显示滚动条

visible 显示

visibility：设置元素是

否显示

hidden 隐藏，保留占位

none：隐藏，不保留占

位

block：设置为块级元

素

display：设置元素是否

显示

inline：设置为行级元

素

布局

inline-block：设置为行

内块元素

left 左浮动

float: 浮动right 右浮动

none 不浮动

left 不允许左边有浮动

clear: 清除浮动right 不允许右边有浮动

both 不允许两边有浮动

ul或ol 自带样式：

列表样式

list-style-type: 列表项的样式

margin: 16px 0px;padding: 0px 0px 0px

40px;

absolute：如果有父元素被定位按照父元素的原点进行定位，否则按照浏览器原点进行定位

position

定位

z-index: 设置z轴的值，越大越在最前

relative：相对定位参照元素本身的位置

fixed：固定位置，不

会滚动

link 超链接默认样式

hover 鼠标悬停样式

active 鼠标点击样式

visited 访问之后的样式（主要控制颜色）

伪类

focus 获得输入焦点的样式

first-child 第一个元素

last-child 最后一个元素

:not 不包含指定的选

择器

:noly-child 是父元素的唯

一子元素

cursor 鼠标样式

其他样式

box-shadow 阴影

translate:平移

rotate：旋转transform：变换

scale：缩放

skew：扭曲

matrix：以变换矩阵变换

第一个值表示需要过渡的样式属性transition 过渡

transition:transform2s,background-color.5s;

第二个值表示整个过渡过程需要的时间第三个值表示过渡时的贝塞尔曲线第四个值表示延迟多久才开始过渡animation 动画

@keyfarmes 关键帧用于定义动画的细节（每一帧如何显示）

@keyframes myanimation {0% { background-color: #cfc;}30% {

background-color: #ccf;border-radius: 50px;}80% {

width: 300px;

background-color: #fcc;}

100% {

width: 300px;height: 300px;

background-color: #000;}}

@-o-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}

需要显示动画的地方通过animation属性来使用声明的关键帧

.ac:active {

animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度从0.0 ~ 1.0 0.0完全透明，1.0 完全不透明浏览器兼容前缀

-webkit-chrome，safari, opera-o-opera

-moz-firefox

-ms-ie（ie9以上）

JavaScript

javascript代码必须包含在标签中

也可以书写到外部的.js文件中,通过来引入

script标签只能同时做一件事情.如果既有src属性也包含代码则只会执行外部文件的代码

通过alert来弹出提示框

通过document.write来输入文本到页面上(可以输入标签)Number: 数值型整数和小数Boolean: 布尔型(true |

false)

String: 字符串

字符串必须被”“或''包含必须对称

如果字符串中包含引号可以单引号中包含双引号或者是双引号中包含单引号

也可以使用'来表示一个单引号”来表示一个双引号

n 表示换行数据类型

t 表示制表符表示书写方式

NaN: Not A Number 当使用非数字来进行运算时的值

undefied: 未定义

null: 空值

substring 截取子串, 从start到end-1处,如果

没指定end则取到最后一个字符

toUpperCase 将所有字符变成大写

toLowerCase 将所有字符变成小写

indexOf 查找子串首次出现的位置, 如果找不到则

返回-1字符串处理

lastIndexOf 查找子串最后一次出现的位置, 如果找不到则返回-1charAt 取指定位置上的字符slice 也是取子串,效果和substring一样可以用-1,-2,-3...从末尾

开始计数split 将字符串按照指定的字符进行拆分成为数组

获取当前时间var now = new Date()

获取指定时间的日期对象

var date = new Date(yyyy,MM,dd,HH,mm,ss)

设置指定时间(将时间对象设置为一个指定时间)

now.setFullYear(yyyy,MM,dd,HH,mm,ss)

now.setMonth日期Date

now.setDatenow.setHours

...获取指定时间信息

now.getFullYear()// 年只能取出年份,如: 2015

now.getMonth // 月0-11月

now.getDate // 日

now.getDay // 星期0-6(0表示星期天)

now.getHours // 时24小时制

now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒

通过new Array()来创建数组var names = new Array();

var names = new Array(“小王”, “大王”, “炸弹”);// 创建时给数组设置默认值

//用json格式表示数组

var names = [];

var names = [“小王”, “大王”, “炸弹”];数组Array

可以通过length来设置或获取数组的长度

push : 往数组末尾添加元素

pop: 删除并返回数组的最后一个元素unshift: 往数组的开头添加元素shift: 删除并返回数组的第一个元素reverse: 颠倒数组顺序

sort: 按“字符串”的自然排序规则进行升序

splice: 删除指定位置处的指定个数元素并将第三个参数之后的参数添加到被删除位置(设置第二个参数为0则实现只添加不删除, 之传入两个参数实现只删除不添加)

slice: 获取start到end处的子数组

join: 将数组元素以指定分隔符进行连接成为字符串

function xxx(....){

声明函数

....}

var xxx = function(...){

...函数变量

}var ooo = xxx;

ooo();函数

function fn(fx){

fx();

将函数作为参数

}fn(function(){

...});（function(...){

立即执行函数

....})(...);

getElementById 根据id获取唯一的元素var xx = document.getElementById(“xx”);DOM(Document Object Model)文档对象模型

获取元素

getElementsByTagName 根据标签名获取元

素数组

onclick 鼠标点击事件

getElementsByClassName 根据类获取元素数组(如果元素被改变了class值将会从数组

中删除)

onmouseover 鼠标进入事件

onmouseout 鼠标离开事件

onmousemove 鼠标被移动

onmousedown 鼠标按钮被按下事件机制

onmouseup 鼠标按钮被松开

onkeydown 某个键盘按键被按下

onkeyup某个键盘按键被松开

onload 一张页面或图像被完成加载

onchange 域的内容被改变

onfocus 元素获得焦点

onblur 元素失去焦点

setTimeout: 延迟执行(只会执

行一次)var xx = setTimeout(xxx, 1000);setTimeout(“fn();”, 3000);BOM(Browser Object Model)

window

清除使用clearTimeout(xx);setInterval: 定时执行(间隔指

定时间循环执行)

xx.offsetLeft获取元素的位置和尺寸(只读)

xx.offsetTopxx.offsetWidthxx.offsetHeight

var xx = setInterval(xxx,1000);

清除使用clearInterval(xx);

[] 表示[]中的字符任意取一个

在[] 中的^ 表示非不包含该字符

()表示将多个表达式合并为一个表达式

在()中的|表示将两个匹配条件进行逻辑“或”（Or）运算。+ 前一个表达式出现至少一次1~n {1,}* 前一个表达式出现任意次0~n {0,}? 前一个表达式出现0~1次{0,1}{n} 前一个表达式出现n次

{n,} 前一个表达式出现至少n次{n,m} 前一个表达式出现n~m次.任意字符(不包含rn)正则表达式

^ 匹配字符串的开头$ 匹配字符串的结尾

w 表示一个任意的单词字符包括_ [a-zA-Z0-9_] * 不包含破折号

W 对w取反(不包含单词字符)[^a-zA-Z0-9_]d 表示一个数字字符[0-9]D 对d取反[^0-9]s 表示一个任意空白字符空格中文状态的空格制表符全角空格

S 对s取反非空格n 换行符b 单词边界

B 不是单词边界(对b取反)

eval

执行字符串形式的代码。

for(var i in array){var item = array[i];

}

for(var key in obj){var value = obj[key];

}

迭代数组迭代出的值为数组的下标

for...in

迭代对象迭代出的值为对象的属性名其他

with

设置以某个对象为代码块作用域对象

delete attribute删除属性

isNaN

如果被判断值不是一个数字则返回true，否则为false