html

1.簡介
2.基本架構
3.排版標籤
4.字體標籤
5.表格標籤
6.圖片標籤
7.超連結標籤
8.錨標籤
9.表單標籤
10.框架標籤

1.簡介

HTML（HyperText Markup Language）是一種標籤式語法，它是一個標示出文字、圖形、聲音......等物件在網頁上要如何顯示的規格。

TOP

2.基本架構

<html> -----標示HTML文件的開始
<head> -----標示HTML文件表頭
<title> 標題 </title> -----標示HTML文件主題
</head>
<body> 標示HTML文件主體內容開始
主要HTML文件的內容寫在這區域裡
</body> -----標示HTML文件主體內容結束
</html> -----標示HTML文件的結束

html的標記大多是成對的，如<html>......</html>

<BODY bgcolor="#rrggbb" text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">

bgcolor="#rrggbb" 網頁文件背景顏色
text="#rrggbb" 畫面文字顏色
link="#rrggbb" 文件中超連結文字顏色
vlink="#rrggbb" 已連結過網站的文字顏色
alink="#rrggbb" 目前正在連結網站的文字顏色
background="圖檔名稱" 背景圖檔
TOP

3.排版標籤

1. 斷行標籤<BR>

2.強制分段標籤<P>

3. <P ALIGN="LEFT">文字靠左</P>

4. 置中標籤 ：<CENTER>這是置中</CENTER>

5. 向右縮排標籤 ：<BLOCKQUOTE> 要縮排的文字 </BLOCKQUOTE>

6. 保存原始格式標籤 ：< PRE> 文字內容 </PRE>

7. 分隔線標籤 <HR>

TOP

4.字體標籤

1.標題：<H1>標題內容</H1>

<H1>標題1</H1>

標題1

<H2>標題2</H2>

標題2

<H3>標題3</H3>

標題3

<H4>標題4</H4>

標題4

<H5>標題5</H5>
標題5
<H6>標題6</H6>
標題6

2. 字體大小：<FONT SIZE="尺寸">文字內容</FONT>

3. 文字顏色：<FONT COLOR="#000000">文字顏色</FONT>

4. 文字字型：<FONT FACE="字型名稱">文字</FONT>

5. 字型變化

<B>粗體</B> 粗體
<I>斜體</I> 斜體
<U>底線</U> 底戈線
<SUP>上標</SUP> 上標
<SUB>下標</SUB> 下標

6. 特殊字元

&nbsp; ( 代表一個不斷行空白)
&lt; <
&gt; >
&amp; &
&quot; "
TOP

5.表格標籤

<table>

table 定義表格
caption 定義表格標題
border 設定邊闊
cellpadding 設定內容與內邊的空位
cellspacing 設定表格內框線與外框線間的距離
bgcolor 設定背景顏色
bordercolor 設定邊界顏色
bordercolorlight 設定暗面邊界顏色
background 設定整個表格之背景使用圖檔
bordercolordark 設定光面邊界顏色
tr 定義行
td 定義內容
width 定義表格寬度
high 定義表格高度
rowspan 設定跨列數
align 設定資料內容置於表格左、右、中位置
valign 設定資料內容置於表格上、中、下位置
colspan 設定跨欄數

 

<table width="615" height="111" border="1">
<tr>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="left">123</td>
<td align="center">123</td>
<td align="right">123</td>
</tr>
<tr>
<td rowspan="2">&nbsp;</td>
<td bgcolor="#FF3300">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bordercolordark="#cc3333">&nbsp;</td>
<td bordercolor="#00FF99" >&nbsp;</td>
</tr>
</table>

   
123 123 123
     
   

 

 

TOP

6.圖片標籤

<img src="meng95w407_2/google.JPG" width="305" height="108">

 

TOP

7.超連結標籤

<A HREF="http://ww.google.com.tw/" TARGET="_blank">google</A>
google

<A HREF="http://ww.google.com.tw/" TARGET="_blank"><img src="meng95w407_2/google.JPG" width="305" height="108"></A>

target=_blank --將連結的畫面內容，開在新的瀏覽視窗中。
target=_parent --將連結的畫面內容，當成文件的上一個畫面。
target=_self --將連結的畫面內容，顯示在目前的視窗中。
target=框窗名稱 --在框架（ Frame）中才用得到。 利用此標籤，來指定連結的內容顯示到哪一個框窗中。

TOP

8.錨標籤

<a href="#h8">8.錨標籤</a>

<a name="h8">8.錨標籤</a>

TOP

9.表單標籤

一個表單是由<from></form>作為開始及結束，中間所有的輸入內容都會被視為同一組資料的輸入。
表單中有action與method兩個屬性，分別設定資料的傳送位置與傳送方法。
<form action="http://skariel.twbbs.org/abc.php" method=POST>

輸入資料的型態是由<input>標籤來設定。
<input type="輸入資料形式" name="資料名稱" value="設定值">

表單名稱表單實際樣式HTML語法
文字表單<input type="text" name="page">
密碼表單<input type="password" name="password">
單選表單男 女

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女

複選表單一年級 二年級 <input type="checkbox" name="class" value="一年級">一年級
<input type="checkbox" name="class" value="二年級">二年級
檔案表單 <input type="file" name="file">
下拉式表單 <select name="class" size="1">
<option value="一年級">一年級
<option value="二年級">二年級
</select>
文字區塊表單<textarea cols="" rows="" name="content">嗨！</textarea>
隱藏表單<input type="hidden" name="ip" value="">
送出按鈕<input type="submit" value="送出按鈕">
清除按鈕<input type="reset" value="清除按鈕">
TOP

10.框架標籤

<frameset>

<frameset rows="80,*" cols="*" frameborder="NO" border="0" framespacing="0">
<frame src="top.htm" name="topFrame" scrolling="NO" noresize >
<frameset cols="80,*" frameborder="NO" border="0" framespacing="0">
<frame src="left.htm" name="leftFrame" scrolling="NO" noresize>
<frame src="main.htm" name="mainFrame">
</frameset>
</frameset>

1. rows="80,*" 就是橫向切割畫面，也就是將畫面上下分開。

2. cols="80,*" 就是垂直切割畫面。

3. FRAMEBORDERr=0 設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。

4. SCROLLING="no" 設定是否要顯示捲軸，YES是要顯示捲軸，NO是無論如何都不要顯示，AUTO是視情況顯示。

5. FRAMESPACING=5 表示框架與框架間的保留空白的距離，以免看起來太擠。

6. noresize 設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。

TOP