[javascript轉換工具]

把HTML 編碼轉成 javascript的網站:
HTML to JavaScript Convertor

把HTML 或Javascript 做加解密的的網站:
HTML JavaScript Encoder/Decoder

[html] 鏈結相對位置 , 有 / 和沒有的差異.

無法查看此摘要。請 按這裡查看文章。

[網頁設計]Web Form Designer

如果你是網頁設計的相關工作者，相信常常會為了設計一個又一個麻煩的表單(form)而煩惱吧。Web Form Designer這套免費的軟體可以幫你解決這個困擾，它提供了類似Visual Studio的整合開發環境，可以直接拖曳出各式表單的元素，相當地直覺、方便，還具有內建的Javascript語法，輕鬆幫你檢查欄位是否填寫。設計 好的表單，可以存成文字檔或複製到剪貼簿，直接跟DreamWeaver、FrontPage或Namo WebEditor等網頁設計軟體結合。有了Web Form Designer，讓設計表單不再是你的惡夢！

有設計過互動式網頁/網站的人應該都知道，表單是絕對少不了的東西，像登入表單、問卷調查、個人資料…等等，每次設計起來總是又繁瑣、又浪費時間。 現在就讓這套免費的軟體–Web Form Designer為你代勞吧！你可以先藉著它幫你設計好一整套的表單，需要用到的時候只要呼叫出來修改一下，就可以馬上套用到你的網頁之中，省時又省力 喔！

版本：1.2.1 (Freeware)
官方網站：http://www.webformdesigner.com/
下載點：http://www.webformdesigner.com/download.html (1036KB)

更深入介紹:軟體玩家

[PHP] 表單輸入時對於HTML的過濾

在PHP中最常見的應用就是互動表單，因此接收用戶端資訊是非常常見的事！然而俗話說：「世風日下，人心不古」，這年頭誰知道用戶端的人在想些什麼？用戶 端送出的資訊很有可能會包含一些惡意的語法，對於２４小時暴露在網路環境的網站來說，時時刻刻都得小心防範駭客的攻擊，提升自我的資訊安全觀念非常重要。 所以在接收用戶端資訊後，存入資料庫之前，都會先對其進行基本的過濾；第一個要判斷的就是HTML語法的攻擊！

許多惡意語法都是建立在HTML上，PHP本身有提供轉換HTML碼的函數：htmlspecialchars()與htmlentities()；其中htmlspecialchars()只會轉換HTML相關碼：

• '&' => '&'
• '"' => '"'
• ''' => '''
• '<' => '<'
• '>' => '>'

而htmlentities()則是把字串中所有字元做轉換，另外還可以設定轉換字串的編碼方式。還有一個函數：strip_tags()是直接把HTML的標籤整個過濾掉。

之前在題目試作／哇寶基本能力測試一文中，也有提到相關的觀念。另外附上那個時候google到的一個國外防止XSS的網頁：PHP XSS (cross site scripting) filter function，他有對HTML作是否可能被當作惡意的語法作判斷，不過測試後發現對中文的處理好像有點問題...就當作是英文的過濾函式吧～

出處：http://blog.roodo.com/taikobo0/archives/5881583.html

直接內置到Html 的CSS

＜td style="border-right: 0px solid; border-color: #cccccc;"＞

打造W3C XHTML 1.0標準的網站

XHTML1.0是HTML4.0的重新組織,
算是HTML4.01的修正版,發行命名為XHTML1.0
XHTML1.0要求比較嚴格,跟HTML4.01有些差別,以XHTML1.0標準下列1-4項是絕對必要的也是不同於HTML4.01的地方
網頁製作使用Dreamweaver MX 2004,可以在
「編輯」-「偏好設定」-「新文件」-「將文件設為XHTML相容」
然後新增HTML,就可以開始製作XHTML的網頁,
以下我列出幾點比較常見會發生的錯誤供參考:

