marquee：滾動(dòng)標(biāo)簽

shape=“circle”

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

href=“http://5新標(biāo)簽

number：數(shù)字輸入

date picker：日期選擇

datalist：自動(dòng)提示

video：動(dòng)畫

媒體

radio：音頻

autocomplete：是否關(guān)閉自動(dòng)提示（off |

on）html5新標(biāo)簽

autofocus: 自動(dòng)獲得

焦點(diǎn)

required: 表示控件

必須輸入內(nèi)容

controls : 播放控制條

autoplay ：自動(dòng)播放

loop ：循環(huán)播放preload ：預(yù)加載，如果設(shè)置了autoplay，就可以不用設(shè)置preload

CSS知識(shí)點(diǎn)總結(jié)

內(nèi)聯(lián)：直接在標(biāo)簽的style屬性上編寫

樣式樣式定義方式

樣式塊：在style標(biāo)簽中編寫樣式塊，并通過一定規(guī)則（選擇器）應(yīng)用到對(duì)應(yīng)的那些標(biāo)簽上(通常寫在head中)

外部樣式文件：將樣式塊編寫在外部的css文件中(不用寫style標(biāo)簽)* 在需要使用樣式的頁(yè)面通過link標(biāo)簽引入樣式文件(通常寫在head中)

id選擇器#xxx 針對(duì)id為xxx的標(biāo)簽

類選擇器.xxx 針對(duì)class屬性為xxx的標(biāo)

簽

標(biāo)簽選擇xxx 針對(duì)標(biāo)簽名為xxx的標(biāo)簽

*選擇器選擇所有元素選擇器

后代元素關(guān)系選擇selector1 selector2 {...} 針對(duì)selector1下的所有的selector2

子元素關(guān)系選擇selector1 > selector2 {...} 只針對(duì)selector1的selector2子元素(如果有后代selector2元素則不會(huì)應(yīng)用)

緊鄰兄弟關(guān)系選擇selector1 + selector2 {...} 只針對(duì)緊接在selector1后的selector2元素

所有隨后的兄弟關(guān)系selector1 ~ selector2 {...} 針對(duì)selector1后的所有的selector2兄弟元素

color：字體顏色

font-size：字體大小

font-family：字體樣式

字體

font-weight: bolder(加粗)| normal(不加粗)font-style: 設(shè)置字體傾斜(normal | italic | oblique)*italic和oblique實(shí)際顯示效果

幾乎一致font-variant: 設(shè)置字體顯示為小型大寫字母

text-align: 水平對(duì)齊方式(left | center | right)常用屬性

vertical-align: 垂直對(duì)齊方式(top | middle |

bottom)

line-height: 設(shè)置行高(通常用于設(shè)置文本居

中)

white-space: nowrap 不換行, pre 當(dāng)做pre標(biāo)簽

border: 邊框(1px solid

red)

文本

width: 寬度

underline 下劃線

height: 高度

overline 上劃線

text-decoration: 文本裝

飾

line-through 貫穿線(刪

除線)

blink 閃爍

none 無

dtext-shadow: 3px 3px 5px red;第一個(gè)參數(shù): 陰影水平位置(x軸上的偏移量)

text-shadow: 文本陰影

第二個(gè)參數(shù): 陰影垂直位置(y軸上的偏移量)

第三個(gè)參數(shù): 模糊程度第四個(gè)參數(shù): 陰影顏色

padding：內(nèi)邊距

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;/* 同時(shí)設(shè)置4個(gè)角*/

background-color: 背景顏色

background-image: 背景圖片

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

repeat-y | repeat背景

background-position: xxxpx xxpx | xx%

xx%;(可以為負(fù)數(shù))

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

cover | contain;(不能為負(fù)數(shù))

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

background-attachment: scroll(隨著內(nèi)容

一起滾動(dòng))| fixed(不滾動(dòng))

hidden：隱藏

scroll：滾動(dòng)

overflow：當(dāng)內(nèi)容溢出

時(shí)的處理方式

visible：直接顯示

auto：如果溢出就滾動(dòng)，否則不顯示滾動(dòng)條

visible 顯示

visibility：設(shè)置元素是

否顯示

hidden 隱藏，保留占位

none：隱藏，不保留占

位

block：設(shè)置為塊級(jí)元

素

display：設(shè)置元素是否

顯示

inline：設(shè)置為行級(jí)元

素

布局

inline-block：設(shè)置為行

內(nèi)塊元素

left 左浮動(dòng)

float: 浮動(dòng)right 右浮動(dòng)

