HTML語言基本使用法

使用效果

使用指令

附註

字體大小變化 <font size=?>想輸入的字</font> ?=1~7 (字體大小尺寸,1最小,7最大)
字體顏色 <font color=??????>想輸入的字</font> ??????=RGB (16進位顏色或文字輸入)
字體變粗 <b>想輸入的字</b> 可讓字體變成粗體
字體變斜 <i>想輸入的字</i> 可讓字體變成斜體
字體加底線 <u>想輸入的字</u> 可讓字體加入底線
字體居中 <center>想輸入的字</center> 可讓字體居中
字體刪除線 <s>想輸入的字</s> 可讓字體中間出現一行刪除線
字型設定 <font face="字型名稱">想輸入的字</font> 顯示其它字型 (字體要對方也有才行)
打字機字體 <tt>想輸入的字</tt> 把字體顯示成打字機使用的字體
上標字 <sup>想輸入的字</sup> 把字體顯示成上標字
下標字 <sub>想輸入的字</sub> 把字體顯示成下標字
水平線 <hr color=??????> ??????=RGB (16進位顏色或文字輸入)
換行輸入 想輸入的字<br>想輸入的字 可讓字體換行重疊
超連結 <a href="想連結網址">連結地的名稱</a> 可連結到其他地方
貼圖 <img src="圖形的網址"> 可顯現出圖形
走馬燈(循環) <marquee behavior=scroll>想輸入的字</marquee> 以走馬燈循環的方式顯現字體
信箱連結語法 <a href="mailto:信箱網址">連結地的名稱</a> 以走馬燈循環的方式顯現字體

HTML 語 法 大 全

標籤 , 屬性名稱 , 簡介

<! - - ... - -> 註解
<A HREF TARGET> 指定超連結的分割視窗
<A HREF=#錨的名稱> 指定錨名稱的超連結
<A HREF> 指定超連結
<A NAME=錨的名稱> 被連結點的名稱
<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址
<B> 粗體字
<BASE TARGET> 指定超連結的分割視窗
<BASEFONT SIZE> 更改預設字形大小
<BGSOUND SRC> 加入背景音樂
<BIG> 顯示大字體
<BLINK> 閃爍的文字
<BODY TEXT LINK VLINK> 設定文字顏色
<BODY> 顯示本文
<BR> 換行
<CAPTION ALIGN> 設定表格標題位置
<CAPTION>...</CAPTION> 為表格加上標題
<CENTER> 向中對齊
<CITE>...<CITE> 用於引經據典的文字
<CODE>...</CODE> 用於列出一段程式碼
<COMMENT>...</COMMENT> 加上註解
<DD> 設定定義列表的項目解說
<DFN>...</DFN> 顯示"定義"文字
<DIR>...</DIR> 列表文字標籤
<DL>...</DL> 設定定義列表的標籤
<DT> 設定定義列表的項目
<EM> 強調之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 設定字體大小
<FORM ACTION> 設定戶動式表單的處理方式
<FORM METHOD> 設定戶動式表單之資料傳送方式
<FRAME MARGINHEIGHT> 設定視窗的上下邊界
<FRAME MARGINWIDTH> 設定視窗的左右邊界
<FRAME NAME> 為分割視窗命名
<FRAME NORESIZE> 鎖住分割視窗的大小
<FRAME SCROLLING> 設定分割視窗的捲軸
<FRAME SRC> 將HTML檔加入視窗
<FRAMESET COLS> 將視窗分割成左右的子視窗
<FRAMESET ROWS> 將視窗分割成上下的子視窗
<FRAMESET>...</FRAMESET> 劃分分割視窗
<H1>~<H6> 設定文字大小
<HEAD> 標示文件資訊
<HR> 加上分格線
<HTML> 文件的開始與結束
<I> 斜體字
<IMG ALIGN> 調整圖形影像的位置
<IMG ALT> 為你的圖形影像加註
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入圖片並預設圖形大小
<IMG HSPACE> 插入圖片並預設圖形的左右邊界
<IMG LOWSRC> 預載圖片功能
<IMG SRC BORDER> 設定圖片邊界
<IMG SRC> 插入圖片
<IMG VSPACE> 插入圖片並預設圖形的上下邊界
<INPUT TYPE NAME VALUE> 在表單中加入輸入欄位
<ISINDEX> 定義查詢用表單
<KBD>...</KBD> 表示使用者輸入文字
<LI TYPE>...</LI> 列表的項目 ( 可指定符號 )
<MARQUEE> 跑馬燈效果
<MENU>...</MENU> 條列文字標籤
<META NAME="REFRESH" CONTENT URL> 自動更新文件內容
<MULTIPLE> 可同時選擇多項的列表欄
<NOFRAME> 定義不出現分割視窗的文字
<OL>...</OL> 有序號的列表
<OPTION> 定義表單中列表欄的項目
<P ALIGN> 設定對齊方向
<P> 分段
<PERSON>...</PERSON> 顯示人名
<PRE> 使用原有排列
<SAMP>...</SAMP> 用於引用字
<SELECT>...</SELECT> 在表單中定義列表欄
<SMALL> 顯示小字體
<STRIKE> 文字加橫線
<STRONG> 用於加強語氣
<SUB> 下標字
<SUP> 上標字
<TABLE BORDER=n> 調整表格的寬線高度
<TABLE CELLPADDING> 調整資料欄位之邊界
<TABLE CELLSPACING> 調整表格線的寬度
<TABLE HEIGHT> 調整表格的高度
<TABLE WIDTH> 調整表格的寬度
<TABLE>...</TABLE> 產生表格的標籤
<TD ALIGN> 調整表格欄位之左右對齊
<TD BGCOLOR> 設定表格欄位之背景顏色
<TD COLSPAN ROWSPAN> 表格欄位的合併
<TD NOWRAP> 設定表格欄位不換行
<TD VALIGN> 調整表格欄位之上下對齊
<TD WIDTH> 調整表格欄位寬度
<TD>...</TD> 定義表格的資料欄位
<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄
<TEXTAREA WRAP> 決定文字輸入欄是自動否換行
<TH>...</TH> 定義表格的標頭欄位
<TITLE> 文件標題
<TR>...</TR> 定義表格美一行
<TT> 打字機字體
<U> 文字加底線
<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )
<VAR>...</VAR> 用於顯示變數

