html容易忽略的基础知识

最新推荐文章于 2024-03-16 12:30:42 发布

HelloMyCode

最新推荐文章于 2024-03-16 12:30:42 发布

阅读量392

点赞数

分类专栏：菜鸟成长文章标签： web html html5

本文链接：https://blog.csdn.net/HelloMyCode/article/details/107183193

版权

菜鸟成长专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、HTML标签

关闭标签(标签一定要有结束)：<h1></h1> <br /> <hr />

二、HTML标题

标题标签：<h1> ~ <h6>

仅用于标题，不可用于文本的粗体或大号设置
搜索引擎使用标题为网页的结构和内容编制索引。
h1最重要 h2其次 h3再次，以此类推

三、HTML段落

 <p>我是一个段落</p>

块级元素，浏览器自动在段落的前后添加空行
不要用<p></p>插入空行，用<br/>代替
浏览器会移除源代码中多余的空格和空行。

四、HTML格式化

上标字：<sup></sup> X²
下标字：<sub></sub> X₂
定义预格式文本，保留所有空格<pre></pre>
定义缩写<abbr></abbr> WHO
定义首字母缩写<acronym></acronym>
定义地址，元素通常以斜体显示<address></address>
定义文字方向<bdo></bdo>
定义长的引用，元素被缩进处理<blockquote></blockquote>
定义短的引用语，周围会包围引号<q></q>
定义引用、引证<cite></cite>
定义一个定义项目<dfn></dfn>
The WHO was founded in 1948.
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息
定义数学变量<var></var>

<p><var>E</var> = <var>m</var> <var>c</var><sup>2</sup></p>

E = m c²

五、HTML链接

<a href="" target="" name=""></a>

target:_blank 新窗口打开，默认打开新窗口
name:规定锚名称

<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

六、HTML图像

<img src="" alt="" />

alt:定义可替换文本，当图片不显示时，显示该文本
图片也可以设置对齐方式，align=“bottom” align=“middle” align=“top”，定义图像尺寸，浏览器加载器会预留图像空间，减少闪烁。

图像也可当链接：

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

<map> 定义图像地图
<area> 定义图像地图中可点击区域

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

七、HTML表格

跨行 colspan
跨列 rowspan
单元格内容与边框间的距离 cellpadding
单元格之间的距离 cellspacing
设置背景色 bgcolor
设置图像 background
控制围绕表格的边框 frame 参数：box above below hsides vsides

八、HTML块

块级元素：以新行开始和结束
<h1> <p> <ul> <table>
内联元素：
<b>, <td>, <a>, <img>

九、什么是响应式web设计

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD能够以可变尺寸传递网页
RWD对于平板和移动设备是必需的

十、HTML脚本

不支持脚本或禁用脚本的浏览器，显示noscript

 <noscript>Sorry, your browser does not support JavaScript!</noscript>

防止老实浏览器直接显示脚本内容，将脚本放入注释标签内，新浏览器会执行

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

十一、HTML头部元素

title:
1.定义浏览器工具栏中的标题
2.提供页面被收藏时显示的标题
3.显示在搜索引擎结果中的页面标题

base：
标签为页面上的所有链接规定默认地址或默认目标（target）

meta：
元数据不会显示在页面上，但计算机是可读的。用于规定页面的描述、关键词、文档作者、修改时间等

针对搜索引擎的关键词：一些搜索引擎会利用meta的name和content属性来索引页面，

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />

十二、XHTML

XHTML是以XML格式编写的HTML

十三、HTML5基础

第一行声明：<!DOCTYPE html>
编码声明（否则乱码）：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

H5中默认字符编码是UTF-8
允许4中新的属性语法：
1.允许属性简写 <input type="text" disabled>
2.允许不加引号<input type="text" value=John>
3.允许双引号或单引号<input type="text" value='John'>

如何使老版浏览器支持HTML5：
1.把元素定义为块级元素

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

2.添加新元素
已添加的 JavaScript 语句 document.createElement(“myHero”)，仅适用于 IE。在ie8及更早版本，不允许对未知元素添加样式，为解决此问题，可添加以下代码：
引用 shiv 代码的链接必须位于元素中

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!DOCTYPE html>
<html>

