概念：
<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>
⑲<samp>：輸出文字體
語法：
<samp>文字</samp>
⑳<basefont>：基本字型
語法：
<basefont size="級數">文字</basefont>
㉑<font>：字型設定
語法：字型大小
<font size="級數">文字</font>
語法：字型名稱
<font face="字體名稱">文字</font> 如：華康雅宋體
語法：字型顏色<font face="字體名稱">文字</font> 如：華康雅宋體
<font color="顏色屬性">文字</font>
㉑<blink>：閃爍字〔只適用Netscape〕
語法：
<blink>文字</blink>
㉒<>"&±™©®¥£：特殊字元
語法：
< <
> >
" "
& &
± ±
™ ™
© ©
® ®
¥ ¥
£ £
Ⅲ、段落篇
①<br>：段落換行
語法：
文字<br>
②<p>：新增段落
語法：
文字<p>
③<nobr>：取消自動換行
語法：
<nobr>文字</nobr>
④<pre>：保留格式
語法：
<pre>文字</pre>
語法：
<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 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="1"><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>內表格</th>
</tr>
</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 免費網頁編輯軟體】
沒有留言:
張貼留言