html5 學(xué)習(xí)第四天

HTML5?語(yǔ)義元素

什么是語(yǔ)義元素?

一個(gè)語(yǔ)義元素能夠清楚的描述其意義給瀏覽器和開發(fā)者。

無(wú)語(yǔ)義?元素實(shí)例:?<div> 和 <span> - 無(wú)需考慮內(nèi)容.

語(yǔ)義?元素實(shí)例:?<form>, <table>, and <img> - 清楚的定義了它的內(nèi)容.

HTML5 <section> 元素

<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。

根據(jù)W3C HTML5文檔: section 包含了一組內(nèi)容及其標(biāo)題。

<section>?

?<h1>WWF</h1>?

?<p>The World Wide Fund for Nature (WWF) is....</p>

</section>

HTML5 <article> 元素

<article> 標(biāo)簽定義獨(dú)立的內(nèi)容。.

<article> 元素使用實(shí)例:

Forum post

Blog post

News story

Comment

<article>?

?<h1>Internet Explorer 9</h1> ?

<p>Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發(fā)布。</p>

</article>

HTML5 <nav> 元素

<nav> 標(biāo)簽定義導(dǎo)航鏈接的部分。

<nav> 元素用于定義頁(yè)面的導(dǎo)航鏈接部分區(qū)域，但是，不是所有的鏈接都需要包含在 <nav> 元素中!

<nav> <a href="/html/">HTML</a> |

? ? <a href="/css/">CSS</a> |

? ? <a href="/js/">JavaScript</a> |

? ? <a href="/jquery/">jQuery</a>

</nav>

HTML5 <aside> 元素

<aside> 標(biāo)簽定義頁(yè)面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）。aside 標(biāo)簽的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān).

<p>My family and I visited The Epcot center this summer.</p>?

<aside>?

?<h4>Epcot Center</h4>?

?<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

HTML5 <header> 元素

<header>元素描述了文檔的頭部區(qū)域，<header>元素主要用于定義內(nèi)容的介紹展示區(qū)域.在頁(yè)面中你可以使用多個(gè)<header> 元素，以下實(shí)例定義了文章的頭部:

<article>?

?????<header>?

?????????<h1>Internet Explorer 9</h1>?

?????????<p><time pubdate datetime="2011-03-15"></time></p>?

?????</header>?

?????<p>Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發(fā)布的</p>

</article>

HTML5 <footer> 元素

<footer> 元素描述了文檔的底部區(qū)域，<footer> 元素應(yīng)該包含它的包含元素，一個(gè)頁(yè)腳通常包含文檔的作者，著作權(quán)信息，鏈接的使用條款，聯(lián)系信息等，文檔中你可以使用多個(gè) <footer>元素.

<footer>?

?????<p>Posted by: Hege Refsnes</p>?

?????<p><time pubdate datetime="2012-03-01"></time></p>

</footer>

HTML5 <figure> 和 <figcaption> 元素

<figure>標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

<figure> 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。

<figcaption> 標(biāo)簽定義 <figure> 元素的標(biāo)題.

<figcaption>元素應(yīng)該被置于 "figure" 元素的第一個(gè)或最后一個(gè)子元素的位置。

<figure>?

?????<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">?

?????<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>

</figure>

我們可以開始使用這些語(yǔ)義元素嗎?

以上的元素都是塊元素(除了<figcaption>).

為了讓這些塊及元素在所有版本的瀏覽器中生效，你需要在樣式表文件中設(shè)置一下屬性 (以下樣式代碼可以讓舊版本瀏覽器支持本章介紹的塊級(jí)元素):

header, section, footer, aside, nav, article, figure

{

????display: block;

}

Internet Explorer 8 及更早IE版本中的問題

IE8 及更早IE版本無(wú)法在這些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.

解決辦法:?你可以使用HTML5 Shiv Javascript腳本來(lái)解決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]-->

以上代碼在瀏覽器小于IE9版本時(shí)會(huì)加載html5shiv.js文件. 你必須將其放置于<head> 元素中，因?yàn)?IE瀏覽器需要在頭部加載后渲染這些HTML5的新元素

HTML5?Web 存儲(chǔ)

什么是 HTML5 Web 存儲(chǔ)?

使用HTML5可以在本地存儲(chǔ)用戶的瀏覽數(shù)據(jù)。

早些時(shí)候,本地存儲(chǔ)使用的是 cookie。但是Web 存儲(chǔ)需要更加的安全與快速. 這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上.它也可以存儲(chǔ)大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.

數(shù)據(jù)以 鍵/值 對(duì)存在, web網(wǎng)頁(yè)的數(shù)據(jù)只允許該網(wǎng)頁(yè)訪問使用。

localStorage 和 sessionStorage?

客戶端存儲(chǔ)數(shù)據(jù)的兩個(gè)對(duì)象為：

localStorage - 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，直到手動(dòng)去除。

sessionStorage - 用于臨時(shí)保存同一窗口(或標(biāo)簽頁(yè))的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)。

localStorage 對(duì)象

localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

localStorage.sitename="菜鳥教程";

document.getElementById("result").innerHTML="網(wǎng)站名：" + localStorage.sitename;

移除 localStorage 中的 "sitename" :

localStorage.removeItem("sitename");

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：

保存數(shù)據(jù)：localStorage.setItem(key,value);

