整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Web SQL 數據庫 API 并不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端數據庫的 APIs。
如果你是一個 Web 后端程序員，應該很容易理解 SQL 的操作。
你也可以參考我們的 SQL 教程，了解更多數據庫操作知識。
Web SQL 數據庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。
核心方法
以下是規范中定義的三個核心方法：
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);});
完整實例
<!DOCTYPE HTML><html>
<head>
<script type="text/javascript">
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);
});
</script>
</head>
<body>
<div id="status" name="status">狀態信息</div>
</body>
</html>
嘗試一下 ?
以上實例運行結果如下圖所示：
刪除記錄
刪除記錄使用的格式如下：
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]);});
完整實例
<!DOCTYPE HTML><html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
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);
});
</script>
</head>
<body>
<div id="status" name="status">狀態信息</div>
</body>
</html>
嘗試一下 ?
以上實例運行結果如下圖所示：
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
文筆者將與大家分享HTML/CSS/JavaScript這三種網頁技術，以及HTML5、H5等的相關知識。
網頁存儲在某臺計算機（即服務器）上，并通過網絡與其他計算機相連。網頁通過網址（URL）來識別與訪問，當我們在瀏覽器輸入網址后，經過一段復雜而又快速的程序，網頁會被下載到用戶的計算機上，用戶的瀏覽器會解析網頁內容，最終展示給用戶。
網頁展示的信息可以包括：圖片、文字、音頻、視頻等內容，網頁上面還有鏈接指向更多的網頁，最終形成一個巨大的互聯網。
比如：百度的網頁就存儲在百度的服務器中，當我們在瀏覽器中輸入網址www.baidu.com（即URL地址），百度的網頁會從服務器下載到本地計算機上，瀏覽器接收這些數據并解析，百度的首頁就顯示出來了。
在電腦端，我們使用瀏覽器瀏覽網頁，比如：使用Internet Explorer、Edge、Chrome、Safari、360安全瀏覽器、搜狗瀏覽器、QQ瀏覽器等瀏覽器，訪問的網頁可以是搜索引擎https://www.baidu.com，可以是電商平臺https://www.taobao.com，甚至是社交平臺https://wx.qq.com。
由于移動互聯網的大發展，很多人可能沒有意識到，網頁其實可以實現大部分常用的功能。
手機、iPad上也有各種瀏覽器，我們可以輸入網址并直接訪問，各大手機廠商在手機中預先安裝了自己的瀏覽器，阿里巴巴、百度、騰訊、搜狗等互聯網公司也推出了自家的瀏覽器APP。為了獲得競爭優勢，互聯網公司還在瀏覽器上開發了各種功能，比如：智能搜索、去廣告插件等。
除了瀏覽器，不少APP也嵌入了瀏覽器功能。
比如：微信的公眾號，我們打開一篇微信公眾號文章，就是打開一個網頁；等新聞客戶端也是個巨大的瀏覽器，我們打開一條新聞，就是進入相應的網頁；淘寶里面的商品簡介，也是個網頁。這些網頁“偽裝”得太像APP頁面了，以至于我們沒有意識到。
文字、圖片、表格、音頻、視頻是網頁最常見的元素。
在網頁上點擊鼠標右鍵，選擇菜單中的 “查看源文件” ，就可以看到網頁的實際內容：網頁實際上只是一個純文本文件！它通過各式各樣的標記對頁面上的文字、圖片、表格、聲音等元素進行描述，而瀏覽器則對這些標記進行解釋并生成頁面，于是就得到我們看到的豐富的頁面。
比如：在微信公眾平臺官網（>https://mp.weixin.qq.com）點擊右鍵，查看源文件，可以發現這個網頁的源文件全都都是文字。
你可能會奇怪，為什么在源文件看不到任何圖片，而在瀏覽器顯示的時候可以看到呢？
這些文件中存放的只是圖片的鏈接位置，圖片與網頁文件是各自獨立存放的，甚至可以不在同一臺計算機上，瀏覽器可以自動訪問這些鏈接并顯示出來。音頻、視頻等非文字內容也是類似的。
絕大多數網頁是由HTML、CSS和JavaScript三種技術開發的，HTML/CSS/JavaScript也被稱為網頁三劍客。
HTML提供網頁內容和結構，CSS控制網頁的外觀，JavaScript提供用戶交互，一個很經典的例子是說HTML就像一個人的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，加上javascript這個植物人就可以對外界刺激做出反應，可以思考、運動、可以給自己整容化妝等等，成為一個活生生的人。
HTML（Hypertext Markup Language，超文本標記語言）是一門標記語言，用于創建網頁和 Web 應用程序，HTML的基本元素是<p><img><table>等元素，分別表示文本、圖像、表格等。瀏覽器發出 URL 請求時，首先需要返回 HTML 文檔，之后瀏覽器對該文件進行解析。
比如：下面是一個基本的網頁，左邊是網頁源代碼，右邊是展示效果。<html></html>之間是網頁的全部內容，<head></head>之間是標題相關的內容，這里為空，<body></body>之間是網頁的主體內容，<h1></h1>之間是標題，<p></p>之間的內容是正文。
CSS（Cascading Stylesheet，級聯樣式表）用于控制 HTML 元素的外觀和布局，對文檔進行修飾，使文檔更加美觀，用戶看起來更舒服。 CSS 樣式可直接應用于 HTML 元素，單獨對單個界面裝飾，也可以對多個界面裝飾。
比如，下面是一個添加CSS樣式的網頁，左邊是網頁源代碼，右邊是展示效果。body{background-color:#d0e4fe}，設置了<body></body>之間的內容的背景顏色是#d0e4fe，h1{color:orange;text-align:center;}設置了<h1></h1>之間的文字顏色為橙色（orange），文字的位置是居中（center）。
為了提高編程效率，通常將CSS單獨寫在一個文件中，而是不是將CSS與HTML混合編程。
JavaScript 是動態的解釋性編程語言，可以實現用戶的交互和數據傳輸。
比如：我們常見的賬號、密碼驗證，就是通過JavaScript傳遞到服務器并返回服務器處理結果的。
比如：下面是一個添加JavaScript的網頁，左邊是網頁源代碼，右邊是展示效果。<script>function displayDate{document.getElementById(“demo”).innerHTML=Date;}</script> 是JavaScript代碼，點擊按鈕，id=demo的內容變成時間。
與CSS類似，通常將 JavaScript 組織到單獨的文件中，而不是與HTML混合編程。為了提高JavaScript開發速度，也有一些開源庫可以使用，常見的是jQuery 、Vue.js， 極大地簡化了 JavaScript 編程。
為了提高網站的設計、編程速度，也有很多開源的庫可以使用，最常用的Bootstrap庫。Bootstrap庫來自 Twitter，是目前最受歡迎的前端框架，Bootstrap 是基于 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2014年10月，萬維網聯盟宣布，經過接近8年的艱苦努力，HTML5標準規范終于制定完成。
從技術上看，HTML5本身是HTML，HTML是超文本標記語言，“5” 代表HTML第五次重大修改，可以理解為迭代之后的第五個版本，包含了很多功能特性。
HTML5的設計目的是：在移動設備上支持多媒體。
為了實現這種目的，HTML5引入了新的特性，比如用于繪畫的 canvas 元素，可以使用HTML5繪制簡單的圖像；用于視頻和音頻的的 video 和 audio 元素，可以使用HTML5播放視頻和音頻； HTML5可以調用數據庫；新的控件，比如 calendar、date、time、email、url、search，可以使用HTML5實現更好的用戶交互。
“刷爆朋友圈的H5”，“0基礎學習H5…”，“H5速成班”，H5這個詞經常出現在媒體中，甚至還出現了在線H5制作平臺，我們可以通過點擊、拖動實現美觀的網頁。
比如：我們可以使用百度的H5在線制作平臺，免費制作H5網頁。
顯然，這里所說的H5不是HTML5編程規范，更像是一種利用HTML5技術，制作包含文字、圖片、音頻等內容的炫酷網頁，以此實現“病毒式營銷”。
因此，H5并非技術概念，與其說是H5，不如說是“移動營銷頁面”，是營銷領域“濫用”技術名詞的產物。
因此，出現《H5+移動營銷設計指南》這類的書籍就不奇怪了。根據這本書的介紹，H5的原型要具備視覺、動效、節奏、音效、交互、可實施性等因素，H5頁面不太適合深度的閱讀，大部分使用場景是在地鐵上、電梯里、等上菜的時間等等。
2018年，宣稱擁有自主可控和安全瀏覽器內核技術的瀏覽器廠商“紅芯”高調宣布融資2.5億元C輪系列融資，其中不乏晨興資本、達晨創投、IDG資本等知名風險投資機構參與。
隨后，網友發現：紅芯瀏覽器的文件結構與谷歌瀏覽器文件結構基本一模一樣，甚至連“屬性”里的Chrome都沒有改掉，安裝文件里竟然還有Chrome的LOGO。
瀏覽器內核是瀏覽器的核心，紅芯瀏覽器并沒有自己開發瀏覽器內核，而是使用Chrome內核，這意味著“紅芯”并不是自主可控的瀏覽器，而是在Chrome內核的基礎上，換了個“皮”，做出了一個瀏覽器。
不少手機游戲廠商也在玩兒類似的游戲，將國外的游戲換個背景，再把英文翻譯成中文，就直接在國內上線。
網頁是由HTML、CSS、JavaScript等語言開發的，瀏覽器獲得HTML網頁之后，需要根據CSS、JS重新組織網頁并顯示在屏幕上。
比如：我們訪問微信公眾平臺的首頁https://mp.weixin.qq.com，瀏覽器獲得的是一堆文字，瀏覽器需要將這些文字變成我們看到的界面。
實現這些工作的就是瀏覽器內核。瀏覽器內核又可以分成兩部分：渲染引擎(Rendering Engine)和 JS （JavaScript）引擎。
渲染引擎負責取得網頁的內容（HTML、XML、圖像等等）、整理信息（例如加入 CSS 等），計算網頁的顯示方式，然后會輸出至顯示屏。瀏覽器內核對網頁的語法解釋會有所不同，所以渲染的效果也不相同。
JS 引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果和用戶交互。
瀏覽器的種類有很多，但瀏覽器內核就那么幾個。常見的是微軟 IE 瀏覽器內核 Trident、谷歌 Chrome 瀏覽器內核 Blink、蘋果 Safari 內核 Webkit 和火狐瀏覽器內核 Gecko。
國內的瀏覽器，比如：360瀏覽器、QQ瀏覽器、搜狗瀏覽器、2345瀏覽器等，實際上使用的還是這幾種開源的瀏覽器內核，并在內核的技術上，做了一些界面和效果。
比如：一些瀏覽器打出雙引擎的旗號，所謂雙引擎就是使用了IE和Chrome兩個引擎，因為國內的很多網站還只能使用IE訪問，最典型的就是很多銀行的網站，這時候如果使用兩個引擎可以給用戶無縫切換，帶來良好的體驗。
正如發動機是汽車的核心一樣，瀏覽器內核是瀏覽器的核心，那我們為什么不自己開發一個國產瀏覽器內核呢？
主要原因是兩個：
本文由@linghu 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash, 基于CC0協議
.最普通最常用最一般的方法就是用submit type..
2.還有一種常用的方法是使用圖片代碼：
3.使用鏈接來提交表單，用到了javascript的DOM模型：
4.這種方法實際上是調用了一個javascript函數，使用javacript函數來提交表單，方法就非常多非常靈活了，比如可以把它加入到任意一個標簽的onclick事件中：
5.比如一個表單里的提交按鈕所指向的處理頁面不同，這樣由于表單在定義的時候就已經確定下表單數據的處理頁面，所以單純地在表單里放多個提交按鈕是沒有辦法達到目的的。這就需要javascript。 首先得定義一個函數：
6.通過javascript改變form的action屬性值，這樣就可以實現多提交按鈕而且功能不同了，頁面內代碼如下面的：
【IT科技之家-itkeji綜合 -文章版權聲明】
非特殊說明，本文版權歸 [ IT科技之家-itkeji綜合 ] 所有，轉載請注明出處.
更多文章請關注：itkeji綜合
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
