5

HTML5とjQuerymobileを使用してモバイルWebアプリケーションを実行しています。 HTML5モバイルボイラープレートはこれを示唆しています：

<body>
  <div id="container">
    <header>

    </header>
    <div id="main" role="main">

    </div>

    <footer>

    </footer>
  </div> <!--! end of #container -->
</body>

jQuery mobile（セクション「まとめ：基本的なシングルページテンプレート」）では、これが推奨されます

<body> 
    <div data-role="page">

        <div data-role="header"></div>

        <div data-role="content"></div>

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

    </div>
</body>

どちらの方法がより好ましいですか？<header>との違いは何data-role="header"ですか？

私はそのためにグーグルを試しましたが、今のところ答えはありません。

4

2 に答える 2

5

data-*属性は、Webサイト上のスクリプトの情報を提供するためのものです。スクリプトにそのデータを提供する以外に、より広い意味上の目的はありません。それは、サイトのページにある何かを意味するだけです。

この<header>要素はHTML5要素であり、HTML5仕様で「入門またはナビゲーション支援のグループ」を意味するように定義されています。これは、あらゆる場所のすべてのHTMLドキュメントで同じことを意味します。

headerターゲットオーディエンスにHTML5対応のブラウザがあり、マークアップするのがヘッダーである場合は、を使用する必要があります。data-*さらに、次のような属性を使用できます。

<header data-role="header"></header>

使用されている要素がjQuerymobileに実際に影響を与えることはありません。

于 2012-07-12T17:47:18.323 に答える
2

data-*属性にはセマンティック値が含まれていません。スクリプトがマークアップからのデータにアクセスすることのみを許可します。したがって、data-role属性（属性と混同しないでくださいrole）はjQueryMobileにのみ関連します。

要素にはheader意味的な意味がありますが、jQuery Mobileアプリケーションで使用する場合は、も使用する必要がありますdata-role="header"。

于 2012-07-12T17:55:44.953 に答える