1.所有標籤元素名稱都使用小寫
錯誤 [HTML] [TITLE] [HEAD] [BODY]
正確 [html] [title] [head] [body]
錯誤 [IMG SRC="BG.GIF" BORDER="0" ALT="說明文字"]
正確 [img src="bg.gif" border="0" alt="說明文字" /]
錯誤 [UL][LI][/LI][/UL]
正確 [ul][li][/li][/ul]
以上只是舉例,是"所有"標籤元素名稱都必須是小寫

2.XHTML 1.0要求所有的標籤必須關閉
所有沒有成對的空標籤必須以 /]結尾
[p][/p]和[a href="home.html"][/a]這就是成對
錯誤 [br] [hr]
正確 [br /] [hr /]
錯誤 [input type="text" name="name"]
正確 [input type="text" name="name" /]
錯誤 [meta ...]
正確 [meta ... /]
錯誤 [link rel="stylesheet" type="text/css" href="style.css"]
正確 [link rel="stylesheet" type="text/css" href="style.css" /]
錯誤 [img src="bg.gif" border="0" alt="說明文字"]
正確 [img src="bg।gif" border="0" alt="說明文字" /]

3.不允許使用target="_blank"
在HTML4.01可以使用target="_blank",
但XHTML1.0是不被允許的,你可以改寫為 target="new"
不過最好的方式還是以js來做調用(解決_blank開新視窗不符合標準)

4.所有屬性都必須有值
XHTML1.0規定所有屬性都必須有值,若沒有就必須重複屬性作為值
錯誤 [input type="radio" value="v1" checked name="s1" /]
正確 [input type="radio" value="v1" checked="checked" name="s1" /]
錯誤 [option selected]S1[/option]
正確 [option selected="selected"]S1[/option]
錯誤 [td nowrap]
正確 [td nowrap="nowrap"]

5.非標籤一部分的符號以編碼表示
表單內包含以下符號也必須用編碼表示
[ 以 < 表示
] 以 > 表示
& 以 & 表示
程式中的連結 & 也要改用 &
錯誤 [a href="foo.cgi?chapter=1&section=2"]
正確 [a href="foo।cgi?chapter=1&section=2"]

6.使用表格常犯的錯誤
我們在做表格通常會指定寬與高,例如:
[table border="1" width="300" height="55"]
[tr][td] 內容 [/td][/tr]
[/table]
這樣做是沒有辦法通過,W3C建議使用CSS來控制標籤元素的高度
.table{
height:55px;
}
[table class="table"]
[tr][td] TEXT [/td][/tr]
[/table]
但是若使用太多表格,在CSS一一指定不同高,也不是好方法
其實很簡單將高度height屬性指定在儲存格就可以了通過測試
[table border="0" width="300"]
[tr][td height="55"] TEXT [/td][/tr]
[/table]
但這不是w3c希望的標準,建議能夠使用div代替不必要的table

7.正確使用CSS樣式表
一定要放在[head][/head]之間
[link rel="stylesheet" type="text/css" href="style.css" /]
[style type="text/css"]
[!--
body{font-size:9pt;}
--]
[/style]

錯誤 [style]
正確 [style type="text/css"]
建議全站的樣式都寫在।css文件中

8.同一個id選擇器不可重複使用
一個網頁中id="xx"同一個選擇器不能重複使用,若需要重複請用class="xx"

9.絕對不可省略雙引號或單引號
錯誤 style=font-size:9pt
正確 style="font-size:9pt"
錯誤 [img src=bg.gif width=140 height=30 alt=text /]
正確 [img src="bg.gif" width="140" height="30" alt="text" /]
錯誤 [a href=home]text[/a]
正確 [a href="home"]text[/a]

10.標籤必須是一對
[p] [/p]
[span][/span]
[div][/div]

11.圖片標籤加上文字說明alt="說明"
錯誤 [img src="bg.gif" height="50" border="0" /]
正確 [img src="bg।gif" height="50" border="0" alt="說明文字" /]

12.正確的標籤順序
錯誤 [b][i]文字[/b][/i]
正確 [b][i]文字[/i][/b]

13.註解文字不可包含--符號
錯誤 [!-- OEC--SPACE --]
正確 [!-- OECSPACE --]

