cht電腦資訊gcingcin分享
adm Find login register

HTML《隨手查》方便張貼論壇!

yawnp0426
joined: 2009-11-19
posted: 58
promoted: 2
bookmarked: 2
1subject: HTML《隨手查》方便張貼論壇!Promote 0 Bookmark 02018-02-14quote  

說明:在 gcin 論壇,常常需要用 HTML 格式編寫文章內容,在此張貼指令手冊,方便撰寫查閱!
練習:【巭孬嫑䳗】【𫘄𫑑𫗻𫙌】【𪯡𠁀𪚢𩫍】
==============================================================================

Ⅰ、基礎篇

概念:
<html>
<head>
文件檔頭
<title>文件標題</title>
<meta http-equiv=....>文件資訊
<script language="語法宣告">......</script>
</head>
<body>
文件主體
</body>
</html>

①<html>:HTML文件宣告
語法:
<html>文件內容</html>

②<html dir>:HTML文件方向
語法:
<html dir="ltr/rtl">

③<head>:文件檔頭
語法:
<head>文件檔頭</head>

④<meta>:文件資訊
語法:自動更新網頁
<meta http-equiv="refresh" content="秒數;url=連結網址">
語法:文字編碼方式
<meta http-equiv="content-type" content="text/html;charset=編碼方式"> 如:Big5, utf-8

⑤<title>:文件標題
語法:
<title>文件標題</title>

⑥<body>:文件主體
語法:
<body>文件主體</body>
語法:文字顏色
<body text="顏色屬性">......</body> 如:red, 00FFFF
語法:網頁左邊界
<body leftmargin="數字">......</body>
語法:網頁上邊界
<body topmargin="數字">......</body>
語法:背景顏色
<body bgcolor="顏色屬性">......</body> 如:red, 00FFFF
語法:背景圖片
<body background="圖片路徑">......</body>
語法:固定背景圖片〔只適用IE〕
<body bgproperties="fixed">......</body>
語法:超連結顏色
<body link="顏色屬性">......</body> 尚未讀取 如:blue, green, pink
<body vlink="顏色屬性">......</body> 已經讀取 如:blue, green, pink
<body alink="顏色屬性">......</body> 按下滑鼠,正要讀取 如:blue, green, pink

⑦<script>:程式碼宣告
語法:
<script language="語法宣告">......</script> 如:language="JavaScript"

⑧<!-->:文件附註
語法:
<!--附註文字-->


Ⅱ、文字篇

①<h1>~<h6>:標題字
語法:
<h1>文字</h1>
<h2>文字</h2>
<h3>文字</h3>
<h4>文字</h4>
<h5>文字</h5>
<h6>文字</h6>
語法:標題字對齊
<h1 align="位置">文字</h1> 如:align="center" ; align="right"

②<b>:粗體字
語法:
<b>文字</b>

③<strong>:粗體字
語法:
<strong>文字</strong>

④<i>:斜體字
語法:
<i>文字</i>

⑤<em>:斜體字
語法:
<em>文字</em>

⑥<var>:斜體字
語法:
<var>文字</var>

⑦<cite>:斜體字
語法:
<cite>文字</cite>

⑧<u>:底線字
語法:
<u>文字</u>

⑨<s>:刪除線字
語法:
<s>文字</s>

⑩<strike>:刪除線字
語法:
<strike>文字</strike>

⑪<tt>:電報字體
語法:
<tt>文字</tt>

⑫<big>:加大字體
語法:
<big>文字</big>

⑬<small>:縮小字體
語法:
<small>文字</small>

⑭<sup>:上標字
語法:
<sup>文字</sup>

⑮<sub>:下標字
語法:
<sub>文字</sub>

⑯<code>:程式碼字體
語法:
<code>文字</code>

⑰<dfn>:定義文字體
語法:
<dfn>文字</dfn>

⑱<kbd>:輸入文字體
語法:
<kbd>文字</kbd>

⑲<samp>:輸出文字體
語法:
<samp>文字</samp>

⑳<basefont>:基本字型
語法:
<basefont size="級數">文字</basefont>

㉑<font>:字型設定
語法:字型大小
<font size="級數">文字</font>
語法:字型名稱
<font face="字體名稱">文字</font> 如:華康雅宋體
語法:字型顏色
<font color="顏色屬性">文字</font>

㉑<blink>:閃爍字〔只適用Netscape〕
語法:
<blink>文字</blink>

㉒<>"&±™©®¥£:特殊字元
語法:
< &lt;
> &gt;
" &quot;
& &amp;
± &plusmn;
™ &trade;
© &copy;
® &reg;
¥ &yen;
£ &pound;


Ⅲ、段落篇

①<br>:段落換行
語法:
文字<br>

②<p>:新增段落
語法:
文字<p>

