2.3.2新增-语义相关元素

ssmoom

于 2014-09-24 11:49:18 发布

阅读量471

点赞数

分类专栏： HTML5_CSS3_JavaScript

HTML5_CSS3_JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
		<title>2.3.2新增-语义相关元素</title>
	</head>
	<body>
		HTML5也提供了如下两个语义相关元素。
		<p>
			1、mark：用于显示HTML页面中需要重点“关注”的内容，
			就像我们看书时喜欢用荧光笔把某些重点内容标注出来一样。
			该元素可以指定id、style、class和hidden等通用属性。
			浏览器通常会用黄色显示mark标注的内容。
		</p>
		
		<p>
			2、time：用来显示被标注内容是日期、时间或者日期时间。
			使用该元素时除了可以指定id、style、class和hidden等通用属性之外，
			还可以指定如下属性。
			<blockquote>
				datetime：该属性主要用于向机器提供时间（向浏览者呈现的时间放在time中），
				datetime属性的属性值应该是符合yyyy-MM-ddTHH:mm格式的日期时间。
				当然，也可以只指定日期，或只指定时间。
			</blockquote>
		</p>
		
		<p>
			如果time元素所包含的内容本身就满足标准的日期、时间格式，
			那么使用time元素时可以不指定datetime属性，否则就应该指定datetime属性。
		</p>
		
		<p>
			eg：使用了mark和time元素，其中time元素专门用于标注时间。<br>
			<article>
				<header>
					<h2>疯狂软件即将引入<mark>HTML 5</mark>相关课程</h2>
				</header>
				<p>
				<mark>HTML 5</mark>是下一代的HTML规范，<br/>
				<mark>HTML 5</mark>即将把前端开发者从繁重的开发中释放出来。<br/>
				为了把握技术潮流的脉搏，疯狂软件教育计划在
				<time datetime="2012-04-01">2012年4月</time>
				引入<mark>HTML 5</mark>的相关课程。<br/>
				疯狂软件教育的上课时间是<time datetime="09:00">早上9点</time>
				到<time datetime="17:30">下午5点半</time>。<br/>
				疯狂软件教育龙年的将于<time datetime="2012-01-30T09:00">正月初八</time>
				开始上班，也就是<time>2012-01-30</time>。
				</p>
			</article>
		</p>
		
		<p>
			<b>只有Chrome支持details与summary元素</b><br>
			details元素用于显示一段详细信息或某个主题的细节。
			details元素通常会与summary元素结合使用，当把summary放在details元素内部时，
			summary元素用于为details定义摘要信息，摘要信息默认是可见的，当用户点击摘要信息时，
			浏览器会显示出details里的详细内容。<br>
			eg：使用details和summary元素的使用效果：<br>
			<details>
				<summary>芙蓉镇</summary>
				《芙蓉镇》是一部极好的电影，每个中国人都不应该错过。
			</details>
		</p>
		
	</body>
</html>

ssmoom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.3.2新增-语义相关元素

2.3.2新增-语义相关元素 HTML5也提供了如下两个语义相关元素。 1、mark：用于显示HTML页面中需要重点“关注”的内容，就像我们看书时喜欢用荧光笔把某些重点内容标注出来一样。该元素可以指定id、style、class和hidden等通用属性。浏览器通常会用黄色显示mark标注的内容。 2、time：用来显示被标注内
复制链接

扫一扫