HTML5 基础总结学习
2014-11-13 18:37
465 查看
1- HTML5 的上一个版本是 HTML4.0.1；
2- HTML5 的一些新特性（部分）：
|-提供了在网页上绘图的标签-canvas
|-提供了播放媒体的video 和 audio 标签
|-提高了Web存储能力，有localStorage和 sessionStorage
|-其中 localStorage :存储的数据无时间限制，比如可以用于记录，用户第几次登录本网站；
|-其中 sessionStorage :存储基于session的数据，一个session 对应一个sessionStorage;当客户端浏览器关闭，sessionStorage存储的数据销毁；
|-共同点：存储数据量大，比cookie效率高；
|-提供了Web应用程序缓存：
|-第一次用户反问本网站，会将指定的网页信息存储下来，再次访问本网页，会从这个文件缓存中读内容；提高访问速度，提高了用户体验；
|-即使在离线的情况下，也可以浏览信息，由于这些信息已经实现存储在了程序缓存文件中；
|-减少了服务器的负载；
注：这里存在一个弊端：用户再次访问的数据是否和服务器资源同步了呢？因为再次访问是缓存的资源，怎么能做到和服务器资源保持同步呢？
官方文档提供了一个解决方案(我觉得不怎么好，我也没想到呢，正在思考...):
---以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
|-提供了服务器发送事件（server-sent event）功能，使得网页自动获取服务器更新的资源，时时保持数据的同步；类似于轮询的一种；
3- 部分标签及功能简单使用：
3.1-canvas标签：HTML5的canvas标签使用javascript在画布上绘图；
[基本主流浏览器都支持]
-在页面上添加 canvas 元素（画布）。
-规定画布的id、宽度和高度：
<span style="font-size:14px;"><canvas id="myCanvas"width="200" height="100"></canvas></span>-开始绘制-矩形
-或
<span style="font-size:14px;">context.beginPath();
context.strokeStyle="#000000";
context.moveTo(80,150);
context.rect(10,60,80,100);
context.stroke();</span>
3.2-audio 标签：之前大部分的媒体播放都是通过flash插件来完成的；
目前，audio支持3种音频格式：
- Ogg Vorbis： Firefox 3.5 Opera10.5 Chrome 3.0 支持；
- MP3: IE 9 Chrome 3.0 Safari3.0 支持；
-Wav: Firefox 3.5 Opera10.5 Safari3.0 支持；
添加 audio 元素：
Audio标签的几个属性：
Autoplay:
<audio controls="controls"autoplay="autoplay">
autoplay属性规定一旦音频就绪马上开始播放。
如果设置了该属性，音频将自动播放。
Controls:
<audio controls="controls">
controls 属性规定浏览器应该为音频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。
Loop:
<audio controls="controls" loop="loop">
loop 属性规定当音频结束后将重新开始播放。如果设置该属性，则音频将循环播放。
Preload:
preload 属性规定是否在页面加载后载入音频。
如果设置了 autoplay 属性，则忽略该属性。
Src:
src 属性规定要播放的音频的 URL。
3.3- video 标签：一样的，以前的在网页播放视频，使用flash插件；就我个人感觉，我觉得flash麻烦，flash插件过段时间还得升级...
目前，video 元素支持三种视频格式：
-Ogg：Firefox Opera Chrome支持；
-MPEG 4：IE Chrome Safari 支持；
-WebM：Firefox Opera Chrome支持；
添加 video 元素：
Video标签的几个属性：
loop 属性规定当视频结束后将重新开始播放。
如果设置该属性，则视频将循环播放。
preload 属性规定是否在页面加载后载入视频。
如果设置了 autoplay 属性，则忽略该属性。
Src：
src 属性规定要播放的视频的 URL。
3.4-Web存储：
有两种在客户端存储数据的方法：
-localStorage：
实例
-sessionStorage：
实例
3.5-Web应用程序缓存：
如果需要缓存页面信息的话，在<html>标签中加入：
这样的话，客户端访问带有mainfest属性的html时，就会缓存此页面的指定信息到缓存；
注：manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
示例：
【完整的 Manifest 文件】
<span style="font-size:14px;">CACHE MANIFEST
# 2012-02-21v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html</span>
2- HTML5 的一些新特性（部分）：
|-提供了在网页上绘图的标签-canvas
|-提供了播放媒体的video 和 audio 标签
|-提高了Web存储能力，有localStorage和 sessionStorage
|-其中 localStorage :存储的数据无时间限制，比如可以用于记录，用户第几次登录本网站；
|-其中 sessionStorage :存储基于session的数据，一个session 对应一个sessionStorage;当客户端浏览器关闭，sessionStorage存储的数据销毁；
|-共同点：存储数据量大，比cookie效率高；
|-提供了Web应用程序缓存：
|-第一次用户反问本网站，会将指定的网页信息存储下来，再次访问本网页，会从这个文件缓存中读内容；提高访问速度，提高了用户体验；
|-即使在离线的情况下，也可以浏览信息，由于这些信息已经实现存储在了程序缓存文件中；
|-减少了服务器的负载；
注：这里存在一个弊端：用户再次访问的数据是否和服务器资源同步了呢？因为再次访问是缓存的资源，怎么能做到和服务器资源保持同步呢？
官方文档提供了一个解决方案(我觉得不怎么好，我也没想到呢，正在思考...):
---以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
|-提供了服务器发送事件（server-sent event）功能，使得网页自动获取服务器更新的资源，时时保持数据的同步；类似于轮询的一种；
3- 部分标签及功能简单使用：
3.1-canvas标签：HTML5的canvas标签使用javascript在画布上绘图；
[基本主流浏览器都支持]
-在页面上添加 canvas 元素（画布）。
-规定画布的id、宽度和高度：
<span style="font-size:14px;"><canvas id="myCanvas"width="200" height="100"></canvas></span>-开始绘制-矩形
<span style="font-size:14px;"><scripttype="text/javascript">
varc=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script></span>-或
<span style="font-size:14px;">context.beginPath();
context.strokeStyle="#000000";
context.moveTo(80,150);
context.rect(10,60,80,100);
context.stroke();</span>
3.2-audio 标签：之前大部分的媒体播放都是通过flash插件来完成的；
目前，audio支持3种音频格式：
- Ogg Vorbis： Firefox 3.5 Opera10.5 Chrome 3.0 支持；
- MP3: IE 9 Chrome 3.0 Safari3.0 支持；
-Wav: Firefox 3.5 Opera10.5 Safari3.0 支持；
添加 audio 元素：
<span style="font-size:14px;"><audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audiotag. </audio></span>
Audio标签的几个属性：
Autoplay:
<audio controls="controls"autoplay="autoplay">
autoplay属性规定一旦音频就绪马上开始播放。
如果设置了该属性，音频将自动播放。
Controls:
<audio controls="controls">
controls 属性规定浏览器应该为音频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。
Loop:
<audio controls="controls" loop="loop">
loop 属性规定当音频结束后将重新开始播放。如果设置该属性，则音频将循环播放。
Preload:
<audio controls="controls" [code]preload="auto">[/code]
preload 属性规定是否在页面加载后载入音频。
如果设置了 autoplay 属性，则忽略该属性。
Src:
<audio [code]src="song.ogg"controls="controls">[/code]
src 属性规定要播放的音频的 URL。
3.3- video 标签：一样的，以前的在网页播放视频，使用flash插件；就我个人感觉，我觉得flash麻烦，flash插件过段时间还得升级...
目前，video 元素支持三种视频格式：
-Ogg：Firefox Opera Chrome支持；
-MPEG 4：IE Chrome Safari 支持；
-WebM：Firefox Opera Chrome支持；
添加 video 元素：
<videowidth="320" height="240" controls="controls"> <source src="movie.ogg"type="video/ogg"> <source src="movie.mp4"type="video/mp4"> Your browser does not supportthe video tag. </video>
Video标签的几个属性：
Autoplay：[/code]
<video controls="controls" [code]autoplay="autoplay">[/code]
autoplay 属性规定一旦视频就绪马上开始播放。
如果设置了该属性，视频将自动播放。
Controls ：
<video [code]controls="controls"controls="controls">[/code]
Width和Height：
<video [code]width="320"
height="240"controls="controls">[/code]
width 属性指定视频播放器的宽度。
height 属性指定视频播放器的高度。
Loop：
<video controls="controls" [code]loop="loop">[/code]
loop 属性规定当视频结束后将重新开始播放。
如果设置该属性，则视频将循环播放。
Preload：[/code]
<video controls="controls" [code]preload="auto">[/code]
preload 属性规定是否在页面加载后载入视频。
如果设置了 autoplay 属性，则忽略该属性。
Src：
<video controls="controls" [code]src="movie.ogg">[/code]
src 属性规定要播放的视频的 URL。
3.4-Web存储：
有两种在客户端存储数据的方法：
-localStorage：
实例
<span style="font-size:14px;"> <scripttype="text/javascript">
if(localStorage.pagecount)
{
localStorage.pagecount++；
}
else
{
localStorage.pagecount=1;
}
document
cc63
.write('您是第 '+localStorage.pagecount+' 次使用 此浏览器 访问本网页！');
</script></span>-sessionStorage：
实例
<span style="font-size:14px;"> <scripttype="text/javascript">
if(sessionStorage.pagecount)
{
sessionStorage.pagecount++；
}
else
{
sessionStorage.pagecount=1;
}
document.write(‘您这次访问本网页已经’+sessinStorage+’次了’);
</script></span>3.5-Web应用程序缓存：
如果需要缓存页面信息的话，在<html>标签中加入：
<span style="font-size:14px;"><htmlmanifest="demo.appcache"> ... </html></span>
这样的话，客户端访问带有mainfest属性的html时，就会缓存此页面的指定信息到缓存；
注：manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
示例：
<span style="font-size:14px;"><mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping> </span>
【完整的 Manifest 文件】
<span style="font-size:14px;">CACHE MANIFEST
# 2012-02-21v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html</span>
其中-
-CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与服务器断开连接，这些资源依然是可用的。
-NETWORK
NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：
NETWORK:
login.asp
-FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
-缓存被修改的情况，出现在：
-应用被缓存，它就会保持缓存直到发生下列情况：
-用户清空浏览器缓存
-manifest 文件被修改（参阅下面的提示）
-由程序来更新应用缓存
注：Web缓存 不可能无限制的缓存，有一定的容量限制：
某些浏览器限制为5MB；
更多详细内容，请参见-
http://www.w3school.com.cn/html5/index.asp
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【如何学习一门新语言】HTML5基础培训总结
- 前端学习总结（一）HTML5基础
- 前端学习总结（一）HTML5基础
- C#学习总结之一基础语法篇
- Android学习基础要点总结
- 《JavaScript高级程序设计》学习总结之ECMAScript基础（一）
- Perl基础学习总结
- jQuery基础学习技巧总结第1/4页
- jQuery基础学习技巧总结
- Java学习总结之第一章Java基础
- SQL 2000基础学习(自己总结)
- D3D学习总结渲染篇（一）--基础理论
- Makefile基础 -- Unix学习总结之二
- VS2010 学习笔记 WF4 (9) 工作流基础总结
- http协议学习和总结系列——基础概念篇
- c#基础知识总结学习
- linux c 基础学习总结之文件IO
- oracle学习总结一（基础）
- J2SE基础学习总结9月22号
- D3D学习总结基础篇（二）--从古墓丽影的画面设置了解基础概念