id與name的作用,作爲標籤的標識符,基本上是一樣的.name是老方法,id是在name基礎上發明的,後來纔有的,"現代化"一點,用的範圍廣一點. <A..> 中的name原來(剛發明時)就是用於本頁撳一下轉向過去用的.
除 BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE 標籤外,id 都可用.
name只用於APPLET,SELECT,FORM,FRAME,IFRAME,IMG,A,INPUT,OBJECT,MAP,PARAM,META. (name有時有自己的用途)
table 中 name 無定義, 應當用 id.
有些標籤,可以同時有name和id.
在一個HTML網頁中,id是唯一的,即只有某一個標籤,或某一個塊的標識符是這個id.
id 在HTML中的作用:
(1) 用id選擇相應的style sheet(風格).
(2) <A ..> 鏈接的目的地
(3) 腳本語言用它找目的地(找該id的標籤)
(4) 作爲名字,用於聲明某OBJECT element
(5) 作爲一個標籤或塊的區分標緻(用於從HTML網頁中取出數據放入數據庫或把HTML翻譯成別的格式,等情況).
(參考HTML 4.0 定義)
細說HTML元素的ID和Name屬性的區別
可以說幾乎每個做過Web開發的人都問過，到底元素的ID和Name有什麼區別阿？爲什麼有了ID還要有Name呢?! 而同樣我們也可以得到最classical的答案：ID就像是一個人的身份證號碼，而Name就像是他的名字，ID顯然是唯一的，而Name是可以重複的。
上週我也遇到了ID和Name的問題，在頁面裏輸入了一個input type="hidden"，只寫了一個ID='SliceInfo'，賦值後submit，在後臺用Request.Params["SliceInfo"]卻怎麼也去不到值。後來恍然大悟因該用Name來標示，於是在input里加了個Name='SliceInfo'，就一切ok了。
第一段裏對於ID和Name的解答說的太籠統了，當然那個解釋對於ID來說是完全對的，它就是Client端HTML元素的Identity。而Name其實要複雜的多，因爲Name有很多種的用途，所以它並不能完全由ID來代替，從而將其取消掉。具體用途有：
用途1: 作爲可與服務器交互數據的HTML元素的服務器端的標示，比如input、select、textarea、和button等。我們可以在服務器端根據其Name通過Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分組，我們知道radio button控件在同一個分組類，check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。
用途3: 建立頁面中的錨點，我們知道<a href="URL">link</a>是獲得一個頁面超級鏈接，如果不用href屬性，而改用Name，如：<a name="PageBottom"></a>，我們就獲得了一個頁面錨點。
用途4: 作爲對象的Identity，如Applet、Object、Embed等元素。比如在Applet對象實例中，我們將使用其Name來引用該對象。
用途5: 在IMG元素和MAP元素之間關聯的時候，如果要定義IMG的熱點區域，需要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的Name)。
用途6: 某些特定元素的屬性，如attribute，meta和param。例如爲Object定義參數<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。
顯然這些用途都不是能簡單的使用ID來代口
__________________________
可以說幾乎每個做過Web開發的人都問過，到底元素的ID和Name有什麼區別阿？爲什麼有了ID還要有Name呢?! 而同樣我們也可以得到最classical的答案：ID就像是一個人的身份證號碼，而Name就像是他的名字，ID顯然是唯一的，而Name是可以重複的。
上週我也遇到了ID和Name的問題，在頁面裏輸入了一個input type="hidden"，只寫了一個ID='SliceInfo'，賦值後submit，在後臺用Request.Params["SliceInfo"]卻怎麼也去不到值。後來恍然大悟因該用Name來標示，於是在input里加了個Name='SliceInfo'，就一切ok了。
第一段裏對於ID和Name的解答說的太籠統了，當然那個解釋對於ID來說是完全對的，它就是Client端HTML元素的Identity。而Name其實要複雜的多，因爲Name有很多種的用途，所以它並不能完全由ID來代替，從而將其取消掉。具體用途有：
用途1: 作爲可與服務器交互數據的HTML元素的服務器端的標示，比如input、select、textarea、和button等。我們可以在服務器端根據其Name通過Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分組，我們知道radio button控件在同一個分組類，check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。
用途3: 建立頁面中的錨點，我們知道<a href="URL">link</a>是獲得一個頁面超級鏈接，如果不用href屬性，而改用Name，如：<a name="PageBottom"></a>，我們就獲得了一個頁面錨點。
用途4: 作爲對象的Identity，如Applet、Object、Embed等元素。比如在Applet對象實例中，我們將使用其Name來引用該對象。
用途5: 在IMG元素和MAP元素之間關聯的時候，如果要定義IMG的熱點區域，需要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的Name)。
用途6: 某些特定元素的屬性，如attribute，meta和param。例如爲Object定義參數<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。
顯然這些用途都不是能簡單的使用ID來代替掉的，所以HTML元素的ID和Name的卻別並不是身份證號碼和姓名這樣的區別，它們更本就是不同作用的東西。
當然HTML元素的Name屬性在頁面中也可以起那麼一點ID的作用，因爲在DHTML對象樹中，我們可以使用document.getElementsByName來獲取一個包含頁面中所有指定Name元素的對象數組。Name屬性還有一個問題，當我們動態創建可包含Name屬性的元素時，不能簡單的使用賦值element.name = "..."來添加其Name，而必須在創建Element時，使用document.createElement('<element name = "myName"></element>')爲元素添加Name屬性。這是什麼意思啊？看下面的例子就明白了。
<script language="JavaScript">
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML);
</script>
消息框裏顯示的結果是：<INPUT id=myId>。
<script language="JavaScript">
var input = document.createElement('<INPUT name="myName">');
input.id = 'myId';
alert(input.outerHTML);
</script>
消息框裏顯示的結果是：<INPUT id=myId name=myName>。
初始化Name屬性的這個設計不是IE的缺陷，因爲MSDN裏說了要這麼做的，可是這樣設計的原理什麼呢？我暫時沒有想太明白。
這裏再順便說一下，要是頁面中有n(n>1)個HTML元素的ID都相同了怎麼辦？在DHTML對象中怎麼引用他們呢？如果我們使用ASPX頁面，這樣的情況是不容易發生的，因爲aspnet進程在處理aspx頁面時根本就不允許有ID非唯一，這是頁面會被拋出異常而不能被正常的render。要是不是動態頁面，我們硬要讓ID重複那IE怎麼搞呢？這個時候我們還是可以繼續使用document.getElementById獲取對象，只不過我們只能獲取ID重複的那些對象中在HTML Render時第一個出現的對象。而這時重複的ID會在引用時自動變成一個數組，ID重複的元素按Render的順序依次存在於數組中。
________________________________
信息一:
id主要是在客戶端腳本里用，name主要是用於獲取提交表單的某表單域信息。在form裏面，如果不指定Name的話，就不會發送到服務器端哦！
信息二:
input select form frame iframe 用name
table tr td div p span h1 li 用id
表單元素(form input textarea select)與框架元素(iframe frame)用name，這些元素都與表單(框架元素作用於form的target)提交有關，在表單的接收頁面只接收有name的元素, 賦ID的元素通過表單是接收不到值的。
當然上述元素也可以賦ID值, 賦ID值的時候引用這些元素的方法就要變一下了.
賦 name: document.formName.inputName document.frames("frameName")
賦 ID : document.all.inputID document.all.frameID
只能賦ID不能賦name的元素:(除去與表單相關的元素都只能賦ID)
body li a table tr td th p div span pre dl dt dd font b 等等
信息三:
HTML、CSS裏面關於 id、class、name 屬性的區別和用法
name和id
name原來是爲了標識之用，但是現在根據規範，都建議用id來標識元素。
以下只能用name：
1. 表單（form）的控件名，提交的數據都用控件的name而不是id來控制。因爲許多時候一個name會同時對應多個控件，比如checkbox和radio，而id必須是全文檔中唯一的。此外瀏覽器會根據name來設定發送到服務器的request。因此如果用id，服務器是無法得到數據的。
2. frame和window的名字，用於在其他frame或window指定target。
以下只能用id：
1. label與form控件的關聯，
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
for屬性指定與label關聯的元素的id，不可用name替代。
2. CSS的元素選擇機制，以#MyId的方式指定應用樣式的元素，不能用name替代。
3. 腳本中獲得對象：
IE支持在腳本中直接以id（而不是name）引用該id標識的對象。例如上面的input，要在腳本中獲
得輸入的內容，可以直接以MyInput.value來獲得。
如果用DOM的話，則用document.getElementById("MyInput").value，如果要用name的話，通常先
得到包含控件的form，例如document.forms[0]，然後從form再引用name，注意這樣得到的是經過計
算後將發送給服務器的值。
name與id的其他區別是：
id要符合標識的要求，比如大小寫敏感，最好不要包含下劃線（因爲不兼容CSS）。而name基本上
沒有什麼要求，甚至可以用數字。
class和id
在一個HTML網頁中,id是唯一的,即只有某一個標籤,或某一個塊的標識符是這個id。
class可重複使用，用來根據用戶定義的標準對一個或多個元素進行標記和定義。
實際使用中，class可能對文字的排版等比較有用，而id則對宏觀佈局和設計放置各種元素較有用。
綜合例子：
網頁代碼有
<div id=m_blog>
<div class=opt>
<a id=myLink href="xxx">
</div>
</div>
用CSS控制這個鏈接的停留樣式，
可以這樣寫 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813}
信息四:
細說HTML元素的ID和Name屬性的區別
幾乎每個做過Web開發的人都問過，到底元素的ID和Name有什麼區別阿？爲什麼有了ID還要有Name呢?
而同樣我們也可以得到最classical的答案：ID就像是一個人的身份證號碼，而Name就像是他的名字
，ID顯然是唯一的，而Name是可以重複的。
上週我也遇到了ID和Name的問題，在頁面裏輸入了一個input type="hidden"，只寫了一個
ID='SliceInfo'，賦值後submit，在後臺用Request.Params["SliceInfo"]卻怎麼也去不到值。後來
恍然大悟因該用Name來標示，於是在input里加了個Name='SliceInfo'，就一切ok了。
第一段裏對於ID和Name的解答說的太籠統了，當然那個解釋對於ID來說是完全對的，它就是
Client端HTML元素的Identity。而Name其實要複雜的多，因爲Name有很多種的用途，所以它並不能完
全由ID來代替，從而將其取消掉。
具體用途有：
用途1: 作爲可與服務器交互數據的HTML元素的服務器端的標示，比如input、select、
textarea、和button等。我們可以在服務器端根據其Name通過Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分組，我們知道radio button控件在同一個分組類，
check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。
用途3: 建立頁面中的錨點，我們知道link是獲得一個頁面超級鏈接，如果不用href屬性，而改
用Name，如：，我們就獲得了一個頁面錨點。
用途4: 作爲對象的Identity，如Applet、Object、Embed等元素。比如在Applet對象實例中，
我們將使用其Name來引用該對象。
用途5: 在IMG元素和MAP元素之間關聯的時候，如果要定義IMG的熱點區域，需要使用其屬性
usemap，使usemap="#name"(被關聯的MAP元素的Name)。
用途6: 某些特定元素的屬性，如attribute，和param。例如爲Object定義參數。
顯然這些用途都不是能簡單的使用ID來代替掉的，所以HTML元素的ID和Name的卻別並不是身份證
號碼和姓名這樣的區別，它們更本就是不同作用的東西。
當然HTML元素的Name屬性在頁面中也可以起那麼一點ID的作用，因爲在DHTML對象樹中，我們可
以使用document.getElementsByName來獲取一個包含頁面中所有指定Name元素的對象數組。
在這裏順便說一下，要是頁面中有n(n>1)個HTML元素的ID都相同了怎麼辦？在DHTML對象中怎麼
引用他們呢？如果我們使用ASPX頁面，這樣的情況是不容易發生的，因爲aspnet進程在處理aspx頁面
時根本就不允許有ID非唯一，這是頁面會被拋出異常而不能被正常的render。要是不是動態頁面，我
們硬要讓ID重複那IE怎麼搞呢？
這個時候我們還是可以繼續使用document.getElementById獲取對象，只不過我們只能獲取ID重
復的那些對象中在HTML Render時第一個出現的對象。而這時重複的ID會在引用時自動變成一個數組
，ID重複的元素按Render的順序依次存在於數組中。
_____________________________________
對於剛剛接觸HTML源代碼的朋友可能有這樣一個疑惑：在一個表單元素中，我如果想用腳本確定某個具體元素，我既可以用他的NAME來索引這個對象，也可以加一個ID來索引它，那這兩種方法究竟有什麼區別呢？以下我們來具體探討一下，鑑於本人水平有限，如有描述不當，懇請指教。
我們可以通過一段代碼來分析一下其中的微妙差別:
<form method="post" action="" name="demoform">
<input type="text" name="oDemo" id=”oDemo2” value="DEMO" />
</form>
在IE瀏覽器裏，我們可以通過多少方法來索引到這個文本框對象？(爲區別起見，我們把NAME和ID設成了不同的值)
1. oDemo
2. demoform.oDemo
3. document.all.oDemo
4. document.all.demoform.oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')
以上9種索引方法在IE6裏面全部通過返回值測試，不過值得注意的是最後一種：在IE6裏，我把索引對象寫成
document.getElementById('oDemo')，瀏覽器也能正確索引到對象，真是可怕的容錯性啊！！
接着問題來了，我們把這段代碼放在Mozilla Firefox 1.0裏再執行一次，只有第7種方法返回“undefined”，其他的方法可以正確
索引到對象，不過由於第3、4種方法用到了document.all這個IE專有對象，FF1.0雖然返回了正確的值，不過卻在控制檯裏發出了警
告：警告：非標準的屬性 document.all。請使用 W3C 的標準形式 document.getElementById() 。
接下來我們把HTML文本類型定義得嚴格一點，在源代碼開頭加上：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
使HTML文本按照HTML4.01標準去解析，在IE6裏照樣全部通過返回值測試，不過在Mozilla Firefox 1.0裏麻煩就大了，第3、4種方法
沒有任何的返回值，而在控制檯裏發出了報錯信息：錯誤： document.all has no properties ，而第7種方法依舊返回“undefined
”。
小 結
name原來是爲了標識之用，但是現在根據規範，都建議用id來標識元素。
以下只能用name：
1. 表單（form）的控件名，提交的數據都用控件的name而不是id來控制。因爲有許多name會同時對應多個控件，比如
checkbox和radio，而id必須是全文檔中唯一的。此外瀏覽器會根據name來設定發送到服務器的request。因此如果用id，服務器是無
法得到數據的。
2. frame和window的名字，用於在其他frame或window指定target。
以下只能用id：
1. label與form控件的關聯，
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
for屬性指定與label關聯的元素的id，不可用name替代。
2. CSS的元素選擇機制，以#MyId的方式指定應用樣式的元素，不能用name替代。
3. 腳本中獲得對象：
IE支持在腳本中直接以id（而不是name）引用該id標識的對象。例如上面的input，要在腳本中獲得輸入的內容，可以直接以
MyInput.value來獲得。
如果用DOM的話，則用document.getElementById("MyInput").value，如果要用name的話，通常先得到包含控件的form，例如
document.forms[0]，然後從form再引用name，注意這樣得到的是經過計算後將發送給服務器的值。
name與id的其他區別是：
id要符合標識的要求，比如大小寫敏感，最好不要包含下劃線（因爲不兼容CSS）。而name基本上沒有什麼要求，甚至可以用數字
。
用CSS控制這個鏈接的停留樣式，
可以這樣寫 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813}
NAME主要應用在交互式網頁，表單提交給某個服務器端腳本後接收變處理量使用。從源代碼的規範性和兼容性角度出發，如在客戶端
腳本里要索引某個對象，建議用document.getElementById()方法，儘量不要直接使用NAME的值，當然如果不考慮兼容性，以上9種方
法都可以在IE裏運行通過(IE5.0沒測試過)。
附：測試源代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<form method="post" action="" name="demoform">
<input type="text" name="oDemo" value="DEMO" id="oDemo2" /><br />
<input type="button" value="oDemo" οnclick="alert(oDemo.value)" /><br />
<input type="button" value="demoform.oDemo" οnclick="alert(demoform.oDemo.value)" /><br />
<input type="button" value="document.all.oDemo" οnclick="alert(document.all.oDemo.value)" /><br />
<input type="button" value="document.all.demoform.oDemo" οnclick="alert(document.all.demoform.oDemo.value)" /><br />
<input type="button" value="document.forms[0].oDemo" οnclick="alert(document.forms[0].oDemo.value)" /><br />
<input type="button" value="document.forms['demoform'].oDemo" οnclick="alert(document.forms['demoform'].oDemo.value)" /><br />
<input type="button" value="document.forms['demoform'].childNodes[0]" οnclick="alert(document.forms
['demoform'].childNodes[0].value)" /><br />
<input type="button" value="document.forms['demoform'].elements[0]" οnclick="alert(document.forms
['demoform'].elements[0].value)" /><br />
<input type="button" value="document.getElementById('oDemo2')" οnclick="alert(document.getElementById('oDemo2').value)" /><br />
</form>
</body>
</html>
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/xk2y/archive/2009/11/18/4824951.aspx