HTML5

流火如夏xx

已于 2022-03-30 16:51:11 修改

阅读量474

点赞数

分类专栏：前端文章标签： html html5

于 2022-03-30 11:39:14 首次发布

本文链接：https://blog.csdn.net/m0_37873390/article/details/123837794

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5 浏览器支持

所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

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

为 HTML 添加新元素

<script>
document.createElement("myHero")
</script>

Internet Explorer 浏览器问题

Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, " shiv" 来解决该问题:

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

以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
html5shiv.js 引用代码必须放在元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

HTML5 Canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
标签只是图形容器，您必须使用脚本来绘制图形。

浏览器支持

在这里插入图片描述

创建一个画布（Canvas）

<canvas id="myCanvas" width="200" height="100"></canvas>

一个画布在网页中是一个矩形框，通过元素来绘制.
注意: 默认情况下元素没有边框和内容。

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

HTML5 SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG优势

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

浏览器支持

在这里插入图片描述

把 SVG 直接嵌入 HTML 页面

SVG 圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

SVG 五角星

<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>

SVG 与 Canvas两者间的区别

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

HTML5 MathML

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

//a2 + b2 = c2
<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>

HTML5 拖放（Drag 和 Drop）

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动.

设置元素为可拖放

<img draggable="true">

拖动什么 - ondragstart 和 setData()

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
//Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件

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

实例–来回拖放图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1, #div2 {
	float:left; 
	width:100px; 
	height:35px; 
	margin:10px;
	padding:10px;
	border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
	ev.preventDefault();
}