<head>
  <title>Creating an HTML Element</title>
  <!--[if lt IE 9]>
	  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

十四、HTML5表单元素

<datalist> 为input设置预定义选项列表，类似下拉列表带搜索功能

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

submit：
<input type="submit" /> 定义提交表单数据至表单处理程序的按钮。
表单处理程序在form的action中规定

<form action="action_page.php"></form>

keygen元素：用于表单的密钥对生成器，提交表单时会产生两个Key,私钥保存在客户端,公钥发送到服务器

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

output元素用于不同类型的输出，比如计算或脚本输出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

十五、Canvas和SVG

SVG

可伸缩矢量图形
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
可通过文本编辑器来创建和修改，可被搜索、索引、脚本化或压缩
可伸缩且不降低图像质量

canvas例子：
绘制矩形

1. 创建一个画布
<canvas id="myCanvas" width="200" height="100"></canvas>
2. 绘制图形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000"; //图形背景色
ctx.fillRect(0,0,150,75);
ctx.fillRect(x,y,width,height);//(0,0)从左上角开始

绘制路径

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);//线条开始坐标
ctx.lineTo(200,100);//线条结束坐标
ctx.stroke();

绘制圆形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI); //x,y,r,start,stop
ctx.stroke();

绘制文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);//实心文本，text,x,y

ctx.strokeText("Hello World",10,50);//空心文本

绘制渐变矩形

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

===============================================
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red"); //必须是两种以上停止颜色，参数使用坐标来描述，可以是0至1
grd.addColorStop(1,"white");
 
// 填充渐变，设置fillStyle或strokeStyle的值为 渐变,fillStyle和fillRect成对使用
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

绘制图像

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);//image,x,y

SVG例子：

<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>

十六、存储

1.cookies
2.webStorage

localStorage
sessionStorage

名称	存储大小	数据有效期	作用域	通信	应用场景	API
cookies	<=4k	有服务器生成，可设置失效时间，默认关闭浏览器时失效	在同源窗口中共享	在浏览器和服务器之间传递，保存过多数据会造成性能问题	自动登录，记住密码，保存事件信息	原生API不友好，需自行封装 //创建cookie $.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false}); //读取 $.cookie('name'); $.cookie(); //删除 $.removeCookie('name'); //设置cookie时如果设置了path属性或secure属性，删除的时候要带着这些属性，否则无法成功删除cookie。删除cookie时，必须传递用于设置cookie的完全相同的路径，域和安全选项，除非您依赖于默认选项。
sessionStorage	>=5M	在当前浏览器或当前页面关闭时失效	在同源同一浏览器同一窗口页面中共享，通过同源同一浏览器同一窗口页面中的链接用http协议打开新的窗口时共享	仅在本地保存，不参与和服务器通信	敏感账号一次性登录	//保存数据，数据为string sessionStorage.setItem('key','value'); //获取数据 sessionStorage.getItem('key'); //删除某个数据 sessionStorage.removeItem('key'); //删除所有数据 sessionStorage.clear();
localStorage	>=5M	永久有效，除非手动永久清除，可自行封装设置过期时间的方法	同源同浏览器共享	仅在本地保存，不参与和服务器通信	长期登录	//保存数据，数据为string localStorage.setItem('key','value'); //获取数据 localStorage.getItem('key'); //删除某个数据 localStorage.removeItem('key'); //删除所有数据 localstorage.clear();

十七、缓存（网页可离线/脱机浏览）

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

1.通过html标签的mainfest属性设置缓存文件

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

2.配置缓存文件mf.appcache
CACHE MANIFEST #文件声明
CACHE #需要缓存的文件
#缓存theme.css和main.js
/theme.css
/main.js
NETWORK: #不被缓存的文件
#不缓存login.php, *表示全部
login.php
FALLBACK: #设置无法访问某文件时访问的文件
#无法访问index.js时访问main.js
/index.js /main.js

3.更新缓存
修改manifest文件
通过js清除缓存，window.applicationCache.update();
清除浏览器缓存

十八、web worker(运行在后台的js)

当在html页面中执行脚本时，页面是不可响应的直到脚本执行完成。web worker运行在后台，独立于其他脚本，不影响页面性能。

检测浏览器是否支持

