百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>网页制作> 从零开始的html教程(6):超链接的知识与html5播放视频
分享文章到:

从零开始的html教程(6):超链接的知识与html5播放视频

发布时间:01/14 来源: 浏览: 关键词:
一聚教程网 从零开始的html教程(6),超链接的使用和html5插入视频,零基础也能轻松学会html,希望大家喜欢

一、如何链接到其他网页?

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

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    设置视频播放器的宽度

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有6人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板