深入理解HTML5之标签与文档结构

最新推荐文章于 2024-03-14 22:19:54 发布

置顶 Singh1995

最新推荐文章于 2024-03-14 22:19:54 发布

阅读量795

点赞数 2

分类专栏：我的前端笔记

本文链接：https://blog.csdn.net/qq_40710974/article/details/106029186

版权

我的前端笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在HTML5出现以前，HTML的文档结构不够清晰、明确。我们会发现整个页面的头部、主体、页脚、导航，还有边栏皆是使用DIV元素来构成。

我在学习前端的过程中也经常能看到诸如《DIV+Css》教程之类的书籍，但是<div>并不是一个很能表示文档结构的标签，特别对于搜索引擎和屏幕阅读器来说过多的使用<div>元素，那么这些程序就连“从哪里到哪里是正文”“这个<ul>元素是表示导航菜单，还是表示项目列表”等对于结构分析来说最基本的答案也都不知道。

首先简单看下HTML5的文档结构示意图：

在HTML5中增加了很多跟结构相关的元素，随着现代浏览器的发展H5的标签基本已经可以放心的使用，so 让我们来讲讲这几个标签的用法吧！let's go

article元素

article元素代表文档，页面或应用程序中独立的、完整的、可以独自被外部应用的内容。

论坛帖子
报纸文章
博客条目
用户评论

除了内容部分，一个article元素通常还有自己的标题，或者脚注。

 <article>
        <header>
            <h1>蘋果</h1>
            <p>發表日期：
                <time pubdate datetime="2020/05/09">2020/05/09</time>
            </p>
        </header>
        <p><b>蘋果</b>，植物類水果，多次花果...</p>
        <section>
            <h2>評論</h2>             
            <p>我喜歡蘋果...</p>
        </section>
 </article>

section元素

section元素用来对网站或应用程序中页面上的内容进行分块，一个section通常由内容及其标题组成。

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

nav元素

nav元素是一个可以用来作为页面导航的链接组，值得一提的是一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。

<body>
    <h1>技術質料</h1>
    <nav>
        <li><a href="#">主頁</a></li>
        <li><a href="#">開發文檔</a></li>
        ..moer..
    </nav>
    <article>
        <header>
            <h1>html5與Css3</h1>
            <nav>
                <ul>
                    <li><a href="#">html5</a></li>
                    <li><a href="#">Css3</a></li>
                    ..more.
                </ul>
            </nav>
        </header>
    </article>
</body>

aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用。

侧边栏
广告
导航条

<p>My family and I visited The Epcot center this summer.</p>
 
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

header元素

header元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<header class="page-header">
    <h1>Cute Puppies Express!</h1>
</header>

<main>
    <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</main>

footer元素

footer元素可以作为其上层父级内容区块或者一个根区块的脚注。

脚注信息
作者
相关链接
版权信息

为什么说其上层父级内容区块，因为footer元素在页面中也不是唯一的

    <article>
        <header>
            <h1>html5與Css3</h1>
            <nav>
                <ul>
                    <li><a href="#">html5</a></li>
                    <li><a href="#">Css3</a></li>
                    ..more.
                </ul>
            </nav>
        </header>
        ..more..
        <footer>
            <p>
                <a href="#">編輯</a>
                <a href="#">刪除</a>
                <a href="#">重命名</a>
            </p>
        </footer>

    </article>
    <footer>
        <p><small>版權所有</small></p>
    </footer>

main元素

mian元素呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

<header>Gecko facts</header>

<main role="main">
    <p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
 
    <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>

figure与figcaption

figure代表一段独立的内容, 经常与说明（caption） figcaption 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

<figure>
    <img src="/media/examples/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

ok以上就是HTML5中常用到的结构标签啦！

从只会使用层面，到了解标签语义和用法，知其然知其所以然。

参考文献与摘要

MDN web docs
菜鸟教程
html5与css3权威指南

Singh1995

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
深入理解HTML5之标签与文档结构

在HTML5出现以前，HTML的文档结构不够清晰、明确。我们会发现整个页面的头部、主体、页脚、导航，还有边栏皆是使用DIV元素来构成。我在学习前端的过程中也经常能看到诸如《DIV+Css》教程之类的书籍，但是<div>并不是一个很能表示文档结构的标签，特别对于搜索引擎和屏幕阅读器来说过多的使用<div>元素，那么这些程序就连“从哪里到哪里是正文”“这个<ul>元素是表示导航菜单，还是表示项目列表”等对于结构分析来说最基本的答案也都不知道。首先简单看下HTML5的文
复制链接

扫一扫