HTML总结

最新推荐文章于 2022-07-10 02:07:49 发布

置顶兮兮落落_

最新推荐文章于 2022-07-10 02:07:49 发布

阅读量479

点赞数

分类专栏：前端学习文章标签： javascript html5 html web es6

本文链接：https://blog.csdn.net/u010369794/article/details/106042264

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML部分

DOCTYPE是什么
HTML5是什么
HTML语义化
meta标签
Cookie与Session
localStorage与sessionStorage
iframe框架
HTML节点操作
HTML5 SAG 和 Canvas
行内元素和块级元素
Web SQL 数据库
Web worker

DOCTYPE是什么

DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。

<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE>声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来，要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

HTML5 不基于 SGML，所以不需要引用 DTD。

HTML5是什么

HTML 5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。
几乎所有的浏览器都支持HTML 5，例如Safari，Chrome，火狐，Opera，IE等。

HTML 5的页面结构和HTML 4或早先的HTML有什么不同？

一个典型的Web页面包括页眉（header），页脚（footer），导航（navigation），正文（central area）和侧栏（side bar）。现在如果是在HTML 4中，HTML部分中的上述这些专用名词需要使用DIV标签来描述。
但是，如果是在HTML 5，可以专门为这些区域创建特定的元素名，如<header></header>，让HTML更具可读性。
以下是形成页面结构的HTML 5元素的更多细节:
<header>：表现HTML的标题数据。
<footer>：页面的页脚部分。
<nav>：页面中的导航元素。
<article>：正文内容。
<section>：用在正文中定义section或区段内容。
<aside>：表现页面侧边栏内容。

HTML 5推出了10个重要的新的表单元素：
Color Date Datetime-local Email Time
Url Range Telephone Number Search

HTML语义化

一、什么是HTML语义化标签

语义化的标签，说明让标签有自己的含义。

我理解的HTML语义化是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时，让网络爬虫更好的解析。

<p>一行文字</p>

<span>一行文字</span>

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落，而 span 标签责没有独特的含义。

二、语义化标签的特点（为什么使用）

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

三、常见的语义化标签

因此我们在写页面结构时，应尽量使用有语义的HTML 标签

<title>：页面主体内容。

<hn>：h1~h6，分级标题，<h1>与<title> 协调有利于搜索引擎优化。

<ul>：无序列表。

<ol>：有序列表。

<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

<nav>：标记导航，仅对文档中重要的链接群使用。

<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<article>：定义外部的内容，其中的内容独立于文档的其余部分。

<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

<footer>：页脚，只有当父级是body时，才是整个页面的页脚。

<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

<em>：将其中的文本表示为强调的内容，表现为斜体。

meta标签

定义和用法

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta> 标签永远位于 head 元素内部;   元数据总是以名称/值的形式被成对传递的。

meta标签的几种用法

meta指定文档编码

//这行代码的意思是，文档用UTF-8编码的，浏览器解析的时候用UTF-8编码解析。
<meta charset="UTF-8">

适配移动页面

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport"  content="width=device-width,initial-scale=1.0">

添加页面描述

<meta name="description" content="腾讯网(www.qq.com)是中国最浏览量最大的门户网站">

Cookie与Session

会话跟踪是Web程序中常用的技术，HTTP协议是无状态的，确定用户身份就需要跟踪用户的整个会话。最常用的会话跟踪是使用Cookie与Session，简单来说Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

Cookie

由于HTTP协议是无状态的，一旦数据交换完毕，此次链接就会关闭，再次交换数据就需要重新连接，意味着服务器无法从链接上跟踪会话。假如A与B同时购买了一件商品，不进行会话跟踪的话服务器就无法判断究竟是谁购买了此商品。
服务端为进行会话跟踪，给每个客户端颁发一个通行证，每个人访问必须携带通行证，这样服务端就能区别用户身份了。
Cookie实际上是一小段的文本信息，服务端将需要通行证信息Cookie发送到浏览器，浏览器将通行证存储起来，并且对于同源的每个请求都会自动携带通行证信息(CSRF跨站请求伪造基于此策略)，于是服务端就可以判断用户身份。

Session

Session是服务器端使用的一种记录客户端状态的机制，相应的也增加了服务器的存储压力。
对于客户端的每个会话，都有一个唯一的SESSIONID与其对应，服务端将用户数据存储进SESSIONID对应的文件或者是内存中，只要客户端每次请求将SESSIONID交予服务端，服务端就能区别用户进行会话跟踪。

两者区别

Cookie将数据存储在浏览器，Session则将数据存储在服务端
Cookie是存储的String类型，Session在服务端则是Object类型
Cookie在客户端用户可以进行修改伪造，Session在服务端用户无法进行直接的修改伪造，Session比Cookie更具有安全性
Cookie由于浏览器的同源策略，只有同源的情况下才会发送，Session在服务端理论上可以进行多域共享
Cookie大小由浏览器限制，一般不超过4KB，Session在服务端大小可以灵活控制

