HTML基本结构标签

HTML基本结构标签

<header>......</header>//头部
<nav>........<nav> //导航
<section>......</section> //定义文档中的节,比如说章节,页眉之类的
<aside>......<aside> //侧边栏
<footer>......<footer> //页脚
<article>......</article> //代表一个独立的、完整的相关内容块,可独立于页面其他内容使用,
//例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等...

布局效果显示:

定义标题栏：header

header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，因此整个页面的标题应该放在页面的开头。

header 定义文档的页眉，在一个网页中可以多次使用 header 元素。

语法&案例：

<header>
　　<h1>网页标题</h1>
</header>
<article>
　　<header>
    <h2>文章标题</h2>
　　</header>
　　<p>文章正文</p>
</article>

定义标题组：hgroup

hgroup 元素可以为标题或者子标题进行分组，通常与 h1~h6 元素组合使用，一个内容块中的标题及其子标题可以通过 hgroup 元素组成一组。但是，如果文章只有一个主标题，不需要此元素。

语法：

<header>
　　<hgroup>
    <h1>主标题</h1>
    <h2>副标题</h2>
　　</hgroup>
</header>

定义导航块：nav

nav 元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当期页面的其他部分。只需要将主要的、基本的链接组放进 nav 元素即可。

语法：

<nav>  语义 :定义导航栏 </nav>

定义侧边栏：aside

asdie 元素用来表示当前页面或文章的附属信息部分，可以包含当前页面或主要内容相关的引用、侧边栏，以及其他类似的有别于主要内容的部分。

主要由以下两种用法：

1、作为主要内容的附属信息部分

2、作为页面或站点全局的附属信息部分

语法：

<aside>定义其所处内容之外的内容</aside>
 

定义主要区域：main

main 元素表示网页中的主要内容。该区域应该为每一个网页中所特有的内容，不能包含整个网站的导航图、版权信息等整个网站内部的共同内容。

每个网页内部只能放置一个 main 元素。不能将 main 元素放置在任何 article、aside、footer、header 或 nav 元素内部。

语法：

<main>网页的主要内容</main>

定义文章块：article

article 元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。

语法：

<article> 语义:  定义文章</article>

定义内容块：section

section 元素用于对网站或应用程序中页面上的内容进行分区，section 元素关注内容的独立性。

语法：

<section> 语义： 定义区域</section>

定义脚注栏：footer

footer 元素可以作为内容块的脚注，可以在内容块中添加注释，或者在网页中添加版权信息等。脚注信息有很多形式，如作者、相关阅读链接及版权信息等。

在页面中可以重复使用 footer 元素。

语法案例：

<footer>
　　<ul>
    <li>关于</li>
    <li>导航</li>
    <li>联系</li>
　　</ul>
</footer>