③<nobr>:取消自動換行
語法:
<nobr>文字</nobr>

④<pre>:保留格式
語法:
<pre>文字</pre>

⑤<blockquote>:段落縮排
語法:
<blockquote>文字</blockquote>

⑥<address>:地址格式
語法:
<address>文字</address>

⑦<center>:居中對齊
語法:
<center>文字</center>

⑧<xmp>:保留輸出
語法:
<xmp>文字</xmp>

⑨<hr>:水平線
語法:
<hr>
語法:水平線粗細
<hr size="數字">
語法:水平線長度
<hr width="數字/百分比">
語法:水平線顏色
<hr color="顏色屬性">
語法:水平線位置
<hr align="left/center/right">
語法:水平線陰影
<hr noshade>


Ⅳ、影像篇

①<img>:加入圖片
語法:圖片路徑
<img src="圖片路徑"> 如:flower.jpg
語法:圖片說明
<img alt="說明文字">
語法:調整圖片大小
<img width="數字" height="數字">
語法:圖片外框
<img border="數字">
語法:文字對齊圖片上方
<img align="top">
語法:文字對齊圖片中央
<img align="middle">
語法:文字對齊圖片下方
<img align="bottom">
語法:圖片靠左
<img align="left">
語法:圖片靠右
<img align="right">
語法:圖片垂直距離
<img vspace="數字">
語法:圖片水平距離
<img hspace="數字">
語法:低解析圖片
<img lowsrc="圖片路徑">
語法:播放影片
<img dynsrc="影片路徑"> 如:move.avi
影片屬性:
start="fileopen" 或是"mouseover"
loop="播放次數"
loopdelay="間隔時間"
height="高度"
width="寬度"

②<marquee>:跑馬燈
語法:加入跑馬燈
<marquee>文字</marquee> 屬性:align="top" ; align="middle" ; align="bottom"
語法:跑馬燈移動方式
<marquee behavior="scroll">文字</marquee>
<marquee behavior="alternate">文字</marquee>
<marquee behavior="slide">文字</marquee>
語法:跑馬燈底色
<marquee bgcolor="顏色屬性">文字</marquee>
語法:跑馬燈方向
<marquee direction="left/right">文字</marquee>
語法:跑馬燈重複次數
<marquee loop="數字">文字</marquee>
語法:跑馬燈延遲時間
<marquee scrolldelay="數字">文字</marquee>
語法:跑馬燈移動距離
<marquee scrollamount="數字">文字</marquee>
語法:跑馬燈高度
<marquee height="數字">文字</marquee>
語法:跑馬燈寬度
<marquee width="數字">文字</marquee>
語法:跑馬燈上下留白空間
<marquee vspace="數字">文字</marquee>
語法:跑馬燈左右留白空間
<marquee hspace="數字">文字</marquee>

③<bgsound>:背景音樂
語法:播放背景音樂
<bgsound src="音樂檔案路徑"> 如:moon.wav ; moon.au ; moon.mid
語法:背景音樂播放次數
<bgsound loop="次數">

④<embed>:嵌入物件
語法:
<embed src="檔案路徑" width="數值" height="數值" autostart="true" loop="true"> 如:movie.avi


Ⅴ、連結篇

①<a>:超連結
語法:連結http網頁
<a href="http網址">文字</a>
語法:連結文字說明
<a title="文字說明">文字</a>
語法:連結檔案
<a href="file路徑">文字</a> 如:file:///home/yawnp0426/sun%20day/moon.wav
語法:連結FTP網站
<a href="ftp路徑">文字</a> 如:ftp://使用者名稱:使用者密碼@主機名稱:port/路徑/檔名
語法:開啟電子信箱
<a href="mailto:電子信箱地址">文字</a>
語法:進入新聞討論區
<a href="news:討論區路徑">文字</a>
語法:連結文件段落
<a href="#位置名稱">文字</a>
<a name="段落名稱">文字</a>
語法:連結文件位置
<a href="檔案名稱#位置名稱">文字</a>
語法:圖片超連結
<a href="檔案名稱#位置名稱"><img src="圖片路徑"></a>

②<base>:基本路徑
語法:
<base href="基本路徑"> 如:絕對路徑=基本路徑+相對路徑;相對路徑可加「../」符號

③<area>:影像連結區域
語法:
<map name="地圖名稱"><area shape="形狀" coords="座標" href="檔案路徑"></map>
語法:標籤內的「shape形狀」
<area shape="circle" coords="x1,y1,r"> 如:圓形
<area shape="rect" coords="x1,y1,x2,y2"> 如:矩形
<area shape="poly" coords="x1,y1,x2,y2...xn,yn"> 如:多邊形
語法:標籤內的連結說明屬性
<area alt="說明文字">

