[分享]HTML 語法總整理

提供不熟悉朋友,在此區看有版上使用說明。(新朋友必看)
頭像
懸壺子
系統管理員
系統管理員
主題中的帖子: 3
文章: 33855
註冊時間: 2001-10-05 , 10:10
個人狀態: 道骨學習佛心..^^..
貼心留言: 氣候不穩
性別: 公仔
來自: 黃金故鄉
聯繫:

[分享]HTML 語法總整理

未閱讀文章 懸壺子 »

[分享]HTML 語法總整理

代碼: 選擇全部

[code]本文之文字?]定: 
font-style:(1.normal一般 2.italic斜體 3.oblique斜體) 
font-variant:(1.normal一般 2.small-caps小寫轉大寫) 
text-decoration:(1.none維持原狀 2.underline?[一底線 3.overline?[一上線 4.line-through?[一刪除線 5.blink?{?{ 
text-align:(1.left左 2.center中 3.right右 4.justify分散對齊 
background-attachment:(1.scroll不固定 2.fixed固定) 
border:10pt red outset?]定本文外框為10pt,且為紅色 
border-color:(?]定本文的顏色) 
border-style:(1.none 2.hidden 3.dotted 4.dashed 5.solid 6.double 7.groove 8.ridge 9.inset 10.outset) 
border-style:(1.無 2.無 3.圓形點線 4.矩形點線 5.實線 6.雙重線 7.具下陷感的立體外框 8.具上昇感的立體外框 9.讓內容具下陷感的立體外框 
10.讓內容具上昇感的立體外框) 
分割表格的?]定: 
瀏覽器不支援分割視窗時的宣告: 
<noframes> 
讓使用者所要見到的資訊 
<卅noframes> 
border=3 ?]定分割表格的粗細 
frameborder=(0.不要顯示分割框線 1.顯示分割框線) 
bordercolor=red 表格顏色?]定為紅色 
marginheight=2將表格視窗上下方的空白大小?]定為2個像素 
marginwidth=2將表格視窗左右方的空白大小?]定為2個像素 
noresize固定分割視窗的大小 
scrolling=(1.auto自動 2.yes要顯示 3.no不要顯示)是否要顯示捲軸 
內嵌入網頁的超強功能: 
--------------------------------------------------------------------------------------------------------------------------------------------- 
<iframe src=你的網頁名稱> 
<a href=”good.html”>good<卅a>若不支援iframe的話,則顯示good的超連結<卅a> 
<卅iframe> 
--------------------------------------------------------------------------------------------------------------------------------------------- 
段落的?]定: 
要在段落中顯示圖片: 
style="background-image:url(圖名)" 
style="background-repeat:(1.repeat垂直與水平都重覆 2.repeat-x水平重覆 3.repeat-y垂直重覆 4.no-repeat不要重覆 
style="background-attachment:(1.scroll不固定 2.fixed固定) 
style="height:60px"?]定段落高為60px 
style="overflow:scroll"?]定若超過長度則用捲軸來捲動 
style="margin:10px 20px 30px 40px?]定此段落的上10下20左30右40的空白 
style="border:外框粗細pt 顏色 樣式(1.none 2.hidden 3.dotted 4.dashed 5.solid 6.double 7.groove 8.ridge 9.inset 10.outset) 
style="position:(1.static遵遁html layout規則而自動決定的座標系 2.absolute以body左上角為原點 3.relative以先前段落標籤為原點) 
style="left:2pt;top:3pt"?]定此段落的文字是從左2pt,上3pt?}始顯示 
style="position:座標系;z-index:值越大,越上層(顯示重疊之段落,要顯示在上面或下面的?]定) 
?]定水平線為藍色: 
-------------------------------------------------------------------------------- 
顯示空白的方式:<spacer size="48" type="1.horizontal在文字之前置入48個空白 2.vertical在文字正上方置入48個空白> 
特效: 
使用圖片連結 
<img src="圖名" usemap="#要使用的地圖名稱"> 
定義地圖 
<map name="地圖名稱"> 
<area shape="形狀?]1.default 2.rect 3.circle 4.poly)" coords="座標值(1.無 2.x1,y1,x2,y2 3.圓心x,圓心y,半徑 4.x1,y1....xn,yn) href="連結位置"> 
</map> 
超連結: 
a:link未連結 a:active連結中 a:visited連結過 
text-decoration:none取消超連結的底線 
<a title="超連結要顯示的說明"> 
直接顯示內容,忽略html解讀: 
<xmp>內容</xmp> 
顯示引用文章: 
<blockquote>長引用文</blockquote> 
<cite>短引用文</cite> 
<address>顯示引用之位?}或者E-Mail</address> 
顯示專有名詞: 
<dfn>專有名詞 
<kbd>從鍵盤輸入的文字 
<samp>顯示電腦輸出的結果 
<code>顯示?{式碼 
<var>顯示變數 
顯示特殊字元: 
&lt半形的"<" &gt半形的">" &quot半形的"“" &amp半形的"&" 
&ascii碼?]可以! 
表單輸入樣式: 
text文字輸入欄(name=""名稱 value=""初始值 size=""欄寬 maxlenght=""最大輸入個數 
checkbox核取方塊(name=""名稱 value=""顯示值) 
radio單選鈕(name=""名稱 value=""傳送值 checked要?]定為預?]值) 
hidden隱藏式項目(name=""名稱 value=""傳送值) 
password密碼欄(name=""名稱 value=""初始值 size=""欄寬 maxlenght=""最多字數) 
button按鈕(name=""名稱 value=""預?]值) 
file檔案傳送鈕(name=""名稱 value=""識別名稱,或可一?}始要顯示的名稱) 
<textarea多行多列輸入欄(name=""名稱 rows=""列數 cols=""欄寬 wrap=""傳送方式( 1.off所有的換行碼均省略 2.soft只傳送實際換行的部份 
3.hard傳送實際換行的部份、以及換行部份中所置入的換行資料 )</textarea> 
<select name=""名稱><option value=""傳送值>顯示值</select> 
reset重?]鈕(value=""顯示值) 
submit送出按鈕(value=""顯示值) 
image附有圖片的送出按鈕(src=""圖片位置) 
表單內的文字輸入模式: 
style="ime-mode: 1.auto自動 2.active中文 3.inactive英文 4.disabled切換為半型英文輸入後,無法再切換成日文輸文" 
切換表單內的輸入模式: 
<input type=""類型 istyle="1"全形假名 "2"半形假名 "3"英文 "4"數字> 
?]定表單內輸入的順序: 
<INPUT TABINDEX=""內容為數字?]0~N> 
表格的?]定: 
<table><tr><th>?[粗的內容</th><td>正常內容</td></tr></table> 
align=""(1.left使表格靠左,使其它文字圍繞在表格右邊 2.right使表格靠右,使其它文字圍繞在表格左邊 3.none不圍繞 ) 
hspace="pt"表格離文字水平方向上的空白 vspace="pt"表格離文字垂直方向上的空白 
<caption align=""1.top 2.bottom>表格的標題</caption> 
<table width=""?]定表格寬 height=""?]定表格高?]階可用百分比)>~</table>(儲存格?]可以這樣來?]定) 
border=""?]定表格外框大小 
表格外框顯示形式: 
<table frame="1.void無 2.above上 3.below下 4.ihs左 5.rhs右 6.hsides左右 7.vsides上下 8.box下左右 9.border上下左右">~</table> 
表格內框顯示形式: 
<table rules="1.none無 2.rows僅顯示橫線 3.cols僅顯示縱線 4.all全部顯示">~</table> 
表格外框顯示顏色: 
<table bordercolor=""外框色 bordercolorlight=""明亮外框色 bordercolordark=""陰暗外框色>~</table> 

