同一个页面用多个id有什么影响
我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如:
ID方法:#test{color:#333333},在页面中调用内容
CLASS方法:.test{color:#333333},在页面中调用内容
id一个页面只可以使用一次,class可以多次引用。
有网友问,id和class好象没什么区别,我在页面中用了多个id在IE中显示也正常,用多个id有什么影响吗?
回答:第一影响就是不能通过W3的校验。
在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div,那就会出现错误。
id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;
class是一个样式,可以套在任何结构和内容上,就象一件衣服;
概念上说就是不一样的:
id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。
web标准希望大家用严格的习惯来写代码,
例如:你可以用显示粗体,也可以用来显示,但W3C 建议大家用,因为更有语义
如果对这些细节问题不重视,觉得无所谓,
那么你就没必要向xml过渡了,也没必要学习web标准了,因为web标准应用就是从这些小细节上的改变开始,否则用现在的html不是也可以?
相关推荐
-
同一个页面用多个id有什么影响
我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如: ID方法:#test{color:#333333},在页面中调用内容 CLASS方法:.test{color:#333333},在页面中调用内容 id一个页面只可以使用一次,class可以多次引用. 有网友问,id和class好象没什么区别,我在页面中用了多个id在IE中显示也正常,用多个id有什么影响吗? 回答:第一影响就是不能通过W3的校验. 在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID"一般情况
-
js实现同一个页面多个渐变效果的方法
本文实例讲述了js实现同一个页面多个渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果. 要点一: var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; } 根据目标值和当时值的对比,来决定是正向还是负向速度. 要点二: for(i=0; i<runs_li.length; i++){ runs_li[i].timer = n
-
js实现同一个页面,多个enter事件绑定的示例
困得不行了 ,脑袋转不动了,大家直接拿代码用吧... document.onkeydown = function(e) { var ev = (typeof event!= 'undefined') ? window.event : e; if(ev.keyCode == 13 && document.activeElement.id == "") {//activeElement活动事件,该事件只可以使用于输入域中 console.log("内容111:&q
-
vue在同一个页面重复引用相同组件如何区分二者
目录 同一个页面重复引用相同组件如何区分二者 1.使用情境 2.解决方法 在同一个页面重复引用相同组件时的干扰处理 同一个页面重复引用相同组件如何区分二者 1.使用情境 我在同一个vue中引用了同样的一个图层选择的组件,需要区分二者的选择的radio值,如果不做区分,这二者选择的radio值看上去将会一样 2.解决方法 先说原理,这个重复引用的组件虽然一样,但是二者在被创建的时候各自走了一遍生命周期,所以变量之间不冲突. 首先在引用组件中新增一个props,这里命名为spareId,用来区分二者
-
vue实现同一个页面可以有多个router-view的方法
使用Vue+Element搭建项目的时候,为了避免一个页面过大,将tab里面的内容分成多个页面,并使用同级视图展示 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户详情" name="first"> <router-view></router-view> </el-t
-
JavaScript实现同一个页面打开多张图片
我们的目标是: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js美术馆</title> <script type="text/javascript" > function showPic(whichpic) { var sourc
-
js检查页面上有无重复id的实现代码
方法一: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE> New Document </TITLE> <script type="text/javascript"> window.onload = function(){ var ta
-
解决vue一个页面中复用同一个echarts组件的问题
因为页面中要用echarts图表的地方比较多,所以封装了组件,方便复用,如图: 我需要这样一个饼图,并且接下来在很多次地方要用到. 直接复制官网的代码,再改改数据,需要用的时候直接拿来用. 但是接下来出现了一个问题:如果我在同一个页面多次使用这个组件,图表将不能正常显示.分析了一下, echarts通过id获取对象 // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); 当封装为
-
AngularJS路由实现页面跳转实例
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo
-
js点击页面其它地方将某个显示的DIV隐藏
实现也很简单,但需要注意的是,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了.但这样做也有一个缺点,即如果同一个页面中如果也有事件阻止冒泡,则不能隐藏DIV,所以在这样的事件中需要特殊处理下:自己调用隐藏下DIV(但正常来说这样的事件并不多): JS: 复制代码 代码如下: $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) {
随机推荐
- jQuery圆形统计图开发实例
- Android实现基于ZXing快速集成二维码扫描功能
- 基于对象合并功能的实现示例
- Python实现分割文件及合并文件的方法
- C语言中实现KMP算法的实例讲解
- 浏览器跨域获取Lrc歌词数据的解决办法
- PHP实现批量修改文件后缀名的方法
- Android巧用DecorView实现对话框功能
- vbs实现右键菜单中添加CMD HERE
- 批量清除128组节点db上面过期的binlog释放磁盘空间实现思路
- Java字符判断的小例子
- jQuery实现的简单拖动层示例
- Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)
- Java程序开发中abstract 和 interface的区别详解
- Python编程中的文件读写及相关的文件对象方法讲解
- C#用Lambda和委托实现模板方法
- C#实现按照指定长度在数字前补0方法小结
- Android开发中Looper.prepare()和Looper.loop()
- spring AOP自定义注解方式实现日志管理的实例讲解
- Mybatis基于注解实现多表查询功能