HTML的一些小講解(HTML基礎、規則、文字、排版)

看板b95902HW作者時間19年前 (2006/12/25 21:00), 編輯推噓14(1401)
留言15則, 15人參與, 最新討論串1/1
鑒於助教似乎沒有講解很多有關HTML跟PHP的關係,小弟我就獻醜一下囉。 HTML並不難學,最基本的HTML一行就說完了: 「把想要套用屬性的東西放進標籤裡。」 <標籤> 接下來稍微解說一下標籤的意義。 所謂的標籤就是類似<font></font>為一組的東西,後方的標籤帶有斜線,表示標籤結束 的意思。所謂的把東西放進標籤,大約就是像這樣的意思: <font>hello</font> 這樣就代表我要把文字hello套用一些font標籤的屬性,至於什麼屬性則視標籤而異。 <屬性> 那什麼是屬性呢?可以看成是標籤的一些性質。究竟字型標籤要套用什麼大小?什麼顏色 ?什麼字型?圖片的寬度和高度是多少?圖片的邊框要設成多少? 舉例來說,想要讓hello變成紅色,只要把標籤加入以下的屬性: <font color="#FF0000">hello</font> 這樣就可以把標籤內的文字變成紅色(FF0000是紅色的RGB色碼)。 一個標籤可以有數個屬性,被標籤包住的東西將會套用到所有標籤的屬性。例如: <font color="#FF0000" size=12>hello</font> 就會輸出紅色12點大小的hello。 <網頁的基本> 一個基本的網頁非常簡單,最基本什麼都沒有的網頁是如此: <html> <head></head> <body></body> </html> 在上面的HTML中一共可以看到三個標籤:<html>、<head>跟<body> <html>:告訴瀏覽器"這是html原始碼",然後瀏覽器就會把標籤內的東西當做html處裡。 <head>:這個標籤裡通常擺放網頁的一些資訊,包括語系、標題、css宣告、引入檔案 等。 <body>:這個標籤裡面擺放網頁的真正內容,凡是想要給使用者看見的東西都是寫在這。 接下來試試把網頁增加一點東西,我們在網頁顯示hello,並讓標題列出現hello world! 的文字。我們只需要把修改如下: <html> <head> <title>hello world!</title> </head> <body> hello. </body> </html> 其中,<title>標籤內擺放的是標題列文字。 要注意的是,在HTML的<body>標籤中,不管內容的文字是否經過編排,出來的內容都 是一樣的。也就是說: <html> <head></head> <body> hello! I'm Joe. </body> </html> 跟 <html> <head></head> <body> hello! I'm Joe. </body> </html> 都會輸出一樣的網頁(不會換行),雖然是有標籤可以做到這件事...但並不推薦。 接下來稍微講解一些很容易用到的標籤,可能有不全我想到再繼續補吧XD。 <一般文字處理> <font></font>字型 就是套用所有字型的最基本標籤,在不使用CSS的狀況下只能這樣更動字型。 <font>屬性: color:顏色(可使用RGB16進位碼或是字型顏色的名稱) dir:文字方向,有兩種值: rtl:左向右 ltr:右向左 face:字體名稱 size:字型大小 style:允許使用CSS的樣式規則定義字形 weight:字體粗細,值在100~900間的100倍數正整數 <b></b>粗體 將內容文字變成粗體。 <i></i>斜體 將內容文字變成斜體。 <u></u>底線 將內容文字加入底線。 <del></del> <strike></strike>刪除線 將內容文字加上刪除線。 <h1></h1>(<h1~6>)大標文字 內容文字會變成比正常文字略大的粗體,<h1>是最大的字體,<h6>則是最小。 <sub></sub>下標 <sup><sup>上標 將內容文字以上標或下標顯示,同時字體會較小。 <big></big>大一級 <small></small>小一級 將內容文字字體放大一級或縮小一級。 <strong></strong>重點字體 將內容文字粗體,通常是強調重點用。 <address></address>作者字體 將內容文字斜體略粗,通常是顯示網站作者資訊用的。 <cite></cite>引用字體 將內容斜體,通常是標示引用文字用。 <basefont>自訂預設字體 沒有結束標籤,通常是寫在<head>標籤的裡面,可以指定網頁的預設字型,使用方法 同<font>。 <格式控制> <center></center>置中 將內容置中。 <blockquote></blockquote>縮排 將內容向右縮排40個像素。 <p></p>段落 將內容標記為一段落,會在開頭的位置多加一行空白。這個標籤也可以單獨使用(<p>), 這樣等於是空兩行的意思。 <p>屬性: align:對齊方式,有7種值: absbottom:內容底端與相鄰文字底端對齊 absmiddle:內容中央與相鄰文字中央對齊 baseline:內容底端與相鄰文字底線對齊 bottom:同baseline left:向左對齊(預設值) right:向右對齊 middle:置中對齊 dir:文字方向 style:CSS定義樣式表 <br>斷行 單獨使用,這個標籤可以將內容斷行。 <spacer>空白控制 單獨使用,用來精確的控制空白量,可以用來取代斷行或是空白字元&nbsp。 <spacer>屬性: align:對齊方式 height width:高、寬,值可以是數字或百分比,數字則單位是像素,百分比則是螢幕 寬為單位。 type:決定spacer標籤的顯示模式,可用值有三種: block:依照標籤的寬高設定顯示空白 horizontal:依據size屬性來插入水平空間 vertical:依據size屬性來插入垂直空間 size:指定水平或垂直空白量 <ul></ul>無序列表 <ol></ol>有序列表 建立一份列表,就是所謂的項目符號或是編號,其中的語法如下: <ul> <li>a</li> <li>b</li> <li>c</li> </ul> <ul>或<ol>標籤利用子標籤<li></li>描述每一項用項目符號開始的內容。 <ul>屬性: type:指定項目符號的樣式,可用值有三種: disc:實心圓 circle:空心圓 square:空心方塊 <ol>屬性: type:指定編號樣式,可用值有五種: 1:數字列表(預設值) a:小寫字母列表 A:大寫字母列表 i:小寫羅馬數字列表 I:大寫羅馬數字列表 <li>屬性: value:可以指定該項目的開始編號,後面的項目會接續這個編號。 <nobr></nobr>不斷行 內容將不會斷行,即使是被視窗切到,多餘的文字會造成網頁必須左右捲動。 <div></div>區域 內容將會被裝入一個模擬的區域,共享區域所有屬性。通常是使用id屬性來呼叫CSS樣 式表用的。此外,透過給予其xy座標位置,可以讓區域有浮動的效果。 <div>屬性: align:對齊方式 id:標籤代碼,可以用CSS的id選取器來呼叫之,值是任意文字 style:CSS樣式表,所有有關區域的定位、樣式、寬高等都可以在此設定 <pre></pre>格式化顯示 類似<div>,不過這個區域內的文字會以html碼中的編排作輸出,所以 <pre> aaa aaa aaa </pre> 會輸出 aaa aaa aaa 而不是aaaaaaaaa。 剩下的標籤我另外開個文慢慢打... ※ 編輯: joehuang92 來自: 59.121.11.252 (12/25 22:31) ※ 編輯: joehuang92 來自: 59.121.11.252 (12/25 22:32)

