1. 程式人生 > >HTML&javaSkcript&CSS&jQuery&ajax(11)

HTML&javaSkcript&CSS&jQuery&ajax(11)

ppc 圖片 meta 一次 版本 bst height api demo

1、localStorage 沒有 時間的限制數據存儲, sessionStorage 針對一個session的存儲,首先檢查瀏覽器是否支持對這兩個的存儲,

ifI(type(Storage)!=="undefined"){

// 支持}else{

不支持}

localStorage對數據存儲沒有時間的限制,eg、

<div id="result"></div>

<script> ifI(typeof(Storage)!=="undefined"){

lLocalStorage.sitename="菜鳥";

document.getElementById("result").innerHTML=“網站名”+"localStorage.setname;}

else{

document.getElementById("result").innerHTML="瀏覽器不支持"}</script>

2、計算 <div id="reult"></div>

<script> function clickCount(){

if(typeof(Storage)1=="undefined”){

if(localStorage.clickcount){

localStorage.clickcount=Number(localStorage.clickcount)+1;

}else{

localStorage.clickcount=1;}

document.getElementById("result").innerHTML="localStorage.localcount;

}else{

doucment.getElement.ById(“result”).innerHtml="比支持"}

}</script>

3、web SQL操作

openDatabase 使用數據庫 transaction 控制數據庫 execute Sql 數據庫查詢

打開數據庫 var db=openDatabase("mydb", ‘1.0‘, ‘test DB‘,2*1024*1024)分別是數據庫名稱, 版本號 描述文本 數據庫大小

db.transaction(function(tx){ tx.executeSql(‘CREATE Table if not exists LoGS (id unique,log)‘);});

刪除數據記錄 db.transaction(function(tx){

tx.excuteSql(‘delete from logs where id=1‘)})

更新數據 db.transaction(function(tx){

tx.excuteSql(‘Update logs set log=\‘www.w3cschool\‘ where id=2‘);})

4、啟用應用程序緩存 <!DOCTYPE HTML>

<html manifest="demo.appcache"> </html>

5、接收 Servert -sent事件通知

var source=new EventSource("demo-sse.php");

source.onmessage=function(event){

doucnemt.getElementById("result").innerHTML++evnt.data+"<br>";}

檢測server-Sent事件支持 if(type(EventSource)!=="undefined"){

//瀏覽器支持}else{

//瀏覽器不支持 Server-sent}

6、WebSocket是HTML5單個TCP鏈接上的全雙工通訊協議, WebSocketAPI中。瀏覽器和服務器只需要做一次握手工作,然後瀏覽器和服務器之間就形成一條快速通道,兩者之間就直接可以同數據, 介質是 JavaScript像服務器發送建立WebSocket的鏈接請求,當獲取WEbSocket 鏈接之後 通過send()方法像服務器發送數據。並通過onmessage事件來接受服務器返回的數據。

一、Html部分

HTML基礎:

1、HTML標題(heading)t通過<h1><h6>標簽定義,

eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SueKay</title>
<body>
<h1>it‘s my sister </h1>
<p>it‘s your sister</p.html
>
</body>
</html>

2、段落標<p>,</p> ,<hr >這個標簽用於對段落的分割,段落順序倒著寫<p><bdo dir="rtl">這段文字倒著顯示</bdo></p>

刪除效果<p>My favorite color is <del>blue</del> <ins>red</ins></p>

<! DOCTYPE html >

<html>

<head>it‘s my notebook</head>

<body><p>it‘s your dog </p>

<p>it‘s second <br> paragraph</p><body>

</html>

另外HTML的註釋,<!--it‘s notesiad-->,插入段落之間的水平線使用標簽<hr/>,在一個段落中實現回行,直接鍵入標簽<br>

3、HTML鏈接<a href="http://www.baidu.com">it‘s a link</a>

4、HTML圖像鏈接 <img src=“img/log/png ” width=“23” height=“23”>

5、文本格式化:對<body>中的字體進行設置<b> 粗體 <i>斜體顯示。<sub></sub>下標 <sup></sup>上標,

<pre></pre>標簽的使用保留原來文本的輸入樣式

技術分享圖片技術分享圖片

<code></code>計算機輸出標簽樣式,<var></var >計算機變量。

<address> written by <a href="maitl:webster@example">Jon Doe</a></address>

HTML&javaSkcript&CSS&jQuery&ajax(11)