HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5新的语义标签——大纲算法大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

我们都知道,在HTML5中,引入了一批新的语义标签,比如<header>,<section>,<footer>,<nav>,<aside>,<article>,<blockqouet>等等。

之所以加入这些标签,是为了解决HTML4中的div与h标签无法清晰的表示整个文档的大纲,导致整个文档的结构层次混乱。

知道了这些标签的由来和作用,我们就能很容易地判定该在何时再哪种上下文环境中应用这些标签

下面就分别来说说这些用于生成大纲的语义标签在何时使用。

<!doctype html>
@H_262_30@<html>
    @H_262_30@<head>@H_262_30@</head>
    <!--注意,新的大纲语义标签全部用于body中-->
    @H_262_30@<body>
        @H_262_30@<header>
            @H_262_30@<nav>@H_262_30@</nav>
            <!--nav标签包含了一系列链接,这些内部或外部链接不计入文档大纲,一般用于导航菜单-->
        @H_262_30@</header> 
        <!--header标签定义了页面头部,它通常包含网站@L_@R_674_11248@_15@,站点名称和可能的水平菜单(导航),该标签里的内容不计入文档的大纲,所以,如果你的内容是包含在文档大纲中的,请不要将它放入header-->
        @H_262_30@<section>@H_262_30@</section>
        <!--section,分节。类似于我们小学语文时根据段落间的相关度将若干个段落分为一组,整个正文部分被分为好几个组,不同的是,在这里,每个分组里面的内容还可以再分组(嵌套),总之,每个分节里的内容都是具有很强相关度的-->
        @H_262_30@<section>
            @H_262_30@<section>@H_262_30@</section>
            @H_262_30@<section>
                @H_262_30@<h1>标题一@H_262_30@</h1>
                @H_262_30@<p>这里是一段文字@H_262_30@</p>
                @H_262_30@<article>
                    @H_262_30@<h2>文章标题@H_262_30@</h2>
                    @H_262_30@<p>文章摘要@H_262_30@</p>
                    @H_262_30@<p>文章内容@H_262_30@</p> <!--这里是整篇文章,由于篇幅,这里用一个p标签代表-->
                @H_262_30@</article>
                <!--一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用<article>元素定义。该标签主要用于带有摘要文章列表文章内容页-->
            @H_262_30@</section>
            @H_262_30@<aside>@H_262_30@</aside>
            <!--aside标签主要用于与大纲内容无关的文档流,例如解释栏,广告栏,阅读排行,推荐文章等,而且大多数情况下,被用于侧栏-->
        @H_262_30@</section>
        @H_262_30@<section>
            @H_262_30@<h3>我的论点@H_262_30@</h3>
            @H_262_30@<section>
                @H_262_30@<h4>论点一:XXX@H_262_30@</h4>
                @H_262_30@<blockquote>尼采说:XXXXXXX@H_262_30@</blockquote> 
                <!--blockquote是一个块级引用,如其名称,主要用于引用一段外部内容,该内容不计入文档大纲-->
            @H_262_30@</section>
            @H_262_30@<section>@H_262_30@</section>
        @H_262_30@</section>
        @H_262_30@<footer>@H_262_30@</footer>
        <!--footer定义了页脚,典型地,被用来包含版权信息,法律声明和一些其他链接友情链接)-->
    @H_262_30@</body>
@H_262_30@</html>

还有很多标签,由于不常用,这里就先不说了。

大佬总结

以上是大佬教程为你收集整理的HTML5新的语义标签——大纲算法全部内容,希望文章能够帮你解决HTML5新的语义标签——大纲算法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。