HTML5中常用的布局语义标签

一、HTML5 中常用的布局语义标签，主要有 ：

<header>、<nav>、<article>、<aside>、<section>、<main>、<footer>，和最常用的标签 <div>。
<div> 是块元素，用于布局，<span> 是行内元素，主要用于包裹文字。这两个标签几乎是整个网页的 "半壁江山"。

标签	描述
<header>	表示网页的头部，或一个区块的头部（一个页面可以有多个）
<footer>	表示网页的底部，通常包含有关作者的信息、版权或文件链接；也可以表示一个区块的底部（一个页面可以有多个）
<nav>	表示网页中的导航，常见例子是菜单、目录和索引
<main>	表示网页的主体部分（一个页面中只会有一个 main）
<article>	表示一个独立的文章，可嵌套使用。
<aside>	和主体相关的其他内容（侧边栏），其内容与文档的主要内容只有间接的关系，经常以边栏或呼出框的形式出现。
<section>	表示一个独立的区块，上边的标签都不能表示时使用 section

二、块元素（block element）

• 在页面中，块元素独占一行；
• 在网页中一般通过块元素来对页面进行布局。
• 块元素中可以放块元素和行内元素。

三、行内元素（inline element）

• 在页面中，行内元素不能独占一行；
• 行内元素主要用来包裹文字；
• 行内元素不要放置块元素。

四、注意

• 在开发中，我们会使用块元素进行页面的布局，使用行内元素包裹文字。（需要注意，HTML不需要关心标签显示的位置，那是 CSS 负责的）
• 块元素中基本上什么都能放，但 <p> 标签比较特别，虽然 <p> 标签是块元素，但是<p>标签中不能放任何的块元素。