1.html5结构标签 <!DOCTYPE html><html><head><meta charset="utf-8"/><title>HTML5结构标签</title> <style type="text/css">header,nav,article,aside,section,footer{border:solid 1px red; padding:10px;margin:6px;} header { width:800px; }nav {width: 800px;} article { float:left; width:580px; height:100px;}section{height:50px;} aside {width:186px; float:left; height:100px;} footer {clear:both;width:800px;} </style> </head> <body><header>页眉</header> <nav>导航栏</nav> <article>文章<section>文章的内容</section> </article><aside>侧边栏</aside> <footer>页脚</footer> </body></html> 2.nav标签 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body><!--1.nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。2.nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。--> <nav> <ul> <li><a href="#">公司介绍</a></li> <li><a href="#">产品推荐</a></li> <li><a href="#">招聘信息</a></li> <li><a href="#">联系我们</a></li> </ul> </nav></body></html> 3.ruby标签 <!doctype html><html><head><meta charset="utf-8"><title>ruby标签</title></head><!--<ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用，显示的是东亚字符的发音。与<ruby>以及<rt>标签一同使用。ruby元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt元素组成，还包括可选的rp元素，定义当浏览器不支持"ruby"元素时显示的内容。--> <body> <ruby> 我 爱 你 <rt>wo ai ni</rt> </ruby></body></html> 4.mark标签 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body> <p>23222<mark>1111111111111111111</mark>2222</p></body</html> 5.cite标签 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body><!--<cite>标签 <cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊等等。 --> <p>111111111</p> <cite>2222222222</cite></body></html> 6.section标签 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body><!--1.<section>标签用于对网页的内容进行分区、分块，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由标题和内容组成。2.<section>标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。3.根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。4.当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div标签而非section。--> <section> <h1>1111111</h1> <p>2222222</p> <article> 3333333 <p>44444</p> </article> </section></body></html> 7.article标签 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body><!--1.<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。2.Article标签会有标题部分，通常可以包含header，有时也会包含footer。3.article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。--> <article> <header> <h1>标题信息</h1> <h2>二级标题</h2> <p>报道的时间信息等</p> </header> <p>文章报道的详细信息</p> <footer> 供稿人：张三等 </foooter> </article></body></html>