-------------------------------------------------------------------------------- 
bgcolor=""背景色 
background=""背景圖片 
<table cellspacing=""儲存格的間隔 cellpadding=""儲存格內的空白>~</table> 
align=""水平顯示位置(left,center,right),valign=""垂直顯示位置(top,middle,bottom) 
<td nowrap(禁止換行)></td> 
<table style="table-layout:1.auto未鎖定,圖多大就顯示多大 2.fixed鎖定,所有大小階由所宣告的表格大小來顯示 width=""大小>~</table> 
取消儲存格與儲存格間的空白: 
<table style="border-collapse:1.separate?]定為空白 2.collapse不?]定為空白>~</table> 
?]定多欄顯示: 
<multicol cols=""欄數 gutter=""欄與欄間的間隔></multicol> 

-------------------------------------------------------------------------------- 
圖片顯示: 
<img src=""高解析度之圖?]顯示較慢)> 
<img lowsrc=""黑白圖?]顯示超快)> 
<img src="" alt=""無法顯示時所替代的文字> 
<img src="" width=""圖片寬 height=""圖片高> 
圖片傍圍繞文字的?]定: 
<img src="" sytle="float:1.left 2.right 3.top 4.middle 5.bottom 6.texttop 7.absmiddle 8.absbottom 9.none > 
1.圖左,字右 2.圖右,字左 3.圖上對字上 4.圖中對字中5.圖底對字底 6.圖上對字型上 7.圖中對字型中 8.圖底對字型底 9.不圍繞 
解除圍繞文字: 
<br clear="1.left解除左 2.right解除右 3.all解除全部"> 
聲音: 
<embed src=""來源 volume=""0~100 width=""寬度>播放內崁在畫面中的聲音檔?]?]可用來播放影片) 
<bgsound src=""來源 loop=""迴圈(infinite是無限)>播放背景音樂 
撥放avi影片: 
<img dynsrc=""位置 width=""寬 height=""高 align=""圍繞方式?]left,center,right) loop=""迴圈 loopdelay=""到下一次播放的間隔> 
不支援embed時的顯示文字: 
<noembed>無法?[看,請下載適當?{式</noembed> 
圖型特效: 
alpha合成效果<div sytle="position:absolute;filter:Alpha(1.startx 2.starty 3.finishx 4.finishy 5.opacity 6.finishOpacith 7.style 8.enabled)></div> 
1.?]定起始x座標 2.?]定起始y座標 3.?]定結束x座標 4.?]定束y座標 
5.?]定起始的透明度 6.?]定結束的透明度(不寫為0) 7.(0平均1線狀2圓形3長方形) 8.(true/false) 
模糊效果: 
<div style="position:absolute;filter:Blue(1.add 2.direction 3.enabled)"></div> 
<span style="position:absolute;filter:Blue(1.add 2.direction 3.enabled)"></span> 
1.(0不合成原影像 1合成原影像) 2.(0、45、90、135、...、以每隔45度為單位) 3.(true/false) 
投射陰影: 
<div style="position:absolute;filter:Dropshadow(1.color 2.offx 3.offy 4.poslitive 5.enabled)"></div> 
<span style="position:absolute;filter:Dropshadow(1.color 2.offx 3.offy 4.poslitive 5.enabled)"></span> 
1.顏色 2.offsetX 3.offsetY 4.true/false 5.true/false 
附陰影的文字: 
<div style="position:absolute;filter:Shadow(1.color 2.direction 3.enabled)"></div> 
<span style="position:absolute;filter:Shadow(1.color 2.direction 3.enabled)"></span> 
1.顏色 2.方向(0、45、90、135、...、以45度為單位) 3.true/false 
發光效果: 
<div style="position:absolute;filter:Glow(1.color 2.strength 3.enabled)"></div> 
<span style="position:absolute;filter:Glow(1.color 2.strength 3.enabled)"></span> 
1.顏色 2.專光強度 3.true/false 
波形效果: 
<div style="position:absolute;filter:Wave(1.add 2.freq 3.lightstrength 4.phase 5.strength 6.enabled)"></div> 
<span style="position:absolute;filter:Wave(1.add 2.freq 3.lightstrength 4.phase 5.strength 6.enabled)"></span> 
1.(0不合成原影像 1合成原影像) 2.波數 3.強度(0~100) 4.波起始相位(0~100) 5.強度 6.true/false
[/code]

