Html5 语义化布局Layout

by · 2018年03月17日 · 1286 Words · ~3min reading time | Improve on

结构元素

    section：内容块，用于分块使用，通常由标题与内容组成
    article：页面独立的内容，通常用于正文；可嵌套使用，可表示插件
    aside：article内容之外的区域，如评论区、引用区、广告区等
    header：头部区域，如页面头部，文章头部等
    hgroup：标题集合，如标题中包含正标题及子标题
    footer：底部区域，如页面底部，文章底部等
    nav：导航；如传统导航条、侧边栏、页内导航、翻页操作。
    figure：流内容，如瀑布流; 独立内容，移除对网页无影响
    form：html5的前提下，form下的从属元素可以在form外部，只需在外部的form从属元素中添加form属性，且该属性值等于对应form元素的id值即可。

<!-- 以上元素的综合应用示例 -->
<body>
    <!-- hedaer作为页面头部使用 -->
    <header>
        <!-- hgroup的使用 -->
        <hgroup>
            <h1>正标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <!-- nav的使用 -->
        <nav>
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">开发文档</a></li>
            </ul>
        </nav>
    </header>
    <!-- article作为正文使用 -->
    <article>
        <!-- header作为正文头部使用 -->
        <header>
            <h1>article</h1>
            <!-- aside作为正文头部的文章概要使用 -->
            <aside>
                这是概要
            </aside>
        </header>
        <!-- section作为文章内区块的使用 -->
        <section>
            <h2>红富士</h2>
            <p>这是一个苹果品牌</p>
        </section>
        <section>
            <h2>红富士</h2>
            <p>这是一个苹果品牌</p>
        </section>
        <section>
            <h2>红富士</h2>
            <p>这是一个苹果品牌</p>
        </section>
        <!-- footer作为文章结尾使用 -->
        <footer>
            这是页面结尾
        </footer>
    </article>
    <!-- aside作为正文相关的评论区域使用 -->
    <aside>
        <!-- header作为评论区的头部使用 -->
        <header>
            作者
        </header>
        <p>评论</p>
        <!-- footer作为评论区的尾部使用 -->
        <footer>
            时间
        </footer>
    </aside>
    <!-- article作为插件嵌套使用 -->
    <article>
        <header>
            <h1>这是一个嵌入内容,嵌入本页所有内容</h1>
        </header>
        <embed src="#" height="300" width="500">
    </article>
    <!-- aside作为广告区域使用 -->
    <aside>
        <!-- 广告的提交表单 -->
        <form id="html5form">
            <!-- 表单元素在form外面 -->
        </form>
        <!-- id为html5form的表单外部的input元素 -->
        <input type="text" form="html5form">
    </aside>
    <!-- footer作为页面尾部使用 -->
    <footer>
        这是页面尾部
    </footer>
</body>

其它元素 （此处只记录重要部分）
    video：视频
    audio：音频
    canvas：画布；一个图形容器，必须使用脚本(js)来绘制图形
    time：时间 与datetime属性配合使用，datetime属性值2016-10-17T21:30Z中T表示日期与时间的间隔符,Z表示时间为UTC格式.+09:00表示时区的调整。
        格式1：<time datetime="2016-10-10">2016-10-10</time>
        格式2：<time datetime="2016-10-10T09:00">2016-10-10</time>
        格式3：<time datetime="2016-10-10T09:00Z">2016-10-10</time>
        格式4：<time datetime="2016-10-10T09:00+09:00">2016-10-10</time>
    address：联系人相关信息，如姓名，地址，联系方式等

<address>
Written by IOLG<br />
<a href="mailto:yidian.kong@qq.com">Email us</a><br />
Address: 中国,上海市,浦东新区<br />
Phone: +86 021-88888888
</address>

Html5 语义化布局Layout

分类

标签云