jquery mobile中页面的标签div和标签部分有什么区别 [英] what is the difference between tag div and tag section for pages in jquery mobile

查看：15 发布时间：2021/12/27 19:47:28 html jquery-mobile

本文介绍了jquery mobile中页面的标签div和标签部分有什么区别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我看到在 data-role="page" 中同时使用了 div 和 section.例如

<头><meta charset="utf-8"/><身体><p>此内容将被忽略.</p><!-- 第 4 页开始 --><section id="page4" data-role="page"><header data-role="header"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><p>外部页面！</p><p><a href="#page1">转到第一页</a>.</p>

<footer data-role="footer"><h1>O'Reilly</h1></footer></节><h3>该内容也将被忽略.</h3>

和

<头><meta charset="utf-8"/><title>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><身体><div data-role="页面"><div data-role="header"><h1>脸书好友</h1></div><!--/header --><div data-role="内容"></div><!--/content --><div data-role="footer"></div><!--/footer --></div><!--/page -->

有什么区别，section是干什么用的?不显示的时候会阻止加载里面的内容吗?

解决方案

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

查看这篇关于 SECTION 标签以及何时使用它的简短文章，不要认为 SECTION 只是 DIV 的一个花哨名称:http://www.impressivewebs.com/html5-section/

此外，查看规范也无妨:http://w3c.github.io/html/sections.html#the-section-element

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

data-* 属性是新的 HTML5 添加(文章) 允许您将任意数据与 HTML 元素相关联.javascript 可以利用属性中的数据来实现工具提示或地理定位数据等功能.以前，此类数据涉及隐藏的子元素或 JSON 数据，或从服务器获取此类数据的新 AJAX 请求.现在，javascript 可以简单地读取这些数据属性来获取有关给定元素的关联数据.我不确定您的特定脚本究竟是如何使用 data-role 属性的，但该属性是在 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://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.

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中页面的标签div和标签部分有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

jquery mobile中页面的标签div和标签部分有什么区别 [英] what is the difference between tag div and tag section for pages in jquery mobile

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

jquery mobile中页面的标签div和标签部分有什么区别 [英] what is the difference between tag div and tag section for pages in jquery mobile

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