shape=“circle”
coords=“309,257,20”target=“_blank”
href=“http://5新標(biāo)簽
number：數(shù)字輸入
date picker：日期選擇
datalist：自動(dòng)提示
sichuan chongqing guangzhou shanghai beijing tianjin
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)簽)* 在需要使用樣式的頁面通過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來輸入文本到頁面上(可以輸入標(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ù)組的長度
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 一張頁面或圖像被完成加載
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
web項(xiàng)目前端開發(fā)經(jīng)驗(yàn)總結(jié)
最近這一個(gè)月完成了自己的第一個(gè)java web項(xiàng)目，是給某雜志社做的在線投稿系統(tǒng)，雖然進(jìn)度很慢，但是中間確實(shí)學(xué)到了不少東西，深刻體會(huì)到了自己看幾個(gè)月書都不如做一個(gè)項(xiàng)目來的實(shí)在。這個(gè)項(xiàng)目自己主要負(fù)責(zé)的是JSP頁面、JS腳本、CSS樣式表的編寫，雖然主要做的是前端，但是在設(shè)計(jì)前端后臺(tái)交互功能時(shí)，對(duì)MVC架構(gòu)和數(shù)據(jù)庫又多了一分了解，這一個(gè)月的時(shí)間，自己在技術(shù)上也確實(shí)成長了不少。下面分成幾塊總結(jié)一下自己的這個(gè)項(xiàng)目中的心得吧：
1.項(xiàng)目開發(fā)流程：從確認(rèn)需求開始，到原型設(shè)計(jì)，再到原型測(cè)試，這些都沒什么說的了，主要是剛開始開發(fā)前端JSP頁面時(shí)，自己走了很多彎路，想到有什么頁面就寫什么頁面，GET和POST的路徑也是隨心所欲，想到什么名字就起什么名字，結(jié)果發(fā)現(xiàn)這樣做嚴(yán)重影響了項(xiàng)目開發(fā)的進(jìn)度，后來經(jīng)過主管的提點(diǎn)后，我幡然醒悟，其實(shí)，面向?qū)ο蟮乃枷刖拓灤┰谡麄€(gè)項(xiàng)目當(dāng)中，在前面的原型設(shè)計(jì)的過程中，除了頁面的設(shè)計(jì)還有數(shù)據(jù)庫的設(shè)計(jì)，數(shù)據(jù)庫的每個(gè)表就對(duì)應(yīng)著Java中的每個(gè)實(shí)體類，這個(gè)類封裝了數(shù)據(jù)庫中的列作為屬性，封裝了數(shù)據(jù)庫的增刪改查作為方法，就拿這個(gè)投稿系統(tǒng)為例，實(shí)體主要有用戶、稿件等等，實(shí)體間還有著一對(duì)一映射或者一對(duì)多映射等對(duì)應(yīng)關(guān)系。其實(shí)，整個(gè)系統(tǒng)的開發(fā)就是圍繞著這些個(gè)實(shí)體進(jìn)行的，甚至于我們可以把實(shí)體名字做為二級(jí)目錄，把實(shí)體的增刪改查作為GET或POST的路徑，譬如account/add、paper/delete等等，有了這些路徑，那么與之對(duì)應(yīng)的GET和POST的Controller也就有了，接下來我們要做的就是，定義Controller中返回的視圖，寫完Controller后再把與實(shí)體相關(guān)的增刪改查方法寫到服務(wù)層中，再把項(xiàng)目的整個(gè)骨架搭起來，再去處理細(xì)節(jié)，很快的，這個(gè)項(xiàng)目就成型了。這里前端和后臺(tái)的配合尤為重要，數(shù)據(jù)交互是整個(gè)系統(tǒng)的核心。
2.JSP頁面設(shè)計(jì)：提到JSP頁面，在這里我想說的一點(diǎn)是，其實(shí)JSP頁面是在服務(wù)器生成的，那么傳給JSP頁面的變量、參數(shù)都會(huì)在服務(wù)器轉(zhuǎn)化為它們具體的值，然后再傳給客戶端。JSP頁面可以實(shí)現(xiàn)很多服務(wù)器端的功能，因?yàn)榭梢灾苯釉陧撁媲度隞AVA代碼，但是我們必須明確的一點(diǎn)是，JSP頁面主要是用來呈現(xiàn)視圖的，不要再其中套入大量的代碼，要明確前端與后臺(tái)的分工。
3.JSTL標(biāo)簽：JSTL標(biāo)簽就是JSP standard taglib，即JSP標(biāo)準(zhǔn)標(biāo)簽庫，首先，EL表達(dá)式可以非常方便的取出Controller返回的View包含的Model，甚至都無需聲明EL表達(dá)式。其次，JSTL標(biāo)簽可以實(shí)現(xiàn)很多的邏輯控制功能，比如最基本的c:if判斷、c:forEach循環(huán)，甚至有更強(qiáng)大的c:choose，有了這些，我們可以大大簡(jiǎn)化代碼量，JSP頁面中用幾十行java寫的代碼，有時(shí)用幾句JSTL標(biāo)簽組合就實(shí)現(xiàn)了，此外，像fmt:parseDate和fmt:formatDate也是很好用的標(biāo)簽，用于日期的解析和格式化，此外JSTL更有強(qiáng)大的函數(shù)標(biāo)簽庫fn:，項(xiàng)目中我也只用到了fn:length取后臺(tái)傳的list的長度。要善用JSTL標(biāo)簽，但是又不要完全依賴于它，JSTL標(biāo)簽很方便、快捷，但是切記，JSTL功能有限，不要完全依賴于它。
4.shiro框架：shiro框架是apache的一款面向java web項(xiàng)目的權(quán)限控制框架，這個(gè)框架無論前端、后臺(tái)都十分好用，在前端，我們可以使用shiro強(qiáng)大的標(biāo)簽庫，通過用戶角色賦予用戶不同的訪問權(quán)限。譬如，如果一個(gè)系統(tǒng)的用戶有訪客、用戶、管理員三種角色，我們就可以通過shiro標(biāo)簽來控制游客不能訪問哪些內(nèi)容，頁面向用戶和管理員呈現(xiàn)的不同內(nèi)容，這就是shiro標(biāo)簽的神奇之處。
5.sitemesh框架：這個(gè)主要是用來將所有頁面套用固定格式，用以頁面的復(fù)用，其實(shí)有些時(shí)候標(biāo)簽更為方便，而且sitemesh框架的內(nèi)存開銷是的二倍，還會(huì)導(dǎo)致攔截器出現(xiàn)一些莫名的bug，所以并不推薦使用。
6.jquery：在這個(gè)項(xiàng)目中寫了很多的jquery代碼，發(fā)現(xiàn)jquery確實(shí)是個(gè)神奇的東西，jquery的神奇之處就在于jquery強(qiáng)大的選擇器可以方便的取到頁面的DOM元素，并且給這些元素綁定不同的事件，提到綁定事件，說一下on、live和bind的區(qū)別：bind是jquery最早的綁定事件方法，on是jquery 1.7.0以后才有的方法，bind和on都不能將事件綁定給DOM加載完畢后后添加到頁面的DOM元素，這時(shí)就需要live了。還有一個(gè)經(jīng)常使用的就是jquery的ajax了，其實(shí)在做這個(gè)項(xiàng)目之前自己一直不理解ajax的作用機(jī)理，只是心里又個(gè)概念而已，但是，在真正使用的ajax之后，才發(fā)現(xiàn)ajax的強(qiáng)大之處，確實(shí)如AJAX自身描述一樣，異步加載javascript，這就允許我們?cè)诓淮蜷_新頁面的情況POST一些參數(shù)給后臺(tái)，后臺(tái)得到并處理這些參數(shù)后將JSON返回給前端，這個(gè)JSON的處理function就寫在ajax的success處理function中。在這個(gè)項(xiàng)目JSON和AJAX最主要的應(yīng)用就是翻頁，加載一個(gè)頁面，把頁面?zhèn)鹘o后臺(tái)然后把得到的JSON呈現(xiàn)給用戶，翻頁時(shí)重新POST參數(shù)，然后在用js重新處理一下翻頁區(qū)域即可。
7.jquery.validate.js：這是一個(gè)輕量的jquery框架，主要用于表單的驗(yàn)證，非常方便。
8.twitter bootstrap.js：bootstrap自帶的js框架，里面定義了許多與bootstrap樣式相關(guān)聯(lián)的函數(shù)，使用起來也很方便。
9.正則表達(dá)式：正則表達(dá)式的模式匹配是很強(qiáng)大的，靈活運(yùn)用正則表達(dá)式，也會(huì)簡(jiǎn)化代碼，甚至我們?cè)诓檎姨鎿Q時(shí)都可以使用正則表達(dá)式。
總體上說，這個(gè)項(xiàng)目極大的鍛煉了自己的代碼編寫功能，從以前寫一句代碼要敲無數(shù)次backspace，現(xiàn)在居然可以將某些簡(jiǎn)單的函數(shù)一氣呵成了。今天項(xiàng)目終于上線了，總結(jié)一下，希望以后自己能夠取得長足的進(jìn)步！