12/25 22:52, , 1F
大推
12/25 22:52, 1F

12/25 22:54, , 2F
推~~
12/25 22:54, 2F

12/25 23:00, , 3F
推~~~~~~~
12/25 23:00, 3F

12/25 23:07, , 4F
喬喬我愛你 >///<
12/25 23:07, 4F

12/25 23:16, , 5F
喬喬大好>W<
12/25 23:16, 5F

12/25 23:22, , 6F
推推推推
12/25 23:22, 6F

12/25 23:42, , 7F
好強大...推一個~
12/25 23:42, 7F

12/25 23:46, , 8F
強者!!
12/25 23:46, 8F

12/26 00:04, , 9F
大喬你根本是天才 ><
12/26 00:04, 9F
※ 編輯: joehuang92 來自: 59.121.11.252 (12/26 00:09)

12/26 00:32, , 10F
太帥了= =+
12/26 00:32, 10F

12/26 00:40, , 11F
喬喬我愛你 >///<
12/26 00:40, 11F

12/26 10:45, , 12F
喬喬是神!!!!
12/26 10:45, 12F

12/26 13:07, , 13F
喬喬...今晚我去你房間...>///<...
12/26 13:07, 13F

12/30 12:15, , 14F
喬喬好色~~
12/30 12:15, 14F

01/01 20:18, , 15F
太厲害了^^
01/01 20:18, 15F
文章代碼(AID): #15ZyjN8V (b95902HW)