none 不浮動(dòng)

left 不允許左邊有浮動(dòng)

clear: 清除浮動(dòng)right 不允許右邊有浮動(dòng)

both 不允許兩邊有浮動(dòng)

ul或ol 自帶樣式：

列表樣式

list-style-type: 列表項(xiàng)的樣式

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

40px;

absolute：如果有父元素被定位按照父元素的原點(diǎn)進(jìn)行定位，否則按照瀏覽器原點(diǎn)進(jìn)行定位

position

定位

z-index: 設(shè)置z軸的值，越大越在最前

relative：相對(duì)定位參照元素本身的位置

fixed：固定位置，不

會(huì)滾動(dòng)

link 超鏈接默認(rèn)樣式

hover 鼠標(biāo)懸停樣式

active 鼠標(biāo)點(diǎn)擊樣式

visited 訪問之后的樣式（主要控制顏色）

偽類

focus 獲得輸入焦點(diǎn)的樣式

first-child 第一個(gè)元素

last-child 最后一個(gè)元素

:not 不包含指定的選

擇器

:noly-child 是父元素的唯

一子元素

cursor 鼠標(biāo)樣式

其他樣式

box-shadow 陰影

translate:平移

rotate：旋轉(zhuǎn)transform：變換

scale：縮放

skew：扭曲

matrix：以變換矩陣變換

第一個(gè)值表示需要過渡的樣式屬性transition 過渡

transition:transform2s,background-color.5s;

第二個(gè)值表示整個(gè)過渡過程需要的時(shí)間第三個(gè)值表示過渡時(shí)的貝塞爾曲線第四個(gè)值表示延遲多久才開始過渡animation 動(dòng)畫

@keyfarmes 關(guān)鍵幀用于定義動(dòng)畫的細(xì)節(jié)（每一幀如何顯示）

@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 {}

需要顯示動(dòng)畫的地方通過animation屬性來使用聲明的關(guān)鍵幀

.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代碼必須包含在標(biāo)簽中

也可以書寫到外部的.js文件中,通過來引入

script標(biāo)簽只能同時(shí)做一件事情.如果既有src屬性也包含代碼則只會(huì)執(zhí)行外部文件的代碼

通過alert來彈出提示框

通過document.write來輸入文本到頁(yè)面上(可以輸入標(biāo)簽)Number: 數(shù)值型整數(shù)和小數(shù)Boolean: 布爾型(true |

false)

String: 字符串

字符串必須被”“或''包含必須對(duì)稱

如果字符串中包含引號(hào)可以單引號(hào)中包含雙引號(hào)或者是雙引號(hào)中包含單引號(hào)

也可以使用'來表示一個(gè)單引號(hào)”來表示一個(gè)雙引號(hào)

n 表示換行數(shù)據(jù)類型

t 表示制表符表示書寫方式

NaN: Not A Number 當(dāng)使用非數(shù)字來進(jìn)行運(yùn)算時(shí)的值

undefied: 未定義

null: 空值

substring 截取子串, 從start到end-1處,如果

沒指定end則取到最后一個(gè)字符

toUpperCase 將所有字符變成大寫

toLowerCase 將所有字符變成小寫

indexOf 查找子串首次出現(xiàn)的位置, 如果找不到則

返回-1字符串處理

lastIndexOf 查找子串最后一次出現(xiàn)的位置, 如果找不到則返回-1charAt 取指定位置上的字符slice 也是取子串,效果和substring一樣可以用-1,-2,-3...從末尾

開始計(jì)數(shù)split 將字符串按照指定的字符進(jìn)行拆分成為數(shù)組

獲取當(dāng)前時(shí)間var now = new Date()

獲取指定時(shí)間的日期對(duì)象

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

設(shè)置指定時(shí)間(將時(shí)間對(duì)象設(shè)置為一個(gè)指定時(shí)間)

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

now.setMonth日期Date

now.setDatenow.setHours

...獲取指定時(shí)間信息

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

now.getMonth // 月0-11月

now.getDate // 日

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

now.getHours // 時(shí)24小時(shí)制

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

通過new Array()來創(chuàng)建數(shù)組var names = new Array();

var names = new Array(“小王”, “大王”, “炸彈”);// 創(chuàng)建時(shí)給數(shù)組設(shè)置默認(rèn)值

//用json格式表示數(shù)組

var names = [];

var names = [“小王”, “大王”, “炸彈”];數(shù)組Array

可以通過length來設(shè)置或獲取數(shù)組的長(zhǎng)度

push : 往數(shù)組末尾添加元素

