HTML5新增的主体元素和新增的非主体结构元素

HTML5新增的主体元素

1. article元素
   
   • article元素表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立的插件，或者其他任何独立的内容。（article元素是可以嵌套使用的、article元素可以用来表示插件）
   • 示例

<article>
        <h1>这是一个内嵌页面</h1>
        <object>
            <embed src="" width="600" height="400">
        </object>
    </article>

1. section元素
   
   • section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素
   • 禁止
     
     • 不要将section元素作为设置样式的页面容器
     • 如果article元素、aside元素、nav元素更符合使用条件，那就不要使用section元素
     • 没有标题内容 不要使用section元素
   • 示例

    <section>
        <h1>这是section</h1>
        <p>section是这么用的</p>
    </section>

1. nav元素
   
   • nav元素是一个可以作用页面导航的连接组，其中导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。
   • 应用场景
     
     • 传统导航条
     • 侧边栏导航
     • 页内导航
     • 翻页操作
   • 示例

    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">开发文档</a></li>
            <li><a href="#">代码</a></li>
        </ul>
    </nav>

1. aside元素
   
   • aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别与主要内容的部分
   • 示例

<aside>
        <nav>
            <h2>评论</h2>
            <ul>
                <li><a href="#">2015-3-10</a></li>
                <li>
                    <a href="#">
                        这就是aside元素
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

1. time元素与微格式
   
   • 保存时间
   • 示例

<time datetime="2010-10-10">2015-10-10</time>

1. pubdate属性(属性)
   
   • 发布时间
   • 示例

<time datetime="2015-10-10" pubdate>2015-10-10</time>

HTML5新增的非主体结构元素

1. header元素
   
   • header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，列如数据表格、搜索表单或相关的logo图片（注意： header元素可以出现多次）
   • 示例

    <header>
        <h1>页面标题</h1>
    </header>

1. footer元素
   
   • footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等
   • 示例

    <footer>
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>

1. hgroup元素
   
   • hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组
   • 示例

    <hgroup>
        <h1>这是文章标题</h1>
        <h2>这是一个子标题</h2>    
    </hgroup>

1. address元素
   
   • address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不知用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息
   • 示例

    <footer>
        <div>
            <address>
                <a href="#">联系人</a>
                xxxxx地址
            </address>
        </div>
    </footer>

1. html5编排规格
   
   • 显示编排内容区域块
   • 隐示编排内容区域块
   • 标题分级
   • 不同区域块可以使用相同级别的标题
   • 示例

    <header>
        <h1>网页标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">帮助</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p>文章正文</p>
        <section>
            <div>
                <article>
                    <h1>评论标题</h1>
                    <p>评论正文</p>
                </article>
            </div>
        </section>
    </article>
    <footer>
        <small>版权所有.....</small>
    </footer>

转载于:https://www.cnblogs.com/gxqq/p/5335227.html