zoukankan      html  css  js  c++  java
  • html5与css3学习实践--基础的内容划分标签

    从位置上划分出网页的区域以后,就需要用到网页的内容标签了,比如<article><aside><nav><p><h1>等。网页中,这些内容标签和位置标签交错在一起,比如像下面这样:

    Html代码  收藏代码
    1. <body>  
    2.    <header>  
    3.        <h1>Body Title</h1>  
    4.        <nav>  
    5.            导航栏  
    6.        </nav>  
    7.    </header>  
    8.    <section id="left">  
    9.        <header>  
    10.            区域头  
    11.        </header>  
    12.        <article>  
    13.            <header>  
    14.                文章头  
    15.            </header>  
    16.            <p>段落一</p>  
    17.            <p>段落二</p>  
    18.            <aside>  
    19.                侧边栏  
    20.            </aside>  
    21.            <footer>  
    22.                文章尾  
    23.            </footer>  
    24.        </article>  
    25.        <footer>  
    26.            区域尾  
    27.        </footer>  
    28.    </section>  
    29.    <section id="right">  
    30.        <header>  
    31.            区域头  
    32.        </header>  
    33.        <nav>  
    34.            右侧导航栏  
    35.        </nav>  
    36.    </section>  
    37.    <footer>  
    38.        <p>Copy Right.</p>  
    39.    </footer>  
    40. </body>  

     其中,

    <article>:代表一篇独立的正文内容,一般还会按照位置标签划分出头、尾、区域等;

    <aside>:指与段落内容、正文内容相关的侧边栏,一般在<article>中使用;

    <nav>:指导航内容;

    <p>:指独立的段落,一般在<article>中使用;

    <h1>:指标题,一般在<header>中使用。

    这些内容标签中,可以加入位置标签来进行区域划分。

    还有很多其他的表示内容类型的标签,后面的学习实践中再描述。

  • 相关阅读:
    poj 1035 字符串匹配
    拓扑排序的小总结
    POJ1018
    POJ1328详细题解
    POJ1159题解报告
    POJ1088 (滑雪)
    树状树组区间修改,单点修改模板
    spfa模板
    树状树组离散化求逆序对模板
    POJ3723(最小生成树,负权)
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/4078607.html
Copyright © 2011-2022 走看看