`
BillKobe
  • 浏览: 15495 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

HTML、CSS里面关于 id、class、name 属性的区别和用法

    博客分类:
  • html
阅读更多

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、CSS里面关于 id、class、name 属性的区别和用法.docx

    HTML、CSS中关于id、class和name属性是网页开发中的基础概念,它们各自有着不同的用途和应用场景。 首先,**id**属性是HTML元素的唯一标识符。它的主要作用包括: 1. 客户端脚本中引用HTML元素,JavaScript中可以...

    HTML、CSS里面关于 id、class、name 属性的区别和用法.pdf

    HTML、CSS 中的 id、class 和 name 属性都是用来标识和区分网页元素的重要特性,但它们各有不同的用途和应用场景。 1. **id 属性** - **唯一性**:id 是文档中每个元素的唯一标识符,必须在整个文档内保持唯一,不...

    HTML name、id、class 的(格式/应用场景/特性)等区别介绍

    HTML中的name、id和class属性是用于标识和操作页面元素的重要工具,它们各自有不同的用途和特性。下面详细解释它们的格式、应用场景以及特性。 首先,name属性常用于表单元素,它可以让表单元素的值以键值对的形式...

    HTML+CSS个人主页

    如类选择器(`.class_name`)、ID选择器(`#id_name`)、元素选择器(`element_name`)等。理解如何正确地选择并影响页面上的特定元素是CSS的核心。 3. **CSS样式属性**:这包括颜色(`color`)、字体(`font-...

    HTML+CSS思维导图

    - 选择器:CSS通过选择器来定位HTML元素,如标签选择器(如`p`)、类选择器(如`.class-name`)和ID选择器(如`#id-name`)。 - 属性与值:CSS属性定义样式,如`color`、`font-size`,而值则具体指定了样式的效果...

    最全的CSS+HTML帮助

    在CSS中,选择器是定位HTML元素的关键,如类选择器(.class_name)、ID选择器(#id_name)、元素选择器(element)等。它们结合属性和值来定义样式规则,如`.myClass {color: red; font-size: 16px;}`。此外,CSS2.0...

    HTML+css静态网页制作简单实例

    CSS规则由选择器和声明组成,例如`.class-name {color: red;}`,这将使所有类名为"class-name"的元素文字颜色变为红色。CSS可以内联(放在HTML元素的`style`属性中)、内部(放在`&lt;style&gt;`标签内)或外部(链接到...

    div+css.rar_CSS html_CSS DIV html_DIV_DIV CSS_html CSS

    - 类选择器(`.class_name`)、ID选择器(`#id_name`)、元素选择器(`element`)是基础选择器,还有伪类(`:hover`、`:active`、`:focus`等)和伪元素(`::before`、`::after`)等,用于精准选取需要样式的元素。...

    简单的html,div+css 网页制作

    - CSS选择器用于定位要应用样式的HTML元素,如类选择器(`.class-name`)、ID选择器(`#id-name`)和元素选择器(`element-name`)。 3. Div和CSS布局: - `&lt;div&gt;`是一个通用的容器元素,用于组织和分组HTML内容...

    html和css教程

    CSS通过选择器来应用样式,如类选择器(.class_name)、ID选择器(#id_name)和元素选择器(element)。它可以控制字体、颜色、大小、布局、背景、边框等,实现页面的个性化设计。CSS还有盒模型,包括内容(content)...

    HTML+CSS入门案例实战(网站首页布局)

    基础选择器如标签选择器(如`p`)、类选择器(`.class-name`)和ID选择器(`#id-name`)是常使用的。更高级的选择器,如伪类(`:hover`, `:active`, `:focus`)和属性选择器(`[attribute=value]`)能提供更精细的...

    html +CSS 的参考文档

    }`将ID为"header"的元素背景设为蓝色,`.class-name {font-size: 18px;}`将具有该类名的元素字体大小设为18像素。CSS还支持更复杂的选择器,如子选择器(`&gt;`),后代选择器(` `),以及属性选择器等,以实现更精确...

    HTML+CSS标签参考手册(PDF+自制WORD)

    CSS方面,选择器如类选择器(`.class_name`)、ID选择器(`#id_name`)、元素选择器(`element`)以及伪类和伪元素(`:hover`, `:first-child`等)用于选取要样式的HTML元素。属性如`color`、`font-size`、`...

    常用的CSS属性的英文单词总结及用法、解释

    本文将详细解析标题“常用的CSS属性的英文单词总结及用法、解释”所涵盖的关键知识点,帮助你更好地理解和运用这些属性。 1. **颜色和背景** - `color`: 设置文本颜色,可以使用颜色名称、十六进制值或RGB值。 - ...

    CSS+HTML教学课件ppt.rar_CSS+HTML教学课件ppt_css 课件_html css 课件_html 教学 课

    1. **选择器和规则**:理解CSS选择器的工作原理,如类选择器`.class`,ID选择器`#id`,以及元素选择器`element`。 2. **属性和值**:学习如何设置颜色、字体、大小、边距、填充等样式属性,并了解单位(如px、em、%...

    css手册 css帮助字典 css帮手

    CSS手册、帮助字典和帮手是学习和快速查找CSS属性、选择器及规则的重要工具,特别是在网络连接不便时,离线资源显得尤为实用。 本“CSS手册 CSS帮助字典 CSS帮手”提供的正是这样一个资源,它包含了CSS 2.0的详细...

    html常用的标签和css

    在这里,我们将深入探讨HTML常用标签以及CSS的基本概念和用法。 一、HTML常用标签 1. 文本元素: - `&lt;h1&gt;`至`&lt;h6&gt;`:定义标题,`&lt;h1&gt;`为最高级别,`&lt;h6&gt;`为最低级别。 - `&lt;p&gt;`:定义段落。 - `&lt;em&gt;`:定义斜体...

    head first html and css 第二版源码

    例如,类选择器(.class_name)、ID选择器(#id_name)和伪类(如:hover)等,这些是实现交互性和动态效果的关键。 总的来说,即使没有电子书,这些源码也能提供大量学习材料。你可以逐行阅读代码,尝试理解每个...

    html+css技能测试带答案).doc

    知识点:CSS 选择器,属性选择器的使用场景和作用。 5. 为 div 设置类 a 与 b,应编写 HTML 代码:&lt;div class="a b"&gt;。 知识点:HTML 类的使用场景和作用,多个类的设置方式。 6. 在 CSS 中边框使用:border,内...

    HTML、CSS、JavaScript语法手册.pdf

    以下是一个简单的网页示例,演示了如何结合使用HTML、CSS和JavaScript: ```html &lt;!DOCTYPE html&gt; &lt;html&gt; 示例页面 body { font-family: Arial, sans-serif; } .highlight { color: red; } function ...

Global site tag (gtag.js) - Google Analytics