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)用到對應(yīng)的那些標(biāo)簽上(通常寫在head中)

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

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

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

簽

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

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

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

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

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

所有隨后的兄弟關(guān)系selector1 ~ selector2 {...} 針對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: 水平對齊方式(left | center | right)常用屬性

vertical-align: 垂直對齊方式(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è)置為塊級元

素

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

顯示

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

素

布局

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：相對定位參照元素本身的位置

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來輸入文本到頁面上(可以輸入標(biāo)簽)Number: 數(shù)值型整數(shù)和小數(shù)Boolean: 布爾型(true |

false)

String: 字符串

字符串必須被”“或''包含必須對稱

如果字符串中包含引號可以單引號中包含雙引號或者是雙引號中包含單引號

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

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í)間的日期對象

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

設(shè)置指定時(shí)間(將時(shí)間對象設(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ù)組的長度

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)文檔對象模型

獲取元素

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 一張頁面或圖像被完成加載

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_] * 不包含破折號

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

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

B 不是單詞邊界(對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

迭代對象迭代出的值為對象的屬性名其他

with

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

delete attribute刪除屬性

isNaN

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