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>