if (typeof(Worker) !== "undefined") {
    // 是的！支持 Web worker！
    // 一些代码.....
	} else {
    // 抱歉！不支持 Web Worker！
	}

创建web worker文件
创建一个计数器脚本"timer.js"，postMessage()向页面传回一段消息

 var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。使用 terminate() 方法终止 web worker，并释放浏览器/计算机资源

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
  {
  if(typeof(w)=="undefined")
  {
  w=new Worker("/example/html5/demo_workers.js");
  }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker()
{ 
w.terminate();
}
</script>

注意：web worker位于外部文件中，无法访问window对象、document对象、parent对象

十九、Server-Sent Event(允许网页从服务器获得更新)

SSE:服务器向浏览器推送信息，单向通道
基于http协议，服务器向浏览器发送流信息，即不是一次性发送的数据包，而是不间断的发送数据包，本质就是下载。比如视频播放。IE/Edge不支持。

优点：

名称	描述
SSE	使用http协议；轻量级；默认支持断线重连；一般只用来传送文本，二进制数据需要编码后传送；支持自定义发送消息类型
WebSocket	websocket是独立的协议，协议相对复杂；断线重连需要自己实现；默认支持传送二进制数据；

客户端API：
SSE的客户端API部署在EventSource对象上。
1.检测是否支持SSE

if('EventSource' in window){
.....
}

2.生成一个EventSource实例,url可跨域

var source=new EventSource(url);

//跨域设置,withCredentials属性表示是否一起发送cookie
var source=new EventSource(url,{withCredentials:true});

EventSource实例的readyState属性（表明连接当前状态，只读）：

EventSource.CONNECTING:表示连接还未建立或者断线正在重连
EventSource.OPEN：表示连接已建立，可接受数据
EventSource.CLOSED：表示连接已断开，且不会重连

3.事件

//1.建立连接触发Open事件
source.onopen = function (event) {
  // ...
};

// 另一种写法
source.addEventListener('open', function (event) {
  // ...
}, false);

//2.客户端接收到来自服务器的消息，触发message事件
source.onmessage = function (event) {
  var data = event.data;
  // handle message
};

// 另一种写法
source.addEventListener('message', function (event) {
  var data = event.data;
  // handle message
}, false);

//3.发生通信错误，如连接中断，触发error事件
source.onerror = function (event) {
  // handle error event
};

// 另一种写法
source.addEventListener('error', function (event) {
  // handle error event
}, false);

//4.关闭SSE连接
source.close();

4.服务器实现
1）数据格式
必须是utf-8编码的文本
http头信息：
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
2)发送的信息由若干个message组成，每个message之间用\n\n分隔，一个message内由若干行组成，每行格式如下：
[field]：value\n

field取值：data、event、id、retry、空（以冒号开头表示注释）

注释：服务器为保持连接不中断，每隔一段时间会向浏览器发送一个注释。

发送一个JSON数据的例子：

data: {\n
data: "foo": "bar",\n
data: "baz", 555\n
data: }\n\n

id表示每一条数据的编号，浏览器用lastEventId属性读取这个值。一旦连接断线，浏览器会发送一个 HTTP 头，里面包含一个特殊的Last-Event-ID头信息，将这个值发送回来，用来帮助服务器端重建连接。因此，这个头信息可以被视为一种同步机制。

event字段表示自定义事件类型，默认是message事件，浏览器可以用addEventListener()监听该事件。

event: foo\n
data: a foo event\n\n

data: an unnamed event\n\n

event: bar\n
data: a bar event\n\n

上面的代码创造了三条信息。第一条的名字是foo，触发浏览器的foo事件；第二条未取名，表示默认类型，触发浏览器的message事件；第三条是bar，触发浏览器的bar事件。

retry字段指定浏览器重发连接的时间间隔
两种情况会导致浏览器重新发起连接：一种是时间间隔到期，二是由于网络错误等原因，导致连接出错。

SSE要求服务器与浏览器保持连接，不同的服务器所消耗的资源不一样，比如apache服务器，每个连接就是一个线程，node则是所有的连接都使用一个线程，消耗的资源会小很多，但是要求每个连接不能包含耗时的操作如磁盘的IO读写。
node的SSE服务器实例：

var http = require("http");

