Html jquery mobile中页面的标签div和标签部分有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7097295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what is the difference between tag div and tag section for pages in jquery mobile
提问by Shisoft
I saw both divand sectionbeen used in data-role="page". For example
我看到了两者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>
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 sectionused for?Will it prevents load contents in it when it is not shown?
有什么区别，有什么section用？不显示的时候会阻止加载里面的内容吗？
回答by Chris Baker
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.
SECTION 只是一个 HTML5 标签。由于 HTML5 相对较新，许多开发人员没有正确使用它，或者您只会看到项目的一部分更新为使用新标签，而其余部分继续使用 DIV 标签。您提供的使用 SECTION 的代码似乎在适当的位置和上下文中使用它，只是为了给您一个想法。
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/
查看这篇关于 SECTION 标签的简短文章以及何时使用它，不要认为 SECTION 只是 DIV 的一个花哨名称：http: //www.impressivewebs.com/html5-section/
Also, it never hurts to check out the specs: http://w3c.github.io/html/sections.html#the-section-element
此外，查看规格永远不会有什么坏处：http: //w3c.github.io/html/sections.html#the-section-element
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.
不过，对您的问题的简短回答是，没有实际区别 - SECTION 标签的行为与 DIV 标签完全相同，就 CSS 如何影响它以及您如何从 javascript 使用它而言。真正的区别在于创建文档大纲时标签的解释方式，例如，通过提要阅读器。
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-roleattribute, but it doesn't matter if the attribute is on a DIV, a SECTION, an IMG, or a SPAN insofar as the specification goes.
这些data-*属性是新的 HTML5 添加（文章），允许您将任意数据与 HTML 元素相关联。javascript 可以利用属性中的数据来实现工具提示或地理定位数据等功能。以前，此类数据涉及隐藏的子元素或 JSON 数据，或从服务器获取此类数据的新 AJAX 请求。现在，javascript 可以简单地读取这些数据属性来获取有关给定元素的关联数据。我不确定您的特定脚本究竟是如何使用该data-role属性的，但就规范而言，该属性是位于 DIV、SECTION、IMG 还是 SPAN 上并不重要。