14.JavaScript寫法
Javascript我們通常會寫為
錯誤 [script language="javascript"]
W3C標準必須為程式指定類型type=text/javascript,所以要寫為
正確 [script type="text/javascript"]
或者 [script language="javascript" type="text/javascript"]
載入外部.js獨立檔案的寫法
正確 [script type="text/javascript" src="script।js"][/script]

15. [embed]標籤的爭議
[embed]是Netscape的私有標籤,W3C 從HTML3.2 HTML 4.01 到 XHTML 1.0 中都沒有這個標籤,所以使用[embed]的頁面是不能通過標準測試。
W3C推薦使用 [object] 標籤,用[object]插入flash影片的代碼可以寫為:
[object type="application/x-shockwave-flash" data="index.swf" width="400" height="200"]
[param name="movie" value="index.swf" /]
[/object]
但這樣的寫法可能IE5/IE6 Win瀏覽器版本會出現問題。想要符合標準又能在任何瀏覽器下正常顯示,以下幾個連結點提供參考:

* torresburriel.com
* A List Apart

[embed]標籤因為廣大的受到運用,不再標準範圍引起很大的爭議,想要解決這個問題,只能等IE瀏覽器對[object]有更好的支持或者W3C願意收錄[embed]標籤。

16.XHTML 1.0文件類別宣告的正確寫法 (不可小寫)
過度標準（Transitional）
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
框架標準（Frameset）
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"]


嚴格標準（Strict） 包含以上須注意的問題,還有其他更嚴格的標準
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]

XHTML 1.0 標準規格 : The Extensible HyperText Markup Language
W3C標準測試網址 http://validator.w3.org/
網頁自動測試網址 http://validator.w3.org/check?uri=referer
測試時一定要有「16.文件類別宣告」還有指定文件編碼
[meta http-equiv="Content-Type" content="text/html; charset=big5" /]
才能順利進行測試動作,開始打造一個萬維標準的網站吧!

打造W3C HTML 4.01標準的網站

目前使用Dreamweaver或其他網頁製作軟體做網站編輯,HTML大部份都是以HTML4.0和HTML4.01為主,但是能完全符合標準的卻不多, 有些人有這樣的的想法:[能正常再瀏覽器顯示就好],有些人則不清楚原來還有W3C標準的存在,達到W3C標準其實不難,只要多注意一些細節,拷貝教學網範例語法的時候,詳細檢查一下再貼上,如果能直接編輯HTML更好,避免錯誤的發生。
以下我列出幾點是比較常見的錯誤供參考:

1.不可省略雙引號或單引號
錯誤 style=font-size:9pt
正確 style="font-size:9pt"
錯誤 [img src=bg.gif width=140 height=30 alt=text]
正確 [img src="bg.gif" width="140" height="30" alt="text"]
錯誤 [a href=home]text[/a]
正確 [a href="home"]text[/a]

HTML4.01中有些屬性值沒有加引號是可以通過測試
但在XHTML1।0引號就是必須的,所以建議養成加引號的好習慣.

2.標籤必須是一對
[p] [/p]
[span][/span]
[div][/div]
[table][tr][td][/td][/tr][/table]

3.圖片標籤加上文字說明alt="說明"
錯誤 [img src="bg.gif" height="50" border="0"]
正確 [img src="bg।gif" height="50" border="0" alt="說明文字"]

4.非標籤一部分的符號以編碼表示
表單內包含以下符號也必須用編碼表示
[ 以 < 表示
] 以 > 表示
& 以 & 表示
程式中的連結 & 也要改用 &
錯誤 [a href="foo.cgi?chapter=1&section=2"]
正確 [a href="foo।cgi?chapter=1&section=2"]

5.標籤的順序
錯誤 [b][i]文字[/b][/i]
正確 [b][i]文字[/i][/b]

6.註解文字不可包含--符號
錯誤 [!-- OEC--SPACE --]
正確 [!-- OECSPACE --]

7.CSS樣式表的位置與正確寫法
一定要放在[head][/head]之間
[link rel="stylesheet" type="text/css" href="style.css"]
[style type="text/css"]
[!--
body{font-size:9pt;}
--]
[/style]

