HTML标签-----article、aside、figure、nav和section

时间:2023-03-10 00:20:16
HTML标签-----article、aside、figure、nav和section

   article

   <article> 标签定义独立的内容

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div>article标签</div>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>
</body> </html>

   aside

   <aside> 标签定义 <article> 标签外的内容,aside 的内容应该与附近的内容相关

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body> </html>

 figure

   <figure> 标签规定独立的流内容(图像、图表、照片、代码等等),figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<p>上海卢浦大桥是当今世界第一钢结构拱桥,是世界上跨度最大的拱形桥。</p>
<figure>
<p>黄浦江上的的卢浦大桥</p>
<p>拍摄者:W3School 项目组,拍摄时间:2010 年 10 月</p>
<img src="img/bridge.jpg" width="350" height="250" />
</figure> </body> </html>

   nav

   <nav> 标签定义导航链接的部分

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<nav>
<a href="#">Java</a>
<a href="#">C#</a>
<a href="#">JavaScript</a>
</nav>
</body> </html>

   section

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<section>
<h1>Java</h1>
<p>
Java是一门语言!
</p>
</section>
<section>
<h1>C#</h1>
<p>
C#是一门语言!
</p>
</section>
<p>
C#是一门语言!
</p>
</body> </html>