从零开始的html教程(6):超链接的知识与html5播放视频
一、如何链接到其他网页?
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。
html中插入<a>标签就可以添加超链接了,具体格式是这样的<a href="url">XXX</a>。其中href属性规定了规定了超链接链接的目标。开始标签与结束标签之间的文本就是超链接本身,网页中浏览时可以点击该文本链接到具体地址,鼠标移到这几个文字上面时,鼠标指针会变成伸出食指的手。
<a href="url">XXX</a>中间不一定是文字,插入一个<img>标签可以实现点击图片链接到其他网页的效果。
二、在新窗口中打开链接
同学们如果试着做了几个超链接并点击几次后一定会发现,新页面不是以我们平常上网时点击链接进入一个新的页面的方式打开的,而是直接在当前页面载入了新的页面,很不方便。给超链接的<a>标签添加一个target 属性,且设置为 "_blank",<a href="video.html" target="_blank">,点击的时候就会在新的页面打开链接了!
三、html5中插入视频
超链接我们已经会了,现在来做一下点击超链接进入视频播放页面吧。如今大部分网页都是靠flash来实现视频播放的,html5也提供了视频播放的标准方法<video>标签。<video src="movie.mp4" controls="controls">您的浏览器不支持播放此视频</video>,这里面src属性规定了video的路径(跟图片同理),controls属性提供添加播放、暂停和音量控件,标签中间的文本是当浏览器无法播放视频时显示的文字。
1.在一开始制作的页面上添加一个超链接,链接到一个新建的页面:
<div>
<a href="video.html" target="_blank">视频播放</a>
</div>
2.新的页面添加视频播放的<video>标签:
<video src="video.mp4" controls>您的浏览器不支持播放此视频</video>
大功告成!简易的视频播放页面就做出来了。这次学会了非常重要的超链接的知识以及html5新增的插入视频的功能,敬请期待下一篇教程。
附:Video有以下的属性:
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
height pixels 设置视频播放器的高度
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放,如果使用 "autoplay",则忽略该属性
src url 要播放的视频的 URL
width pixels 设置视频播放器的宽度