关于H5的一些新标签

2016-05-01  本文已影响1137人  高级民工

HTML有两大特点

首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。其次,追加了本地数据库等Web应用的功能。

新增的结构标签(战斗力几乎为0)

<article> 定义文章 <aside> 定义文章的侧边栏<figure> 一组媒体对象以及文字<figcaption> 定义 figure 的标题<footer>定义页脚
<header>定义页眉<nav>定义导航<section> 定义文档中的区段

新增加功能标签

<video> 定义视频<audio> 定义音频<embed> 插入各种多媒体<mark> 定义需要突出显示或高亮显示的文本<iframe>会创建包含另外一个文档的内联框架(即行内框架)<canvas>定义图形,提供画布

虽然新加入了这么多标签,但是我觉得大部分都是鸡肋,也或许是我对于新标签的理解不深(意思就是我太菜了).下面我就介绍几个我个人认为其中有用的标签.

canvas

首先canvas(画布),HTML5之所以能够崛起完全是他的功劳,传统网页的动画效果
全部基于Flash,Canvas的出现使网页中动画脱离了Flash,但Canvas是基于位图的图像,它不能够改变大小,只能缩放显示.所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方).
我很想给大家举一些关于Canvas的实际代码例子,可是不好意思我现在的Canvas应用水平实在有限,或许在以后的博客中我能写出更多.

video

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

你只需要在src后面输入值就可以把视频插入到网页中,并且可以自己设置是自动播放视频还是手动播放视频,而且有自己的控制台.

audio

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

和<video>一样<audio>用法一样,也可以自行设置一些关于控制台的属性,再次不做过多说明.

iframe

<iframe> 会创建包含另外一个文档的内联框架(即行内框架)。一般在网页的某一处地方开辟一个空间,镶嵌另一个网页或者图片等,我觉得这个标签一般用来显示天气预报居多,活用<iframe>可以使你的网页看起来高大上一些.由于

<iframe src="www.baidu.com"></iframe>

此处应该放一个浏览器支持情况的截图,但由于这个标签的特殊性和不确定性,支持情况的权威人士也是各执己见,所以就不放截图了,但几乎最新版本的浏览器已经都支持了.

placeholder

占位符,当输入框为空时显示的文字.(这个功能已经很常见了)
注:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Hello
World" />
  <input type="submit" />
</form>

以上是在日常工作或者学习中经常能用的H5新标签,H5其核心还是在Canvas画布这里,小弟也还在学习当中,待学成之时也会单独发表一篇关于画布的文章.希望能对看到这篇文章的帅哥、美女(估计没有)们有所帮助.关于以上标签的具体的操作和属性,也可自行度娘在此不做过多说明.

上一篇下一篇

猜你喜欢

热点阅读