Html中class,id,name的區別


一  表格中name、id、class的區別
  在一個頁面中,有許多的控件(元素或標簽)。為了更方便的操作這些標簽,就需要給這些標簽標識一個身份牌。

1   name
    指定標簽的名稱。

1.1 格式
    <input type="text" name="username" />

1.2 應用場景
(1) form表單:name可作為轉遞給服務器表單列表的變量名;如上面的傳到服務器的名稱為:username='text的值'。

(2) input type='radio'單選標簽:把幾個單選標簽的 name設為一個相同值時,將會進行單選操作。

    <input type="radio" name='sex'/><input type="radio" name='sex'/>女
    
(3) 快速獲取一組name相同的標簽:獲取擁有相同name的標簽,一起進行操作,如:更改屬性、注冊事件等。

    <!--
    function changtxtcolor() {
        var txts = document.getElementsByName('txtcolor'); //獲取所有name=txtcolor 的標簽
        for (var i = 0; i < txts.length; i++) { //循環遍歷標簽,並把背景色改為red
            txts[i].style.backgroundColor = 'red';
        }
    }
    -->
1.3 特性
    name屬性的值,在當前page頁面中並非唯一性。

2   id
    指定標簽的唯一標識。

2.1 格式
    <input type=password id="userpwd" />

2.2 應用場景

(1) 根據提供的唯一id號,快速獲取標簽對象。如:document.getElementById(id)

(2) 用於充當label標簽for屬性的值:示例:<label for='userid'>用戶名:</label>,表示單擊此label標簽時,id為userid的標簽獲得焦點。

2.3 特性
    id屬性的值,在當前的page頁面要是唯一的。

 
3.  class
    指定標簽的類名。

3.1 格式
    <input type=button class="btnsubmit" />

3.2 應用場景
(1) CSS操作,把一些特定樣式放到一個class類中,需要此樣式的標簽,可以在添加此類。

3.3 特性
    可以把多個類,放在一個class屬性里,但必須用空格隔開;如:class='btnsubmit btnopen'


二  HTML中class和id的區別
    在HTML中,當在一個文檔里面我們要對多個標簽使用同一個樣式的時候可以使用class或者id,
    當然一般不推薦為了使用樣式而為標簽添加id;使用javaScript可以獲取class和id屬性,從而對標簽添加特定的行為。


1   元素唯一的ID:
    在元素的開始標簽中輸入id名,格式 id="name"
    name是id的名稱,自定義,這個id是唯一識別元素的名稱,name不能有數字或者空格。
    建議是id用來作為當前文檔的鏈接,在文檔中進行跳轉的時候使用,HTML 文檔中的每個 id 都必須是唯 一的。
    一個頁面里不能出現兩個具有相同 id 的元素,並且每個元素都只能有一個id。
    相同的id可以出現在不同的頁面里, 同一 id也不一定每次都賦給同一元素,盡管這是慣常的做法。

    例:

    <div id="first">
     ....
    </div>

2   元素的類別:
    在元素開始標簽里添加,格式class="name"
    class並不是唯一的,可以在頭部元素里style標簽中定義,這樣可以讓class在多個標簽中使用。
    如果要指定多個類別那就將類別名字之間用空格分開,格式class="first second",類別名可以兩個以上。
    class盡量用來添加樣式,一個 class 名稱可以分配給頁 面中任意數量的元素,並且一個元素可以有 一個以上的 class。

    在標簽中添加class

    例:

    <div class="first">
     ....
    </div>

 
    任何HTML標簽可以同時用一個id和若干個class。
    id和class名稱最好是有意義的,遵循一定的規范規律,方便識別。然后就是名稱中每個單詞之間用短橫線 “-” 隔開。
    建議是class和id統一定義在頭元素中會更好。


三  CSS中ID與CLASS的區別

1   定義區別

    id:用來定義頁面中大的樣式,如欄目划分,頂部,正文,底部等;用#top的形式來定義.

    class:用來定義一些比較細節的樣式,如具體的一個菜單,一行文字等,用.text的形式來定義。
    
    定義HTML中的標簽,如ul,img,p等時,直接寫:img{}

 
2   寫法區別:

    #main 定義的是ID為"main"這個元素的樣式
    .main 的意思是新建一個名為"main"的樣式
    #main 只能定義ID為"main"這個元素的樣式
    .main 一但定義以后,可以讓其他的元素來調用,方法為class="main"

3   用法區別

    用#定義CSS樣式,在調用時必須用ID,
    用.定義CSS樣式,在調用時必須用CLASS。
    用#定義的樣式,一般都是定義結構框架,一些大的容器,且在同一個頁面只能出現一次。
    而.定義的樣式,一般都是起修飾作用或多次重復的樣式。
    還一點就是在同一個層里同時出現ID和CLASS樣式,ID更優先於CLASS。

    Class是用來根據用戶定義的標准對一個或多個元素進行定義的。
    打個比較恰當的比方就是劇本:一個Class可以定義劇本中每個人物的故事線,你可以通過CSS,javascript等來使用這個類。
    因此你可以在一個頁面上使用class="Frodo" ,class="Gandalf", class="Aragorn"來區分不同的故事線。
    還有一點非常重要的是你可以在一個文檔中使用任意次數的Class。

    ID通常用於定義頁面上一個僅出現一次的標記。
    在對頁面排版進行結構化布局時(比如說通常一個頁面都是由一個頁眉,一個報頭< masthead>,一個內容區域和一個頁腳等組成),
    一般使用ID比較理想,因為一個ID在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現大於一次的情況。

4   語義區別

    class是樣式組,用.style定義,class="style": 
    .style定義樣式組,可以被反復調用,就是說你一個頁面里,可以有多個元素用同一個style。 

    ID是固定標簽,用#style1定義,ID="style1" 
    #style1定義固定標簽,用於定義一個特定的元素,每個頁面只能出現一次,不能反復調用。
    雖然現在有的網頁多次調用#style1,但那是不規范的,在某些瀏覽器中也會無法解讀造成頁面出錯。

5   用處區別
 
    class可以在頁面里面重復使用,id由於在頁面里面只能出現一次,不能重復使用,所以盡量用class來寫,這樣能在頁面里面重復引用你寫的css,減小工作量和代碼量。

    這種情況盡量用id:頁面大的模塊里面,用id來區分不同的模塊。比如頁面里面有這樣的模塊:最新新聞,推薦新聞等。就可以考慮用id來區分。

    還有一點,由於id是頁面中唯一的,更多的是定義來留給給頁面里面的 javascript用。

6   代碼區別

    class和id代碼:

    class:

    <style type="text/css">

        .footer{background:red;}

    </style>

    <div class="footer">footer</div>

    id:

    <style type="text/css">

        #footer{background:red;}

    </style>

    <div id="footer">footer</div>

    定義class的css是用點:“.”,如.footer

    定義id的css是用井號“#”,如#footer

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM