20180611-前端系统学习-HTML之内容分区元素

1. article

文档、页面、应用或者网站中可独立分配或可复用的结构
使用场景

--文章（博客或者报刊）

--论坛帖子

--用户评论

--独立的插件

--任何独立的内容

通常有标题(header)，脚注(footer)。
可以有嵌套（内层内容和外层内容相关）

<article>
        <header>
            <h2>To be wild疯狂旅行团，全球四大目的地，免费旅行由你决定</h2>
        </header>
        <div>
            任何事。。。
        </div>
    </article>

2. section

对网站或者应用程序中页面上的内容进行分块

--有主题的内容

--一般都会有标题

应用场景

--文章的章节

--Tab的内容

    <article>
        <header>
            <h1>前端基础课程</h1>
        </header>
        <section>
            <h2>前端入门</h2>
            <div>web前端...</div>
        </section>
        <section>
            <h2>HTML</h2>
            <div>HTML是...</div>
        </section>
    </article>

3. div

无任何语义
应用场景

--内容容器

--样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style>
        *.intro{text-indent:2em}
    </style>
</head>
<body>
    <article>
        <header>
            <h1>前端基础课程</h1>
        </header>
        <section>
            <h2>前端入门</h2>
            <div class="intro">
                <p>前端是...</p>
                <p>入门课程中...</p>
            </div>
        </section>
    </article>
</body>
</html>

区别：（从div到article逐渐增强）

div --无任何语义
section --主题性的内容
article --完整的独立的内容

4. nav

含有多个超链接的区域

--其他页面

--页面内部其他部分

--一个页面可以有多个nav

应用场景

--传统导航

--侧边栏导航

--页内导航

    <nav>
        <ul>
            <li>
                <a href="/zh-CN/docs/Web">技术</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="/zh-CN/docs/Learn">参考和指引</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="/zh-CN/docs/MDN/Feedback">反馈</a>
            </li>
        </ul>
    </nav>

5. aside

表示一个和其余页面几乎毫无关系的部分
主要场景

--包含在article元素中作为主要内容的附属信息

$参考资料

$名词解释

$相关引用

$个人资料

--article元素之外，页面或者站点全局的附属信息

$侧边栏

$广告

        <section>
            <h3>性能面板</h3>
            <aside>Note:在Chrome57之后时间线面板更名为性能面板</aside>
            <p>使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。</p>
        </section>

6. header

概括性内容

--可能包含标题元素

--也可以包含其他元素，像logo、分节头部、搜索表单等。

    <header>
        <a href="/zh-CN" class="logo">MDN Web文档</a>
        <div id="nav-sec">登录</div>
        <nav id="main-nav" class="nav-main">...</nav>
    </header>

7. h1-h6

简要描述该节的主题
重要程度h1>h2>h3>h4>h5>h6

8. footer

章节内容或者根节点元素的页脚
常用场景

--文章作者

--相关阅读链接

--版权

    <footer id="nav-footer" class="nav-footer">
        <a href="/zh-CN/" class="nav-footer-logo">MDN Web文档</a>
        ...
    </footer>

20180611-前端系统学习-HTML之内容分区元素

猜你喜欢