Html jquerymobile中页面的tagdiv和tagsection有什么区别_Html_Jquery Mobile

Html jquerymobile中页面的tagdiv和tagsection有什么区别

html jquery-mobile

Html jquerymobile中页面的tagdiv和tagsection有什么区别,html,jquery-mobile,Html,Jquery Mobile,我看到div和section都在data role=“page”中使用。比如说 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <p>This content will be ignored.</p>  <section id="page4" data

我看到

div

和

section

都在

data role=“page”

中使用。比如说

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>This content will be ignored.</p>
<!-- Begin Page 4 -->
<section id="page4" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>External Page!</p>
<p><a href="#page1">Go to First Page</a>.</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- End Page 4-->
<h3>This content will be ignored as well.</h3>
</body>
</html>


此内容将被忽略
jquerymobile
外部页面

奥雷利
此内容也将被忽略。

及


jquerymobile简介
Facebook好友

区别是什么？节的作用是什么？当它没有显示时，它会阻止加载其中的内容吗？

节只是一个HTML5标签。由于HTML5相对较新，许多开发人员不正确地使用它，或者您将只看到项目的一部分更新为使用新标记，而其余部分继续使用DIV标记。您提供的使用该节的代码似乎在适当的位置和上下文中使用了它，只是为了给您一个想法

查看SECTION标签上的这篇简短文章，并在何时使用它，不要以为SECTION只是DIV的一个花哨名称：

此外，查看规格也不会有什么坏处：

不过，对您的问题的简短回答是，没有实际的区别——就CSS如何影响它以及如何从javascript使用它而言，SECTION标记的行为与DIV标记完全相同。真正的区别在于，例如由提要阅读器创建文档大纲时如何解释标记

data-*

属性是一个新的HTML5添加项（），允许您将任意数据与HTML元素关联。javascript可以利用属性中的数据来实现工具提示或地理位置数据等功能。以前，此类数据涉及隐藏的子元素或JSON数据，或者从服务器获取此类数据的新AJAX请求。现在，javascript可以简单地读取这些数据属性，以获取关于给定元素的关联数据。我不确定您的特定脚本如何准确地使用

数据角色

属性，但就规范而言，属性是否位于DIV、SECTION、IMG或SPAN上并不重要。

顺便说一句，在您的示例中，我看到您使用的是jQM Alpha 2。我建议升级到jQM Beta 2，因为它与Alpha版本相比有了很大的变化。我只是从我的参考资料中获取了这段代码。我在自己的文章中使用了Beta。这是另一篇供喜欢阅读的人阅读的清晰文章。您提供的有关规范的链接不再有效：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Intro to jQuery Mobile</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
    </head>
    <body>

        <div data-role="page">

            <div data-role="header">
               <h1>Facebook Friends</h1>
            </div><!-- /header -->

            <div data-role="content">

            </div><!-- /content -->

            <div data-role="footer">
            </div><!-- /footer -->
        </div><!-- /page -->

    </body>
</html>