h5的一些新特性 #10

FanWalker · 2017-10-12T15:46:08Z

一、用于绘画的 canvas 元素

Canvas 通过 JavaScript 来绘制 2D 图形。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

<canvas id="myCanvas"></canvas>
 
<script type="text/javascript">
      var canvas=document.getElementById('myCanvas');
      var ctx=canvas.getContext('2d');
      ctx.fillStyle='#FF0000';
      ctx.fillRect(0,0,80,100);
</script>

浏览器支持

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。

二、用于媒介回放的 video 和 audio 元素

<video> 标签定义视频，比如电影片段或其他视频流。
目前，

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 标签。
注释：IE 8 或更早版本的 IE 浏览器不支持<video> 标签。

<audio> 标签定义声音，比如音乐或其他音频流。
目前，元素支持的3种文件格式：MP3、Wav、Ogg。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持标签。
注释： IE 8 或更早版本的 IE 浏览器不支持标签。

三、对本地离线存储的更好的支持

h5提供了sessionStorage、localStorage和indexedDB加强本地存储。

localStorage和sessionStorage的区别：
sessionStorage基于会话，关闭浏览器之后存储消失；
localStorage - 没有时间限制的数据存储，可永久存储。

浏览器支持

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
注意: Internet Explorer 7 及更早IE版本不支持web 存储.

四、语义标签

article：定义页面独立的内容区域
<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<article> 的潜在来源：
1、论坛帖子
2、博客文章
3、新闻故事
4、评论

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

footer：定义section或document的页脚
<footer> 标签定义文档或者文档的一部分区域的页脚。
<footer> 元素应该包含它所包含的元素的信息。
在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
在一个文档中，您可以定义多个

元素。

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

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

nav：定义导航链接的部分
并不是所有的 HTML 文档都要使用到

元素。元素只是作为标注一个导航链接的区域。
在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

section：定义文档中的节（section、区段）。
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

等等

已移除的元素

<center>、<dir>、<font>、<frame>、<frameset>等

五、web workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。就像计算机能够同一时间运行多个应用程序一样，这些“后台线程”能够响应用户的滚屏、点击、或者输入操作，同时做一些复杂的计算、发送网络请求、或者操作本地存储数据库。
检测方法：若支持，window对象有一个worker属性；若不支持，则此值为undefined

六、应用程序缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
优势：
1、离线浏览 - 用户可在应用离线时使用它们
2、速度 - 已缓存资源加载得更快
3、减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

在文档的标签中包含 manifest 属性，启用应用程序缓存

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"

七、输入框类型

HTML5为元素新增了13种的type：
search、number、range、color、tel、url、email、date、month、week、time、dateTime、dateTime-local。
HTML5还为input元素对象增加了占位文本placeHolder属性和自动聚焦autoFocus属性

具体信息参考：

HTML 5 教程

The text was updated successfully, but these errors were encountered:

FanWalker added the html5 label Oct 12, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

h5的一些新特性 #10

h5的一些新特性 #10

FanWalker commented Oct 12, 2017 •

edited

Loading

h5的一些新特性 #10

h5的一些新特性 #10

Comments

FanWalker commented Oct 12, 2017 • edited Loading

一、用于绘画的 canvas 元素

浏览器支持

二、用于媒介回放的 video 和 audio 元素

浏览器支持

浏览器支持

三、对本地离线存储的更好的支持

浏览器支持

四、语义标签

已移除的元素

五、web workers

六、应用程序缓存

七、输入框类型

具体信息参考：

FanWalker commented Oct 12, 2017 •

edited

Loading