HTML5 语义元素
语义 = 意义
语义元素 = 有意义的元素
什么是语义元素?
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div>
和 <span>
- 无需考虑内容.
语义元素实例: <form>, <table>, and <img>
- 清楚的定义了它的内容.
许多现有网站都包含以下HTML代码:
<div id="nav">, <div class="header">,
或者 <div id="footer">,
来指明导航链接, 头部, 以及尾部.
HTML5 提供了新的语义元素来明确一个HTML页面的不同部分:
<header> / <nav> / <section> / <article> / <aside> / <figcaption> / <figure> / <footer>
HTML5 <header>
元素
<header>
元素描述了文档的头部区域
<header>
元素主要用于定义内容的介绍展示区域.
在页面中你可以使用多个<header>
元素.
HTML5 <nav>
元素
<nav>
标签定义导航链接的部分。
<nav>
元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在 <nav>
元素中!
HTML5<article>
元素
<article>
标签定义独立的内容。
HTML5 <section>
元素
<section>
标签定义文档中的节(section、区段)。
比如章节、页眉、页脚或文档中的其他部分。根据W3C HTML5文档: section 包含了一组内容及其标题。
HTML5<aside>
元素
<aside>
标签定义页面主区域内容之外的内容(比如侧边栏)
HTML5 <footer>
元素
<footer>
元素描述了文档的底部区域.
<footer>
元素应该包含它的包含元素
一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等
文档中你可以使用多个<footer>
元素.
HTML5 <figure>
和 <figcaption>
元素
<figure>
标签规定独立的流内容(图像、图表、照片、代码等等)。
<figure>
元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
<figcaption>
标签定义 <figure>
元素的标题.
<figcaption>
元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5 Video(视频)
大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<video>
元素提供了 播放、暂停和音量控件来控制视频。
同时 <video>
元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。
如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
<video>
与</video>
标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video>
元素支持多个 <source>
元素.<source>
元素可以链接不同的视频文件。
浏览器将使用第一个可识别的格式。
当前, <video>
元素支持三种视频格式: MP4, WebM, 和 Ogg。
HTML5 <video>
- 使用 DOM 进行控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
</head>
<body>
<video width="300px" height="300px" controls="controls">
<source src="shipin.mp4" type="video/mp4"></source>
</video>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
</head>
<body>
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<br />
<video id="video1" width="400px" height="400px" controls="controls">
<source src="shipin1.mp4" type="video/mp4"></source>
</video>
<script>
//得到video的dom对象
var myVideo=document.getElementById("video1");
//暂停/播放
function playPause(){
//paused--判断视频是否被暂停
if(myVideo.paused){
//播放
myVideo.play();
}else{
//暂停
myVideo.pause();
}
}
//放大
function makeBig(){
myVideo.window=500;
myVideo.height=600;
}
//缩小
function makeSmall(){
myVideo.window=300;
myVideo.height=300;
}
</script>
</body>
</html>
HTML5 Audio(音频)
大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio>
元素。
controls 属性供添加播放、暂停和音量控件。
在<audio>
与 </audio>
之间你需要插入浏览器不支持的<audio>
元素的提示文本 。
<audio>
元素允许使用多个<source>
元素.<source>
元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。
目前, <audio>
元素支持三种音频格式文件: MP3, Wav, 和 Ogg。
HTML5 <audio >
- 使用 DOM 进行控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio</title>
</head>
<body>
<button onclick="playPause()">播放/暂停</button>
<audio id="myabdio1" controls="controls">
<source src="audio.mp3"></source>
</audio>
<script>
var myabdio1=document.getElementById("myabdio1");
function playPause(){
//paused--判断音频是否被暂停
if(myabdio1.paused){
myabdio1.play();
}else{
myabdio1.pause();
}
}
</script>
</body>
</html>
HTML5 Web 存储
什么是 HTML5 Web 存储?
HTML5 web 存储,一个比cookie更好的本地存储方式。
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
键/值-----书的目录就是典型的键/值数据结构。
书的标题【键】----页码【值】
localStorage 和 sessionStorage
客户端【浏览器】存储数据的两个对象为:
localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage。
localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage </title>
<script>
function testlocalStorage(){
if(typeof(Storage)!=="undefined"){
if(localStorage.clickcount){
var count=localStorage.clickcount;
count++;
localStorage.clickcount=count;
}else{
localStorage.clickcount=1;
}
//alert("ssss");
document.getElementsByTagName("h1")[0].innerHTML=localStorage.clickcount;
}else{
document.getElementsByTagName("h1")[0].innerHTML="对不起,您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<input type="button" value="测试localStorage" onclick="testlocalStorage();" />
<h1></h1>
</body>
</html>
sessionStorage 对象
用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
注意: 键/值对通常以字符串存储,需要转换该格式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sessionStorage</title>
<script>
function testsessionStorage(){
if(typeof(Storage)!=="undefined"){
if(sessionStorage.clickcount){
var count=sessionStorage.clickcount;
count++;
sessionStorage.clickcount=count;
}else{
sessionStorage.clickcount=1;
}
document.getElementsByTagName("h1")[0].innerHTML=sessionStorage.clickcount;
}else{
document.getElementsByTagName("h1")[0].innerHTML="对不起,您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<input type="button" value="测试sessionStorage" onclick="testsessionStorage();" />
<h1></h1>
</body>
</html>
localStorage和sessionStorage区别
- localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
2.它们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
3.localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
4.sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也 就被清空了。
5不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页 面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一
个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
6.localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。
- sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同
一窗口(也就是浏览器的标签页)下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function testlocalStorage(){
//如果判断储存不为未定义值
if(typeof(Storage)!=="undefined"){
//读取数据:localStorage.getItem(key);
//*1,转换为数字类型
if(localStorage.getItem("clicknum")*1){
var num=localStorage.getItem("clicknum")*1;
num++;
localStorage.setItem("clicknum",num);
}else{
//保存数据:localStorage.setItem(key,value);
localStorage.setItem("clicknum",1);
}
document.getElementsByTagName("h1")[0].innerHTML=localStorage.getItem("clicknum");
}else{
document.getElementsByTagName("h1")[0].innerHTML="对不起,您的浏览器不支持 web 存储。";
}
}
function exit(){
if(typeof(Storage)!=="undefined"){
//删除单个数据:localStorage.removeItem(key);
localStorage.removeItem("clicknum");
//删除所有数据:localStorage.clear();
//localStorage.clear();
}else{
document.getElementsByTagName("h1")[0].innerHTML="对不起,您的浏览器不支持 web 存储。";
}
window.close();
}
</script>
</head>
<body>
<input type="button" value="测试localstorage" onclick="testlocalStorage();" />
<input type="button" value="exit" onclick="exit()" />
<h1></h1>
</body>
</html>