构建HTML5结构（一）

最新推荐文章于 2022-11-26 20:24:47 发布

Tyan0033

最新推荐文章于 2022-11-26 20:24:47 发布

阅读量412

点赞数

分类专栏：前端文章标签： HTML

本文链接：https://blog.csdn.net/qq_43468891/article/details/90490262

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

构建HTML5结构

1.1定义文章块

article元素表示文档，页面中独立的，完整的可以独自被外部应用的内容。可以是博客文章，论坛帖子，用户评论等。

article元素有标题，放在header元素里面。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>构建HTML5结构</title>
    </head>
    <body>
        <article>
            <header>
                <h1>
                    望庐山瀑布
                </h1>
                <time pubdate="pubdate">[唐] 李白</time>
            </header>
            <p>
                日照香炉生紫烟，遥看瀑布挂前川。<br/>
                飞流直下三千尺，疑是银河落九天。
            </p>
            <footer>
                <p>
                    责任编辑：JMin
                </p>
            </footer>
            <section>
                <h2>
                    评论
                </h2>
                <article>
                    <h3>
                        杜甫
                    </h3>
                    <header>
                        <p>
                            <time pubdate datetime="唐朝">1259年前</time>
                        </p>
                    </header>
                    <p>好诗</p>
                </article>
                <article>
                    <h3>
                        李清照
                    </h3>
                    <header>
                        <p>
                            <time pubdate datetime="宋朝">950年前</time>
                        </p>
                    </header>
                    <p>赞同</p>
                </article>
            </section>
        </article>
    </body>
</html>

header元素为标题部分，time元素为原著时间，作者。footer元素为著作权.section元素把评论和正文进行区分

1.2定义内容块

当一个容器需要被直接定义样式或通过脚本定义行为是，应使用DIV元素，而非使用section元素。

DIV元素关注结构独立性，section元素关注内容独立性。

section元素需要包含一个标题元素，一般不用包含头部（header元素）或者底部（footer元素）。

例子：制作节目单

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>构建HTML5结构</title>
    </head>
    <body>
        <SECTION>
            <H1>经典儿歌top10</H1>
            <ol>
                <li>
                    <h3>
                        铃儿响铃当
                    </h3>
                    <span>小太阳组合   《中华小曲库》</span>
                </li>
                <li>
                    <h3>
                        太阳当空照
                    </h3>
                    <span>小星星组合   《中华小曲库101》</span>
                </li>
                <li>
                <h3>
                    我爱北京天安门
                </h3>
                <span>蘑菇组合   《儿童学歌》</span>
            </li>
                <li>
                <h3>
                    外婆的澎湖湾
                </h3>
                <span>金龟子   《儿歌大全》</span>
            </li>
                <li>
                <h3>
                    鲁冰花
                </h3>
                <span>沈梦辰   《鲁冰花》</span>
            </li>
                <li>
                <h3>
                    少先队员歌
                </h3>
                <span>广州第十八小学   《少先队员》</span>
            </li>
                <li>
                <h3>
                    我们要做的党的接班人
                </h3>
                <span>北京第三区小学   《党的接班人》</span>
            </li>
                <li>
                <h3>
                    两只老虎
                </h3>
                <span>小爱   《中华小曲库》</span>
            </li>
            </ol>
        </SECTION>
    </body>
</html>

section元素是对页面的内容分块处理，如对文章分段。相邻的section元素的内容，应当是相关的，而不是像section那样独立。

<article>
    <header>
        <h1>
            潜行者的个人技术
        </h1>
    </header>
    <p>
        N最酷
    </p>
    <section>
        <h2>
            评论
        </h2>
        <article>
            <h3>
                评论者：骚逼豪
            </h3>
            <p>确实N真的很帅</p>
        </article>
        <article>
            <h3>
                评论者：死肥宅
            </h3>
            <p>赞同</p>
        </article>
    </section>
</article><br/><br/><br/><br/><br/><br/><br/>