④<a>:超連結屬性
語法:連結新視窗
<a href="連結路徑" target="_blank">文字</a>
語法:連結原本視窗
<a href="連結路徑" target="_self">文字</a>
語法:連結指定框架
<a href="連結路徑" target="視窗名稱">連結字串</a> 如:target="right"
語法:連結最大框架
<a href="連結路徑" target="_top">連結字串</a>
語法:在父框架中開啟
<a href="連結路徑" target="_parent">連結字串</a>
說明:「_top」和「_parent」的差別,就在分割左右多框視窗的左邊
是否會「_top」被取代。


Ⅵ、清單篇

①<menu>:建立清單
語法:
<menu><li>清單內容</li></menu>
語法:樣式種類
<menu type="disc"><li>清單內容</li></menu>
<menu type="circle"><li>清單內容</li></menu>〔只適用Netscape〕
<menu type="square"><li>清單內容</li></menu>〔只適用Netscape〕

②<dir>:建立清單
語法:
<dir><li>清單內容</li></dir>

③<lh>:建立清單
語法:
<lh><li>清單內容</li></lh>

④<ul>:無序號清單
語法:
<ul><li>清單內容</li></ul>

⑤<ol>:序號清單
語法:
<ol><li>清單內容</li></ol>
語法:序號清單樣式
<ol type="1"><li>清單內容</li></ol>
<ol type="a"><li>清單內容</li></ol>
<ol type="A"><li>清單內容</li></ol>
<ol type="i"><li>清單內容</li></ol>
<ol type="I"><li>清單內容</li></ol>
語法:清單起始數字
<ol start="數字"><li>清單內容</li></ol>

⑥<dl>:定義清單
語法:
<dl>
<dt>清單項目</dt>
<dd>清單內容</dd>
</dl>

⑦巢狀清單

語法:符號式巢狀清單
<html>
<head>
<title>Ex_06_09</title>
</head>
<body>
網頁設計課程種類:
<ul>
<li>應用軟體類</li>
<ul>
<li>基礎篇</li>
<li>進階篇</li>
</ul>
<li>程式語言類</li>
<ul>
<li>基礎篇</li>
<li>進階篇</li>
</ul>
</ul>
</body>
</html>

語法:序號式巢狀清單
<html>
<head>
<title>Ex_06_10</title>
</head>
<body>
網頁設計課程種類:
<ol type="A">
<li>應用軟體類</li>
<ol type="1">
<li>基礎篇</li>
<li>進階篇</li>
</ol>
<li>程式語言類</li>
<ol type="1">
<li>基礎篇</li>
<li>進階篇</li>
</ol>
</ol>
</body>
</html>

語法:混合式巢狀清單
<html>
<head>
<title>Ex_06_11</title>
</head>
<body>
網頁設計課程種類:
<ol type="I">
<li>應用軟體類</li>
<ul>
<li>基礎篇</li>
<ol>
<li>FrontPage</li>
<li>PhotoImpact</li>
</ol>
<li>進階篇</li>
<ol>
<li>Flash</li>
<li>Dreamweaver</li>
</ol>
</ul>
<li>程式語言類</li>
<ul>
<li>基礎篇</li>
<ol>
<li>HTML</li>
</ol>
<li>進階篇</li>
<ol>
<li>JavaScript</li>
<li>XML</li>
<li>ASP</li>
</ol>
</ul>
</ol>
</body>
</html>


Ⅶ、表格篇

①<table>:表格
語法:表格位置
<table align="位置">表格內容</table> 如:align="center" ; align="right"
語法:表格寬度
<table width="數字">表格內容</table>
語法:表格高度
<table height="數字">表格內容</table>
語法:表格背景顏色
<table bgcolor="顏色屬性">表格內容</table> 如:pink, aqua, red, blue
語法:表格邊框寬度
<table border="數字">表格內容</table>
語法:表格邊框顏色
<table bordercolor="顏色屬性">表格內容</table> 如:pink, aqua, red, blue
語法:表格邊框明暗
<table bordercolorlight="顏色屬性">表格內容</table>
<table bordercolordark="顏色屬性">表格內容</table>
語法:表格框線寬度
<table cellspacing="數字">表格內容</table>
語法:表格框線距離
<table cellpadding="數字">表格內容</table>
語法:表格背景圖片
<table background="圖片路徑">表格內容</table>

②<tr>:表格列
語法:表格列背景顏色
<tr bgcolor="顏色屬性">表格內容</tr> 如:deeppink, pink
語法:表格列對齊方式
<tr align="left/center/right">表格內容</tr>
語法:表格列上下對齊
<tr valign="top/middle/bottom">表格內容</tr>