錯誤 [style]
正確 [style type="text/css"]

8.使用表格常犯的錯誤
我們在做表格通常會指定寬與高,例如:
[table border="1" width="300" height="55"]
[tr][td] 內容 [/td][/tr]
[/table]
這樣做是沒有辦法通過,W3C建議使用CSS來控制標籤元素的高度
.table{
height:55px;
}
[table class="table"]
[tr][td] TEXT [/td][/tr]
[/table]
但是若使用太多表格,在CSS一一指定不同高,也不是好方法
其實很簡單將高度height屬性指定在儲存格就可以了通過測試
[table border="0" width="300"]
[tr][td height="55"] TEXT [/td][/tr]
[/table]
但這不是w3c希望的標準,建議能夠使用div代替不必要的table

9.同一個id選擇器不可重複使用
一個網頁中id="xx"同一個選擇器不能重複使用,若需要重複請用class="xx"

10.JavaScript寫法
Javascript我們通常會寫為
錯誤 [script language="javascript"]
W3C標準必須為程式指定類型type=text/javascript,所以要寫為
正確 [script type="text/javascript"]
或者 [script language="javascript" type="text/javascript"]

載入外部.js獨立檔案的寫法
正確 [script type="text/javascript" src="script।js"][/script]

11. [embed]標籤的爭議
[embed]是Netscape的私有標籤,W3C 從HTML3.2 HTML 4.01 到 XHTML 1.0 中都沒有這個標籤,所以使用[embed]的頁面是不能通過標準測試。
W3C推薦使用 [object] 標籤,用[object]插入flash影片的代碼可以寫為:
[object type="application/x-shockwave-flash" data="index.swf" width="400" height="200"]
[param name="movie" value="index.swf"]
[/object]
但這樣的寫法可能IE5/IE6 Win瀏覽器版本會出現問題
想要符合標準又能在任何瀏覽器下正常顯示,以下幾個連結點提供參考:

* torresburriel.com
* A List Apart

[embed]標籤因為廣大的受到運用,不再標準範圍引起很大的爭議,
想要解決這個問題,只能等IE瀏覽器對[object]有更好的支持
或者W3C願意收錄[embed]標籤。

12.HTML4.01文件類別宣告的正確寫法 (不可小寫)
過度標準（Transitional）
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"]
框架標準（Frameset）
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"]


嚴格標準（Strict）
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"]
HTML 4.01 標準規格 : HTML 4.01 Specification
W3C標準測試網址 http://validator.w3.org/
網頁自動測試網址 http://validator.w3.org/check?uri=referer
測試時一定要有「12.文件類別宣告」還有指定文件編碼
[meta http-equiv="Content-Type" content="text/html; charset=big5"]
才能順利進行測試動作,開始打造一個萬維標準的網站吧!

讓網址列網址不改變

一般我們首頁的名稱都要命名為index.htm或index.html,經由網址例如:
http://www.hsiu28.net/index.html
就不需要檔名直接用
http://www.hsiu28.net/
就能夠自動執行index.html這個檔案,所以我們將首頁index.html做成框架頁
讓所有網站內容都在這個框架中執行,網址就可以一直不變
複製以下語法存為index.html
[html][head]
[meta http-equiv="Content-Type" content="text/html; charset=big5"]
[title]web title[/title]
[/head]
[frameset framespacing="0" border="0" rows="*" frameborder="0"]
[frame name="main" src="home.html" scrolling="auto"]
[noframes]
[body]
[/body]
[/noframes]
[/frameset]
[/html]
範例中home.html改為你要做為首頁畫面的網頁

Meta之容易讓搜尋引擎尋找到網站

容易讓搜尋引擎容易找到的方法
修改裡面的關鍵字和你網站的內容相關
[meta name="keywords" content="css,perl,flash,material"]

Meta之指定時間轉換頁面

指定時間讓網頁自動跳到另一個頁面
[meta http-equiv="refresh" content="15; url=home.html"]
content=15 // 秒數
url=home.html // 指定跳到哪個網頁

