HTML5
本地数据库
http://www.cnblogs.com/fly_dragon/p/3946012.html
HTML5
Web Storage
cookies的打小被限制4KB，随Http事务一起被推送带宽被占用，使用操作复杂。
针对以上问题HTML5重新提供了一种在客户端本地保存数据的功能，他就是web storage
web storage分为两种一种是sessionStorage，一种是localStorag
sessionStorage是将数据保存在session对象中，localStorage是将数据保存在客户端的硬件设备上，是一种持久化存储
直接在js中通过事件进行操作
sessionStorage的保存与读取
function saveStorage(id){
var target=document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
}
function loadStorage(id){
var target =document.getElementById(id);
var msg=sessionStorage.getItem("message");
target.innerHTML=msg;
}
localStorage的保存与读取是与sessionStorage类似的
简单的web留言本实例
function saveStorage(id){
var data=document.getElementById(id).value;
var time=new Date().getTime();
localStorage.setItem(time,data);
alert("数据已存储");
}
function loadStorage(id){
var result="<table border='1'>";
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
var date=new Date();
date.setTime(key);
result +="<tr><td>"+value+"</td><td>"+date+"</td></tr>";
}
result+="</table>";
var target=document.getElementById(id);
target.innerHTML=result
}
fuction clearStorage(){
localStorage.clear();
alert(数据已经删除);
}
webStorage是可以作为简单的数据库使用的，通过JSON格式保存数据，建立索引。
webstorage作为简单的数据库使用
function saveStorage(){
var data=new Object;
data.name=document.getElementById("name").value;
data.email=document.getElementById("email").value;
data.tel=document.getElementById("tel").value;
var str=JSON.stringify(data);
localStorage.setItem(date.name,stry);
}
function loadStorage(id){
var find=document.getElementById('find').value;
var str=localStorage.getItem(find);
var data=JSON.parse(str);
var result="姓名"+data.name+"<br>";
result+="邮件"+data.email+"<br>";
result+="电话"+data.tel+"<br>";
var target=document.getElementById(id);
target.innerHTML(result);
}
本地数据库
在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序性能，减轻了服务器的负担，使用Web时代重新回到了客户端为重，服务器为轻的时代，在HTML5中，可以向访问本地文件那样轻松的对内置的数据库进行访问。在HTML5内置了两种本地数据库，一种为SQLite，一种为indexedDB
常用方法
transaction.executeSql(sqlquery,[],dataHandler,errorHandler);后两个参数就是下面两个function
dataHandler(transaction,results);
function errorHandler(transaction,errmsg);
rows.length获取记录的条数中
<body>
//创建数据库对象
//使用事务处理
<script>
var db=openDatabase("name","version","description","size");
db.transaction(function(tx){
tx.executesql(sqlquery,[],dataHandler,errorHandler);
})
</script>
</body>
综合实例
<head>
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
function initDatabase() {
var db = getCurrentDb();//初始化数据库
if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
db.transaction(function (trans) {//启动一个事务，并设置回调函数
//执行创建表的Sql脚本
trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
}, function (trans, message) {//消息的回调函数alert(message);});
}, function (trans, result) {
}, function (trans, message) {
});
}
$(function () {//页面加载完成后绑定页面按钮的点击事件
initDatabase();
$("#btnSave").click(function () {
var txtName = $("#txtName").val();
var txtTitle = $("#txtTitle").val();
var txtWords = $("#txtWords").val();
var db = getCurrentDb();
//执行sql脚本，插入数据
db.transaction(function (trans) {
trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
}, function (ts, message) {
alert(message);
});
});
showAllTheData();
});
});
function getCurrentDb() {
//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
//如果数据库不存在那么创建之
var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
return db;
}
//显示所有数据库中的数据到页面上去
function showAllTheData() {
$("#tblData").empty();
var db = getCurrentDb();
db.transaction(function (trans) {
trans.executeSql("select * from Demo ", [], function (ts, data) {
if (data) {
for (var i = 0; i < data.rows.length; i++) {
appendDataToTable(data.rows.item(i));//获取某行数据的json对象
}
}
}, function (ts, message) {alert(message);var tst = message;});
});
}
function appendDataToTable(data) {//将数据展示到表格里面
//uName,title,words
var txtName = data.uName;
var txtTitle = data.title;
var words = data.words;
var strHtml = "";
strHtml += "<tr>";
strHtml += "<td>"+txtName+"</td>";
strHtml += "<td>" + txtTitle + "</td>";
strHtml += "<td>" + words + "</td>";
strHtml += "</tr>";
$("#tblData").append(strHtml);
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="txtName" id="txtName" required/></td>
</tr>
<tr>
<td>标题：</td>
<td><input type="text" name="txtTitle" id="txtTitle" required/></td>
</tr>
<tr>
<td>留言：</td>
<td><input type="text" name="txtWords" id="txtWords" required/></td>
</tr>
</table>
<input type="button" value="保存" id="btnSave"/>
<hr/>
<input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
<table id="tblData">
</table>
</body>
</html>
indexedDB链接数据库是一种NoSQL非关系型数据库。
CSS
基本样式详解
背景
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background_color 背景颜色
background-image 背景图片
background_position 北京图片的起始位置
background_repeat 设置背景图片是否重复及如何恢复
文本
color 颜色
direction 方向
line-hegiht 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 想文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-didi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
字体
font-family 设置字体系列
font-size 设置字体的尺寸
font-style 设置字体风格
font-variant 以小型大些字体或正常字体显示文本
font-weight 设置字体的粗细
在CSS3之前必须使用安全的字体，即用户端必须有这样的字体存在，在CSS3之后没了这个限制,可以通过下面额方式引用任意字体
@font-face{
font-family:myfont;
src:url();
}
div{
font-family:myfont;
}
链接
a:link 普通的，违背访问的连接
a:visited 用户已访问的连接
a:hover鼠标指针位于链接的上方
a:active连接被点击的时刻
列表
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标识位置
list-style-type 列表类型
表格
表格边框 border 边缘颜色solid
折叠边框 border_collapse
表格宽高 heghit width
表格文本对齐 text-align
表格内边距
表格颜色 background-color
轮廓
outline 设置轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓样式
outline-width 设置轮廓的宽度
盒子模型
盒子模型的内容范围包括：
margin 外边距，border 边框，padding 内边距，content 内容，heghit高，width 宽(设置的是content部分的高宽)
盒子模型的应用
盒子模型结合div搭建web网页的主题框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型的应用</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<div class="top">
<div class="top_content">
</div>
</div>
<div class="body">
<div class="body_image"></div>
<div class="body_content"> <div class="body_notification"></div></div>
</div>
<div class="footing">
<div class="footing_content"></div>
<div class="footing_subnav"></div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height:50px;
background-color: black;
}
.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background-color: chartreuse;
}
.body{
margin: 20px auto;
width: 75%;
height: 1500px;
background-color: mediumvioletred;
}
.body_image{
width: 100%;
height: 400px;
background-color: antiquewhite;
}
.body_content{
width: 100%;
height: 1100px;
background-color: aqua;
}
.body_notification{
width: 100%;
height: 50px;
background-color: blanchedalmond;
}
.footing{
width: 75%;
height: 330px;
background-color: chartreuse;
margin: 0px auto;
}
.footing_content{
width: 100%;
height: 350px;
background-color: darkgray;
}
.footing_subnav{
width: 100%;
height: 50px;
background-color: bisque;
}
css 定位
改变元素在页面上的位置
css定位机制
普通流；元素按照其在HTML中的位置顺序决定排布的过程，默认都是普通流
定位属性
position 把元素放在一个静态的相对固定的位置中，该值是几种布局方式，绝对布局相对布局静态布局填充布局等。绝对布局是以整个页面作为参考，相对布局是以周围的元素作为参考，即先按照普通流出现在其位置在根据属性确定具体位置
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素垂直对其方式
z-index 设置元素的堆叠顺序，谁值大谁在上面
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float属性
left向左浮动，right向右浮动，none没有浮动，inherit从父级继承浮动属性
clear属性
去掉浮动属性包括从父级继承过来的属性
CSS3的常用操作
对齐
1，使用margin属性进行水平对齐
2，使用position属性进行左右对齐
3，使用float属性进行左右对齐
尺寸的操作
常用属性
height
line-height
max-height
max-width
min-width
min-height
width
分类
常用属性
clear 设置一个元素侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display 设置是否及如何显示元素
float 定义元素在哪个方向浮动
position
visibility 设置元素是否可见或者不可见
小案例导航栏制作
垂直导航栏
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: aquamarine;
color: black;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: brown;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏实例</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>//通过列表来制作导航栏然后通过css样式做修饰
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
</html>
要设置成水平的只需将li标签的display属性设置为inline一行显示即可
图片的操作
透明度
opacity值从0到1
裁剪等
CSS3动画效果页面特效
2D3D转换
通过CSS3转换，我们能够对元素进行移动，缩放，转动，拉长，或拉伸
转换是使元素改变形状，尺寸和位置的一种效果，可以使用2D3D来转换元素
转换属性
transform他的常用值是些方法，由于对于这些方法不同浏览器的支持方式不同所以需要具体声明
2D转换方法：
translate(x,y)移动
rotate（）旋转
scale（）缩放
skew（）倾斜
matrix（）矩阵
3D转换方法
rotateX（）
rorateY（）
动画过渡
通过CSS3可以给元素添加一些效果
CSS3过渡是元素从一种样式转换成另一种样式，通过编写动画效果的CSS设置动画执行的时间
常用属性
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始的时间
小例子实现一个div块的旋转动画效果
div{
width: 100px;
height: 100px;
background-color: brown;
-webkit-transition: width 2s,height 2s,-webkit-transform 2s;
transition: width 2s,height 2s,-webkit-transform 2s;
}
div:hover{
width: 200px;
height: 200px;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
动画
CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: anim 5s infinite alternate;
-webkit-animation: anim 5s infinite alternate;//动画执行时长以及执行方式此处是重复执行
}
@keyframes anim {
0%{background: red;left: 0px; top: 0px}
25%{background: blue;left: 200px;top: 0px}
50%{background: white;left:200px;top: 200px }
75%{background: black;left: 0px;top: 200px}
100%{background: red;left: 0px;top: 0px}
}
-webkit-@keyframes anim {
0%{background: red;left: 0px; top: 0px}
25%{background: blue;left: 200px;top: 0px}
50%{background: white;left:200px;top: 200px }
75%{background: black;left: 0px;top: 200px}
100%{background: red;left: 0px;top: 0px}
}
多列
多列对文本或者区域进行布局
常见属性
column-count分裂的数量
column-gap每列间隔的距离
column-rule每列间间隔的方式
瀑布流效果的实现
.container{
column-width: 250px;
-webkit-column-width: 250px;
-webkit-column-gap: 5px;
column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px;
}
CSS的面向对象 OO CSS的概念
将页面可重用元素抽象成一个类，用class加以描述，而与其对应的HTML即可看成是此类的一个实例
作用：
1，加强代码的复用以方便维护
2，减小CSS体积
3.提升渲染效率
4，组件库思想，栅格布局可共用，减少选择器，方便扩展
注意事项
1.不要直接定义子节点，应该把共性的内容放在父节点
2.结构与皮肤相分离
3.容器与内容相分离
4.抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面
5.往你想要扩展的对象本身增加class而不是他的父节点
6.对象保持独立性
7.避免使用ID选择器，权重太高，无法重用，尽量使用类选择器
8，避免位置相关的样式
9，保证选择器相同的权重。
10.类名简短清晰语义化，oocss的名字并不影响HTML的语义化
了解使用组件库，Reset.css,Normalize.css,Neat.css此三种组件库都是将组件设置为默认值，统一效果，也解决了些浏览器兼容问题，Neat.css用的较多，集合了Reset.css和Normalize.css的优点
Less的应用
LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
less是一种动态的预编译样式语言，可以借助Node.js在服务端运行编译成CSS。
http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
