|
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 | | 
IP卡
狗仔卡
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
顯身卡