我看到了两个div和section在data-role =“page”中使用。例如
@H_301_11@解决方法
<!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>
和
<!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>
SECTION只是一个HTML5标记。由于HTML5相对较新,许多开发人员不正确地使用它,或者您将只看到项目的一部分更新以使用新标记,而其余继续使用DIV标记。您提供的使用SECTION的代码似乎在正确的位置和上下文中使用它,只是为了给你一个想法。
查看关于SECTION标签的这篇简短文章,什么时候使用它,不要想到SECTION只是DIV的一个花哨的名字:http://www.impressivewebs.com/html5-section/
此外,它从来没有伤害检查规格:http://dev.w3.org/html5/spec/Overview.html
对你的问题的简短的回答是,没有实际的区别 – SECTION标记的行为方式与DIV标记完全相同的CSS如何影响它,以及如何使用它从javascript。真正的区别在于如何在创建文档大纲时(例如,通过供稿阅读器)解释标签。
data- *属性是一个新的HTML5添加(article),允许您将任意数据与HTML元素关联。属性中的数据可以通过javascript来实现功能,如工具提示或地理位置数据。以前,这样的数据涉及隐藏的子元素或JSON数据,或者从服务器获取这样的数据的新的AJAX请求。现在,javascript可以简单地读取这些数据属性来获取关于给定元素的关联数据。我不确定你的特定脚本如何使用data-role属性,但是如果属性是在DIV,SECTION,IMG或SPAN上的规范,就没有关系。