HTML5学习,常用常记(语义元素,Web存储(。。。))

el/2024/4/13 14:23:47

什么是语义元素?

  • 一个语义元素能够清楚的描述其意义给浏览器和开发者。
  • 无语义 元素实例: <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 onclick="clickCounter()" 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 onclick="clickCounter()" 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" onclick="save()" value="新增记录"/>  <hr/>  <label for="search_phone">输入网站名:</label>  <input type="text" id="search_site" name="search_site"/>  <input type="button" onclick="find()" 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" onclick="save()" value="新增记录"/>  <hr/>  <label for="search_phone">输入别名(key):</label>  <input type="text" id="search_site" name="search_site"/>  <input type="button" onclick="find()" 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>

 


http://www.ngui.cc/el/2274569.html

相关文章

HTML5学习,常用常记(Web SQL,应用程序缓存)

HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分&#xff0c;但是它是一个独立的规范&#xff0c;引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员&#xff0c;应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程&#x…

HTML5学习,常用常记(Web Worker,服务器发送事件,其他功能)

什么是 Web Worker&#xff1f; 当在 HTML 页面中执行脚本时&#xff0c;页面的状态是不可响应的&#xff0c;直到脚本已完成。web worker 是运行在后台的 JavaScript&#xff0c;独立于其他脚本&#xff0c;不会影响页面的性能。您可以继续做任何愿意做的事情&#xff1a;点击…

JAVA概述(知到课程 + 菜鸟教程随笔)

一次编写&#xff0c;处处运行&#xff1b; 字节码文件&#xff0c;JAVA虚拟机&#xff1b; 面向对象&#xff0c;封装继承多态&#xff0c;多线程&#xff1b; JAVA 2se桌面开发低端商务应用 1ee企业 3me消费产品和嵌入式设备&#xff1b; jar.exe打包java文件&#xff0c…

JAVA学习,常用常记(基础语法,标识符,修饰符,关键字,注释(菜鸟教程))

Java 基础语法 一个Java程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。 对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c…

JAVA学习,常用常记(标识符,数据类型,运算符,分支语句,循环语句,跳转语句(知到))

呃&#xff0c;学过C和Python之后直接过掉就好了&#xff0c;自己拼的标识符一般不会搞出关键字的&#xff1b; 所有语言中&#xff08;我接触到的&#xff09;&#xff0c;html css不区分大小写&#xff0c;其他语言区分大小写&#xff08;对大小写敏感&#xff09;&#xf…

JAVA学习,常用常记(基本数据类型补充(包装类,min,max),转义,三种变量类型,静态成员函数和类变量(菜鸟教程补充))

Java 的两大数据类型: 内置数据类型引用数据类型 public class PrimitiveTypeTest { public static void main(String[] args) { // byte System.out.println("基本类型&#xff1a;byte 二进制位数&#xff1a;" Byte.SIZE); System.out.println("包装类…

JAVA学习,常用常记(运算符,增强for循环(菜鸟教程补充))

instanceof 运算符 该运算符用于操作对象实例&#xff0c;检查该对象是否是一个特定类型&#xff08;类类型或接口类型&#xff09;。 如果运算符左侧变量所指的对象&#xff0c;是操作符右侧类或接口(class/interface)的一个对象&#xff0c;那么结果为真。 String name &…

JAVA学习,常用常记(类和对象,构造方法,方法重载,类变量,this,垃圾回收机制,静态代码块(菜鸟教程+知到))

对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c;它的状态有&#xff1a;颜色、名字、品种&#xff1b;行为有&#xff1a;摇尾巴、叫、吃等。类&#xff1a;类是一个模板&#xff0c;它描述一类对象的状态&#xf…

JAVA学习,常用常记(封装性,不可变对象,UML类图及关系(知到))

封装&#xff1a;将类的某些信息隐藏在类内部&#xff0c;不允许外部程序直接访问&#xff0c;而是通过该类提供的方法来实现对隐藏信息的操作和访问。 高内聚&#xff0c;低耦合 比较好&#xff1b; 耦合度高了之后会 牵一发而动全身&#xff1b; 封装性&#xff0c;安全性&a…

CSS概述(学习菜鸟教程随笔)

使用 CSS 同时控制多重网页的样式和布局&#xff1b; HTML/CSS/JS在线工具&#xff1b; 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中&#xff0c;是为了解决内容与表现分离的问题外部…