這幾個禮拜實在是有一些忙碌阿~~
所以拖了這麼久~第四篇才出現....
實在是很對不起大家
但這也是HTML的最後一篇了~~
但是請不要誤會說這就把HTML學完了
這四篇教學文只是把一些常常用到的標籤給敘述一下
所以以後多多少少都會碰到很稀有的標籤~
那時候大家也有一定的實力了!!相信絕對難不倒各位
那麼~開始今天的教學文吧
1.帶標題的框框(fieldset,legend)
這也算是蠻少人在用的一組標籤....至少我很少看到
它的作用只是一個框框上面帶有標題....
但是對於美化卻有很好的效果
用法:把想要包在裡面的東西放到<fieldset>中,用<legend>設定標題
範例:
<html>
<body>
<fieldset>
<legend>註冊</legend>
帳號：<input type="text" />
密碼：<input type="text" />
</fieldset>
</body>
</html>
2.表格(table)
這東西是之前常常用來做布局的標籤
因為這東西實在是變化萬千
想怎麼變就怎麼變
不過最近開始被DIV標籤取代掉了
為什麼??因為table若是做出很複雜的布局
其標籤的閱讀性就越低,畢竟是一層包一層
table有其他搭配的標籤和屬性
標籤:
<tr>:代表一個段落
<td>:代表一格
<th>:跟td一樣,不過裡面的文字會變成粗體,常常用來當作標題
屬性:
colspan:橫向合併
rowspan:直向合併
為了讓大家看出效果,我會加入一個屬性border(框線)
範例:
一般的用法
<html>
<body>
<table border="1" >
<tr>
<td>第二象限</td>
<td>第一象限</td>
</tr>
<tr>
<td>第三象限</td>
<td>第四象限</td>
</tr>
</table>
</body>
</html>
我定義了兩行<tr>
一行中有兩個格子<td>
這是一個很標準的用法
要幾行就加幾個tr,要幾個格子就加入幾個td
範例2:
<html>
<body>
<table border="1" >
<tr>
<td colspan="2">第一象限</td>
</tr>
<tr>
<td>第三象限</td>
<td>第四象限</td>
</tr>
</table>
</body>
</html>
在這個範例中我加入了colspan讓一行中的兩個td合併為一個
colspan中的數目字是要讓幾個Td合併
來看一個變化的範例
範例2_1:
<html>
<body>
<table border="1" >
<tr>
<td colspan="2">第一象限</td>
<td>XXX</td>
</tr>
<tr>
<td>第二象限</td>
<td>第三象限</td>
<td>第四象限</td>
</tr>
</table>
</body>
</html>
因為我第二行中有3個td,但是我第一行的colspan只有定義2
所以我必須再用一個td補滿,不然就會少一塊
範例3:
<html>
<body>
<table border="1" >
<tr>
<td rowspan="2">第二象限</td>
<td>第一象限</td>
</tr>
<tr>
<td>第三象限</td>
</tr>
</table>
</body>
</html>
這個範例就用到了直向合併
因為直向合併會跨tr
所以第二行的td只要一個就好
因為第一行的第一個td會占用掉第二行的一格td
來看看直向合併的td在中間狀況
範例3_1:
<html>
<body>
<table border="1" >
<tr>
<td>第二象限</td>
<td rowspan="2">第一象限</td>
<td>XXX</td>
</tr>
<tr>
<td>第三象限</td>
<td>XXX</td>
</tr>
</table>
</body>
</html>
一樣~第二行只要寫2個td就足夠了
那我們來試試看用兩種合併吧
範例4:
<html>
<body>
<table border="1" >
<tr>
<td colspan="2">第二象限</td>
<td rowspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
</tr>
</table>
</body>
</html>
看到效果了吧~~
更好玩的是~td裡面還可以在包一個table
範例5:
<html>
<body>
<table border="1">
<tr>
<td colspan="2">第二象限</td>
<td rowspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>YYY</td>
<td>YYY</td>
</tr>
<tr>
<td>YYY</td>
<td>YYY</td>
</tr>
</table>
</td>
<td>XXX</td>
</tr>
</table>
</body>
</html>
這下子可以了解為什麼我說用table可以創造出千變萬化的版型布局
愛怎麼玩就怎玩~
但同時越複雜的版型就越難維護程式碼
因為table是環環相扣的,弄錯一個就有可能導致整個走版
現在是DIV+CSS當道~
但別認為DIV很好用~有時候DIV會搞死你.....
3.DIV
DIV是一種區塊元素,甚麼是區塊元素,就是它會佔據一整行
跟在DIV後面的標籤都會被換到下一行去
就算你把DIV的寬度設定好也是一樣,它就是佔據一整行
可是好處是寬度高度都可以調整
之後你們可能會有疑問說:那如果我要把兩個DIV放在同一行,要怎麼做
當然這是有辦法的~那就是加入浮動屬性或是定位
不過這是隸屬於CSS的籌泛~
在使用上就是把DIV當作是一個框框,裡面可以擺入想要擺入的東西
在這個以下範例中,我會使用一些CSS,來達成一些效果
範例1:
<html>
<head>
<style type="text/css">
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.H50{
height:50px;
}
</style>
</head>
<body>
<div class="red H50" ></div>
<div class="blue H50" ></div>
</body>
</html>
我定義了兩個DIV,加上了CSS讓你們可以看清楚
如果DIV沒有設定寬度,預設就是100%
你們可能會有疑問說:是不是因為寬度佔滿了螢幕,所以第二個DIV才會換行
我們來看第二個範例
範例2:
<html>
<head>
<style type="text/css">
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.H50{
height:50px;
}
.W50{
width:50px;
}
</style>
</head>
<body>
<div class="red H50 W50" ></div>
<div class="blue H50 W50" ></div>
</body>
</html>
就算我加上了寬度,還是很霸道的換了行~
這就是所謂的區塊元素
4.SPAN
span是一種內連元素,甚麼是內連元素?
它跟區塊元素是完全相反的東西
它不會強制換行,除非螢幕滿了
它不可以設定寬度和高度,它的大小決定於裡面放了甚麼東西
那甚麼時候使用DIV甚麼時候使用SPAN呢??
我會這麼做區隔,如果是定義一大塊區域就用DIV
DIV中的小塊區域,就使用SPAN
範例1:
<html>
<head>
<style type="text/css">
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.H500{
height:500px;
}
.W500{
width:500px;
}
</style>
</head>
<body>
<span class="red H500 W500" >XXXXX</span>
<span class="blue H500 W500" >XXXXX</span>
</body>
</html>
就算我把高度和寬度設定成500px,SAPN依然只會按照標籤內的內容來決定寬和高
那有沒有辦法讓它像DIV一樣呢,答案是可以
加入屬性display為inline-block
inline=內連
block=區塊
inline-block=擁有兩者的屬性(可以設定高和寬,卻不會強制換行)
範例1_1:
<html>
<head>
<style type="text/css">
span{
display:inline-block;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.H500{
height:500px;
}
.W500{
width:500px;
}
</style>
</head>
<body>
<span class="red H500 W500" >XXXXX</span>
<span class="blue H500 W500" >XXXXX</span>
</body>
</html>
看了這個範例~想必大家會認為說那就把SPAN當作DIV來使用吧....
我不能說這個做法不好~但我認為每樣東西都有它的用處
所以該分清楚的盡量分清楚..
==================================================
好啦~HTML教學篇正式結束
這四篇就是把常用的幾個東西列出來讓大家知道
並非表示這就是全部的HMTL了
所以對這有興趣的朋友~
可以自行上網去爬文!!
說不定下一個網頁設計師就是你了~