1.3定义导航块

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<nav>
    <ul>
        <li>
            <a href="/">主页</a>
        </li>
        <li>
            <a href="/blog">博客</a>
    </ul>
</nav>
<article>
    <header>
        <h1>
            HTML5+CSS3
        </h1>
        <NAV>
            <ul>
                <li>
                    <a href="#HTML5">HTML5</a>
                </li>
                <li>
                    <a href="#CSS3">CSS3</a>
                </li>
            </ul>
        </NAV>
    </header>
    <section id="HTML5">
        <h1>
            html5
        </h1>
        <p>
            html5的特性说明
        </p>
    </section>
    <section id="CSS3">
        <h1>
            css3
        </h1>
        <p>
            css3的特性说明
        </p>
    </section>
    <footer>
        <a href="?edit">编辑</a> | <a href="?dalete">删除</a> | <a href="?add">添加</a>
    </footer>
</article>
<footer>
    <p>
        <small>B版权信息</small>
    </p>
</footer>

</body>
</html>

在这个例子中，第一个nav元素用于页面导航，将页面跳转到其他页面上去，如跳转到网站主页或博客页面；第二个nav元素放置在article元素中，表示在文章中进行导航。

1.4定义侧边栏

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主页内容相关的引用，测边框，广告，导航条，以及其他有别于其他内容的部分。

作为主要内容的附属信息部分，包含article元素中，其中的内容可以是与当前文章有关的参考资料，名词解释等。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <header>
        <h1>
            HTML5
        </h1>
    </header>
    <ARTICLE>
        <H1>
            HTML5历史
        </H1>
        <p>
            HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。<br/>
            HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。<br/>
            2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
        </p>
        <aside>
            <h1>
                名词解释
            </h1>
            <dl>
                <dt>WHATWG</dt>
                <DD>Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</DD>
            </dl>
            <dl>
                <dt>W3C</dt>
                <dd>万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
                </dd>
            </dl>
        </aside>
    </ARTICLE>

</body>
</html>

1.5定义主要区域

main表示网页的主要内容。主要内容区域是指与网页标题或应用程序中本页主要功能直接和相关或进行扩展的内容。该内容不包含导航条，版权信息，网站logo，公共搜索表单等。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <header>
        <h1>
            HTML5
        </h1>
        <header>
            <nav>
                <ul>
                    <li><a href="#">首页</a> </li>
                    <li><a href="#">新闻</a> </li>
                    <li><a >其他</a> </li>
                </ul>
            </nav>
        </header>
        <main>
            <h1>科技新闻</h1>
            <nav>
                <li><a href="#web">互联网</a> </li>
                <li><a href="#zmt">自媒体</a> </li>
                <li><a href="#cycx">创业创新</a> </li>
            </nav>
            <h2 id="web">互联网</h2>
            <h3>互联网新闻</h3>
            <p>
                互联网新闻本应用是一款基于互联网开放资源的超级资讯阅读器，内容极其丰富，体验炫酷流畅，体积出乎意料的小，功能意想不到的强大，绝对不输于应用商店上任何一款同类应用。
            </p>
            <h2 id="zmt">自媒体</h2>
            <ul>
                <li>高通魅族达成和解：套路的高通和魅族的套路</li>
                <li>第八届赢在广州创新创业大赛</li>
                <li>2020北京申奥成功</li>
            </ul>
            <h2 id="cxcy">创新创业</h2>
            <ul>
                <li>第八届赢在广州创新创业大赛</li>
                <li>2019年高考还剩13</li>
                <li>全球首家MUJI Hotel落户深圳</li>
            </ul>
        </main>
    </header>
</body>
</html>

Tyan0033

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构建HTML5结构（一）

构建HTML5结构1.1定义文章块article元素表示文档，页面中独立的，完整的可以独自被外部应用的内容。可以是博客文章，论坛帖子，用户评论等。article元素有标题，放在header元素里面。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"&gt...
复制链接

扫一扫