[学习交流] 【上海校区】HTML5学习，常用常记（语义元素，Web存储（。...

什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
HTML5 <section> 元素

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
根据W3C HTML5文档: section 包含了一组内容及其标题。
<section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
    <h1>WWF's Panda symbol</h1>
    <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
HTML5 <article> 元素

<article> 标签定义独立的内容。.
<article> 元素使用实例:
Forum post
Blog post
News story
Comment
<article>
    <h1>Internet Explorer 9</h1>
    <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。
<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <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> 标签定义页面主区域内容之外的内容（比如侧边栏）。
aside 标签的内容应与主区域的内容相关.
<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>元素描述了文档的头部区域
<header>元素主要用于定义内容的介绍展示区域.
在页面中你可以使用多个<header> 元素.
<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发布的</p>
</article>
HTML5 <footer> 元素

<footer> 元素描述了文档的底部区域.
<footer> 元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
文档中你可以使用多个 <footer>元素.
<footer>
    <p>Posted by: Hege Refsnes</p>
    <p><time pubdate datetime="2012-03-01"></time></p>
</footer>
HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure>元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption>标签定义 <figure> 元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
以上的元素都是块元素(除了<figcaption>).
为了让这些块级元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):
header, section, footer, aside, nav, article, figure{
display: block;
}

HTML5 web 存储,一个比cookie更好的本地存储方式

什么是 HTML5 Web 存储?

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

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

localStorage 对象存储的数据没有时间限制
<script>
if(typeof(Storage)!=="undefined"){
    localStorage.sitename="菜鸟教程";
    document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}else{
    document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>
实例解析：

使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。
移除 localStorage 中的 "sitename" : localStorage.removeItem("sitename");

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if (localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}else{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>

<body>
<p><button type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>
sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。关闭浏览器窗口数据被删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if (sessionStorage.clickcount){
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}else{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
}else{
document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
}
}
</script>
</head>

<body>
<p><button type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>
Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

可以输入网站名，网址，以网站名作为key存入localStorage；
根据网站名，查找网址；
列出当前已保存的所有网站；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>

<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
      <label for="sitename">网站名(key)：</label>
      <input type="text" id="sitename" name="sitename" class="text"/>
      <br/>
      <label for="siteurl">网址(value)：</label>
      <input type="text" id="siteurl" name="siteurl"/>
      <br/>
      <input type="button" value="新增记录"/>
      <hr/>
      <label for="search_phone">输入网站名：</label>
      <input type="text" id="search_site" name="search_site"/>
      <input type="button" value="查找网站"/>
      <p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
// 载入所有存储在localStorage的数据
loadAll();

//保存数据
function save(){
      var siteurl = document.getElementById("siteurl").value;
      var sitename = document.getElementById("sitename").value;
      localStorage.setItem(sitename, siteurl);
      alert("添加成功");
}
//查找数据
function find(){
      var search_site = document.getElementById("search_site").value;
      var siteurl = localStorage.getItem(search_site);
      var find_result = document.getElementById("find_result");
      find_result.innerHTML = search_site + "的网址是：" + siteurl;
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
      var list = document.getElementById("list");
      if(localStorage.length>0){
         var result = "<table border='1'>";
         result += "<tr><td>key</td><td>value</td></tr>";
         for(var i=0;i<localStorage.length;i++){
            var sitename = localStorage.key(i);
            var siteurl = localStorage.getItem(sitename);
            result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";
         }
         result += "</table>";
         list.innerHTML = result;
      }else{
         list.innerHTML = "数据为空……";
      }
}
</script>
</body>
</html>
以上实例只是演示了简单的 localStorage 存储与查找，更多情况下我们存储的数据会更复杂。

接下来我们将使用 JSON.stringify 来存储对象数据，JSON.stringify 可以将对象转换为字符串。

之后我们使用 JSON.parse 方法将字符串转换为 JSON 对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
      <label for="keyname">别名(key):</label>
      <input type="text" id="keyname" name="keyname" class="text"/>
      <br/>
      <label for="sitename">网站名：</label>
      <input type="text" id="sitename" name="sitename" class="text"/>
      <br/>
      <label for="siteurl">网址：</label>
      <input type="text" id="siteurl" name="siteurl"/>
      <br/>
      <input type="button" value="新增记录"/>
      <hr/>
      <label for="search_phone">输入别名(key)：</label>
      <input type="text" id="search_site" name="search_site"/>
      <input type="button" value="查找网站"/>
      <p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
//保存数据
function save(){
      var site = new Object;
      site.keyname = document.getElementById("keyname").value;
      site.sitename = document.getElementById("sitename").value;
      site.siteurl = document.getElementById("siteurl").value;
      var str = JSON.stringify(site); // 将对象转换为字符串
      localStorage.setItem(site.keyname,str);
      alert("保存成功");
}
//查找数据
function find(){
      var search_site = document.getElementById("search_site").value;
      var str = localStorage.getItem(search_site);
      var find_result = document.getElementById("find_result");
      var site = JSON.parse(str);
      find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}

//将所有存储在localStorage中的对象提取出来，并展现到界面上
// 确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错
function loadAll(){
      var list = document.getElementById("list");
      if(localStorage.length>0){
         var result = "<table border='1'>";
         result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";
         for(var i=0;i<localStorage.length;i++){
            var keyname = localStorage.key(i);
            var str = localStorage.getItem(keyname);
            var site = JSON.parse(str);
            result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";
         }
         result += "</table>";
         list.innerHTML = result;
      }else{
         list.innerHTML = "数据为空...";
      }
}
</script>
</body>
</html>

---------------------
【转载，仅作分享，侵删】
作者：hhjian6666
原文：https://blog.csdn.net/qq_30796379/article/details/88363061
版权声明：本文为博主原创文章，转载请附上博文链接！

不二晨 · 不二晨

奈斯，感谢分享

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】HTML5学习，常用常记（语义元素，Web存储（。...

1 个回复