讀取數(shù)據(jù)：localStorage.getItem(key);

刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);

刪除所有數(shù)據(jù)：localStorage.clear();

得到某個(gè)索引的key：localStorage.key(index);

實(shí)例展示了用戶點(diǎn)擊按鈕的次數(shù)。

if (localStorage.clickcount){?

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

????????else{ ????

????????????????localStorage.clickcount=1;}

document.getElementById("result").innerHTML=" 你已經(jīng)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 ";

Web Storage 開發(fā)一個(gè)簡(jiǎn)單的網(wǎng)站列表程序

網(wǎng)站列表程序?qū)崿F(xiàn)以下功能：

? ??可以輸入網(wǎng)站名，網(wǎng)址，以網(wǎng)站名作為key存入localStorage；

? ??根據(jù)網(wǎng)站名，查找網(wǎng)址；

? ??列出當(dāng)前已保存的所有網(wǎng)站；

//保存數(shù)據(jù) function save(){

? ? var siteurl = document.getElementById("siteurl").value;?

? ? var sitename = document.getElementById("sitename").value;?

? ? localStorage.setItem(sitename, siteurl);

? ? alert("添加成功");}

//查找數(shù)據(jù)? function find(){?

? ? var search_site = document.getElementById("search_site").value;?

? ? var sitename = localStorage.getItem(search_site);?

? ? var find_result = document.getElementById("find_result");?

? ? find_result.innerHTML = search_site + "的網(wǎng)址是：" + sitename;? }

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">

? ? <label for="sitename">網(wǎng)站名(key)：</label>?

? ? <input type="text" id="sitename" name="sitename" class="text"/>?

? ? <br/>?

? ? <label for="siteurl">網(wǎng) 址(value)：</label>?

? ? <input type="text" id="siteurl" name="siteurl"/>?

? ? <br/>?

? ? <input type="button" onclick="save()" value="新增記錄"/>?

? ? <hr/>?

? ? <label for="search_site">輸入網(wǎng)站名：</label>?

? ? <input type="text" id="search_site" name="search_site"/>?

? ? <input type="button" onclick="find()" value="查找網(wǎng)站"/>?

? ? <p id="find_result"><br/></p>? </div>

HTML5 Web SQL 數(shù)據(jù)庫(kù)

Web SQL 數(shù)據(jù)庫(kù) API 并不是 HTML5 規(guī)范的一部分，但是它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫(kù)的 APIs。如果你是一個(gè) Web 后端程序員，應(yīng)該很容易理解 SQL 的操作。Web SQL 數(shù)據(jù)庫(kù)可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。

核心方法

以下是規(guī)范中定義的三個(gè)核心方法：

1，openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫(kù)或者新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象。

2，transaction：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。

3，executeSql：這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢。

打開數(shù)據(jù)庫(kù)

我們可以使用 openDatabase() 方法來(lái)打開已存在的數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在，則會(huì)創(chuàng)建一個(gè)新的數(shù)據(jù)庫(kù)，

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

openDatabase() 方法對(duì)應(yīng)的五個(gè)參數(shù)說(shuō)明：

1，數(shù)據(jù)庫(kù)名稱

2，版本號(hào)

3，描述文本

4，數(shù)據(jù)庫(kù)大小

5，創(chuàng)建回調(diào)(會(huì)在創(chuàng)建數(shù)據(jù)庫(kù)后被調(diào)用)

執(zhí)行查詢操作

執(zhí)行操作使用 database.transaction() 函數(shù)：

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

插入數(shù)據(jù)

在執(zhí)行上面的創(chuàng)建表語(yǔ)句后，我們可以插入一些數(shù)據(jù)：

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

讀取數(shù)據(jù)

以下實(shí)例演示了如何讀取數(shù)據(jù)庫(kù)中已經(jīng)存在的數(shù)據(jù)：

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>查詢記錄條數(shù): " + 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('DELETE FROM LOGS WHERE id=1');});

刪除指定的數(shù)據(jù)id也可以是動(dòng)態(tài)的：

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

更新指定的數(shù)據(jù)id也可以是動(dòng)態(tài)的：

db.transaction(function(tx) {?

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • _________________________________________________________...
    fastwe閱讀 953評(píng)論 0贊 0
  • HTML5 Web 存儲(chǔ) HTML5 應(yīng)用程序緩存HTML5 Web SQL 數(shù)據(jù)庫(kù)Web SQL 數(shù)據(jù)庫(kù) API...
    依依玖玥閱讀 814評(píng)論 0贊 1
  • 瀏覽器緩存（Browser Caching）是瀏覽器端保存數(shù)據(jù)用于快速讀取或避免重復(fù)資源請(qǐng)求的優(yōu)化機(jī)制，有效的緩存...
    fuyou2324閱讀 5,298評(píng)論 0贊 8
  • Web SQL數(shù)據(jù)庫(kù)API 并不是HTML5規(guī)范的一部分，但是他是一個(gè)獨(dú)立的規(guī)范，引入一組使用SQL操作客戶端數(shù)據(jù)...
    龍飝閱讀 596評(píng)論 0贊 1
  • SGML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言）和HTML（超文本標(biāo)記語(yǔ)言），XML（可擴(kuò)展標(biāo)記語(yǔ)言）和HTML的之間有什么關(guān)系？ S...
    王培921223閱讀 1,434評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容