lungo.js练习（一）-优快云博客

本文介绍了lungo.js框架的基本使用方法，包括如何正确引入框架及其依赖文件，同时对比了HTML5中section、article与div等标签的区别，帮助读者更好地理解并运用这些标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

最近刚开始接触lungo.js（官网），对此框架还不是很熟悉，也是边学边写，慢慢了解。点击进入官方文档。

因为涉及到一些html5方面的知识，所有刚开始还是要了解一些html5的知识，比如在lungo中是使用的<section>与<article>进行布局。

section、article与div有什么区别呢？点击查看

在lungo的文档上说，一个section就相当于我们应用中的一个view（视图）

div，div是我们平时用的最多的标签，本身没有任何语义，平时只是作为布局来使用。

section，简单的说section就是带有语义的div，<div class="section"></div>就相当于<section id=""></section>

section表示一段专题性的内容，一般会带有标题。当一个标签只是为了样式化或者方便脚本使用时，应该使用div。一般来说，当元素内容明确地出现在文档大纲、文章章节、博客条目、用户评论部分或者论文中有编号的部分时，section就是适用的。

article， article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块。

article代表的内容可以被外部引用。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。如果元素的内容集中到一起显示可以表达相对独立完整的意思，那就可以定义成article。

nav和aside的使用也是如此，这两个标签也是特殊的section。

-------------------------------------------------------------------------------

当我们在官网下载完lungo，并嵌入网页使用的时候会出现网页整体式黑色的情况，这个的原因是没有引用quo.js

去quo.js网站下载。下载地址

并且，在引用的时候，最好把css放在之前引用，把js放在最后引用。例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="package-lungo-2.2.1/lungo.css">
<link rel="stylesheet" href="package-lungo-2.2.1/lungo.icon.css">
<link rel="stylesheet" href="package-lungo-2.2.1/lungo.theme.css">
<title>lungo测试</title>
</head>

<body>
<section id="main_section">
    <article id="main" class="active">
        {{CONTENT}}
    </article>
    <footer>
        <nav>
            <a href="#" data-icon="menu" class="active">个人</a>
            <a href="#" data-icon="share">分享</a>
            <a href="#" data-icon="user">用户</a>
            <a href="#" data-icon="users">群组</a>
        </nav>
    </footer>
</section>

<script src="package-lungo-2.2.1/quo.js"></script>
<script src="package-lungo-2.2.1/lungo.js"></script>
<script type="text/javascript">
Lungo.init({
	name:"example",
	resources:['section_to_load.html'],
	});
</script>
</body>
</html>

转载于:https://my.oschina.net/gavin0/blog/266200