ある程度iUIを把握しました

まずは現物。
iUIテストページ
iPhoneからで無くとも、SafariやFirefoxからもそれっぽいイメージを感じる事が出来ます。

トップページはこんな感じ。
この画面に表示されているものが、ソースとして一括りで書かれている感じです。
上バー「iUIテストページ」は、以下のソースを入れておくと自動で生成されます。
view source
print?
1.<div class="toolbar">
2.　<h1 id="pageTitle"></h1>
3.　<a id="backButton" class="button" href="#"></a>
4.</div>
上バー以下のソースはこちら。
view source
print?
1.<ul id="home" title="iUIテストページ" selected="true">
2. <li class="group">テスト中ページ</li>
3. <li><a href="#pages">ページテストまとめ</a></li>
4. <li class="group">その他リンク等々</li>
5. <li><a href="http://holmes21.blogspot.com/" target="_self">ほるめすメモ帳inBlogger </a></li>
6. <li><a href="index.htm" target="_self">ほるメモいんぶろ - 投稿一覧</a></li>
7. <li><a href="http://google.co.jp/" target="_self">Google</a></li>
8.</ul>
根本はリスト表示で、CSSでの整形のおかげでiPhoneらしいUIが表示されているのです。
<ul>にselected="true"を宣言しているものが、トップページ表示となります。
<li class="group"></li>が区切り(仕切り？セパレータ？)となり、
文章を含むことが出来ます。

リンクは2種類、ページ内部とそれ以外があります。
<li><a href="#pages"></a></li>
　→これが同htm内の他のグループへ遷移するための表示方法。
<li><a href="index.htm" target="_self"></a></li>
　→これがそれ以外、別htmや外部サイトへ遷移するための表示方法。
　　target="_selfが重要で、無いと何も起こりません。
中に<a>を含まないことで、普通の表示も出来ます。
ここで説明を終えたので、以下はせっかく撮ったスクリーンショットを。




このパネル表示は上と違い、<div>で書かれます。
view source
print?
1.<div id="ppanel" class="panel" title="パネル表示">
2. <h2>&lt;div&gt;を使用する。<br>
3. class="panel"とする。<br>
4. titleはページ名になる。</h2>
5.</div>
同じようにidにはグループ名を用意し、
classには"panel"とすることでパネル表示になります。
画面では背景が途中で切れていますが、iPhone側では全体に表示されます。

あと、ここでは使用していませんが、テキストボックスやON/OFFスイッチも配置できます。
iPhoneやSafari上では遷移されて表示されるものは、
全て1ファイルにまとめて書かないといけないことから、
普通に作成するサイト構成とはだいぶ変わっています。
同iUI内で表示したいモノはページ1つに全て収めないといけないので、
ブログページを作るのであれば初めから全てロードしておく必要があるわけですね。
なるほどなるほど。