代碼: 選擇全部

 /n 來斷行。 
/n/n = <br><br> 


代碼: 選擇全部

 是留空格
最後由 懸壺子 於 2006-06-08 , 14:39 編輯,總共編輯了 1 次。
圖檔
頭像
紫蝶兒
珍珠拔毒悅顏者
珍珠拔毒悅顏者
主題中的帖子: 2
文章: 10086
註冊時間: 2006-01-03 , 18:42
個人狀態: 忙碌!
貼心留言: 忙歸忙~心~還是唸著大家的^^
性別: 可愛的女生

Re: [分享]HTML 語法總整理

未閱讀文章 紫蝶兒 »

辛苦大人了 ab71:
整理的好清楚 er:
頭像
Enmo
石斛養胃陰者
石斛養胃陰者
主題中的帖子: 1
文章: 8471
註冊時間: 2006-01-03 , 13:08
個人狀態: 開心享受幸福
性別:
來自: 直達你心 ^o^

Re: [分享]HTML 語法總整理

未閱讀文章 Enmo »

紫蝶兒 寫:辛苦大人了 ab71:
整理的好清楚 er:
妳未免太慢看到啦 這篇2月底就發了 ce26:
to1:
頭像
紫蝶兒
珍珠拔毒悅顏者
珍珠拔毒悅顏者
主題中的帖子: 2
文章: 10086
註冊時間: 2006-01-03 , 18:42
個人狀態: 忙碌!
貼心留言: 忙歸忙~心~還是唸著大家的^^
性別: 可愛的女生

