html5 body标签

不负韶华ღ

已于 2022-10-04 22:37:33 修改

阅读量1.2k

点赞数

分类专栏： # html5 + css3 + js 文章标签： html5 html 前端

于 2022-09-30 12:36:20 首次发布

本文链接：https://blog.csdn.net/weixin_49346755/article/details/127121002

版权

html5 + css3 + js 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

HTML 不仅能够定义网页的单独部分（例如“段落”或“图片”），还可以使用块级元素（例如“标题栏”、“导航菜单”、“主内容列”）来定义网站中的复合区域。

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

页眉：通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。

导航栏：指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

主内容：中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏：一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚：横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。
<body> 标签定义文档的主体。<body> 标签包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航“或”找到主内容“等任务。

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：<header>：页眉。<nav>：导航栏。<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。<aside>：侧边栏，经常嵌套在 <main> 中。<footer>：页脚。如下图所示：

在这里插入图片描述

1、<header>

<header>标签是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。<header>标签通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。

<header>
    <h1>网页主题</h1>
</header>

2、<nav>

<nav>标签用于定义导航链接，是html5新增的元素。该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。

<nav>标签通常可以用于传统导航条、侧边栏导航、页内导航、翻页操作等情况。

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">公司概况</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

3、<main>

<main> 标签用于指定文档的主体内容。<main> 标签中的内容在文档中是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注意在一个文档中，<main> 元素是唯一的，所以不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

如下图所示，<main>标签对应于布局中的主内容区。在<main>标签下面可以有<article>标签、<section>标签。

<main>
    <article>
        <header>
            <h1>标题</h1>
        </header>
        <section>
            <p>文章内容</p>
        </section>
        <footer>
            文章分页列表
        </footer>
    </article>
</main>

4、<article>

<article>标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。

<article>标签通常使用多个<section>标签进行划分，一个页面中<article>标签可以出现多次。

<article>
    <header>
        <h1>第一章</h1>
    </header>
    <section>
        <header>
            <h2>第1节</h2>
        </header>
    </section>
    <section>
        <header>
            <h2>第2节</h2>
        </header>
    </section>
</article>

5、<aside>

<aside>标签用来定义当前页面或者文章的复数信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。

<aside>标签主要的用法分为两种：
1、被包含在<aside>标签内作为主要内容的附属信息。
2、在<aside>标签之外使用，作为页面或者站点全局的附属信息部分。最常用的形式是侧边栏，其中的内容可以使友情链接、广告单元等。

<article>
    <header>
        <h1>标题</h1>
    </header>
    <section>文章主要内容</section>
    <aside>其他相关内容</aside>
</article>
<aside>右侧菜单</aside>

6、<section>

<section>标签用于对网站或应用程序中页面上的内容进行分块，一个<section>标签通常由内容和标题组成。

在使用<section>标签时，需要注意一下三点：
1、不要将<section>标签用作设置样式的页面容器，那是div的特性。
2、如果<article>标签、<aside>标签或<nav>标签更符合使用条件，那么不要使用<section>标签。
3、没有标题的内容区块不要使用<section>标签定义。

<article>
    <header>
        <h2>小张的个人介绍</h2>
    </header>
    <p>小张是一个好学生，是一个帅哥。。。</p>
    <section>
        <h2>评论</h2>
        <article>
            <h3>评论者：A</h3>
            <p>小张真的很帅</p>
        </article>
        <article>
            <h3>评论者：B</h3>
            <p>小张是一个好学生</p>
        </article>
    </section>
</article>

7、<footer>

<footer>标签用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。与<header>标签相同，一个页面中可以包含多个<footer>标签。同时，也可以在<article>标签或者<section>标签中添加<footer>标签。

<article>
    文章内容
    <footer>
        文章分页列表
    </footer>
</article>
<footer>
    页面底部
</footer>

不负韶华ღ

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5 body标签

body> 标签定义文档的主体。标签包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。为页面设计布局一般在标签下，一个页面标签主要包括、、、、、、等，这也是html5中的一些标签。标签为页面或文本片段的首部（页面顶部header，亦或某片段header），包含标题元素、logo、搜索表单等相关信息。
复制链接

扫一扫