• html5中的一些新语义标签


     1 <header>
     2     <nav>
     3         <ul>
     4             <li><a href="">栏目1</a></li>
     5             <li><a href="">栏目2</a></li>
     6             <li><a href="">栏目3</a></li>
     7         </ul>
     8     </nav>
     9 </header>
    10 
    11 <main>
    12 <article>
    13     <header>
    14         <hgroup>
    15         <h1>这是h1标题</h1>
    16         <h2>这是文章的副标题</h2>
    17         </hgroup>
    18         <p>这是头部的文字,文章发布于<time>2016-02-24</time></p>        
    19     </header>
    20     <div class="content">
    21         <p>这里是文章的正文。</p>
    22         <figure>
    23             <img src="xxx.jpg" alt="xxx">
    24             <figcaption>这里是图片的图片标题</figcaption>
    25         </figure>
    26     </div>
    27 </article>
    28 </main>
    29 
    30 <aside>
    31     <h2>相关文章推荐</h2>
    32     <ul>
    33         <li>文章1</li>
    34         <li>文章2</li>
    35     </ul>
    36 </aside>
    37 <footer>
    38     <p>这是页脚的文字</p>
    39 </footer>

    html5最重要的特性之一,是引入了一些具有语义的标签,使得页面的代码更可读和结构化。
    基本上来说,IE8以下的版本对html5的新标签支持非常差,需要一些方法来使这些浏览器支持这些新标签。


    <time>标签:
    用于标记时间和日期。

    <nav>标签:
    用来标注导航链接。一个页面可以包含多个nav区块。

    <main>标签:
    标记文档的主要内容。

    <article>标签:
    表示一个完整的、自成一体的内容块,如博客文章、新闻报道或者用户评论等。<article>标签应该包含所有相关的内容,包括标题、作者署名以及正文等。

    <header>标签:
    用来描述或导航包含它的父级区块,通常需要包含h标签。在一个网页中可以有多个header标签。如同时有网页的header和正文的header。

    <hgroup>标签:
    如果除了主标题,还有一个副标题,则应该把h1和h2放到hgroup中,此时h2不表示下面文字的子标题,而是整篇文章的副标题。

    <figure>标签:
    用来标记插图区域。插图是文章中的附图,在文章中会提到它。

    <figcaption>标签:
    用来标记题图。

    <aside>标签:
    用来标记与周围内容关系不太密切的内容,如广告、侧边栏等。

    <section>标签:
    是一个带标题的独立性内容块。

    <footer>标签:
    用来标记网页的页脚,放置一些网站版权信息等不太重要的信息。

  • 相关阅读:
    DataTable四个方法
    c++面向对象编程必备“良方”(转)
    函数调用约定
    AFX_IDW_PANE_FIRST(转)
    CString.Format的详细用法(转)
    ID的分配 (转)
    CString用法整理(转载)
    jquery之效果
    JS 水仙数
    CSS 文本换行
  • 原文地址:https://www.cnblogs.com/hqqq/p/5215143.html
Copyright © 2020-2023  润新知