以下為組合用途的HTML語法, 照這即可產生特殊效果

１．
<font face="標楷體" color="#ff0000" style=font-size:30px>
<div style=width:480;filter:shadow(color=00aa00)>
這裡是妳要填的內容</div></font>
範例：１


２．
<font face="標楷體" color="#ff0000" style=font-size:30px>
<div style=width:480;filter:shadow(color=00aa00,direction=35)>
這裡是妳要填的內容</div></font>
範例：２


３．
<font color="#ff0000" style=font-size:30px face="標楷體"(這裡是字型設定);
height=10 STYLE=BACKGROUND:URL(這裡為圖檔位址)>
這裡是妳要填的內容
</font>
範例：３


４．
<MARQUEE width="100" style=background:url(這裡為圖檔位址)>
<font face="標楷體" color="#ff0000" style=font-size:30px>
這裡是妳要填的內容
</font></marquee>
範例：４


５．
<marquee direction=up behavior=alternate width=200 height=60>
<marquee direction=right behavior=alternate>
<font face="標楷體" color="#ff0000" style=font-size:30px>
這裡是妳要填的內容
</font> </marquee> </marquee>
範例：５


以下為簡易HTML語法教學, 照這即可產生變化字型

<font size=1>例</font>
<font size=2>例</font>
<font size=3>例</font>
<font size=4>例</font>
<font size=5>例</font>
<font size=6>例</font>
<font size=7>例</font>
<font face="超研澤空疊圓" size=1>例</font>
<font face="超研澤空疊圓" size=2>例</font>
<font face="超研澤空疊圓" size=3>例</font>
<font face="超研澤空疊圓" size=4>例</font>
<font face="超研澤空疊圓" size=5>例</font>
<font face="超研澤空疊圓" size=6>例</font>
<font face="超研澤空疊圓" size=7>例</font>

<font face=@標楷體 size=1>例</font>

<font face=@標楷體 size=2>例</font>

<font face=@標楷體 size=3>例</font>

