初识Web前端——语义化标签之结构元素

最新推荐文章于 2022-07-14 11:33:11 发布

Volcano_WQL

最新推荐文章于 2022-07-14 11:33:11 发布

阅读量160

点赞数 1

本文链接：https://blog.csdn.net/qq_45614713/article/details/104644540

版权

结构元素

	## 各元素的介绍参见如下代码

header元素
nav元素
article元素
aside元素
section元素
footer元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构元素</title>
</head>
<body>
<!---->
<header>
    <!--header元素——>具有引导和导航作用的结构元素，
    			可包含所有通常放在页面头部的内容-->
    <h1>网页主题1</h1>
    ...
    <hx>网页主题x</hx>
</header>

<nav>
    <!--nav定义导航链接，可将有导航性质的链接归在一个区域，
    			使页面元素语义更明确-->
    <!--应用于传统导航栏、侧边栏导航、页面导航和翻页导航-->
    <!--所有超连接依次先行排列-->
    <a href="/html/">html</a>
    <a href="CSS">css</a>
    <a href="js">JS</a>
</nav>
<article>
<!--  article代表文档、页面或者应用程序中与上下文不相关的独立部分，
        常用于定义一篇日志、一条新闻或用户评论，
        article通常使用多个section元素进行划分，
        article在一个页面可出现多次-->
    <header>
        <h2>章</h2>
    </header>
    <section>
        <header>
            <h2>节</h2>
        </header>
    </section>
</article>

<article>
    <header>段落标题</header>
    <section>主要内容</section>
    <aside>
        <!--aside用于定义当前页面或文章的附属信息，
            可包含该页面或内容相关的引用、侧边栏、广告、导航条等
            有别于主要内容的部分
            aside元素用法1：被包含在article元素内作为主要内容附属信息-->
        我是主要内容的附属信息
    </aside>
</article>
<aside>
    <!-- article元素用法2：在article外使用，作为页面或站点全局的附属信息   -->
    我是页面附属信息
</aside>
<article>
    <section>
<!--section元素用于对网站或应用程序中页面上的内容进行分块，
        一个section通常由内容和元素组成。
        Attention：
        1.section并非普通的容器元素，可以理解为：它属于文章的一部分。
            不要将section元素用作设置样式的页面容器，这是div特性，
            当容器需要被直接定义样式或通过脚本定义行为时，推荐div
        2.如果article、aside、nav等更符合使用条件，就不必使用section
        3.没有标题的内容区块不要使用section定义-->
    </section>
</article>
<footer>
<!--    footer用于定义一个页面或者区域的底部，可以包含所有放在页面底部的内容-->
</footer>
</body>
</html>

Attention:

head 标签用于定义文档头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
header 标签简单来说,就是具有引导和导航作用的结构元素，
可包含所有通常放在页面头部的内容

Volcano_WQL

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Web前端——语义化标签之结构元素

结构元素 ## 各元素的介绍参见如下代码header元素nav元素article元素aside元素section元素footer元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>结构元素</title&...
复制链接

扫一扫