HTML5用于划分内容的元素2-7 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>划分内容的元素</title>
  9 </head>
 10 
 11 <body>
 12     <!-- section: 表示一个重要的概念或主题 -->
 13     <section>
 14         <h1>标题1</h1>
 15         <p>明天不上班啊</p>
 16     </section>
 17     <section>
 18         <h1>标题2</h1>
 19         <p>明天去上班旅游</p>
 20         <a href="#">点击查看原文</a>
 21     </section>
 22     <hr>
 23 
 24     <!-- header: 表示首部 -->
 25     <header>
 26         <h2>二级标题</h2>
 27     </header>
 28     <hr>
 29 
 30     <!-- footer: 表示尾部 -->
 31     <footer>
 32         <ul>
 33             <li>链接1</li>
 34             <li>链接2</li>
 35             <li>链接3</li>
 36         </ul>
 37         <p>其他信息</p>
 38     </footer>
 39     <hr>
 40 
 41     <!-- h1-h6: 表示标题 -->
 42     <h1>标题1</h1>
 43     <h2>标题2</h2>
 44     <h3>标题3</h3>
 45     <h4>标题4</h4>
 46     <h5>标题5</h5>
 47     <h6>标题6</h6>
 48 
 49     <hr>
 50 
 51     <!-- hgroup: 将一组标题组织在一起 -->
 52     <hgroup>
 53         <h1>标题1</h1>
 54         <h2>标题2</h2>
 55     </hgroup>
 56     <hr>
 57 
 58     <!-- nav: 表示有意集中在一起的导航元素 -->
 59     <nav>
 60         <li>菜单</li>
 61         <li>菜单</li>
 62         <li>菜单</li>
 63         <li>菜单</li>
 64         <li>菜单</li>
 65     </nav>
 66     <hr>
 67 
 68     <!-- article: 表示一段独立的内容 -->
 69     <article>
 70         <header>
 71             <h2>文字标题</h2>
 72         </header>
 73         <section>
 74             <p>第1段话</p>
 75             <p>第2段话</p>
 76             <p>第3段话</p>
 77             <p>第4段话</p>
 78         </section>
 79     </article>
 80     <hr>
 81 
 82     <!-- aside: 表示与周边内容稍有牵连的内容 -->
 83     <aside>
 84         <li>侧边菜单</li>
 85         <li>侧边菜单</li>
 86         <li>侧边菜单</li>
 87     </aside>
 88     <hr>
 89 
 90     <!-- address: 表示文档或article的联系信息 -->
 91     <address>
 92         我的地址为：<a href="#">网站名称</a>
 93         <em>
 94             重庆磁器口
 95         </em>
 96     </address>
 97     <hr>
 98 
 99     <!-- details: 生成一个区域，可隐藏/显示详细信息的内容 -->
100     <!-- summary: 概述 -->
101     <details>
102         <summary>这里有武林秘籍</summary>
103         <ul>
104             <li>如来神掌</li>
105             <li>九阳神功</li>
106         </ul>
107     </details>
108 </body>
109 
110 </html>

 

 

 

posted @ 2019-10-22 13:17  Like-66  阅读(147)  评论(0)    收藏  举报