pop: 刪除并返回?cái)?shù)組的最后一個(gè)元素unshift: 往數(shù)組的開頭添加元素shift: 刪除并返回?cái)?shù)組的第一個(gè)元素reverse: 顛倒數(shù)組順序

sort: 按“字符串”的自然排序規(guī)則進(jìn)行升序

splice: 刪除指定位置處的指定個(gè)數(shù)元素并將第三個(gè)參數(shù)之后的參數(shù)添加到被刪除位置(設(shè)置第二個(gè)參數(shù)為0則實(shí)現(xiàn)只添加不刪除, 之傳入兩個(gè)參數(shù)實(shí)現(xiàn)只刪除不添加)

slice: 獲取start到end處的子數(shù)組

join: 將數(shù)組元素以指定分隔符進(jìn)行連接成為字符串

function xxx(....){

聲明函數(shù)

....}

var xxx = function(...){

...函數(shù)變量

}var ooo = xxx;

ooo();函數(shù)

function fn(fx){

fx();

將函數(shù)作為參數(shù)

}fn(function(){

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

立即執(zhí)行函數(shù)

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

getElementById 根據(jù)id獲取唯一的元素var xx = document.getElementById(“xx”);DOM(Document Object Model)文檔對(duì)象模型

獲取元素

getElementsByTagName 根據(jù)標(biāo)簽名獲取元

素?cái)?shù)組

onclick 鼠標(biāo)點(diǎn)擊事件

getElementsByClassName 根據(jù)類獲取元素?cái)?shù)組(如果元素被改變了class值將會(huì)從數(shù)組

中刪除)

onmouseover 鼠標(biāo)進(jìn)入事件

onmouseout 鼠標(biāo)離開事件

onmousemove 鼠標(biāo)被移動(dòng)

onmousedown 鼠標(biāo)按鈕被按下事件機(jī)制

onmouseup 鼠標(biāo)按鈕被松開

onkeydown 某個(gè)鍵盤按鍵被按下

onkeyup某個(gè)鍵盤按鍵被松開

onload 一張頁(yè)面或圖像被完成加載

onchange 域的內(nèi)容被改變

onfocus 元素獲得焦點(diǎn)

onblur 元素失去焦點(diǎn)

setTimeout: 延遲執(zhí)行(只會(huì)執(zhí)

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

window

清除使用clearTimeout(xx);setInterval: 定時(shí)執(zhí)行(間隔指

定時(shí)間循環(huán)執(zhí)行)

xx.offsetLeft獲取元素的位置和尺寸(只讀)

xx.offsetTopxx.offsetWidthxx.offsetHeight

var xx = setInterval(xxx,1000);

清除使用clearInterval(xx);

[] 表示[]中的字符任意取一個(gè)

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

()表示將多個(gè)表達(dá)式合并為一個(gè)表達(dá)式

在()中的|表示將兩個(gè)匹配條件進(jìn)行邏輯“或”（Or）運(yùn)算。+ 前一個(gè)表達(dá)式出現(xiàn)至少一次1~n {1,}* 前一個(gè)表達(dá)式出現(xiàn)任意次0~n {0,}? 前一個(gè)表達(dá)式出現(xiàn)0~1次{0,1}{n} 前一個(gè)表達(dá)式出現(xiàn)n次

{n,} 前一個(gè)表達(dá)式出現(xiàn)至少n次{n,m} 前一個(gè)表達(dá)式出現(xiàn)n~m次.任意字符(不包含rn)正則表達(dá)式

^ 匹配字符串的開頭$ 匹配字符串的結(jié)尾

w 表示一個(gè)任意的單詞字符包括_ [a-zA-Z0-9_] * 不包含破折號(hào)

W 對(duì)w取反(不包含單詞字符)[^a-zA-Z0-9_]d 表示一個(gè)數(shù)字字符[0-9]D 對(duì)d取反[^0-9]s 表示一個(gè)任意空白字符空格中文狀態(tài)的空格制表符全角空格

S 對(duì)s取反非空格n 換行符b 單詞邊界

B 不是單詞邊界(對(duì)b取反)

eval

執(zhí)行字符串形式的代碼。

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

}

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

}

迭代數(shù)組迭代出的值為數(shù)組的下標(biāo)

for...in

迭代對(duì)象迭代出的值為對(duì)象的屬性名其他

with

設(shè)置以某個(gè)對(duì)象為代碼塊作用域?qū)ο?/p>

delete attribute刪除屬性

isNaN

如果被判斷值不是一個(gè)數(shù)字則返回true，否則為false