HTML中id、name、class 区别
HTML 中 id與name 區別
一個name可以同時對應多個控件，比如checkbox和radio
而id必須是全文檔中唯一的
?
id的用途?
1） id是HTML元素的Identity，主要是在客戶端腳本里用。
2） label與form控件的關聯，如
? ? ? ? ? ? <label?for="MyInput">My Input</label>
? ? ? ? ? ??<input?id="MyInput" type="text">
? ? ? ? ? ??for屬性指定與label關聯的元素的id，不可用name替代
3）腳本中獲得對象：IE支持在腳本中直接以id（而不是name）引用該id標識的對象。
例如上面的input，要在腳本中獲得輸入的內容，可以直接以 MyInput.value來獲得。如果用DOM的話，則用document.getElementById("MyInput").value；
如果要用name的話，通常先得到包含控件的form，例如document.forms[0]，然后從form再引用name，注意這樣得到的是經過計算后將發送給服務器的值
?
?
name的用途
1）主要是用于獲取提交表單的某表單域信息，?作為可與服務器交互數據的HTML元素的服務器端的標示，比如input、select、textarea、框架元素(iframe、frame、?window的名字，用于在其他frame或window指定target?)和button等，這些元素都與表單(框架元素作用于form的target)提交有關，瀏覽器會根據name來設定發送到服務器的request，?在表單的接收頁面只接收有name的元素,? 所以賦ID的元素通過表單是接收不到值的。?我們可以在服務器端根據其Name通過Request.Params取得元素提交的值。在form里面，如果不指定name，就不會發送到服務器端。
2）HTML元素Input type='radio'分組，我們知道radio button控件在同一個分組類，check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的name屬性來實現的。
3）建立頁面中的錨點，我們知道<a href="URL">link</a>是獲得一個頁面超級鏈接，如果不用href屬性，而改用name，如：<a name="PageBottom"></a>，我們就獲得了一個頁面錨點，如<strong><a?name="1" id="1"></a>Experience (XP)</strong>，詳見?示例
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">。
當然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與id 區別?
id要符合標識的要求，比如大小寫敏感，最好不要包含下劃線（因為不兼容CSS）。而name基本上沒有什么要求，甚至可以用數字。table、tr、td、div、p、span、h1、li等元素一般用id。與表單相關的元素也可以賦ID值,? 但為這些元素賦ID值的時候引用這些元素的方法就要變一下了，具體的如下：?
賦name時，引用元素的方式:??document.formName.inputName?或?document.frames("frameName")?
賦id時，引用元素的方式:??document.all.inputID?或?document.all.frameID?
除去與表單相關的元素，只能賦id不能賦name，這些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等
?
?
CSS 中 id、class屬性的區別? ?
?
1）class是設置標簽的類，用于指定元素屬于何種樣式的類。在CSS樣式中以小寫的“點”及“.”來命名，在html頁面里則以class="css5" 來選擇調用，命名好的CSS又叫css選擇器。
如： .css5{屬性：屬性值;} 選擇器在html調用為“<div class="css5">我是class例子</div>
.baobao?{ color: lime; background: #ff80c0 }
使用方法：class="baobao"?
2）id是設置標簽的標識。用于定義一個元素的獨特的樣式。在CSS樣式定義的時候 以“#”來開頭命名id名稱
如一個CSS規則：
? #binbin?{ font-size: larger }
?使用方法：id="binbin"?
id是一個標簽，用于區分不同的結構和內容，就象你的名字，如果一個屋子有2個人同名，就會出現混淆；
3）css里的id用法與class用法一樣，只是把class換成id。如例子：
??? 在CSS樣式定義ID?
???????????#css5?{height:25px; width: 200px;}
???? 調用ID ：
??????????? <div id="css5">我是ID例子</div>
class是一個樣式，可以套在任何結構和內容上，就象一件衣服。
4）概念上說就是不一樣
id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。
（1） 一個class是用來根據用戶定義的標準對一個或多個元素進行定義的。打個比較恰當的比方就是劇本：一個class可以定義劇本中每個人物的故事線，你可以通過cSS，JavaScript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" ，class= "Gandalf"， class="Aragorn"來區分不同的故事線。還有一點非常重要的是你可以在一個文檔中使用任意次數的class。
（2） id?通常用于定義頁面上一個僅出現一次的標記。在對頁面排版進行結構化布局時（比如說通常一個頁面都是由一個頁眉，一個報頭< masthead>，一個內容區域和一個頁腳等組成），一般使用ID比較理想，因為一個ID在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現大于一次的情況。
歸納成一句話就是：class可以反復使用而id在一個頁面中僅能被使用一次。
?
有可能在很大部分瀏覽器中反復使用同一個id不會出現問題，但在標準上這絕對是錯誤的使用，而且很可能導致某些瀏覽器的現實問題。
在實際應用的時候，class可能對文字的排版等比較有用，而id則對宏觀布局和設計放置各種元素較有用。
<<id具有唯一性，而class是一個類，適用于可多次重復使用的容器>>
?
?
關于ID和Name的一些注意事項
當然HTML元素的name屬性在頁面中也可以起那么一點id的作用，因為在DHTML對象樹中，我們可以使用document.getElementsByName來獲取一個包含頁面中所有指定name元素的對象數組。
?
如果頁面中有n(n>1)個HTML元素的id都相同了怎么辦？在DHTML對象中怎么引用他們呢？
如果我們使用ASPX頁面，這樣的情況是不容易發生的，因為asp.net進程在處理aspx頁面時根本就不允許有ID非唯一，這是頁面會被拋出異常而不能被正常的render。
?
但如果不是動態頁面，我們硬要讓id重復那IE怎么做呢？
這個時候我們還是可以繼續使用document.getElementById獲取對象，只不過我們只能獲取id重復的那 些對象中在HTML Render時第一個出現的對象。而這時重復的id會在引用時自動變成一個數組，id重復的元素按Render的順序依次存在于數組中，數組的腳下標依次表示id出現的先后順序。
?
?
參考推薦：
id name class 區別
瀏覽器內核介紹
JS基礎知識介紹
做網頁時經常用到的代碼集合
JSP 頁面訪問用戶驗證
轉載于:https://www.cnblogs.com/1175429393wljblog/p/5497007.html
總結
以上是生活随笔為你收集整理的HTML中id、name、class 区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS开发Swift篇—（三）字符串和数
- 下一篇： 前端之旅，做一点有回报的事情