http.createServer(function (req, res) {
  var fileName = "." + req.url;

  if (fileName === "./stream") {
    res.writeHead(200, {
      "Content-Type":"text/event-stream",
      "Cache-Control":"no-cache",
      "Connection":"keep-alive",
      "Access-Control-Allow-Origin": '*',
    });
    res.write("retry: 10000\n");
    res.write("event: connecttime\n");
    res.write("data: " + (new Date()) + "\n\n");
    res.write("data: " + (new Date()) + "\n\n");

    interval = setInterval(function () {
      res.write("data: " + (new Date()) + "\n\n");
    }, 1000);

    req.connection.addListener("close", function () {
      clearInterval(interval);
    }, false);
  }
}).listen(8844, "127.0.0.1");

二十、HTML5 webSocket

webSocket：一种在单个TCP连接上进行全双工通讯的协议，基于TCP协议，更好的节省服务器带宽和资源，并能够更实时地通讯。
建立连接的过程：客户端向服务器发起http请求，在头信息附加“Upgrade:WebSocket”表明这是一个申请协议升级的HTTP请求，服务器端解析附加头信息后产生应答信息返回给客户端，连接就建立起来了。
WS: WebSocket协议
WSS：WebSocket加密版，表示在TLS（安全传输层协议）之上的WS

1.创建socket
var Socket=new WebSocket(url,[protocol]);
protocol可选项，指定可接受的子协议。

WebSocket属性：

readyState:
0:未建立连接
1：已建立连接，可通讯
2：连接正在关闭中
3.：连接已关闭或连接不能打开
bufferedAmount:：只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket事件：
open：onopen建立连接时触发
message：onmessage客户端接收服务器数据时触发
error：onerror通信发生错误时触发
close：onclose连接关闭时触发

WebSocket方法：
send()：使用连接发送数据
close()：关闭连接

客户端请求：
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

服务器回应：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/

二十一、HTML5 MathML

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title>
   </head>
    
   <body>
    
      <math xmlns="http://www.w3.org/1998/Math/MathML">
        
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
                
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
                
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
            
      </math>
        
   </body>
</html> 

//2*2矩阵
<math xmlns="http://www.w3.org/1998/Math/MathML">
        
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
            
            <mfenced open="[" close="]">
            
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
                    
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>

mrow：同行显示
mi：字符
mn：数字
mo：运算符
msup：上标
mfenced：外包含
mtable：矩阵table
mtr：矩阵行
mtd：矩阵单元格

二十一、HTML5拖放

1.设置元素可拖动

<img draggable="true">

2.拖动什么
ondragestart属性调用了函数drag(event)，该函数规定了被拖放的数据

<img draggable="true" ondragstart="drag(event)">
function drag(ev)
{
	//设置被拖放数据的数据类型和值，Text是DOMString
    ev.dataTransfer.setData("Text",ev.target.id);
}

3.允许放置
元素默认是不允许放置到其他元素的，需阻止默认处理方式，调用ondrageover事件的preventDefault()

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
function allowDrop(ev)
{
    ev.preventDefault();
}

4.进行放置

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

二十二、HTML5 Web SQL

核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

1.打开或创建数据库
var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);//数据库名称、版本号、描述文本、数据库大小
第五个参数：创建回调会在创建数据库后调用

2.创建表操作

db.transaction(function (tx){
	tx.executeSql('create table if not exists LOGS(id unique,log)');
});

3.插入数据

db.transaction(function (tx){
	tx.executeSql('create table if not exists LOGS(id unique,log)');
	tx.excuteSql('insert into LOGS values(1,'数据1')');
	//动态插入数据
	tx.excuteSql('insert into LOGS values(?,?),[e_id,e_log]);
});

4.读取数据

<div id="status" name="status">状态信息</div>
db.transaction(function (tx){
	tx.executeSql('select * from LOGS',[],function(tx,results){
	//等同于var len=**; var i;
		var len=results.rows.length,i; 
		for(i=0;i<len;i++){
		  msg=results.rows.item(i).log;
		  document.querySelector('#status').innerHTML+=msg;
		}
	},null);
});

5.删除记录

db.transaction(function(tx){
	tx.executeSql('delete from LOGS where id=?',[id]);
})