③<th>/<td>:表格標題和內容
語法:
<th>表格標題</th>
<td>表格内容</td>
語法:儲存格寬度
<th width="數字">表格標題</th>
<td width="數字">表格内容</td>
語法:儲存格高度
<th height="數字">表格標題</th>
<td height="數字">表格内容</td>
語法:儲存格左右對齊方式
<th align="left/center/right">表格標題</th>
<td align="left/center/right">表格内容</td>
語法:儲存格上下對齊方式
<th valign="top/middle/bottom">表格標題</th>
<td valign="top/middle/bottom">表格内容</td>
語法:儲存格背景顏色
<th bgcolor="顏色屬性">表格標題</th>
<td bgcolor="顏色屬性">表格内容</td>
語法:儲存格背景圖片
<th background="圖片路徑">表格標題</th>
<td background="圖片路徑">表格内容</td>
語法:儲存格跨欄設定
<th colspan="數字">表格標題</th>
<td colspan="數字">表格内容</td>
語法:儲存格跨列設定
<th rowspan="數字">表格標題</th>
<td rowspan="數字">表格内容</td>

④<caption>:表格標題
語法:
<caption>表格標題</caption>
語法:標題對齊方式
<caption align="left/center/right">表格標題</caption>
語法:標題位置
<caption valign="top/bottom">表格標題</caption>

⑤巢狀表格

語法:
<html>
<head>
<title>Ex_07_25</title>
</head>
<body>
<center>
<h3>這是一個「巢狀表格」</h3>
<table border="1" bgcolor="yellow" width="80%" height="50%">
<tr>
<th>外表格</th><th>外表格</th><th>外表格</th>
</tr>
<tr>
<th>外表格</th>
<th>
<table border="1" bgcolor="beige" width="80%">
<tr>
<th>內表格</th><th>內表格</th>
</tr>
<tr>
<th>內表格</th><th>內表格</th>
</tr>
</table>
</th>
<th>外表格</th>
</tr>
<tr>
<th>外表格</th><th>外表格</th><th>外表格</th>
</tr>
</table>
</center>
<body>
<html>


Ⅷ、表單篇

①<form>:表單
語法:
<form action="資料傳送目的地" method="資料傳遞方式">表單內容與表單元素</form> 如:method="get";method="post"

②<input>:文字欄位輸入
語法:
<form>
名稱欄位:<input type="text" name="名稱欄位" value="欄位值" style="欄位樣式">
密碼欄位:<input type="password" name="密碼欄位" value="欄位值" style="欄位樣式">
</form>
type="屬性":
button 定義可點擊按鈕(多數情況下,用於通過 JavaScript 啟動腳本)。
checkbox 定義復選框。
file 定義輸入字段和 "瀏覽"按鈕,供文件上傳。
hidden 定義隱藏的輸入字段。
image 定義圖像形式的提交按鈕。
password 定義密碼字段而該字段中的字符被掩碼。
radio 定義單選按鈕。
reset 定義重置按鈕。重置按鈕會清除表單中的所有數據。
submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text 定義單行的輸入字段,用戶可在其中輸入文本。默認寬度為 20 個字符。
~~~~="屬性":src,alt,checked,maxlength,size
必須把 src 屬性和 alt 屬性與 <input type="image" src="submit.gif" alt="Submit"> 結合使用。
必須把 checked 屬性與 <input type="checkbox" checked="checked"> 或 <input type="radio" checked="checked"> 配合使用。
必須把 maxlength 屬性與 <input type="text"> 或 <input type="password"> 配合使用。
對於 <input type="text"> 和 <input type="password">,size 屬性定義的是可見的字符數。而對於其他類型,size 屬性定義的是以像素為單位的輸入字段寬度。
由於 size 屬性是一個可視化的設計屬性,推薦使用 CSS 來代替兼容它。 CSS 語法:<input style="width:100px">

③表單製作:
語法:
<html>
<body>
<form action="mailto:test@cs.nthu.edu.tw" method="post">
名字:<input name="myname" size=10 maxlength=20 value="蕭亞軒"><P>
密碼:<input name="passwd" type=password size=8 maxlength=8><P>
性別:<input name="sex" type=radio value="男">男
<input name="sex" type=radio value="女" checked="checked">女<P>
嗜好(可複選):
<input name="f1" type=checkbox value="book">閱讀
<input name="f2" type=checkbox value="sport" checked="checked">運動
<input name="f3" type=checkbox value="music" checked="checked">音樂
<input name="f4" type=checkbox value="sleep">睡覺
<input name="f4" type=checkbox value="talk">聊天<P>
<input type="submit" value="送出表單">
<input type="reset" value="重新輸入">
</form>
</body>
</html>


附註:【下載 BlueGriffon 免費網頁編輯軟體】

edited: 9

cht電腦資訊gcingcin分享
adm Find login register
views:821