User:Wini:Homepage
Title
這裡是在記錄一些我在用純文字編輯器寫網頁時的一些小秘訣和心得用的地方。
Main
分為 HTML 和 CSS 兩大主題。
目前因為對標籤和元件的語詞用法有點問題，所以請先不要太在意用詞的部分。
HTML
- HTML 中的大部分的元件 element 大多是長成這樣子的：
<元件(element) 屬性(attribute)="屬性(property)或值(value)">文字資料</元件>
，其中的「<元件>」和「</元件>」分別叫做「起始標籤 start tag」以及「結尾標籤 end tag」，差別只在於一個「/」而已，而前面我寫的元件中的中文後面接的小括弧跟英文是其原名，請別誤會了。以 meta 標籤為例：
<meta name="author" content="某某人" />文字資料</元件>- 在這兒因為 meta 並沒有結尾標籤，所以請在它的起始標籤尾巴空一格寫入一個「/」來結束它的標籤宣告，這是 XHTML 的規格這樣。
- meta |- 元件(element)。用來建立 Meta data profiles 用的元件的樣子。
- name |- 屬性(attribute)。
- author |- 屬性(property)，跟 attribute 同樣被稱作屬性是翻譯上的問題，不要太在意比較好。
- content |- 屬性(attribute)。
- 某某人 |- 值(value)，在這兒是做為 author 這個屬性(property)的值。
- 所有的標籤名稱除了 DOCTYPE 以外，其它全都要小寫。
- 以 id 代替 name 的好處在於，可以套用在絕大多數的標籤 tag 中。
- 利用空字元的 a 元件來當定錨點的好處，在於跳躍過去後按 tab 的方便性。
- 要讓人寄信給你時，信箱位址的值是 mailto ，而信件標題的值則是 subject 。例：
<a href="mailto:test@test.com?subject=test">test</a> - 要設計一個超連結，讓 Firefox 或 Mozilla Suite 加入你的站台到來客的書籤中時，
- 使用純文字編輯器時需要注意的特殊標籤（W3C有關於此的文件待查中）
- |- 半形空格「 」。因為在 HTML 這類的文件中，不管空再多空格都只會被視為空一格而已，而且有很多地方就算你有空格也不一定有效，所以打這個最安定。
- < |- 小於符號「<」。因為在 HTML 文件中「<」跟「>」是用來包住標籤用途的，所以不能直接在純文字編輯器中輸入「<」和「>」，如果你的用途並不是拿它來當包住標籤的話，這時請用「<」和「>」來表示。
- > |- 大於符號「>」。其它說明同「<」。
- & |- And 符號「&」。同樣地，因為「&」會被拿來作為這些特殊標籤的起始作用宣告字元，所以當只是要表示 And 符號「&」時是不能直接輸入「&」的。
- ♥ |- 心型符號 ♥ http://forum.nifty.com/fhpg/utility/faq/0001.htm
- 其它的（非UNICODE式的作法） http://www.kanzaka.net/htmljava/webdings.html
CSS
- font-size 用 xx-small x-small small large x-large xx-large pt px % 。 small 跟 large 的相對字型尺寸是在放大縮小字時比較不會看不清楚，至於 pt 跟 px 設定起來有點麻煩的感覺， % 則是不太建議使用，太麻煩了。（汗）
- position 用 em px % 。 1em 是指「一個全形字體」的大小，所以會隨字體放大縮小而變動，而 % 只有用在 width 等橫向定位時比較好用而已，縱向的請用 px 好好指定，或是利用 margin 跟 padding 來調整。
- color 用 #[00-ff][00-ff][00-ff] … 也就是 #ffffff 或是 #0acbd9 這類的 RRGGBB 16 進位法指定顔色啦，還有直接輸入顏色像 blue red 等的也行，另一個則是 #[0-f][0-f][0-f] 的 #fa7 這種的 RGB 指定法，數字越大的代表顏色越亮，反之越暗。 R=Red G=Green B=Blue 。
- align 有 left center right 而 vertical align 有 top middle bottom
- 除非必要，不然應該盡量避免使用 hover 。除非你有辦法做到讓鍵盤使用者也能在有樣式的時候看到所有資料。
- 可接在 CSS 中的 id name 和 class name 的…嗯…從屬控制？？
- hover |- （滑鼠）鼠標移過
- focus |- （鍵盤）游標移過、大多只能作用於 a 或 form 系的元件而已。
- link |- 未去過的超連結文字。
- visited |- 已參觀過的超連結文字。
- active |- 不明。跟 focus 似乎是相像的東西的樣子。
- after |- 在此元件後方…通常是拿來加入 content:"文字"; 時會用到的。在該元件的 after 的描述式中，繼續加入 font 等的，會影響的是 content 這樣。
- before |- 在此元件前方…通常是拿來加入 content:"文字"; 時會用到的。在該元件的 after 的描述式中，繼續加入 font 等的，會影響的是 content 這樣。
- 可用的滑鼠指標樣式 http://www.w3.org/TR/CSS21/ui.html#propdef-cursor
- tag#name:hover:after 這樣子的用法似乎是 OK 的。意即滑鼠移過去時在其後方顯示東西。
- position:fixed; 屬性的元件，裡面有 <a id="xxx"> 時，若跳躍到該書籤，即 <a href="#xxx"> ，則切換上一頁下一頁時，不會自動切換畫面到該 id 處，簡單說 position:fixed; 並不算是個很完善地可以代替框架頁 frame 和內框架頁 iframe 的樣式，而且就算設計了 overflow:auto; 讓該元件在內部的資料超出設定的範圍，鍵盤也無法在其內上下拉動捲軸，一定得用滑鼠才行。所以除非必要，不然 position:fixed; 應盡量避免使用。（就親和力網站而言，不過如果能好好設計的話也是可以使用的。）