代碼學習群簡易教程（4）

第四節 文字標籤

前面的三節教程，第一節講了學習方法，第二節講了使用編輯器，第三節講了認識代碼。這三節的內容雖然簡單，但是，非常重要，因為它們是學習代碼知識的基礎之基礎。如果沒有好的學習方法，學習代碼將會事倍功半；如果不會切換編輯器的兩種頁面，用代碼製作網頁只是一句空話；如果不懂得代碼的基本結構，以後講解的各種標籤很難理解與接受。因此，希望朋友們把前面的三節教程一定要學好，不要因為內容簡單而不為。從本節開始講解常用的各種標籤。這一節講解的內容是文字標籤。製作網頁，離不開文字，因此，文字標籤是最基本的標籤之一。我們必須把文字標籤弄懂，學好。文字標籤是一對標籤。文字的首標籤是：<FONT> ，文字的尾標籤是：</FONT> ，文字內容，要放在首標籤與尾標籤之間。這裡的文字內容，可以是幾個文字，也可以是一大段文字。文字的首標籤<FONT>中可以添加許多屬性與屬值。添加的屬性屬值與標籤名稱之間要用一個空格隔開，各個屬性之間也要用一個空格隔開，屬性與屬值之間要用等號連接起來，屬值要用雙引號引起來。文字標籤常用的屬性有：字體（face）、字型大小（size）、顏色（color）等屬性。把這些屬性連同它們的屬值添加到文字的首標籤中即為：<font color="#ff0000" size="7" face="華文行楷"> 再添加上文字的尾標籤與你要輸入的文字內容，整套文字標籤的表達方式即為：<font color="#ff0000" size="7" face="華文行楷"> 要輸入的文字內容</font >在配套使用的標籤中，首標籤對內容起修飾、限制的作用，首標籤中的屬性屬值就像漢語語法中的定語對主語和賓語修飾、限制那樣，對其管轄的內容進行修飾、限制，它告訴瀏覽器應該怎樣顯示這些內容。而尾標籤，則起收尾、閉合的作用，它告訴瀏覽器，這一套標籤到這裡就收尾了，閉合了。如果缺少了尾標籤，這一套標籤管轄的內容就不能照常顯示了。在上面的文字表達式中，字母是不區分大寫與小寫的，也就是說，字母大寫或者小寫都不會影響文字的顯示效果的。上面的文字表達式可以解析為：<文字標籤 文字顏色＝「紅色」 字型大小＝「7號」 字體＝「華文行楷」>上面的文字表達式，文字顏色的值是用十六進位顏色表示的。「#」是十六進位顏色的標誌；「#」符號的後面有六位數，前兩位數表示紅色，中間的兩位數表示綠色，最後的兩位數表示藍色。每一位上的數字，可以選擇16個數字其中之一。0—9，分別用0—9表示，10用a表示，11用b表示，12用c表示，13用d表示，14用e表示，15用f表示。數字選擇得越小，其顏色越暗；數字選擇得越大，其顏色越亮。紅色與綠色混合在一起是黃色：color="#ffff00"，紅色與藍色混合在一起是粉紅色：color="#ff00ff"，綠色與藍色混合在一起是天藍色：color="#00ffff"。表示每一種顏色的兩位數，前一位的1等於後一位的16。字型大小size的值，可選擇1—7。1號字最小，7號字最大。如果你錯誤地把字型大小size的值輸入為比7大的數字，則會按7號字顯示。字體face的值，可以選擇：宋體、黑體、楷體、隸書、微軟雅黑等字體。文字標籤的屬性屬值，還可以應用css樣式表示，即：<font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 30px;">css樣式，在以後的教程中我再做講解，這裡先認識一下就行了。上面的文字標籤可以解析為：<文字標籤 css樣式＝「文字顏色：十進位顏色（藍色）；字體：黑體；字型大小：30px;」>上面的文字標籤，css樣式，可以看作是這個文字標籤的屬性；等號後面雙引號中的內容可以看作是「css樣式」的值。而這個值，又包括三部分：文字顏色、字體與字型大小。這裡的文字顏色（括弧內的數），由三個數組成，三個數之間，用逗號隔開。第一個數表示紅色，第二個數表示綠色，第三個數表示藍色。各種顏色的數值，可選擇0—255其中之一。數值越小，顏色越暗；數值越大，顏色越亮。字型大小的值30px里的「px」，是像素的意思，是屏幕上顯示數據的最基本的點。它是一種長度單位，是相對長度單位，沒有絕對的大小。誰能說出一個「點」有多大呢？換句話來說，你也可以這樣理解：如果你使用的電腦是大屏幕的台式電腦，這個點就變大了；如果你使用的電腦是小屏幕的筆記本電腦，這個點就變小了。表示字型大小的長度單位還有pt、em等等。它們之間的進率是：1px=3/4pt, 1px=1/16em。文字標籤常用的屬性還有：行高（line-height: 1.5em）、字距（letter-spacing: 1px）、背景顏色[background-color: rgb(74, 105, 95)]等屬性。 這些屬性需要用css樣式添加到文字的首標籤中。如下：<FONT style="LINE-HEIGHT: 1.2em; BACKGROUND-COLOR: rgb(0,240,230); LETTER-SPACING: 1px; FONT-FAMILY: 黑體; COLOR: rgb(250,0,0); FONT-SIZE: 30px"> 文字的行高，你可以簡單地理解為：文字的行與行之間的距離；文字的字距，就是字與字之間的距離。文字內容，可以用一套文字標籤控制，也可以用幾套文字標籤控制。用幾套文字標籤控制文字內容舉例如下：<FONT color=#ff0000><FONT size=7><FONT face=華文行楷>文字內容</FONT></FONT></FONT> 用幾套文字標籤控制文字內容，如果使用了重複的文字標籤，則靠近文字內容的文字標籤起作用，另一個文字標籤則成為多餘的標籤了。下面的文字標籤中，重複使用了文字字型大小，第一個文字標籤多餘了，應該「刪除」掉：<FONT size=7> <FONT color=#ff0000> <font style="font-size: 25pt;" face="華文行楷"> 在「文字圖片編輯頁面」中輸入文字以後修改字型大小時，往往會發生這種現象。文字顏色可用三種方法表示：十六進位顏色表示法：如：<FONT color=#ff0000>；十進位顏色表示法：如：<font style="color: rgb(0, 0, 255);>；英語顏色名稱表示法：如：<FONT color=red>。在製作網頁時，不建議使用英語名稱表示顏色。因為顏色的英語名稱，大部份人不懂，不便於修改文字顏色。十六進位顏色與十進位顏色可以相互轉換，其方法為：1、十六進位顏色轉換為十進位顏色的方法：用十六進位顏色值左邊的一位數字乘以16的積，再加上十六進位顏色值右邊的一位數字所得的和，就是所求的十進位顏色的值。舉例1：把十六進位顏色值88轉換為十進位顏色值：16×8＋8＝136 轉換為十進位顏色值為：136舉例2：把十六進位顏色值F5轉換為十進位顏色值：16×15＋5＝245 轉換為十進位顏色值為：245舉例3：把十六進位顏色值EA轉換為十進位顏色值。16×14＋10＝234 轉換為十進位顏色值為：2342、十進位顏色轉換為十六進位顏色的方法：用十進位顏色值除以16，商為十六進位顏色值左邊一位的數值，餘數為十六進位顏色值右邊一位的數值。舉例1：把十進位顏色值149轉換為十六進位顏色值。149÷16＝9……5 轉換為十六進位顏色值為：95舉例2：把十進位顏色值169轉換為十六進位顏色值。169÷16＝10……9 轉換為十六進位顏色值為：A9舉例3：把十進位顏色值250轉換為十六進位顏色值。250÷16＝15……10 轉換為十六進位顏色值為：FA各種顏色的名稱對照，請你參閱我的這篇文章：http://www.360doc.com/content/13/0703/17/4127803_297406586.shtml作業：1、認識文字的首標籤與尾標籤，懂得文字內容必須輸入在文字的首標籤與尾標籤之間。2、認識本節講解的文字標籤的幾種常用屬性與屬值，懂得它們所表示的意義，學會它們的用法。3、認識文字標籤的表達方式，並把它保存下來。4、學會十六進位文字顏色與十進位文字顏色的相互轉換。5、撰寫一段文章，試著修改字體、字型大小、顏色、行高、字距、背景顏色，並仔細觀察其效果。（本題要反覆練習）「春天沒來」編撰 2014年3月31日於北京
推薦閱讀：