Re: [分享]HTML 語法總整理

未閱讀文章 紫蝶兒 »

Enmo 寫: 妳未免太慢看到啦 這篇2月底就發了 ce26:
to1:
真的耶 too:
我記得我2月有半個月身體不適 可以原諒我嗎 ce20: ce20: ce20:
頭像
懸壺子
系統管理員
系統管理員
主題中的帖子: 3
文章: 33855
註冊時間: 2001-10-05 , 10:10
個人狀態: 道骨學習佛心..^^..
貼心留言: 氣候不穩
性別: 公仔
來自: 黃金故鄉
聯繫:

Re: 冬青子〔灌木〕

未閱讀文章 懸壺子 »

圖片加框

<img src="http://img150.imageshack.us/img150/8800/2mf3.png" border="6">

代碼: 選擇全部

圖片加框:<img src="圖檔網址" border="n"> 

說明: border= "框線大小"。


圖片加註解

<img src="http://img150.imageshack.us/img150/8800/2mf3.png" alt="龍">

代碼: 選擇全部

圖片加註解:<img src="圖檔網址" alt="龍(要註解的字)">

說明:alt=圖片說明,把滑鼠移到圖片上即可看到所輸入的字。 
圖檔
頭像
懸壺子
系統管理員
系統管理員
主題中的帖子: 3
文章: 33855
註冊時間: 2001-10-05 , 10:10
個人狀態: 道骨學習佛心..^^..
貼心留言: 氣候不穩
性別: 公仔
來自: 黃金故鄉
聯繫:

Re: [分享]HTML 語法總整理

未閱讀文章 懸壺子 »

圖片連結加註解:

<a href="要連結的網址" target="_blank" alt="要註解的字"><img src="圖檔網址"></a>

說明:_blank=另開一新視窗,如果你不想另開,把target="_blank"去掉即可。

alt=圖片說明,把滑鼠移到圖片上即可看到所輸入的字。


如本網的超連結

代碼: 選擇全部

<a href="https://herb-tw.com/phpBB/" target="_blank" alt="岐黃醫林"><img src="https://herb-tw.com/phpBB/images/links/web_logo88a.gif"></a> 
發表主題 回覆文章

回到「3‧論壇教學版(版上使用說明)」