HTML的一些小講解(HTML基礎、規則、文字、排版)
鑒於助教似乎沒有講解很多有關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>空白控制
單獨使用,用來精確的控制空白量,可以用來取代斷行或是空白字元 。
<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
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