Cookie缺陷

数量受到限制。一个浏览器能创建的 Cookie 数量最多为 300 个，并且每个不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个
安全性无法得到保障。通常跨站点脚本攻击往往利用网站漏洞在网站页面中植入脚本代码或网站页面引用第三方法脚本代码，均存在跨站点脚本攻击的可能，在受到跨站点脚本攻击时，脚本指令将会读取当前站点的所有 Cookie 内容（已不存在 Cookie 作用域限制），然后通过某种方式将 Cookie 内容提交到指定的服务器（如：AJAX）。一旦 Cookie 落入攻击者手中，它将会重现其价值。
浏览器可以禁用Cookie，禁用Cookie后，也就无法享有Cookie带来的方便。

localStorage与sessionStorage

localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。

相同点

都与HTTP无关，是HTML5提供的标准，当发起HTTP请求时不会与Cookie一样自动携带
都是以键值对的形式存在，即Key-Value形式，常用的Api也相同
存储类型都是String类型，当进行存储时，会调用toString()方法转为String类型
对于每个域容量是有限的，不同浏览器不一样，大部分存储为5M左右，解决Cookie只有4KB左右存储空间的不足

不同点

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
SessionStorage会在用户关闭浏览器后，即会话结束后，数据失效；SessionStorage与服务端Session无关。

常用操作

1. 储存数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
/**
 * 由于存储数据会调用 toString() 方法
 * Object 类型会存储为 [object Object] 字符串
 * 所以进行存储时需调用 JSON.stringify() 转化为字符串
 * 取出时调用 JSON.parse() 将字符串转回对象
 */
 
2. 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');

3. 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');

4. 清空数据
localStorage.clear();
sessionStorage.clear();

注意：只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格），SessionStorage 在用户关闭页面（会话结束）后就失效。其余的和localstorage一样。

iframe框架

iframe 用于在网页内显示网页。

基本使用

添加 iframe 
<iframe src="URL"></iframe>

src：规定在iframe中显示的文档的URL。
frameborder：规定是否显示框架周围的边框。
scrolling：规定是否在 iframe 中显示滚动条。
width：规定iframe的宽度，建议使用CSS替代。
height：规定iframe的高度，建议使用CSS替代。
sandbox：启用一系列对iframe中内容的额外限制。
marginwidth：定义iframe的左侧和右侧的边距。
marginheight：定义iframe的顶部和底部的边距。
srcdoc：规定在iframe中显示的页面的HTML内容。
align：规定如何根据周围的元素来对齐此框架，建议使用样式替代。

使用场景

加载其他域的网页
<iframe>是允许跨域请求资源的，但是不能够修改，由此可以在网页中嵌套其他网页，如需要跨域通信的话，需要考虑document.domain、window.name、window.postMessage。
典型系统结构
典型的系统结构，左侧是功能树，上部为个人信息，右侧就是实际功能，使用iframe将功能单独分离出来，当然也可以使用vue和react进行实现。
实现Ajax
可以使用iframe进行实现异步请求发送，来模拟Ajax的请求操作，Ajax的异步请求完成操作为XHR.readyState === 4执行callback，iframe使用iframe.onload执行callback，还可以实现一个轮询长连接。
加载广告
广告是与原文无关的，假如硬编码进去，会造成网页布局的紊乱,而且这样势必需要引入额外的css和js文件，极大的降低了网页的安全性，使用iframe便可以解决这些问题。
提交表单
可以使用iframe提交表单来避免整个页面的刷新，还可以实现无刷新文件上传的操作。

优点

可以跨域请求其他网站，并将网站完整展示出来
典型系统结构可以提高代码的复用性
创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象
模块分离，若多个页面引用同一个iframe，则便于修改操作
实现广告展示的一个解决方案
实现局部刷新，若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面

缺点

iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，动态设置src可解决这个问题。
加载了新页面，增加了css与js文件的请求，即额外增加了HTTP请求，增加了服务器负担。
有时iframe由于页面挤占空间的原因出现滚动条，造成布局混乱。
不利于SEO，搜索引擎的爬虫无法解读iframe的页面。
有些小型的移动设备如手机等无法完全显示框架，兼容性较差。
iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。

HTML节点操作

HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。

文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。HTML DOM将HTML文档视作树结构。这种结构被称为节点树：HTML DOM Tree实例。

添加节点

