zoukankan      html  css  js  c++  java
  • HTML5的结构

    • 主体结构元素

     article:代表文档、页面或应用程序中独立的、完整的、可以被外部引用的内容。如博客或报刊中的文章,论坛中的帖子等

    除了内容部分外,通常有自己的标题(一般放在header元素里面)。下面举例说明

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <article>
     9         <header>
    10             <h1>苹果</h1>
    11             <p>
    12                 发表日期:<time pubdate="pubdate">2010/10/09</time>
    13             </p>
    14         </header>
    15         <p><b>苹果</b>植物类水果,多次水果...("苹果"文章正文)</p>
    16         <footer>
    17             <p><small>著作权归属***公司所有</small></p>
    18         </footer>
    19     </article>
    20 </body>
    21 </html>
    article举例

    效果:

    此外,article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。如微博中文章与评论的关系。

    section:对网站或应用程序中的内容进行分块。通常由内容及其标题组成。但section并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。可以这么理解:section元素中的内容可以单独存储到数据库或输出到word文档。

      section的作用是对页面内容进行分块,不要和代表整片文章的article元素搞混了

      section和article可以相互嵌套

    nav:用作页面导航的链接组。导航元素一般链接到其他页面或当前页面的其他部分

    1     <nav>
    2         <ul>
    3             <li><a href="">主页</a> </li>
    4             <li><a href="">开发文档</a> </li>
    5         </ul>
    6     </nav>
    nav举例

    效果:

    nav的应用场合:① 传统导航条 ② 侧边栏导航 ③ 业内导航 ④ 翻页操作

    aside:表示当前页面或文章的附属信息


    新增的非结构元素

    header:一种具有引导和导航作用的结构元素

    hgroup:将标题及其子标题进行分组

    footer:上层父级内容的脚注

    address:联系信息

  • 相关阅读:
    SpringMVC是什么?
    SpringMVC工作原理
    SQL给字段加上统一的某个字符
    把数据库里的标签去掉
    Windows通过DOS命令进入MYSQL的方法
    mysql添加字段
    sqlserver查询最接近的记录
    LIST 排序
    Tsk4.5异步
    认识和使用Task
  • 原文地址:https://www.cnblogs.com/sherrykid/p/5700645.html
Copyright © 2011-2022 走看看