jquery mobile中页面的tag div和tag部分之间有什么区别 [英] what is the difference between tag div and tag section for pages in jquery mobile
问题描述
我在 data-role =页面中看到。例如 div 和部分
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< / head>
< body>
< p>此内容将被忽略。< / p>
<！ - 开始第4页 - >
< section id =page4data-role =page>
< header data-role =header>< h1> jQuery Mobile< / h1>< / header>
< div class =contentdata-role =content>
< p>外部页面！< / p>
< p>< a href =＃page1>前往第一页< / a>。< / p>
< / div>
< / section>
<！ - 结束页4 - >
< h3>此内容也将被忽略。< / h3>
< / body>
< / html>
和
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< title> jQuery Mobile简介< / title>
< link rel =stylesheethref =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好友< / h1>
< / div><！ - / header - >
< div data-role =content>
< / div><！ - / content - >
< div data-role =footer>
< / div><！ - / footer - >
< / div><！ - / page - >
< / body>
< / html>
有什么区别，以及部分用过for？它会在未显示时阻止其中的加载内容吗？
SECTION只是一个HTML5标记。由于HTML5相对较新，许多开发人员使用不当，或者您只会看到项目的某些部分更新以使用新标记，而其余部分继续使用DIV标记。您提供的使用SECTION的代码看起来会在适当的位置和上下文中使用它，只是为了给您一个想法。
查看关于SECTION标签以及何时使用它，不要认为SECTION只是DIV的一个奇特名称： http://www.impressivewebs.com/html5-section/
此外，它不会伤害检查规格： http://dev.w3.org/html5/spec/Overview.html
但问题的简短回答是，没有实际的区别 - 就CSS如何影响它以及如何使用它而言，SECTION标签的行为与DIV标签完全相同它来自JavaScript。真正的区别在于如何在创建文档大纲时解释标签，例如由供稿阅读器。
data- * 属性是一个新的HTML5新增功能（文章）它允许您将任意数据与HTML元素相关联。属性中的数据可以被JavaScript用来实现诸如工具提示或地理定位数据等功能。以前，此类数据涉及隐藏的子元素或JSON数据，或者是从服务器获取此类数据的新AJAX请求。现在，javascript可以简单地读取这些数据属性以获取有关给定元素的关联数据。我不确定您的特定脚本如何使用数据角色属性，但属性是否位于DIV，SECTION，IMG上并不重要，或规格范围内的SPAN。
I saw both div and section been used in data-role="page". For example
<!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>
and
<!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>
What's the difference and what is section used for?Will it prevents load contents in it when it is not shown?
SECTION is simply an HTML5 tag. Since HTML5 is relatively new, many developers improperly use it, or you'll see only portions of a project updated to use the new tags while the rest continue to use DIV tags. The code that you have provided that uses SECTION does appear to use it in the proper place and context, just to give you an idea.
Check out this brief article on the SECTION tag and when to use it, don't get the idea that SECTION is just a fancy name for DIV: http://www.impressivewebs.com/html5-section/
Also, it never hurts to check out the specs: http://dev.w3.org/html5/spec/Overview.html
The short answer to your question, though, is that there is no practical difference - a SECTION tag will behave exactly the same as a DIV tag in terms of how CSS affects it and how you work with it from javascript. The real difference is in how the tags are interpreted when a document outline is created, for example, by a feed reader.
The data-* attributes are a new HTML5 addition (article) that allow you to associate arbitrary data with an HTML element. The data within the attributes can be harnessed by javascript to implement features like tooltips or geolocation data. Formerly, such data had involved hidden child elements or JSON data, or a new AJAX request to fetch such data from the server. Now, javascript can simply read these data attributes to get associated data about a given element. I am not certain how exactly your particular script makes use of the data-role attribute, but it doesn't matter if the attribute is on a DIV, a SECTION, an IMG, or a SPAN insofar as the specification goes.
这篇关于jquery mobile中页面的tag div和tag部分之间有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