<div id="t1"></div>
<script type="text/javascript">
    var d1 = document.createElement("div");  // 创建一个节点
    d1.style.color = "blue"; // 设置一下颜色
    d1.setAttribute("id","d1"); // 设置一个属性
    d1.innerText="innerText"; // innerText会一次性替换所有内容
    var tn1=document.createTextNode(" CreateTextNode"); // createTextNode可以做动态添加
    d1.appendChild(tn1); // 追加文本节点
    var node = document.getElementById("t1").appendChild(d1); // 将d1节点追加到t1节点后

    var b1 = document.createElement("div");
    b1.innerText="添加到d1前";
    document.getElementById("t1").insertBefore(b1,document.getElementById("d1")); // 将b1节点添加到t1节点内的d1节点前
</script>

删除节点

<div id="t3">
    <div>下边的兄弟被删除了</div>
    <div>我要被删除了</div>
</div>

<script type="text/javascript">
    document.getElementById("t3").removeChild(document.querySelector("#t3 > div:nth-child(2)"));
</script>

替换节点

<div id="t2">
    <div>被替换的节点</div>
</div>

<script type="text/javascript">
    var d2 = document.createElement("div");
    d2.style.color = "green";
    d2.innerText="被我替换了";
    document.getElementById("t2").replaceChild(d2,document.querySelector("#t2 > div:first-child")); // 第一个参数是要替换的节点，第二个参数是被替换的节点
</script>

访问子节点

<div id="t5" style="color: grey;">
    <div>1</div>
    <div>2</div>
</div>

<script type="text/javascript">
    console.log(document.getElementById("t5").childNodes); // 获取所有子节点 // 注意每个换行也会有一个#text文本节点
    console.log(document.getElementById("t5").childElementCount); // 获取子元素节点数量
    console.log( document.getElementById("t5").firstChild); // 获取第一个子节点，注意也会匹配#text文本节点
    console.log(document.getElementById("t5").firstElementChild); // 获取第一个子元素节点
    console.log(document.getElementById("t5").lastChild); // 获取最后一个子节点，注意也会匹配#text文本节点
    console.log(document.getElementById("t5").lastElementChild); // 获取最后一个子元素节点
</script>

访问父节点

<div style="color: yellow;">
    <div id="t6">1</div>
</div>
<script type="text/javascript">
    console.log(document.getElementById("t6").parentNode);
</script>

访问兄弟节点

<div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div>

<script type="text/javascript">
    console.log(document.getElementById("t7").previousSibling); // 注意也会匹配#text
    console.log(document.getElementById("t7").nextSibling); // 注意也会匹配#text
</script>

HTML5 SAG 和 Canvas

SVG是什么？

SVG表示（scalable vector graphics）可缩放矢量图形。这是一个基于文本的图形语言，它可以绘制使用文本、线、点等的图形，因此可以轻巧又快速地渲染。
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

访问画布区域

要在画布区域上绘制图形，我们首先需要获取上下文的引用部分。下面就是用于画布部分的代码。

var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

绘制图形

一旦你可以使用上下文对象，就可以开始上下文绘制。所以首先调用“move”方法，从一个点开始，使用线方法画线，然后敲击键盘应用结束。

注：从前面的两个问题中我们可以看到画布和SVG都可以在浏览器上绘制图形。要选择什么时候用哪个。

SVG	Canvas
1. 绘制并记忆。换句话说就是，通过使用SVG绘制的任意形状都可以被记住和操作，并且浏览器可以再次渲染它。 2. SVG可以很好地用于创建如CAD软件的图形，绘制之后允许用户操作。3. 这是一个缓慢的过程，因为它需要记住坐标以便于后续操作。4. 我们可以有与图形对象相关联的事件处理程序。5. 分辨率独立。	1. 画布则是绘制然后遗忘。一旦绘制完成，你就不能访问和处理像素。2. Canvas则用于绘制和遗忘类似动漫和游戏的场画。3.它就快多了，因为没有必要记住后面的东西。4. 我们不需要将事件处理程序与图形对象关联，因为我们不需要引用它们。5. 分辨率依赖。

SVG

Canvas

1. 绘制并记忆。换句话说就是，通过使用SVG绘制的任意形状都可以被记住和操作，并且浏览器可以再次渲染它。 2. SVG可以很好地用于创建如CAD软件的图形，绘制之后允许用户操作。3. 这是一个缓慢的过程，因为它需要记住坐标以便于后续操作。4. 我们可以有与图形对象相关联的事件处理程序。5. 分辨率独立。

1. 画布则是绘制然后遗忘。一旦绘制完成，你就不能访问和处理像素。2. Canvas则用于绘制和遗忘类似动漫和游戏的场画。3.它就快多了，因为没有必要记住后面的东西。4. 我们不需要将事件处理程序与图形对象关联，因为我们不需要引用它们。5. 分辨率依赖。

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。

行内元素
行内元素对应的CSS样式设置为display: inline 。

特点

