HTML5 基础总结学习

最新推荐文章于 2023-02-14 18:25:45 发布

BigLu_Teacher

最新推荐文章于 2023-02-14 18:25:45 发布

阅读量683

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/luxun2014/article/details/41084295

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;"><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" preload="auto">

preload 属性规定是否在页面加载后载入音频。

如果设置了 autoplay 属性，则忽略该属性。

Src:

<audio src="song.ogg" controls="controls">

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：

<video controls="controls" autoplay="autoplay">

      autoplay 属性规定一旦视频就绪马上开始播放。

如果设置了该属性，视频将自动播放。

Controls ：

<video controls="controls" controls="controls">

Width和Height：

<video width="320" height="240" controls="controls">

width 属性指定视频播放器的宽度。

height 属性指定视频播放器的高度。

Loop：

<video controls="controls" loop="loop">

loop 属性规定当视频结束后将重新开始播放。

如果设置该属性，则视频将循环播放。

Preload ：

<video controls="controls" preload="auto">

preload 属性规定是否在页面加载后载入视频。

如果设置了 autoplay 属性，则忽略该属性。

Src：

<video controls="controls" src="movie.ogg">

src 属性规定要播放的视频的 URL。

3.4-Web存储：

有两种在客户端存储数据的方法：

-localStorage：

实例

<span style="font-size:14px;"> <scripttype="text/javascript">

if(localStorage.pagecount)

  {

  localStorage.pagecount++；

  }

else

  {

  localStorage.pagecount=1;

  }

document.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

BigLu_Teacher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 基础总结学习

HTML5 基础总结学习1- HTML5 的上一个版本是 HTML4.0.1；2- HTML5 的一些新特性（部分）：|-提供了在网页上绘图的标签-canvas|-提供了播放媒体的video 和 audio 标签|-提高了Web存储能力，有localStorage和 sessionStorage |-其中 localStorage :存储的数据无时间限制，比如可以用于记
复制链接

扫一扫