2010/7/14 画面サンプル作る際のメモ（一）

本文总结了前端开发中HTML、CSS的基础知识点，包括不同版本的DOCTYPE声明、CSS中的float与display属性使用技巧，以及overflow属性的作用。

五个画面的雏形已经出来了。

其中有一个画面拿到了Design，而其余四个基本上沿用这个画面的Design和CSS等文件。

加入了Javascript的动作及Json文件读取后的数据列表显示。

在这里，稍微纪录下HTML和CSS的笔记。

(虽然可以不用怎么考虑画面设计，话虽如此，很大程度上也要用到。)

-----------------
DOCTYPE
-----------------
HTMLでは、バージョンごとに使用できる要素(タグ)や属性、要素の配置のしかたについて厳密に定義されています。
これはDTD(Document Type Definition:文書型定義)をDOCTYPE宣言で指定することで、そのバージョン規則に添って表示します。

各HTMLバージョンのDOCTYPE宣言の例：

HTML 4.01 Transitional DTD (移行期)
    * <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    * <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Transitional DTD [2000年1月26日のW3C勧告]
    * <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-----------------
CSS：float
-----------------
参照：http://www.css-designsample.com/beginner/hp/float-base.html

* floatを指定したら幅指定=widthを忘れない
* floatを指定したら解除を忘れない
        clear:left
        clear:both
        clear:right

-----------------
CSS：display
-----------------
displayプロパティは要素の表示形式を指定するプロパティです。
このスタイルを設定すると、ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルで表示することができます。

display: inline
    インラインで表示（初期値）
display: block
    ブロックレベルで表示
display: list-item
    リスト項目として表示
display: none
    表示しない（領域そのものを生成しない）

* このプロパティは、要素の表示上の形式を変更するだけです。HTMLとしての形式は変更されません。

参照：http://www.tagindex.com/stylesheet/box/display.html

拡張点：ブロックレベル要素とインライン要素
■ブロックレベル要素
文書の骨組みとなる要素です(例えば見出しや段落など)。このタイプの要素は、body要素の直接の子要素として配置することができます。
このタイプの要素は横幅いっぱいの領域を持つので、要素の前後には自動的に改行が入ることになります。
■インライン要素
文章中の一部として扱われる要素です(例えばリンクや文字の強調など)。このタイプの要素は、通常はブロックレベル要素内で使用します。
このタイプの要素は行の一部として扱われるので、要素の前後には改行は入りません。

参照：http://www.tagindex.com/html_tag/basic/block_inline.html
http://www.tagindex.com/html_tag/elements/index.html

-----------------
CSS：overflow
-----------------
overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

overflow:visible
    ボックスからはみ出して表示されます。これが初期値です。
    尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
overflow:scroll
    入りきらない内容はスクロールして見られるようになります。
overflow:hidden
    はみ出た部分は表示されません。
overflow:auto
    ブラウザに依存します（一般的にはスクロールして見られるようになります）。

参照：http://w3g.jp/css/display_position/overflow

下面是自个儿写着玩的。