星期日, 11月 11, 2007

手刻 HTML 簡單入門文件

前言

本文單純當作文件和資源整理用的，內文就隨便寫了這樣。

另外為了避免我出事無法完成，所以先把綱要和草稿扔上來。

對了，一直忘了要先給這東西，各位寫好網頁時，記得丟上這網頁檢查一下哦。 → The W3C Markup Validation Service

  • 2008.05.26 前言中新增了「W3C Validator」。
  • 2008.05.06 新增了「第二篇（草稿）」。
  • 2008.04.26 「相關文章」加了個 IE6 上的 CSS 設計問題處理法。
  • 2008.03.24 新增了「CSS 教學文件暫放」。
  • 2007.11.11 建立本篇文章，放置教學文件第一篇的下載連結。

教學文件下載

第一篇
第二篇（草稿）

相關文章

筆者的筆記

筆記
  1. 第二篇 - 元素及屬性及值（概念 - 單一份網頁文件內，有些元素可以存在兩個以上，但有些元素只能存在有一個；同理某些屬性的「值」也是只能存在一個。）
  2. 第二篇附錄一 - 特殊字元(Character entity references, 目前我看到的中譯有「字元實體參照碼」「實體碼」跟「字元實體參引」幾個）
  3. 第二篇附錄二 - 確保 HTML source 的易讀性(概念 - 使用換行、隔行分開不同區，使用空白鍵打半形空白縮排，不過我不建議用 Tab 縮，因為縮太大了；使用註解文字，方便搜尋，或是隔很久以後重讀時能瞭解每個區的作用。）
  4. 第二篇附錄三 - 方便檢視網頁文件結構的軟體，在 Firefox 上有個 DOM Inspector 可以用，用預設安裝方式就會送，可以從「工具」中找到「 DOM 觀察器」這項目就是，然後打網址上去就可以列出網頁結構來，圖示工具列左邊第一個則是可以讓你用滑鼠直接點網頁，來顯示出該區的節點資料（element, id, class 等）。
  5. 第三篇 - DOCTYPE
  6. 第四篇 - 裝飾語言的 CSS 及 id 、 class（概念 - 組合的技巧 → 多重樣式表、多重 class name）
  7. 第五篇 - 網頁親和力（有意義的網頁[超連結文字有說明目標內容、圖片替代文字有說明圖片內容]畫面舒適可讀性、瀏覽器差異及獨占支援的技術、各種行動平台〔手機或 PDA 或遊戲機〕上的顯示畫面、列印用樣式、善待視覺障礙人士、顧慮「數據機撥接上網、無線上網」的連線速度）、針對不支援 frame 或某些功能的瀏覽器的關心
  8. 第六篇 - 程式語言的 JavaScript
  9. 第七篇 - 後端伺服器語言概要
接下來章節會用到的文件暫放 略過本區 
2
HTML 元素
這裡開始，會直接把 HTML 中常用也很實用的元素，一次教給各位。
不過在開始前，希望能記住幾個簡單的使用規則。
- 標籤的使用規則: 元素要能產生標記的功能，就要用小於符號 < (lesser than) 跟
大於符號 > (greater than) 兩個括號(bracer)包住，形成標籤；並且再用一個起始標籤，
跟一個結束標籤，包住要定義結構的內文。
- 標籤的內容: 起始標籤，寫成 <element> ，結束標籤，寫成 </element> 。
而起始標籤中，又有「屬性(attribute)」跟屬性的「值(value)」兩要素，
而同一個標籤中，這兩要素是可以複數存在的。
所以一個起始標籤格式可能寫成這樣: <element attr1="value" attr2="value21 value22"> 。
這裡要注意的，是在於半形空格的定義；半形空格是用來區別不同要素的，
尤其重要的是要把起始標籤中的元素名稱跟屬性名稱隔開，
所以用很多半形空格是沒意義的，在適當的地方放置半形空格就好。
- 元素的巢狀結構: HTML 是很重視一層父元素包一層子元素，彼此間不重疊
（亦即裡面元素的結束標籤不會跑到外面來）的父子巢層結果的。
然而除了各層不重疊外，也有不可放在某元素中的某元素存在的，
大致的規則如下:
-- 區塊(block)元素與行內(inline)元素: 就跟各位看的書本一樣，
段落中有些字會特別粗，或字體不同，或是斜體或是加線，
這裡的段落就叫做區塊元素，而那些字型效果就是由行內元素處理的。
在 HTML 中，行內元素是不能當區塊元素的父巢層的。
-- 不可以包住某些元素的元素: 就跟各位看的書本一樣，
段落不會裡面再包一個段落（想像一下，書中的一段讀到一半，忽然插個別的段落進來。），
段落不會裡面再包一個表格……或者應該這樣說， HTML 中的段落 p 元素，
除了放行內元素外，幾乎不能放任何區塊元素進去。

嗯，上面的說明很長，不過這是因為下面不會再特別說明的關係。
那下面就開始介紹常用的 HTML 元素了。
（如果各位在第一篇有看過網頁原始碼的話，那應該也會記住一些。）

fieldset 與 legend: fieldset 等於是用框框包住一個區域的修飾用元素，而 legend 則是這元素的標題，兩者是搭一起用的， fieldset 起始標籤後面，一定要馬上接 legend 元素。另外可以把這組元素，當成是有畫了格子的一個章節，還有該章節的大標題來看。


備註:
- HTML 中常用元素表: http://www.w3.org/TR/html401/index/elements.html

3
標準網頁
標準網頁？那是啥？
其實大多數的網頁，都是隨瀏覽器任意解釋的，
這點在只使用我上面說的那些元素跟屬性，
而且有好好寫起始結束標籤時，可能看不太出來，
不過以後各位的網頁結構越趨複雜，並且加入使用 HTML 以外的語言後，
就會知道各瀏覽器的「怪癖(Quirk)」模式有多嚴重了。
總之為了避免你寫出來的網頁，搬到另一個瀏覽器上看，
卻跑出非常不一樣的結果，就必須讓瀏覽器依照一個公訂規格來排版，
而訂立這些規格的，最大的一個組織，就是「W3C」
（另外就筆者所知，創立W3C的，就是當初發明文件連結機制的人。）

總之瀏覽器過去各造新功能搶奪市場的事就先不提，
這裡只告訴各位怎麼弄出標準網頁。

標準網頁的宣告方式，就是在 HTML 文件第一行，加入 DOCTYPE 宣告。
DOCTYPE 裡面會包含你所要使用的規格版本、嚴謹度、
還有規格書參照網址（離題扯一下，像 Apache 這玩意，要是參照網址查不到
東西，那個網頁就沒辦法用，所以以後有要用 Apache 的人，記得把規格書
抓回來本機，再從這兒指定本機路徑……嗯，大概是這樣弄啦。）。

規格版本目前常用的有 HTML 4.01 和 XHTML 1.0 ， XHTML 還有個 1.1 的，
不過用那個是在自虐，先別碰比較好。規格版本不同，主要是影響
瀏覽器排版出來的樣貌，不過各瀏覽器還是會有極少部分不同，
所以往後寫到 CSS 時，需要注意一下。
（對 HTML 跟 XHTML 的差別在哪有興趣的，可以參考後面的備註。）
嚴謹度，這會依據規格書所寫的，限定你的網頁元素可以用到哪些，
還有什麼元素不能包住什麼元素的樣子，總之寫得簡單，就不必太在意。
規格書參照網址，基本上就寫連到 W3C 網站上的就好，
然後注意規格書的檔名是 dtd 這樣。
（基本上 HTML 文件是不會連到該網址檢查這玩意的）

4
CSS
div span 是沒有意義的元素，純粹只是為了加入樣式而用的。
也就是說，在純 HTML 文件中，這兩個元素對解釋文章結構並沒有用處，
所以 body 內只用 div 跟 span 這種事，最好只拿來當個人娛樂，
別丟上網路虐待人。
CSS 教學文件暫放 略過本區 
html body p  /* html 下的 body 內的 p 元素 */
html > body > p  /* 更明確指定 p 的層次觀念的選擇子 */
div.cLass  /* class 的名稱為 "cLass" 的 div 元素 */
span#Id  /* id 的名稱為 "Id" 的 span 元素 */
a:focus  /* 當游標移到 a 元素上時…… */
ul li.test:hover  /* 當鼠標放在 ul 下 class 名稱為 "test" 的 li 元素時…… */
table tr:first-child  /* table 下的第一個 tr 元素 */
a[href] img:after  /* 在有弄超連結的 a 裡的 img 元素的後面……（可以寫 {content: attr(title)} 或 {content: "文字"} 等的來跑出文字來） */
h2+p  /* 緊接在 h2 後的第一個 p 元素 */
table tr td+td+td  /* 緊接在 table tr td 後第一個 td 後的第一個 td 元素 */
a[href*="moztw"]  /* 有弄超連結的 a 元素中的 href 屬性若是包含 "moztw" 字串的話…… */
at

沒有留言:

張貼留言