<font face=@標楷體 size=4>例</font>

<font face=@標楷體 size=5>例</font>

<font face=@標楷體 size=6>例</font>

<font face=@標楷體 size=7>例</font>

<font face="新細明體" size=1>例</font>
<font face="新細明體" size=2>例</font>
<font face="新細明體" size=3>例</font>
<font face="新細明體" size=4>例</font>
<font face="新細明體" size=5>例</font>
<font face="新細明體" size=6>例</font>
<font face="新細明體" size=7>例</font>
<font style ="font-size =數字pt">例</font>字體無限放大語法
<marquee>跑馬燈</marquee>
<B>字體加粗</B>
水平分隔線<hr>
強制換行<br>
對正中央ㄉ語法 <p align="center">內容</p>
對正左邊ㄉ語法 <p align="left">內容</p>
對正右邊ㄉ語法 <p align="right">內容 </p>
貼圖 <img src="位址">
<img src=圖擋位址 height=??? width=???>放大圖檔語法(參數自訂)
捷徑的語法 <a href="位址">要留的字or圖片檔案</a>
<marquee bgcolor="#000000色碼">這裡加上背景顏色，顏色可以自己改喔</marquee>
<marquee direction=right>這裡的文字是由左到右喔</marquee>
<marquee scrollamount=3 direction=up>這裡的文字是由下到上喔</marquee>
<marquee loop=2>這裡的文字只會捲動兩次</marquee>
<marquee behavior=scroll>這裡的文字捲動效果為SCROLL，為內定選項</marquee>
<marquee behavior=slide>文字碰到左邊就會停止</marquee>
<marquee behavior=alternate>這裡的文字會在左右兩邊彈來彈去</marquee>
<marquee scrollamount=50>這裡的速度快</marquee>
<marquee scrollamount=90>這的速度極快</marquee>


顏色對照表
#F0F8FF #FAEBD7 #00FFFF #7FFFD4
#F0FFFF #F5F5DC #FFE4C4 #000000
#FFEBCD #0000FF #8A2BE2 #A52A2A
#DEB887 #5F9EA0 #7FFF00 #D2691E
#FF7F50 #6495ED #FFF8DC #DC143C
#00FFFF #00008B #008B8B #B8860B
#A9A9A9 #006400 #BDB76B #8B008B
#556B2F #FF8C00 #9932CC #8B0000
#E9967A #8FBC8B #483D8B #2F4F4F
#00CED1 #9400D3 #FF1493 #00BFFF
#696969 #1E90FF #B22222 #FFFAF0
#228B22 #FF00FF #DCDCDC #F8F8FF
#FFD700 #DAA520 #808080 #008000
#ADFF2F #F0FFF0 #FF69B4 #CD5C5C
#4B0082 #FFFFF0 #F0E68C #E6E6FA
#FFF0F5 #7CFC00 #FFFACD #ADD8E6
#F08080 #E0FFFF #FAFAD2 #90EE90
#D3D3D3 #FFB6C1 #FFA07A #20B2AA
#87CEFA #778899 #B0C4DE #FFFFE0
#00FF00 #32CD32 #FAF0E6 #FF00FF
#800000 #66CDAA #0000CD #BA55D3
#9370DB #3CB371 #7B68EE #00FA9A
#48D1CC #C71585 #191970 #F5FFFA
#FFE4E1 #FFE4B5 #FFDEAD #000080
#FDF5E6 #808000 #6B8E23 #FFA500
#FF4500 #DA70D6 #EEE8AA #98FB98
#AFEEEE #DB7093 #FFEFD5 #FFDAB9
#CD853F #FFC0CB #DDA0DD #B0E0E6
#800080 #FF0000 #BC8F8F #4169E1
#8B4513 #FA8072 #F4A460 #2E8B57
#FFF5EE #A0522D #C0C0C0 #87CEEB
#6A5ACD #708090 #FFFAFA #00FF7F
#4682B4 #D2B48C #008080 #D8BFD8
#FF6347 #40E0D0 #EE82EE #F5DEB3
#FFFFFF #F5F5F5 #FFFF00 #9ACD32

資料來源：http://home.kimo.com.tw/aa3068/html.html