html5 的框架 html5基础框架

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、页面主体框架结构有哪些？
• 二、案例测试

• 1.标题栏
• 2.主要区域
• 3.导航条
• 4.区块、页脚栏和文章块

• 三、总结

---

前言

这周看了些mooc和书，把第一部分的基础内容巩固了一下，了解了HTML5的基础结构，定义一个Web最基本的构架，首先得打好地基。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、页面主体框架结构有哪些？

比如，文章块、区块、导航条、边栏、主要区域、标题栏、标题组、页脚栏。

二、案例测试

1.标题栏

代码如下：

<header>
        <h1>Joseph的第一个测试网站</h1>
        <h2>学习HTML5的第一个星期</h2>
        <h4>First</h4>
</header>

header用来标识页面标题栏，通常用来放置整个页面，或者一个内容快的标题。在浏览器中大致就是这样：

2.主要区域

代码如下：

<main>
    <nav>
        <h3>导航</h3>
        <a href="#">我的信息</a>
        <a href="#">首页</a>
        <a href="#">设置</a>
    </nav>
    <section>
        <h2>主要内容</h2>
        <article>
            <header>
                <h1>谈谈我的心得体会</h1>
            </header>
            <p>bulabulabula.......</p>
            <footer>
                <h2>文章脚注</h2>
            </footer>
        </article>
    </section>
    <aside>
        <h3>边栏</h3>
    </aside>
    <footer>
        <h2>网页脚注</h2>
    </footer>
</main>

这段比较长，中间有包含了一些其他结构，先说说主要区域，它用来标识Web中的主要内容，其中的内容对于文档应当是唯一的，不应该在Web中重复出现。

在浏览器中大致就是这样：

3.导航条

代码如下：

<main>
    <nav>
        <h3>导航</h3>
        <a href="#">我的信息</a>
        <a href="#">首页</a>
        <a href="#">设置</a>
    </nav>

nav用来标识页面导航的链接组。以我的理解就是，一个简单的页面链接，< a href="" >< /a >引号里就是跳转的链接网址。

在浏览器中大致就是这样：

4.区块、页脚栏和文章块

代码如下：

<section>
        <h2>主要内容</h2>
        <article>
            <header>
                <h1>谈谈我的心得体会</h1>
            </header>
            <p>bulabulabula.......</p>
            <footer>
                <h2>文章脚注</h2>
            </footer>
        </article>
    </section>

区块用来标识文档里的节，在页面上多对内容进行分区。而文章块则用来标识页面中一块完整的、独立的、可以被转发的内容。页脚栏，用来标识文档或节的页脚。

三、总结

借鉴了书上的顺序，然后进行了总结，做了第一个最简单基础的网站页面，只是为了熟悉一下这些结构，方便以后创建面向用户更简洁、友好的页面。