Meta之禁止瀏覽器的暫存功能

可以讓瀏覽過的網頁不下載到瀏覽者的網路暫存區
[meta http-equiv="pragma" content="no-cache"]

Meta之網頁作者與內容描述

宣告這網頁的作者：
[meta name="author" content="calos blog"]
關於網站內容的描述：
[meta name="description" content="calos blog : PHP BLOG"]
calos blog 改為你的名稱或網址
calos blog : PHP BLOG 改為你的網站介紹

HTML [input]標籤

input可選屬性

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
下表中的DTD列指明了被支持的DTD屬性。S=Strict（精確的），T=Transitional（傳統的），F=Frameset（框架）

屬性	值	描述	DTD
accept	list_of_mime_types	A comma-separated list of MIME types that indicates the MIME type of the file transfer. 以逗號分隔MIME類型列 Note: Only used with type="file" 注意：只能在type="file"的時候使用	STF
align	left right top texttop middle absmiddle baseline bottom absbottom	Defines the alignment of text following the image. 定義圖片文字的對齊 Note: Only used with type="image" 注意：只能在type=''image"的時候使用	TF
alt	text	Defines an alternate text for the image. 定義針對圖片的替換文字 Note: Only used with type="image" 注意：只能在type=''image"的時候使用	STF
checked	checked	Indicates that the input element should be checked when it first loads. 當第一次加載的時候input元素是否為選中狀態 Note: Used with type="checkbox" and type="radio" 注意：只能在type="checkbox"以及type="radio"的時候使用	STF
disabled	disabled	Disables the input element when it first loads so that the user can not write text in it, or select it. 在第一次加載的時候讓input變為不可用狀態。 Note: Cannot be used with type="hidden" 注意：不要在type="hidden"的情況下使用	STF
maxlength	number	Defines the maximum number of characters allowed in a text field. 定義文字輸入框內所允許輸入的最大限度的字符數 Note: Only used with type="text" 注意：只有type="text"時才可使用	STF
name	field_name	Defines a unique name for the input element. 為input元素定義唯一的name Note: This attribute is required with type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", and type="radio" 注意：對於ype="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", 以及 type="radio"的元素來說這個屬性是必要的。	STF
readonly	readonly	Indicates that the value of this field cannot be modified. 可以讓其中的值變為只讀(不能做修改) Note: Only used with type="text" 注意：只能type="text"的時候使用	STF
size	number_of_char	Defines the size of the input element. 定義input元素的大小 Note: Cannot be used with type="hidden" 注意：不能在type="hidden"的時候使用(無效果)	STF
src	URL	Defines the URL of the image to display. 定義要顯示圖片的URL Note: Only used with type="image" 注意：只有type="image"的時候使用	STF
type	button checkbox file hidden image password radio reset submit text	Indicates the type of the input element. The default value is "text" 指明input元素的類型。默認值為"text" Note: This is not a required attribute, but we think you should include it. If omitted, IE 5.5 will still display a text field, but Netscape 4.7 will not. 注意：這並不是必要的屬性。但還是應該加上它，因為每個瀏覽器的默認值不同	STF
value	value	For buttons, reset buttons and submit buttons: Defines the text on the button. 對於buttons, reset buttons 以及 submit buttons來說：定義按鈕的文字 For image buttons: Defines the symbolic result of the field passed to a script. 對於image按鈕來說：定義的值為傳送給腳本的結果 For checkboxes and radio buttons: Defines the result of the input element when clicked. The result is sent to the form's action URL. 對於checkboxes和radio buttons來說：定義的為選中後所代表的結果，該結果會發送動表單action所指定的URL上 For hidden, password, and text fields: Defines the default value of the element. 對於hidden,password以及text fields來說：是為元素定義默認值 Note: Cannot be used with type="file" 注意：請不要在type="file"的時候使用 Note: This attribute is required with type="checkbox" and type="radio" 注意：對於type="checkbox"和type="radio"來說這是個必要屬性	STF

標準屬性

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.
查看完整的屬性

事件屬性

tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.
查看完整的屬性

出處