HTML5的学习-------四HTML5的几个新特性

这里我们介绍一下HTML5中的一些新特性。
1.audio元素

使用audio元素的一般语法：

<audio attributes>
	<source src = "filename1">
	<source src = "filename2">
	<source src = "filename3">
	<source src = "filename4">
	....
	<source src = "filenamen">
	您的浏览器不支持audio元素
</audio>

不同的浏览器将会支持不同的格式，如果音频不能被识别的话，将会输出最后一个提示信息。
attributes中存在一个controls属性，它总是被设置为controls属性，该属性会显示一个开始/停止按钮，一个时钟，一个播放进度条，文件的总时长以及一个音量控制滑动条。
eg:

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<audio controls="controls">
		<source src="mysong1.mp3"/>
		您的浏览器不支持audio
	</audio>
</body>
</html>

2.video元素
video元素的语法同audio元素的语法很类似

<video attributes>
	<source src = "filename1">
	<source src = "filename2">
	<source src = "filename3">
	<source src = "filename4">
	....
	<source src = "filenamen">
	您的浏览器不支持video元素
</video>

在这里我介绍一下常见的video的属性
①.width和height
控制播放器的高度和宽度
②.autoplay
设置是否自动播放
③.control
设置是否加载播放器，这个属性是必须要设置的
④.preload
设置是否当文档一被创建就自动加载视频

3.组织元素
这里我主要介绍一下组织元素 header、hgroup、footer的使用，这些元素能更好的将文档信息组织起来
①.header
标题元素，这里面包含着标题信息
eg:

	<header>
		<h1> 大标题</h1>
	</header>

②.hgroup
包含着主题前面的信息，如目录等，标题应该包含在其内
eg:

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<hgroup>
		<header>
			<h1> 大标题</h1>
		</header>
		<ol>
			<li> 目录 </li>
		</ol>
	</hgroup>
</body>
</html>

③.footer
footer包含着页脚元素内容
eg:

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<hgroup>
		<header>
			<h1> 大标题</h1>
		</header>
		<ol>
			<li> 目录 </li>
		</ol>
	</hgroup>
	<footer>
		&copy; Magic_Conch
	</footer>
</body>
</html>

④.其他元素
section元素用于包含文档的各个章节
article元素用来容纳来自外部的某个文档的独立部分，该元素中可包括一个header，一个footer和多个section
aside元素用于与文档关系不大的内容，在印刷中，这种类型的元素通常都会被放到侧边栏中

nav元素用于导航部分，导航到文档不同部分的链接链表

4.time元素 time元素的作用是给文章或文档添加时间戳必须严格按照格式来使用格式： <time datetime="2015-08-01T17:28" pubdate="pubdate"> 我的时间 </time> 我的时间那一段属于显示的部分 datetime部分属于机器可识别部分。

HTML5的学习-------四HTML5的几个新特性

相关文章