2012年9月8日 星期六
解決iframe無法自動調整高度的方法-分享2U
iframe在網頁應用相當的廣泛，
但由於先天的限制下，iframe高度以及寬度都只能依所設定的大小為主
其實經過後天調整，也能讓iframe依載入網頁內容的多寡自動調整框架大小的喔！
熱心大大們在網路上分享的方法如下：
一、iframe.html
<iframe frameborder="0" src="source.html" id="frameid"></iframe>
二、source.html(以下兩種寫法2選1，加在＜head＞…＜/head＞之間)
<script language="javascript">
function reSize(){parent.document.all.frameid.height=document.body.scrollHeight;}
window.onload=reSize;
</script>
<script language="javascript">
function reSize(){parent.document.getElementById("frameid").height=document.body.scrollHeight;}
window.onload=reSize;
</script>
2011年12月19日 星期一
Google新花招-唸一句咒語 let it snow 你的螢幕就下雪了！
因應聖誕佳節，Google又推出了一個新花招，只要在 Google 搜尋 http://www.google.com.tw/ 輸入「let it snow（讓它下雪吧！）」，就可以看見整個搜尋畫面都會飄起翩
要取消狀態時，僅需點下一旁的「Defor
2011年12月17日 星期六
Let's動手寫HTML5網頁
HTML5不僅加強了對多媒體的支援，還新增了canvas畫布，實現了在網頁上繪圖的功能，開發者也能利用HTML5提供的API，開發網頁應用程式
由W3C負責制定的HTML是用來編寫網頁的標記語言，而目前我們所使用的版本為4.01。如果開啟網頁的原始檔查看，會發現到很多類似＜html＞這樣由＜及＞符號包含文字的標籤，這就是HTML語言。其實說穿了，網頁就是一堆標籤的組合。
HTML標籤通常都有起始標籤與結束標籤，例如＜html＞與＜/html＞，而要構成一個網頁，最基本的標籤有＜html＞、＜head＞、＜title＞與＜body＞。＜html＞及＜/html＞一定是放在程式的第一行與最後一行，告訴瀏覽器這是一份HTML文件。而＜head＞則是檔頭宣告，定義這一個網頁的屬性，例如使用何種編碼方式，裡面的內容除了＜title＞外，不會出現在網頁上。title標籤被包含在head內，主要是顯示網頁標題，裡面的文字會出現在網頁最上方的標題欄。而＜body＞標籤的內容則是要呈現在網頁上的資訊。
由於HTML 4.01只能傳達文字或圖片等的靜態資訊，於是為了讓網頁能有動態的效果，開始出現了像JavaScript語言這樣的技術，達成與使用者互動的目標，後來還出現像DHTML、XHTML等標準，這些規格的出現都是為了加強與使用者的互動。不過這些技術也都是以HTML 4.01為核心所衍生出來的。隨著寬頻的普及，網路應用愈來愈廣，例如線上觀看影音、網頁遊戲等。但目前我們所使用的4.01版本已經無法應付這些技術，於是才會出現如Flash、Silverlight等外掛程式，實現這些功能。
不過由於這些外掛程式都是由不同公司所開發的，這之中牽涉到專利的問題，因此，開始有瀏覽器業者認為有制定新標準的必要。這些瀏覽器業者組成WHATWG團體，研究新的HTML標準，後來WHATWG與W3C合併，由W3C繼續制定的工作。
由W3C所制定的新一代網頁標準HTML5，雖然目前還在草案階段，預計在2012年3月才會正式發表，但由於許多知名瀏覽器如IE、Chrome、Firefox都已開始支援，而iPhone及Android等智慧型手機更是早就支援了此規格。另外Amazon及Google等公司，也都使用HTML5開發Web App，例如Google Docs、Kindle Cloud Reader等。
網路上也有許多人利用HTML5開發出許多有趣的網頁應用程式，像是線上小畫家、文字雲等，同時由於HTML5具有跨平臺的特性，未來開發人員只需寫一套應用程式，不再需要針對不同平臺開發相對應的程式碼，進而減少開發時間及成本，因此HTML5成為了目前較熱門的話題之一。
為減少外掛程式為目標而誕生的HTML新標準
以往要在網頁上觀賞影音或者玩網頁遊戲，必須要安裝外掛程式才能做到，而HTML5的制定則是為了要減少瀏覽器對外掛程式的需求，因為如此，HTML5新增了許多可以用來製作網頁應用程式的API，同時也增加了canvas標籤，以達成能在網頁上繪圖的功能，要使用這些功能，必須搭配JavaScript語言使用。另外網頁的美化，例如文字大小與顏色等，在以前雖然也可以使用＜font＞等標籤做出來，但這樣勢必會讓整分文件變得更複雜難懂。因此將美化的工作抽出來，交給CSS負責。而HTML5也廢除了＜font＞及＜center＞標籤。因此，廣義來說，HTML5包含了HTML、JavaScript、CSS等三個部分。
在HTML5中主要新增的功能有──首先是使用語意標籤來加強文件的結構化、接著是新增＜video＞及＜audio＞標籤強化對聲音及影像等多媒體的播放功能、以及增加可以自由描繪圖形的＜canvas＞標籤、最後則是提供多種有助於網頁應用程式開發的API。如果要製作HTML5網頁，只要在檔案內容的第一行寫入＜！DOCTYPE html＞，意思是宣告這文件為HTML5文件，瀏覽器只要讀到這一行，就會將此文件視為HTML5了。
語意標籤讓開發人員在維護時，更容易理解網頁的內容
▲利用section標籤，將標題＜header＞、內文＜article＞及版權資訊＜footer＞，分為三個區塊。
由W3C負責制定的HTML是用來編寫網頁的標記語言，而目前我們所使用的版本為4.01。如果開啟網頁的原始檔查看，會發現到很多類似＜html＞這樣由＜及＞符號包含文字的標籤，這就是HTML語言。其實說穿了，網頁就是一堆標籤的組合。
HTML標籤通常都有起始標籤與結束標籤，例如＜html＞與＜/html＞，而要構成一個網頁，最基本的標籤有＜html＞、＜head＞、＜title＞與＜body＞。＜html＞及＜/html＞一定是放在程式的第一行與最後一行，告訴瀏覽器這是一份HTML文件。而＜head＞則是檔頭宣告，定義這一個網頁的屬性，例如使用何種編碼方式，裡面的內容除了＜title＞外，不會出現在網頁上。title標籤被包含在head內，主要是顯示網頁標題，裡面的文字會出現在網頁最上方的標題欄。而＜body＞標籤的內容則是要呈現在網頁上的資訊。
由於HTML 4.01只能傳達文字或圖片等的靜態資訊，於是為了讓網頁能有動態的效果，開始出現了像JavaScript語言這樣的技術，達成與使用者互動的目標，後來還出現像DHTML、XHTML等標準，這些規格的出現都是為了加強與使用者的互動。不過這些技術也都是以HTML 4.01為核心所衍生出來的。隨著寬頻的普及，網路應用愈來愈廣，例如線上觀看影音、網頁遊戲等。但目前我們所使用的4.01版本已經無法應付這些技術，於是才會出現如Flash、Silverlight等外掛程式，實現這些功能。
不過由於這些外掛程式都是由不同公司所開發的，這之中牽涉到專利的問題，因此，開始有瀏覽器業者認為有制定新標準的必要。這些瀏覽器業者組成WHATWG團體，研究新的HTML標準，後來WHATWG與W3C合併，由W3C繼續制定的工作。
由W3C所制定的新一代網頁標準HTML5，雖然目前還在草案階段，預計在2012年3月才會正式發表，但由於許多知名瀏覽器如IE、Chrome、Firefox都已開始支援，而iPhone及Android等智慧型手機更是早就支援了此規格。另外Amazon及Google等公司，也都使用HTML5開發Web App，例如Google Docs、Kindle Cloud Reader等。
網路上也有許多人利用HTML5開發出許多有趣的網頁應用程式，像是線上小畫家、文字雲等，同時由於HTML5具有跨平臺的特性，未來開發人員只需寫一套應用程式，不再需要針對不同平臺開發相對應的程式碼，進而減少開發時間及成本，因此HTML5成為了目前較熱門的話題之一。
為減少外掛程式為目標而誕生的HTML新標準
以往要在網頁上觀賞影音或者玩網頁遊戲，必須要安裝外掛程式才能做到，而HTML5的制定則是為了要減少瀏覽器對外掛程式的需求，因為如此，HTML5新增了許多可以用來製作網頁應用程式的API，同時也增加了canvas標籤，以達成能在網頁上繪圖的功能，要使用這些功能，必須搭配JavaScript語言使用。另外網頁的美化，例如文字大小與顏色等，在以前雖然也可以使用＜font＞等標籤做出來，但這樣勢必會讓整分文件變得更複雜難懂。因此將美化的工作抽出來，交給CSS負責。而HTML5也廢除了＜font＞及＜center＞標籤。因此，廣義來說，HTML5包含了HTML、JavaScript、CSS等三個部分。
在HTML5中主要新增的功能有──首先是使用語意標籤來加強文件的結構化、接著是新增＜video＞及＜audio＞標籤強化對聲音及影像等多媒體的播放功能、以及增加可以自由描繪圖形的＜canvas＞標籤、最後則是提供多種有助於網頁應用程式開發的API。如果要製作HTML5網頁，只要在檔案內容的第一行寫入＜！DOCTYPE html＞，意思是宣告這文件為HTML5文件，瀏覽器只要讀到這一行，就會將此文件視為HTML5了。
語意標籤讓開發人員在維護時，更容易理解網頁的內容
▲利用section標籤，將標題＜header＞、內文＜article＞及版權資訊＜footer＞，分為三個區塊。
2011年12月11日 星期日
HTML vs CSS - 用 HTML 5 就可以跨瀏覽器平台嗎？
前言
最近最 Hot 的不外乎就是 Cloud、HTML 5、Phone
尤其是老闆突然有一天說，我們的 手機、iPad 是不是也可以連到我們的系統做○○的事情？
不然就是 瀏覽器一換，畫面一切都不一樣了 ( 遠目 )
這時常常就會被問到
「為什麼用 ASP.NET 開發的網頁沒辦法在 iPad 上看？」
「為什麼用 IE 9 和 Chrome、Safari 上看的結果不一樣？」
「ASP.NET 是不是不能相容 iPhone 的？是不是要用 PHP？」
「用了 HTML 5 是不是就可以跨平台了？」
……
很多這類的問題
相信大家對於 HTML、CSS 以及 JS 一定都非常了解
但是加上 瀏覽器的組合就怪事就常常發生了！
自從 C 公司問了「為什麼別人用 Chrome、Safari 都可以，就 IE 」不行？
這應該是 IE 的 Bug 吧！
從結果上來看真的是差別很大！
但一看了 HTML 和 CSS 後發現有一些爭議的地方！
說穿了就是沒有按照「W3C的規範」來寫 HTML 和 CSS
經過調整後，一切就可以正常地顯示！
可以看到大小、圓角、圖片位置都是正確的
首先！並不是說用了 HTML 5 和 CSS 3 後就可以讓所有的瀏覽器都統吃！
也許會有人疑問：「不是說每個瀏覽器的HTML 都有符合 W3C 的規範嗎？？」
這句話沒有錯！但並不是每個瀏覽器每個 Tag 都有支援！每個解析、顯示的方式都一樣！
所以有可能 A 的寫法 可以讓 A 瀏覽器正常顯示！其他的卻不行的情況發生
尤其是網頁的介面設計可能都是由專業的網站設計師進行設計的情況下
在沒有了解「規範」的情況下，很有可能會有不相容的情況發生
Q1、WebKit 是標準的 CSS 語法吧？
由於瀏覽器版本多，要支援每一種就必須要用「標準」的語法才可以。而WebKit 的語法 這是由 Safari 所推出的，它並不是在 W3C 的 CSS 3 的規範中所以前面才會有 WebKit 的前置碼。而且 並不是只有 Safari 有自已的語法 ( Chorme 也是用同一個 )！當然，FireFox 也有專用的 moz 語法從日後管理的角度來看！用的越多，同仁在寫 CSS 就會越複雜 ，日後也會越難以維護。就會有一堆的語法是互斥的 ，所以不建議為了一時的方便而隨意引用。會造成日後相容性的問題有興趣的可以參考這個 http://zh.wikipedia.org/wiki/WebKit
2011年11月21日 星期一
W3C 規定的文字單位 em 與 px 的轉換
W3C 規定的文字單位是 em
而我們一般的網頁設計師習慣的文字單位是 px
使用 px 的時候~ 在 IE 瀏覽器時使用者是無法自行調整文字大小的~
因此要製作符合無障礙的網頁就必須使用 em 為單位
在網路上我們可以找到一些 em 與 px 轉換的計算機~ 很方便喔~
如下：
http://pxtoem.com/
http://riddle.pl/emcalc/
而我們一般的網頁設計師習慣的文字單位是 px
使用 px 的時候~ 在 IE 瀏覽器時使用者是無法自行調整文字大小的~
因此要製作符合無障礙的網頁就必須使用 em 為單位
在網路上我們可以找到一些 em 與 px 轉換的計算機~ 很方便喔~
如下：
http://pxtoem.com/
http://riddle.pl/emcalc/
W3C 制定的~所有 HTML 標籤在 CSS 中的預設值
每個 HTML 標籤在 CSS 中都有不同的預設值，例如預設的文字大小、預設的間距、預設的框格模型....等。
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
「W3C原文」 http://www.w3.org/TR/CSS21/sample.html
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
「W3C原文」 http://www.w3.org/TR/CSS21/sample.html
什麼是HTML 5
HTML 5草案的前身名爲Web Applications 1.0。於2004年被WHATWG提出，於2007年被W3C接納，並成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發布。WHATWG表示該規範是目前正在進行的工作，仍須多年的努力。
新標記
HTML 5提供了一些新的元素和屬性，反映典型的現代用法網站。其中有些是技術上類似<div>和<span>標簽，但有一個含義，例如<nav>（網站導航塊）和<footer>。這種標簽將有利於搜索引擎的索引整理、小螢幕裝置和視障人士使用。同時爲其他瀏覽要素提供了新的功能，通過一個標準介面，如<audio>和<video>標記。
一些過時的HTML 4標記將取消。其中包括純粹顯示效果的標記，如<font>和<center>，因爲它們已經被CSS取代。還有一些透過DOM的網路行爲。
新標記
HTML 5提供了一些新的元素和屬性，反映典型的現代用法網站。其中有些是技術上類似<div>和<span>標簽，但有一個含義，例如<nav>（網站導航塊）和<footer>。這種標簽將有利於搜索引擎的索引整理、小螢幕裝置和視障人士使用。同時爲其他瀏覽要素提供了新的功能，通過一個標準介面，如<audio>和<video>標記。
一些過時的HTML 4標記將取消。其中包括純粹顯示效果的標記，如<font>和<center>，因爲它們已經被CSS取代。還有一些透過DOM的網路行爲。
什麼是HTML
HTML語法:
是 HyperText Markup Language 的縮寫，如果照字面翻，那麼它 的意思是超文字改寫語言。
HTML 是由 SGML 所發展而來的。事實上， HTML是 1989 年 Tim Berners-Lee 在 CERN 的時候所創照的；而在 1990 年被 World Wide Web 所開始使用，誰也沒想到這樣一個簡單的發明，就讓整個 Internet 起了這麼大的變化。
其實， HTML 是種具有許多風格的一種語言。它透過一些特別的標籤 (tag) 來展現各種不同的風格。
譬如碰到 <B> 就表示後面的文字要加粗等等諸如此類的；此外， HTML 語法中有一項極為重要的特徵是有開始就有結束的特性，也就是說有 <B> 標籤，就會有 </B> 標籤來作為結束。
當然，所有的語言都會有例外， HTML 語法中，對於這種相對的標籤也有例外，筆者將在地下的文章中漸漸提到。
是 HyperText Markup Language 的縮寫，如果照字面翻，那麼它 的意思是超文字改寫語言。
HTML 是由 SGML 所發展而來的。事實上， HTML是 1989 年 Tim Berners-Lee 在 CERN 的時候所創照的；而在 1990 年被 World Wide Web 所開始使用，誰也沒想到這樣一個簡單的發明，就讓整個 Internet 起了這麼大的變化。
其實， HTML 是種具有許多風格的一種語言。它透過一些特別的標籤 (tag) 來展現各種不同的風格。
譬如碰到 <B> 就表示後面的文字要加粗等等諸如此類的；此外， HTML 語法中有一項極為重要的特徵是有開始就有結束的特性，也就是說有 <B> 標籤，就會有 </B> 標籤來作為結束。
當然，所有的語言都會有例外， HTML 語法中，對於這種相對的標籤也有例外，筆者將在地下的文章中漸漸提到。
HTML-分割視窗-frameset
所謂分割視窗即是將流覽視窗分割成數個範圍，每個範圍稱為一個 frame ，每個 frame 都有自己的名字，可以彼此互通也可以不相干擾。
分割視窗只有一個命令就是 <frameset> 不過有幾個附加指令可用，先來看看如何分割視窗。
frameset 不可以和 body.../body 同時存在，同時存在時那一個寫在前在前，哪一個生效。
分割視窗只有一個命令就是 <frameset> 不過有幾個附加指令可用，先來看看如何分割視窗。
<frameset>...</frameset>
frameset 不可以和 body.../body 同時存在，同時存在時那一個寫在前在前，哪一個生效。
水平分割視窗
<frameset rows=> - 決定上下共分為幾個視窗 垂直分割視窗
<frameset cols=> - 決定左右共分為幾個視窗 HTML語法字典
想要進一步認識HTML語法的人絕對不可以錯過
語法 | 說明 |
<! - - ... - -> | 用於HTML文件中的註解 |
<A HREF TARGET=> | 指定超鏈結的分割視窗目標 |
<A HREF=#錨的名稱> | 設定鏈結錨點的名稱 |
<A HREF=> | 設定超鏈結 |
<A NAME=錨的名稱> | 錨點名稱 |
<ADDRESS>....</ADDRESS> | 電子郵件位址文字格式設定 |
<B> 粗體字 </B> | 粗體字效果 |
<BASE TARGET=> | 分割視窗預設目標 |
<BASEFONT SIZE> | 更改預設字形大小 |
<BGSOUND SRC=> | 加入背景音樂 |
<BIG> | 顯示大字體 |
<BLINK> | 閃爍文字效果( IE不適用 ) |
<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=> | 設定分割視窗的捲軸 (yes,no ) |
<FRAME SRC> | 框架內要顯示的文件 |
<FRAMESET COLS=> | 將視窗分割成左右垂直的方式 |
<FRAMESET ROWS=> | 將視窗分割成上下水平的方式 |
<FRAMESET>...</FRAMESET> | 劃分分割視窗 |
<H1>~<H6> | 設定文字標題大小 |
<HEAD>...</HEAD> | 標示文件資訊 |
<HR> | 加上分隔線 |
<HTML>...</HTML> | 文件的開始與結束 |
<I>...</I> | 斜體字 |
<IMG ALIGN=> | 調整圖形影像的位置 ( top,left,right ) |
<IMG ALT=> | 圖形影像註解 |
<IMG DYNSRC= LOOP=> | 加入影片 |
<IMG SRC= HEIGHT= WIDTH=> | 插入圖片並預設圖形大小 |
<IMG HSPACE=> | 插入圖片並預設圖形的左右邊界 |
<IMG LOWSRC=> | 預載低解析度圖片功能 |
<IMG SRC BORDER=> | 設定圖片邊界 |
<IMG SRC=> | 插入圖片 |
<IMG VSPACE=> | 插入圖片並預設圖形的上下邊界 |
<INPUT TYPE= NAME= VALUE=> | 在表單中加入輸入欄位 |
<ISINDEX>...</ISINDEX> | 定義查詢用表單 |
<KBD>...</KBD> | 表示使用者輸入文字 |
<LI TYPE>...</LI> | 列表的項目 ( 可指定符號 ) |
<MARQUEE>...</MARQUEE> | 跑馬燈效果 |
<MENU>...</MENU> | 條列文字標籤 |
<META NAME="REFRESH" CONTENT= URL=> | 自動更新文件內容 |
<MULTIPLE> | 可同時選擇多項的列表欄 |
<NOFRAME> | 定義不出現分割視窗的文字 |
<OL>...</OL> | 有序號的列表 |
<OPTION> | 定義表單中列表欄的項目 |
< P ALIGN=> | 設定對齊方向 |
< P>...</P> | 分段 |
< PERSON>...</PERSON> | 顯示人名 |
< PRE>...</PRE> | 使用原有排列 ( 格式化文字內容 ) |
<SAMP>...</SAMP> | 用於引用字 |
<SELECT>...</SELECT> | 在表單中定義列表欄 |
<SMALL>...</SMALL> | 顯示小字體 |
<STRIKE>...</STRIKE> | 文字加刪除線 |
<STRONG>...</STRONG> | 用於加強語氣 |
<SUP>...</SUP> | 上標字 |
<SUB>...</SUB> | 下標字 |
<TABLE BORDER=> | 調整表格的寬線高度 |
<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>...</TITLE> | 文件標題 |
<TR>...</TR> | 定義表格美一行 |
<TT>...</TT> | 打字機字體 |
<U>...</U> | 文字加底線 |
<UL TYPE>...</UL> | 無序號的列表 ( 可指定符號 ) |
<VAR>...</VAR> | 用於顯示變數 |
Html常用標籤整理筆記-分享2U
網頁: <html>網頁 <head>工具列 <title>標題 <body>內文
表格: <table>表格 <tr>列 <td>格
文字: <div>區域 <p>單段 <span>多行 <br>單行 <font>字
項目符號編號: <ol>編號 <ul>符號 <li>項目
其他: <marquee>跑馬燈 <a>連結 <hr>水平線 <img>圖片
大部分標籤成雙成對
僅有三個單一標籤：<br△/> <hr△/> <img△/> 標準 SEO優化
表格: <table>表格 <tr>列 <td>格
文字: <div>區域 <p>單段 <span>多行 <br>單行 <font>字
項目符號編號: <ol>編號 <ul>符號 <li>項目
其他: <marquee>跑馬燈 <a>連結 <hr>水平線 <img>圖片
大部分標籤成雙成對
僅有三個單一標籤：<br△/> <hr△/> <img△/> 標準 SEO優化
2011年11月20日 星期日
如何將JavaScript嵌入HTML碼中
要於HTML碼中嵌入JavaScript其實很簡單，JavaScrip的程式碼必須被包在<SCRIPT>及</SCRIPT>標籤之間。
例：
<SCRIPT>
JavaScript 程式碼
...
...
</SCRIPT>
<SCRIPT></SCRIPT> 標籤屬性：
LANGUAGE
例：
<SCRIPT>
JavaScript 程式碼
...
...
</SCRIPT>
<SCRIPT></SCRIPT> 標籤屬性：
LANGUAGE
訂閱：
文章 (Atom)