我們昨天說到，PHP是和HTML標籤語法配合的一種程式語言，所以，當然我們要對HTML有點認識，如果你完全不會HTML那也沒關係，HTML語法的學習是累積式的，我們遇到要用什麼再來學什麼就好了，只要記得，絕大多數的HTML標籤語法是成對的，像是括號的感覺，哪一段文字或物件要在瀏覽器中的網頁頁面中呈現什麼效果，我們就在那之前和之後把它括起來，被括起來的部份就會隨著標籤的指示內容去呈現，這樣理解就可以了，當然，也有不是成對的（其實應該也算是，只不過可以單獨用一個也行），我們遇到了再說。（遇到了再說是我們一日十行的教學方法，不然一日十行怎麼學咧，對吧！不過每天的十行都要把用法或內容記起來，一日十行也不願意記憶的話，那.....你就不用學了！）
今天我們就把最最最基礎的HTML標籤學起來，這個部份要背，只有十行，而且幾乎你寫HTML一定會用到，放心，我會解釋。
先看一下原始碼：
<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
<html>
<head>
<title>一日十行-PHP教學1</title>
</head>
<body>
頁面內容第一行<br>
頁面內容第二行<p>
</body>
</html>
今天就這10行
第1行是在告訴瀏覽器一些資訊，包括頁面內容，編碼方式...等，這行先背起來，以後我們可能會改變部份的內容或多寫幾行類似的標籤，尤其是CHARSET=big5這一個地方，現在我們越來越多使用CHARSET=utf-8的編碼了，這要和資料庫的編碼方式相配合，如果你的資料庫編碼選擇是utf-8的話，這裡請也寫成CHARSET=utf-8。基本上這一行大多會寫在<html>的下一行，不過沒關係，寫這裡也可以，今天把這一行寫這裡的原因就是因為這一行是單行的，不必成對，如果寫在<html>下面的話比較難解釋成對標籤的觀念，所以放在也可以的地方說明。
接下來，注意一下第2行和最後1行（也就是第10行），有沒有看到一個是<html>，一個是</html>，這就是成對的標籤，這對標籤是在標示「這兩個標籤裡面的東西就是HTML網頁嘍，瀏覽器請準備好翻譯工作！」，所以，背起來。
第3行的<head>和第5行的</head>是一對，看英文也知道，是「頭」的意思，我們的瀏覽器看網頁的部份叫做「身體」，在身體上面就是「頭」了，頭裡面裝的是腦，可以想很多事情，今天我們先不管腦裡想什麼，把臉寫出來就好，臉的地方就是第4行的<title>和</title>這一對標籤包起來的東西，這個呈現就是瀏覽器最上面一行，像你現在看的這一頁，瀏覽器最上面那一條（就是你要關或縮小這個視窗的那個ｘ或-按鈕那一行上面的字）寫的是「從頭開始學」。你想在那裡呈現什麼字就打什麼字，不是很了沒關係，待會我們做完今天的進度，你修改這對標籤裡的字後存檔，再看看瀏覽器會有什麼改變就會明白了。
剛剛說到頁面的身體部份，標籤真的就叫身體，也就是第6行和第9行的<body>和</body>這對標籤裡所包裹的部份，也就是頁面內容的呈現部份，這個標籤，背起來。
OK，基本上今天想教的就只有這樣而已，第7和第8行其實是為了湊一日十行寫的，順便說明一下，網頁裡的編輯都是要靠標籤去標明呈現狀況的，包含字體的大小、顏色還有在哪裡斷行等等，今天教兩個斷行的標籤，這兩個標籤可以單獨用，不必成對的包，只要放在你想斷行的地方即可，主要有兩個，一個是<br>，一個是<p> ，這兩個標籤的差別在於你在想斷行的地方寫了<br>這個標籤時，就是斷行而已，可是如果你用的是<p>這個標籤，那就會斷行，並且兩行中間還會多插一行的行高空間，先記得這兩個斷行用的標籤就好，以後你可以自己看要用哪一個比較適合你當時的版面編排需求，我們再來會很常利用這兩個標籤，所以不用背，到時候你就會很熟悉，並且知道有什麼不一樣。
現在，今天的10行已經講完，打開你系統內建的「筆記本」程式，也就是天下無敵的Notepad（我假定你就是M$ Windows的使用者），我的要求是，用打字的方式把今天講的內容一個字一個字的Key到筆記本上去，然後按檔案、另存新檔，在存檔類型的地方選擇「所有檔案」，然後檔名打上learn01.html，如果你一開始第一行的地方寫的是<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=utf-8">而不是<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">，那你的編碼也要選成UTF-8才行，存檔的資料夾請選擇www資料夾〈就是你安裝伺服器完成之後，放置網頁的根目錄，不太清楚這意思的，表示你昨天沒有依照指示去把伺服器環境安裝好〉，存好以後，你會看到你存檔的地方會有個網頁檔，就是這個檔案了，雙擊這個檔案或是打開瀏覽器，在網址列打上「http://localhost/learn01.html」看看你剛剛寫的網頁檔吧。
今天，就上到這裡，明天開始，我已經教過並且不再解釋的部份會用藍色的字體標示，新增的行數會用棕色一類的顏色標示，今天這個檔案我們會繼續用，你就留著吧，要繼續編輯，則打開筆記本，用開啟舊檔，到這個檔案位置的資料夾中，選擇「所有檔案」的模式就可以看到這個檔案來開啟了（或是你臭屁，說可以在檔案上按右鍵，選擇用Notepad來開啟這個檔案也行，廢話！）。
下課。
沒有留言:
張貼留言