function drag(ev) {
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

HTML5 Geolocation（地理定位）

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.
注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

HTML5 - 使用地理定位

var x=document.getElementById("demo");
function getLocation()
{
	//检测是否支持地理定位
    if (navigator.geolocation)
    {
      //如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 //showPosition() 函数获得并显示经度和纬度
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

处理错误和拒绝

function showError(error)
{
    switch(error.code) 
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="用户拒绝对获取地理位置的请求。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="位置信息是不可用的。"
            break;
        case error.TIMEOUT:
            x.innerHTML="请求用户地理位置超时。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="未知错误。"
            break;
    }
}

getCurrentPosition() 方法 - 返回数据

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

HTML5 Video(视频)

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.

HTML5 (视频)- 如何工作

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

HTML5 - 使用 DOM 进行控制

HTML5 和元素同样拥有方法、属性和事件。
和元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，元素开始播放、已暂停，已停止，等等。

实例

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script> 

</body> 
</html>

HTML5 Audio(音频)

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持元素.

HTML5 Audio - 如何工作

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

HTML5 新的 Input 类型

Input 类型: color (Chrome,Opera)

<input type="color" name="favcolor">

Input 类型: date (Chrome, Safari, Opera)

<input type="date" name="bday">

Input 类型: datetime (Safari, Opera)

<input type="datetime" name="bdaytime">

Input 类型: datetime-local (Chrome, Safari, Opera)

<input type="datetime-local" name="bdaytime">

Input 类型: email (Internet Explorer, Firefox, Opera, Chrome)

<input type="email" name="email">

Input 类型: month (Opera, Chrome, Safari )

<input type="month" name="bdaymonth">

Input 类型: number (Internet Explorer, Opera, Chrome, Safari)

<input type="number" name="quantity" min="1" max="5">

Input 类型: range (Internet Explorer, Opera, Chrome, Safari)

<input type="range" name="points" min="1" max="10">

Input 类型: search (Chrome, Safari)

<input type="search" name="googlesearch">

Input 类型: tel

<input type="tel" name="usrtel">

Input 类型: time ( Opera, Chrome, Safari)

 <input type="time" name="usr_time">

Input 类型: url (Internet Explorer, Opera, Chrome, Firefox)

<input type="url" name="homepage">

Input 类型: range ( Opera, Chrome, Safari)

<input type="week" name="week_year">

HTML5 表单元素

HTML5 元素 (Internet Explorer, Firefox, Opera, Chrome)

元素规定输入域的选项列表。
属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用元素的列表属性与元素绑定.

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML5 元素 ( Firefox, Opera, Chrome, Safari)

元素的作用是提供一种验证用户的可靠方法。
标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

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

HTML5 元素 ( Firefox, Opera, Chrome, Safari)

<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>

HTML5 表单属性

/ autocomplete 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于标签，以及以下类型的标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

novalidate 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

autofocus 属性 (Internet Explorer, Firefox, Chrome, Safari,)

<input type="text" name="fname" autofocus>

autofocus 属性是一个布尔属性。
autofocus 属性规定在页面加载时，域自动地获得焦点。

form 属性 ( Firefox, Chrome, Safari, Opera)

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

form 属性规定输入域所属的一个或多个表单。
提示:如需引用一个以上的表单，请使用空格分隔的列表。

formaction 属性 (Internet Explorer, Firefox, Chrome, Opera)

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

The formaction 属性用于描述表单提交的URL地址.
The formaction 属性会覆盖元素中的action属性.
注意: The formaction 属性用于 type=“submit” 和 type=“image”.

formenctype 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
主要: 该属性与 type=“submit” 和 type=“image” 配合使用。

formmethod 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了元素的 method 属性。
注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

formnovalidate 属性 (Internet Explorer, Firefox, Chrome, Opera)

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

novalidate 属性是一个 boolean 属性.
novalidate属性描述了元素在表单提交时无需被验证。
formnovalidate 属性会覆盖元素的novalidate属性.
注意: formnovalidate 属性与type="submit一起使用

formtarget 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank"
  value="提交到一个新的页面上">
</form>

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖元素的target属性.
注意: formtarget 属性与type=“submit” 和 type="image"配合使用.

height 和 width 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

height 和 width 属性规定用于 image 类型的标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间在加载页时会被保留。如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间。图片在加载过程中会使页面布局效果改变（尽管图片已加载）。

list 属性 (Internet Explorer, Firefox, Chrome, Opera)

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

min 和 max 属性 (Internet Explorer, Chrome, Safari, Opera)

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的标签：date pickers、number 以及 range。

multiple 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<input type="file" name="img" multiple>

multiple 属性是一个 boolean 属性.
multiple 属性规定元素中可选择多个值。
注意: multiple 属性适用于以下类型的标签：email 和 file:

pattern 属性 (Internet Explorer, Firefox, Chrome, Opera)

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

pattern 属性描述了一个正则表达式用于验证元素的值。
注意:pattern 属性适用于以下类型的标签: text, search, url, tel, email, 和 password.
提示：是用来全局 title 属性描述了模式.

placeholder 属性 (Internet Explorer, Firefox, Chrome, Safari, Opera)

<input type="text" name="fname" placeholder="First name">

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的标签：text, search, url, telephone, email 以及 password。

required 属性 (Internet Explorer, Firefox, Chrome, Opera)

Username: <input type="text" name="usrname" required>

required 属性是一个 boolean 属性.
required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

step 属性 (Internet Explorer, Chrome, Safari, Opera)

<input type="number" name="points" step="3">

step 属性为输入域规定合法的数字间隔。
如果 step=“3”，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值.
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

HTML5 语义元素

无语义元素实例:

和 - 无需考虑内容.
语义元素实例: , , and - 清楚的定义了它的内容.

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

HTML5中新的语义元素

在这里插入图片描述

HTML5
和
元素

标签规定独立的流内容（图像、图表、照片、代码等等）。

元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

标签定义

元素的标题.

元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

开始使用这些语义元素

以上的元素都是块元素(除了

).
为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

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

Internet Explorer 8 及更早IE版本中的问题

解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js
下载后，将以下代码放入到网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

HTML5 Web 存储

使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以键/值对存在, web网页的数据只允许该网页访问使用。

浏览器支持

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

localStorage 和 sessionStorage

客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和 sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

// 存储
localStorage.setItem("sitename", "菜鸟教程");
 
// 查找
document.getElementById("result").innerHTML = "网站名：" +  localStorage.getItem("sitename");
document.getElementById("result").innerHTML = localStorage.sitename;

移除 localStorage 中的 “sitename” :

localStorage.removeItem("sitename");

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

HTML5 Web SQL 数据库

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

打开数据库

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

执行查询操作

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

插入数据

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)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

读取数据

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)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});
 
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;
    
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
    
   }, null);
});

删除记录

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

HTML5 WebSocket

流火如夏xx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录