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 id="testmap">
			<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>

  

posted @ 2016-04-01 23:03  emma_zhang  阅读(506)  评论(0编辑  收藏  举报