shape=“circle”
coords=“309,257,20”target=“_blank”
href=“http://5新标签
number：数字输入
date picker：日期选择
datalist：自动提示
sichuan chongqing guangzhou shanghai beijing tianjin
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
web项目前端开发经验总结
最近这一个月完成了自己的第一个java web项目，是给某杂志社做的在线投稿系统，虽然进度很慢，但是中间确实学到了不少东西，深刻体会到了自己看几个月书都不如做一个项目来的实在。这个项目自己主要负责的是JSP页面、JS脚本、CSS样式表的编写，虽然主要做的是前端，但是在设计前端后台交互功能时，对MVC架构和数据库又多了一分了解，这一个月的时间，自己在技术上也确实成长了不少。下面分成几块总结一下自己的这个项目中的心得吧：
1.项目开发流程：从确认需求开始，到原型设计，再到原型测试，这些都没什么说的了，主要是刚开始开发前端JSP页面时，自己走了很多弯路，想到有什么页面就写什么页面，GET和POST的路径也是随心所欲，想到什么名字就起什么名字，结果发现这样做严重影响了项目开发的进度，后来经过主管的提点后，我幡然醒悟，其实，面向对象的思想就贯穿在整个项目当中，在前面的原型设计的过程中，除了页面的设计还有数据库的设计，数据库的每个表就对应着Java中的每个实体类，这个类封装了数据库中的列作为属性，封装了数据库的增删改查作为方法，就拿这个投稿系统为例，实体主要有用户、稿件等等，实体间还有着一对一映射或者一对多映射等对应关系。其实，整个系统的开发就是围绕着这些个实体进行的，甚至于我们可以把实体名字做为二级目录，把实体的增删改查作为GET或POST的路径，譬如account/add、paper/delete等等，有了这些路径，那么与之对应的GET和POST的Controller也就有了，接下来我们要做的就是，定义Controller中返回的视图，写完Controller后再把与实体相关的增删改查方法写到服务层中，再把项目的整个骨架搭起来，再去处理细节，很快的，这个项目就成型了。这里前端和后台的配合尤为重要，数据交互是整个系统的核心。
2.JSP页面设计：提到JSP页面，在这里我想说的一点是，其实JSP页面是在服务器生成的，那么传给JSP页面的变量、参数都会在服务器转化为它们具体的值，然后再传给客户端。JSP页面可以实现很多服务器端的功能，因为可以直接在页面嵌入JAVA代码，但是我们必须明确的一点是，JSP页面主要是用来呈现视图的，不要再其中套入大量的代码，要明确前端与后台的分工。
3.JSTL标签：JSTL标签就是JSP standard taglib，即JSP标准标签库，首先，EL表达式可以非常方便的取出Controller返回的View包含的Model，甚至都无需声明EL表达式。其次，JSTL标签可以实现很多的逻辑控制功能，比如最基本的c:if判断、c:forEach循环，甚至有更强大的c:choose，有了这些，我们可以大大简化代码量，JSP页面中用几十行java写的代码，有时用几句JSTL标签组合就实现了，此外，像fmt:parseDate和fmt:formatDate也是很好用的标签，用于日期的解析和格式化，此外JSTL更有强大的函数标签库fn:，项目中我也只用到了fn:length取后台传的list的长度。要善用JSTL标签，但是又不要完全依赖于它，JSTL标签很方便、快捷，但是切记，JSTL功能有限，不要完全依赖于它。
4.shiro框架：shiro框架是apache的一款面向java web项目的权限控制框架，这个框架无论前端、后台都十分好用，在前端，我们可以使用shiro强大的标签库，通过用户角色赋予用户不同的访问权限。譬如，如果一个系统的用户有访客、用户、管理员三种角色，我们就可以通过shiro标签来控制游客不能访问哪些内容，页面向用户和管理员呈现的不同内容，这就是shiro标签的神奇之处。
5.sitemesh框架：这个主要是用来将所有页面套用固定格式，用以页面的复用，其实有些时候标签更为方便，而且sitemesh框架的内存开销是的二倍，还会导致拦截器出现一些莫名的bug，所以并不推荐使用。
6.jquery：在这个项目中写了很多的jquery代码，发现jquery确实是个神奇的东西，jquery的神奇之处就在于jquery强大的选择器可以方便的取到页面的DOM元素，并且给这些元素绑定不同的事件，提到绑定事件，说一下on、live和bind的区别：bind是jquery最早的绑定事件方法，on是jquery 1.7.0以后才有的方法，bind和on都不能将事件绑定给DOM加载完毕后后添加到页面的DOM元素，这时就需要live了。还有一个经常使用的就是jquery的ajax了，其实在做这个项目之前自己一直不理解ajax的作用机理，只是心里又个概念而已，但是，在真正使用的ajax之后，才发现ajax的强大之处，确实如AJAX自身描述一样，异步加载javascript，这就允许我们在不打开新页面的情况POST一些参数给后台，后台得到并处理这些参数后将JSON返回给前端，这个JSON的处理function就写在ajax的success处理function中。在这个项目JSON和AJAX最主要的应用就是翻页，加载一个页面，把页面传给后台然后把得到的JSON呈现给用户，翻页时重新POST参数，然后在用js重新处理一下翻页区域即可。
7.jquery.validate.js：这是一个轻量的jquery框架，主要用于表单的验证，非常方便。
8.twitter bootstrap.js：bootstrap自带的js框架，里面定义了许多与bootstrap样式相关联的函数，使用起来也很方便。
9.正则表达式：正则表达式的模式匹配是很强大的，灵活运用正则表达式，也会简化代码，甚至我们在查找替换时都可以使用正则表达式。
总体上说，这个项目极大的锻炼了自己的代码编写功能，从以前写一句代码要敲无数次backspace，现在居然可以将某些简单的函数一气呵成了。今天项目终于上线了，总结一下，希望以后自己能够取得长足的进步！
