article, aside，nav(导航)，section，time 元素和 pubdate 属性，pudate元素

最新推荐文章于 2021-11-29 19:11:03 发布

taotaoahui

最新推荐文章于 2021-11-29 19:11:03 发布

阅读量701

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/taotaoah/article/details/72403819

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

article元素可以嵌套使用；

article可以用来表示插件

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>article元素</title>
</head>
<body>
	<article>
		<header>
			<h1>工程中心</h1>
			<p>Hello!欢迎来到！</p>
		</header>
		<article>
			<header>
				作者
			</header>
			<p>
				评论
			</p>
			<footer>
				time
			</footer>
		</article>
		<p>Hello!</p><!-- 内容 -->
		<footer><!-- 底部 -->
			<p>这是底部</p>
		</footer>
	</article>
	<article>
		<h1>This is a 内嵌 页面。</h1>
		<object>
			<embed src="#" width="600" height="400"></embed>
		</object>
	</article>
</body>
</html>

aside元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。

第一种用法：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>aside元素</title>
</head>
<body>
	<header>
		<h1>你好啊！</h1>
	</header>
<article>
	<h1>语法</h1>
	<p>（正文）年发生地方能sd卡福建省卡当减肥卡萨丁开始大家分开了撒旦快来撒的减肥快来撒当减肥</p>
	<aside>
		<h1>解释下</h1>
		<p>语法：这是一个对语言来说很重要的内容体。</p>
	</aside>
</article>
</body>
</html>

第二种用法：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>aside元素</title>
</head>
<body>
	<header>
		<h1>你好啊！</h1>
	</header>
<article>
	<h1>语法</h1>
	<p>（正文）年发生地方能sd卡福建省卡当减肥卡萨丁开始大家分开了撒旦快来撒的减肥快来撒当减肥</p>
	<aside>
		<h1>解释下</h1>
		<p>语法：这是一个对语言来说很重要的内容体。</p>
	</aside>
</article>
<aside>
	<nav><!-- 导航 -->
		<h2>你好！</h2>
		<ul><!-- 无序列表 -->
			<li><a href="#">12123121</a></li>
			<li><a href="#">小牛：我爱你</a></li>
		</ul>
	</nav>
</aside>
</body>
</html>

nav元素是可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。

应用场景：传统导航条；侧边栏导航；业内导航；翻页操作。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>aside元素</title>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">主页</a></li>
			<li><a href="#">开发文档说明</a></li>
		</ul>
	</nav>
<article>
	<header>
		<h1>您反馈是大方卡萨丁反馈了撒当减肥卡萨丁激发</h1>
		<nav>
			<ul>
				<li><a href="#">HTML5历史</a></li>
				<li><a href="#">是的发送到发送到</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<h1>必须包括头部的</h1>
		<p>......</p>
	</section>
	<section>
		<h1>必须包括头部的</h1>
		<p>......</p>
	</section>
	<footer>
		<a href="#">delete</a>
		<a href="#">update</a>

	</footer>
</article>
<footer>
	<p><small>版权申明:</small></p>
</footer>
</body>
</html>

section对于网站或者应用程序中页面上的内容进行分块。一个section元素通常由内容及标题组成。但secttion元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>section元素</title>
</head>
<body>
	<section>
		<h1>苹果</h1>
		<p>是地方圣诞节反馈到数据库了房间撒多亏了房间是两大</p>
	</section>
	<article>
		<h1>apple</h1>
		<p>这是一个水果，可以吃。且很好吃。</p>
		<section>
			<h2>红富士</h2>
			<p>束带结发快圣诞节风口浪尖sd卡廊坊</p>
		</section>
		<section>
			<h2>国光</h2>
			<p>束带结发快圣诞节风口浪尖sd卡廊坊</p>
		</section>
	</article>
	<section>
		<h1>fruit</h2>
		<article>
			<h2>pinguo</h2>
			<p>content</p>
		</article>
		<article>
			<h2>pinguo</h2>
			<p>content</p>
		</article>
		<article>
			<h2>pinguo</h2>
			<p>content</p>
		</article>
	</section>
</body>
</html>

注意：

1，不要将section作为设置样式的页面容器；

2，如果article元素、aside元素、nav元素更符合使用条件，那不要使用section元素；

3，没有标题内容，不要使用section元素。

time元素和微格式

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>time元素</title>
</head>
<body>
	<time datetime="2017-05-20">2017-05-20</time>
	<time datetime="2017-05-20T20:00">2017-05-20</time>
	<time datetime="2017-05-20T20:00Z">2017-05-20</time>
	<time datetime="2017-05-20T20:00+09:00">2017-05-20</time>
</body>
</html>

pudate元素演示：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>time元素</title>
</head>
<body>
	<article>
		<header>
			<h1>apple</h1>
			<p>发布日期
			<time datetime="2017-05-20" pubdate>2017-05-20</time>	
			</p>
			<p>wuhuishijian
			<time datetime="2017-05-20">2017-05-20</time></p>
		</header>
	</article>
</body>
</html>