首页 > 代码库 > html5与css3学习实践--基础的内容划分标签

html5与css3学习实践--基础的内容划分标签

2024-07-31 14:27:27   222人阅读

从位置上划分出网页的区域以后，就需要用到网页的内容标签了，比如<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>中使用。

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

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

html5与css3学习实践--基础的内容划分标签


联系
我们