section 元素
对网站或应用程序中页面上的内容进行分块。如:章、节、页眉、页脚及文档中的其他部分。section元素通常由内容及其标题组成,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而不是section。
<html>
<head>
<title>
section demo
</title>
<meta charset="UTF-8">
</head>
<body>
<article>
<section>水果</section>
<p>可以食用。苹果、葡萄等都属于水果。</p>
<section>苹果</section>
<p>红彤彤的,很香甜。</p>
</article>
</body>
</html>
article元素
代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。如:一篇博客,报刊中的文章,一篇论坛帖子,一段用户评论,独立插件(可嵌套使用,也可做插件)。article强调文档的独立性。
<html>
<head>
<title>
article demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--article嵌套是上下文相关的内容,但article单独使用则强调其独立性-->
<article>
<header>金刚</header>
<p>
电影讲述1933年的美国,一名勇于冒险的企业家及电影制作者,
率领摄制队伍到荒岛拍摄,其中包括女主角安及编剧杰克,
他们遇到恐龙及当地土著的袭击,安发出的尖叫声换来金刚的回应。
这只巨大无比的猩猩,连凶悍的恐龙也惧怕它几分,偏偏它却钟情于安。
安其后将金刚由荒岛带回纽约,但却是它悲剧命运的开始。
</p>
<article>
<header>作者</header>
<p>评论</p>
<footer>时间</footer>
</article>
<footer>
<small>版权</small>
</footer>
</article>
<!--article作插件-->
<article>
<object>
<!--将src的属性值嵌入到embed区域中-->
<embed src="#"></object>
<embed src="http://www.baidu.com">
</object>
</article>
</body>
</html>
aside元素
表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。
<html>
<head>
<title>
aside demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--aside在article内,作为article的附属信息-->
<article>
<h3>语法</h3>
<p>
语法是语言学的一个分支,研究按确定用法来运用的"词类"、
"词"的屈折变化或表示相互关系的其他手段以及词在句中的功能和关系。
包含词的构词、构形的规则和组词成句的规则。
</p>
<aside>
<!--对article的标题语法作名词解释-->
<h5>名词解释</h5>
<p>对名词解释展开详细的描述。</p>
</aside>
</article>
<!--aside在article之外,可作为一个弹出框广告,侧边栏,导航条-->
<aside>
<nav>
<ul>
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
</ul>
</nav>
</aside>
</body>
</html>
nav元素
各页的导航链接
<html>
<head>
<title>
nav demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--nav导航-->
<nav>
<ul>
<!--href的属性值可修改,#表示跳转到当前页面-->
<li><a href="#">Home</a></li>
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</body>
</html>
time元素与pubdate属性
设置时间。
<html>
<head>
<title>
time demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--datetime设置具体的日期时间-->
<time datetime="2018/10/10">2018/10/10</time><br/>
<!--pubdate指发布时间-->
<time datetime="2018/10/10" pubdate>发布时间:2018/10/10</time>
</body>
</html>
网友评论