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

一聚教程网从零开始的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" width=100% src="movie.mp4" controls="controls">您的浏览器不支持播放此视频</video>，这里面src属性规定了video的路径（跟图片同理），controls属性提供添加播放、暂停和音量控件,标签中间的文本是当浏览器无法播放视频时显示的文字。

1.在一开始制作的页面上添加一个超链接，链接到一个新建的页面：

<div>

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

小编分享的这篇文章给出了bootstrap如何实现自动轮播的实例代码，希望能帮助到大家

bootstrap图片自动轮播效果图：

代码实现：

<!DOCTYPE html>

<htmllang="zh-CN">

<head>

<linkrel="stylesheet"href="bootstrap.min.css"/>

<linkrel="stylesheet"href="bootstrap-theme.min.css"/>

<scriptsrc="jquery.min.js"></script>

<scriptsrc="bootstrap.min.js"></script>

<style>

#div1 {width:600px; height:500px}

</style>

</head>

<body>

<divid="div1">

<divid="carousel-example-generic"class="carousel slide"data-ride="carousel">

<olclass="carousel-indicators">

<lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>

<lidata-target="#carousel-example-generic"data-slide-to="1"></li>

<lidata-target="#carousel-example-generic"data-slide-to="2"></li>

</ol>

<divclass="carousel-inner"role="listbox">

<divclass="item active">

<imgsrc="airplane1.jpg">

</div>

<divclass="item">

<imgsrc="airplane2.jpg">

</div>

<divclass="item">

<imgsrc="airplane3.jpg">

</div>

<aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev">

<spanclass="glyphicon glyphicon-chevron-left"id="aaron1"></span>

<spanclass="sr-only">Previous</span>

</a>

<aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next">

<spanclass="glyphicon glyphicon-chevron-right"id="aaron2"></span>

<spanclass="sr-only">Next</span>

</a>

</div>

</body>

<html>

以上代码可以实现 div1 中的图片自动轮播，轮播时间默认5000ms。

许多同学想快速学习html或者学好html，这里小编给大家指导一下少走弯路，祝愿每个同学都学有所成！

对于一个从零开始的普通网友，应当通过这三个步骤成为一个合格的网站制作和管理者吧。

一、从手工编写最基本的代码起步：

虽然目前制作网页的工具很多，但我们建议新手务必要从手工编写网页代码起步。一方面，这样可以使你更深刻地理解网页的工作原理，从而认识到制作网页与用Office软件编辑文档的本质区别;另一方面，在很多情况下，相比使用网页制作工具，直接修改网页代码将更为快捷，产生的网页文件容量也更小，结构更为清晰，便于后期维护。

手工编写代码的最佳工具就是Windows系统自带的“记事本”软件，而所编写的代码，我们称之为“Html语言”。使用“记事本”软件，按Html语言所规定的格式书写代码，并在硬盘上将它以“htm”或“html”作为扩展名的文件保存下来，在其上双击鼠标，就可以通过浏览器打开它并查看网页的显示效果。整个过程非常方便，且不用安装额外的软件工具，非常适合没有基础的新手学习。

Html语言本身内容比较多，为了让初学者的学习尽快见效，建议从以下几项内容入手：

(1)网页的结构。

包括：标记网页起始的标记，分隔网页头部的标记，分隔网页体部的标记，初学者可以在标记内随意键入一些文字察看网页的显示效果。

(2)图片标记。学习了这一标记，就可以做出图文并茂的完整网页。同时，也可以使你深刻地理解到：在网页中文字和图片实际上是分成多个文件来存储的，与Word文档将图文存储在一个文件中是完全不同的，而这也往往是初学者最容易误解的地方。

(3)超链接标记。学习了这一标记，就可以通过点击某一行文字，实现转向另一个网页。超链接是互联网世界的魅力所在，浩瀚无穷的信息都是通过无数的超链接联接在一起的。制作超链接，通常需要编写出多个网页文件，并在每个文件中写入不同的链接文字。这也将使你对网站文件的存储方式有更深入的了解。

(4)制作表格的标记。表格是网页中非常重要的元素，除了以列表方式显示数据外，在网页中划分区域、布局文字图片等各种元素，都是通过表格来实现的。掌握了分析表格代码的能力，将会使你在网页的后期维护中如虎添翼。

切实学会了这几样知识，就已开启了制作网页的大门。不管以后应用的技术有多复杂，也都是围绕着这几样技术来展开的。

二、学习制作网页的辅助工具：

学会了手工编写代码，已经可以做出有模有样的网页了，但是难以做出具有一定规模，布局较为复杂的页面。要实现这一目标，还必须借助网页制作辅助工具。

Dreamweave是众多网页制作工具中出类拔萃的一员。然而这个软件功能强大，菜单、按钮繁多，初学者如果为了图省事，一上手就用这个工具来做网页，势必会一头雾水，摸不到方向。如果对网页代码有了比较深入的了解，先想好在代码中可以实现何种效果，再在Dreamweave软件中寻找相应的功能，就会容易得多，也更便于记忆。

在Dreamweaver中，“布局表格”是非常有特色的一项功能，用户通过操控鼠标，在屏幕上划出一个个方块，就可以实现各种网页元素的排布。这也是制作格局复杂的网页的有力工具，需要重点掌握。

三、向建立交互式和基于数据库的网站进军：

以上两种方式，做出的还只是单方面展示信息的网页。要实现访问者和网站之间的真正交互，则必须要通过后台程序来实现。比如，用户在前台页面中输入一些信息，网站后台程序获取这些信息并进行甄别，根据不同的判断结果给用户展示不同的网页，从而实现对话式的信息互动。目前比较流行的后台编程语言有Asp语言、Php语言等，学习这些语言，需要具备一定Basic语言、C语言的基础。

如果网站需要对外提供商品信息这样经常变动的数据、或是要保存用户所输入的信息，后台数据库是最有效和常用的方法。对于初学者来说，采用Asp语言+Access数据库的组合是不错的选择。Windows系统包含了支持这些工具的网站服务组件，你可以方便地把自己的电脑变成一个网页服务器，不需要额外安装其他的软件。如果你已联上网，则可以让你的亲友通过你的IP地址访问一下你的网站，让他们也来分享你的成功喜悦

一聚教程网从零开始的html教程(5)，零基础也能轻松学会html，希望大家喜欢！

一、如何插入图像？

<img>元素可以向网页插入图片，<img" width=100% src="XXX" />，XXX就是图片的路径，可以是本地路径或者网址，例如：<img " width=100% src="http://www.htmq.com/images/logo.gif" />就是链接的网页地址。<img>标签没有结束标签，跟<br>标签一样加个斜线"/"，完整的形式应该是<img " width=100% src="" />。<img>一定要有src属性的，不要丢。

我们来试着插入一张图片吧。dreamweaver中输入<img" width=100% src="后就会弹窗引导打开需要嵌入的图片，非常方便，不用手动输入图片的地址了。