html5学习系列——简介加a标签

html5 的新特性：

（1）用于绘画的canvas元素

（2）用于媒介回放的video和audio元素

（3）对本地离线存储有更好的支持

（4）新的特殊内容元素

（5）新的表单控件。

旧标签：

（1）a标签

作用：超链接，如果没有href属性，就仅仅是一个超链接的占位符。

属性：

href:链接的目标url;

hreflang:规定目标url的基准语言

media:url的媒介类型，默认值为all；

ping：由空格分隔的url列表；

rel：规定当前文档与目标 URL 之间的关系；

target：在何处打开目标 URL，target="_blank"打开新页面；

type：规定目标 URL 的 MIME 类型。之前的所有属性仅在href属性存在时使用。

name属性使用id代替

现在用过的属性是href、id、target

（2）<area>标签

作用：定义图像映射中的区域。

属性：

alt:定义此区域的替换文本，如果href存在，则该属性是必须的；croods:定义可点击区域的坐标；href：定义此区域的目标url；hreflang:规定目标url的基准语言；media:url的媒介类型，默认值为all；rel：规定当前文档与目标 URL 之间的关系；ping:由空格分隔的 URL 列表，当用户点击该链接时，这些 URL 会获得通知。

仅在 href 属性存在时使用。

shape：规定区域的形状； target：在何处打开目标 URL；type：规定目标 URL 的 MIME 类型。

新属性：media，ping

新标签：

（1）<abbr>标签

作用：表示一个缩写形式

title属性显示完整版本；

（2）<address>标签

作用：为文档或section定义联系方式；

通常显示为斜体。大多数浏览器会在前后加上一个换行符。

（3）<article>标签

作用：定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本。

<article>标签独立于文档的其余部分。

（4）<aside>标签

作用：定义article以外的内容。aside的内容应该与article的内容相关。

用于文档的侧栏。

（5）<audio>标签

作用：定义声音，比如音乐或其他音频流。

属性：

autopaly: true | false 如果是 true，则音频在就绪后马上播放。

controls: true | false 如果是 true，则向用户显示控件，比如播放按钮。

src: 所播放音频的 url。

start: 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。

end: 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。

loopend: 定义在音频流中循环播放停止的位置，默认是 end 属性的值。

loopstart: 定义在音频流中循环播放的开始位置。默认是 start 属性的值。

playcount: 定义音频片断播放多少次。默认是 1。

三、涉及到的代码：

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>html学习</title>
</head>
	<body>
		<!-- a标签  -->
		<a href="http://www.html5china.com" target="_blank">html5中文网</a>
		<a>html5中文网</a>
		<!-- abbr标签  -->
		<abbr title="etcetera">etc.</abbr>
		<!-- address标签  -->
		<address>
			此文档的作者:<a href="#">Gabby</a>
		</address>
		<!-- area标签  -->
		<img src="test.jpg" alt="Planets" usemap="#testmap">
		<map >
			<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"/>
			<area shape="circle" coords="90,58,3" href="sun.htm" alt="Mercury"/>
			<area shape="circle" coords="124,58,8" href="sun.htm" alt="Vernus"/>
		</map>
		<!-- article标签  -->
		<article>
			<h2>Article</h2>
			AOL has now officially announced that they will end the development and support of all Netscape browsers.
		</article>
		<!-- aside标签  -->
		<aside>Aside 的内容是独立的内容，但应与文档内容相关。
		</aside>
		<!-- audio标签  -->
		<audio src="test.mp3" controls="true">您的浏览器不支持audio</audio>
	</body>
</html>

html5学习系列——简介加a标签

相关推荐