HTML5

時間  2019-11-09
標籤 html5 html 欄目 HTML5 简体版
原文   原文鏈接

本地數據庫javascript

http://www.cnblogs.com/fly_dragon/p/3946012.htmlcss

HTML5
Web Storage
cookies的打小被限制4KB，隨Http事務一塊兒被推送帶寬被佔用，使用操做複雜。
針對以上問題HTML5從新提供了一種在客戶端本地保存數據的功能，他就是web storage
web storage分爲兩種一種是sessionStorage，一種是localStorag
sessionStorage是將數據保存在session對象中，localStorage是將數據保存在客戶端的硬件設備上，是一種持久化存儲html

直接在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格式保存數據，創建索引。java

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);
}jquery

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);
}web

本地數據庫
在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>sql

綜合實例
<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非關係型數據庫。json


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/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程