html5语义化布局 html5语义化标签有哪些

HTML5

HTML5就是HTML最新的版本，由万维网联盟（W3C）完成标准制定，虽然仍处于完善之中。然而大部分浏览器已经对支持HTML5 了，下面就给大家介绍一下HTML5的语义化标签。

HTML5的常用标签

HTML5为我们提供了很多新的语义化标签来划分结构，让代码更具有可读性，也让其他的前端人员更加能理解你的html结构

以下是常用的语义元素

section	类似于div,section 更偏向划分区域
article	更偏向于 内容的展示
aside	侧边
header	表示内容的头部、网页的头部、头部区域
footer	表示网页的底部、内容的底部、底部区域
nav	导航连接、导航区域
figure	表示一块独立的内容
figcaption	figure的标题（一般放在figure的第一位或者最后一位）
main	主体内容
hgroup	标题组合
mark	高亮显示
time	放时间的

<section></section>元素

用于划分文档的各个部分和div功能类似，比如章节、头部、底部或者网页的其他区域 

<section>
        <h3>你好</h3>
        <p>我是内容我是内容我是内容我是内容我是内容我是内容</p>
    </section>

 

<article></article>元素

定义页面的独立内容，它可以有单独header、section、footer 专注于文本类型的内容展示，而且article可以嵌套article

<article>
     <header>article header 内容的头部</header>
     <p>我是内容我是内容我是内容我是内容</p>
     <footer>article footer 内容的底部</footer>
</article>

<aside></aside>元素

 定义侧边的内容。如侧栏、锚点链接跳转、广告、友情链接、相关内容列表等

<aside>
        <h2>我是侧边栏</h2>
        <ul>
            <li>产品1</li>
            <li>产品2</li>
            <li>产品3</li>
        </ul>
    </aside>

 <header></header>元素

定义网页的头部区域，通常包括网站logo、主导航、搜索框。而且页面不限制header元素的个数，可以拥有多个，大部分内容块都可以使用header元素

<header>
            <h1>logo</h1>
            <ul>
                <li>导航</li>
                <li>导航</li>
                <li>导航</li>
            </ul>
        </header>

 <footer></footer>元素

定位网页的底部内容区域，如果父元素是body表示整个网页的页脚，通常用来：作者，相关文档链接，版权资料，许可协议等一些其他类似信息。footer元素在一个网页中也可以拥有多个，大部分内容块都可以使用footer元素

<footer>
    <p>版权信息</p>
</footer>

<nav></nav>元素

定义页面的导航链接区域。一般用在整个页面主要导航部分上

<nav>
    <ul>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
    </ul>
</nav>

 figure 和 figcaption元素

figure  ：表示一块独立的内容（图像、图表、照片、代码等等）
figcaption ：figure的标题（一般放在figure的第一位或者最后一位）

<figure>
        <figcaption>我是内容的标题</figcaption>
        <p>我是内容我是内容我是内容我是内容</p>
    </figure>

<main></main>元素

表示页面的主要内容，但是一个页面只能有一个，<main> 元素不能是以下元素的后代<article>、<aside>、<footer>、<header> 和 <nav>

<main>
                <article>
                    <header>内容的头部</header>
                    <p>我是内容我是内容我是内容我是内容</p>
                    <footer>内容的底部</footer>
                </article>
                <article>
                    <header>内容的头部</header>
                    <p>我是内容我是内容我是内容我是内容</p>
                    <footer>内容的底部</footer>
                </article>
            </main>

 <hgroup></hgroup>元素

表示当标题有多个副标题的时候 hgroup元素可以对标题进行组合或者分组

<hgroup>
                <h2>标题</h2>
                <h4>标题</h4>
                <h5>标题</h5>
            </hgroup>

<mark></mark>元素

表示一段文本需要突出显示关键内容，让文本高亮显示默认显示背景为黄色（可更改）

<p>我是内容我是内容我是内容我是内容<mark>我是内容</mark>我是内容我是内容我是内容</p>

 <time></time>元素

time标签是用来存放日期和时间的

<p>我每天早上<time>7:00</time>起床</p>