网站制作技术之HTML5标签解析（二）-沈阳易势科技有限公司

build网站制作

build网站制作当前位置：首页>主要服务>网站制作

网站制作技术之HTML5标签解析（二）

媒体元素

<section>和< article>标签还可以包含各种媒体元素，HTML5提供的标签立刻就传达了其内容的意思。媒体元素，比如说音乐和视频，以前只能嵌入，但现在能够被更精准地标识出来。

<audio>标签标识了声音内容，比如说音乐或是任何的其他音频流。<audio>标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况，这些属性分别是：src、preload、control、loop和autoplay。在清单6给出的例子中，只要页面一加载音频就开会播放，其会持续播放，所提供的控制可以让用户停止或是重新开始播放音频。

清单6. <audio>标签的例子

<audio src="MyFirstMusic.ogg" kesrc="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
</audio>

< video>标签允许你播放视频片段或是流化视觉媒体。其拥有< audio>标签所有的属性，另外再加上三个：poster、width和height。当视频正在加载或是视频处于完全没有加载的糟糕情况中时，poster属性可让你找出一张图像来应付着先。

清单7提供了一个< video>标签结构的例子

清单7. 标签的例子

<video src="MyFirstMovie.ogg" kesrc="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
</video>

<video>和<audio>标签可以包含< source>标签，该标签定义了< video>和< audio>标签的多媒体资源。使用这一元素，你可以指定替代的视频或是音频文件，然后浏览器就可以基于它的媒体类型或是所支持的编解码器来从中进行选择。清单8中有两种选择，如果文件的WMA版本不能在所使用的浏览器中播放的话，就再尝试MP3版本。否则的话就显示信息，这样用户就知道为什么音频不可用了。

清单8. <source>标签的例子

<audio>
<source src="/music/good_enough.wma" kesrc="/music/good_enough.wma" type="audio/x-ms-wma">
<source src="/music/good_enough.mp3" kesrc="/music/good_enough.mp3" type="audio/mpeg">
<p>Your browser does not support the HTML ′audio′ element.< /p>
</audio>

清单9. <embed>标签的例子

除了src和type属性之外，<embed>标签还拥有height和width属性。

Aside区

Acme United规划中的Aside区可通过使用<aside>标签来创建。这一标签被看作是用来存放补充内容的地方，这些内容不是其所补充的一篇连续文章的组成部分。在杂志上，插入语（aside）通常被用来突出文章本身所制造的一个观点。< aside>标签包含的内容可被删除，而这不会影响到包含了该内容的文章、章节或是页面所要传达的信息。

清单10提供了<aside>标签用法的一个例子。

清单10. <aside>标签的例子

<p>My family and I visited Euro Disney last year.</p>
<aside>
<h4>Disney in France< /h4>
<p>Besides Euro Disney, there is a Disneyland in California.< /p>
</aside>

Footer区

<footer>元素包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或是日期。作为页面的页脚，其有可能包含了版权或是其他重要的法律信息，如清单11所示。

清单11. <footer>标签的例子

那么，让我们把页面装配起来吧。首先要处理的是这个<!doctype>，在HTML5中，<!doctype>被简化了：所有你需要记住就是html。这不仅是简化了这一标签的条目，而还把它变得更适应未来的发展。需要注意的是，它不是被称为html5，就只是html。不管来来去去的有多少个HTML版本，<!doctype>可以一直都是html。

<html>标签包含了所有除了<!doctype>标签之外的其他HTML元素，其他的每一个元素都必须嵌套在< html>和< /html>标签之间，参见清单12。

清单12. <!doctype>标签的例子

<!doctype html>
<html lang="en">

在指出了html和语言为英语之后，你就可以使用<head>元素，该元素可以包含脚本、浏览器支持信息、样式表链接、meta信息和其他的初始化函数。你可以在head这一区域中使用这些标签：

1. <base>
2. <link>
3. <meta>
4. <script>
5. <style>
6. <title>

<title>标签存放文档的实际标题，这是一个必需的< head>区元素，它的内容就是你在浏览该页面时会在浏览器的顶端看到的标题。清单13中的< link>标签标识了会被用来渲染HTML5页面的CSS3样式表，样式表的文件名为main-stylesheet.css。

上一条资讯|返回栏目页|下一条资讯