元素排在一行
封闭后不会自动换行
不能指定高度与宽度
可以使用line-height来指定高度
外边距对于水平方向有效，垂直方向无效
内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响

示例

<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
<style type="text/css">
    span{
        width: 1000px; /* 指定宽度无效果 */
        height: 1000px; /* 指定高度无效果 */
        color: #333;
        background: #eee;
        margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
        padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */   
    }
</style>

常见行内元素

<a>、<span>、<b>、<big>、<i>、<small>、<tt>、<abbr>、<acronym>、<cite>、<code>、<dfn>、<em>、<kbd>、<strong>、<samp>、<var>、<bdo>、<br>、 <img>、<iframe>、<map>、<object>、<q>、<script>、<sub>、<sup>、<button>、<input>、<label>、<select>、<textarea>

块级元素
块级元素对应的CSS样式设置为display: block;。

特点

独占一行
封闭后自动换行
默认宽度为100%
可以指定宽度和高度
内外边距对于四个方向有效

示例

<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
<style type="text/css">
    div{
        width: 100px; /* 不指定则默认宽度100% */
        height: 100px; /* 可以指定高度 */
        color: #333;
        background: #eee;
        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 10px 20px; /* margin的设置在四个方向都有效 */
    }
</style>

常见块级元素

<div>、<address>、<article>、<aside>、<audio>、<blockquote>、<canvas>、<dd>、<dl>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>~<h6>、<header>、<hgroup>、<hr>、<noscript>、<ol>、<output>、<p>、<pre>、<section>、<table>、<tfoot>、<ul>、<video>

行内块级元素
行内块级元素对应的CSS样式设置为display: inline-block;。

特点

可以指定宽度和高度
内外边距对于四个方向有效
元素排在一行，但是会有空白缝隙

示例

<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
    input{
        width: 100px; /* 可以指定宽度 */
        height: 100px; /* 可以指定高度 */

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 100px 20px; /* margin的设置在四个方向都有效 */
    }
</style>

常见行内块级元素

<input>、<img>、<button>、<iframe>、<textarea>、<select>

Web SQL 数据库

WebSQL是前端的一个独立模块，是web存储方式的一种。

核心方法

以下是规范中定义的三个核心方法：

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

打开数据库

使用 openDatabase()方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明：

数据库名称
版本号
描述文本
数据库大小
创建回调

第五个参数，创建回调会在创建数据库后被调用。

执行查询操作

执行操作使用 database.transaction()函数：

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

上面的语句执行后会在 'mydb'数据库中创建一个名为 LOGS的表。

插入数据

在执行上面的创建表语句后，我们可以插入一些数据：

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 (?, ?)', [e_id, e_log]);
});

实例中的 e_id和 e_log是外部变量，executeSql会映射数组参数中的每个条目给 "?"。

读取数据

以下实例演示了如何读取数据库中已经存在的数据：

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

完整实例

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
 
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")');
    msg = '<p>数据表已创建，且插入了两条数据。</p>';
    document.querySelector('#status').innerHTML =  msg;
});
 
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++){
        msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
        document.querySelector('#status').innerHTML +=  msg;
    }
}, null);
});

删除记录

删除记录使用的格式如下：

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

删除指定的数据id也可以是动态的：

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

更新记录

更新记录使用的格式如下：

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

更新指定的数据id也可以是动态的：

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

完整实例

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
 
 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")');
    msg = '<p>数据表已创建，且插入了两条数据。</p>';
    document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
      tx.executeSql('DELETE FROM LOGS  WHERE id=1');
      msg = '<p>删除 id 为 1 的记录。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
     tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
      msg = '<p>更新 id 为 2 的记录。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 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++){
          msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
          document.querySelector('#status').innerHTML +=  msg;
       }
    }, null);
 });

Web worker

什么是 Web Worker？

当在HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

检测浏览器是否支持 Web Worker

在创建 web worker 之前，请检测用户的浏览器是否支持它：

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

创建 web worker 文件

现在，让我们在一个外部JavaScript中创建我们的 web worker。

在这里，我们创建了计数脚本。该脚本存储于"demo_workers.js"文件中：

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

以上代码中重要的部分是 postMessage()方法 - 它用于向 HTML 页面传回一段消息。

注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

我们已经有了web worker文件，现在我们需要从HTML页面调用它。

下面的代码检测是否存在worker，如果不存在，它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

然后我们就可以从 web worker发生和接收消息了。

向 web worker 添加一个"onmessage"事件监听器：

w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
};

终止 Web Worker

当我们创建web worker对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用terminate()方法：

w.terminate();

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
 
<script>
var w;
 
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }
}
 
function stopWorker() 
{ 
    w.terminate();
    w = undefined;
}
</script>
 
</body>
</html>

Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下列 JavaScript对象：