div & span and span & label——驳暴牙齿《大便蛔虫表单》demo中label的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> div & span and span & label </title>
<meta name="Author" content="JustinYoung"/>
<meta name="Keywords" content="div span,div与span,div span 区别,span与div的区别,html span,span与label,span与label的区别"/>
<meta name="Description" content="A demo for Http://justinyoung.cnblogs.com"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--start of CSS style-->
<style type="text/css">
*{
font-size:9pt;
}
h1{
font-size:200%;
}
h3{
font-size:120%;
}
#divForm{
border:1px solid red;
margin:10px;
padding:10px;
float:left;
clear:both;
}
.divFormItem{
float:left;
clear:both;
margin:10px 0;
}
#divArticle{
float:left;
clear:both;
margin:10px;
padding:10px;
}
.style1 {
font-family: "Courier New";
}
</style>
<!--end of CSS style-->
</head>
<body>
<h1>Div与Span以及Span与label</h1>
<h3>——驳暴牙齿《大便蛔虫表单》demo中label的使用</h3>
<div id="divArticle">
<pre>
div和span的争论由来已久，大家都感觉自己说的道理。我也不想在此说服谁，只提出我自己的观点。
倒是很多人忽视的lable和span，我要说上几句，虽然我不能保证自己的如何正确，但是“暴牙齿”
提供的那个“大便蛔虫的表单示例”里面的label我感觉一定是错误的。（注：我对暴牙齿没有任何敌
意，而且恰恰相反，我对他很感激，在我刚开始关注和学习web标准的时候，他的blog给了我很大的帮
助。）
先说div和span。按理说现在应该引用w3c的关于div和span的定义了。但是前人引来引去仍然让人云
里雾里。div作为分割文档结构自然使它最官方的语义，但是这样的官方语义太让人迷惑，大的结构还
好，但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》
里面的定义让人豁然开朗。
div：指定渲染 HTML 的容器。
span：指定内嵌文本容器。
一目了然：如果里面还有其他标签的时候就用div，如果里面只有文本的就应该用span。好了，关于
div和span我就发表这么多意见，一家之言。君自取之。
下面我们来重点说说label和span。首先我们来看看暴牙齿提供的那个demo里面的代码：
<div>
<label>姓名</label>
<input type="text" />
</div>
<div>
<label>性别</label>
<input type="text" />
</div>
<div>
<label>单位</label>
<input type="text" />
</div>
<div>
<label>职务</label>
<input type="text" />
</div>
<div>
<label>MSN号码</label>
<input type="text" />
</div>
<div>
<label>QQ号码</label>
<input type="text" />
</div>
“似乎没有问题，而且非常完美”，如果你这样说的话，多数是因为你是.net程序员。但是要知道此label
非彼label。
xhtml里面的label的真正语义应该是：为页面上的其它元素指定标签。请注意这里的“其他元素”，也就
是说，单独而没有指定服务对象（其他元素）的label是没有体现语义的。一直奇怪为什么.net的服务器控
件label“打到”前台以后是span。现在想想，如果不是span反而奇怪了。
那xhtml的label到底应该怎么用呢？你去vs2003（或者vs2005）拉一个radiobutton，看看它“打到”
前台的代码就知道了，或者看看下面这里例子：
注：水平有限，错误难免，请斧正之～谢谢！
</pre>
<div id="divForm">
<div class="divFormItem">
<span>Did you visited my blog：</span>
<input type="radio" id="radYes" name="visitedblog" checked="checked" /><label for="radYes">Yes</label>
<input type="radio" id="radNo" name="visitedblog"/><span><label for="radNo">No</label>(Press the text "Yes" or "No" not the radio)</span>
</div>
<div class="divFormItem">
<label accesskey="1" for="txtName">Your Name：</label><input type="text" id="txtName" value="Press Alt + 1"/>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> div & span and span & label </title>
<meta name="Author" content="JustinYoung"/>
<meta name="Keywords" content="div span,div与span,div span 区别,span与div的区别,html span,span与label,span与label的区别"/>
<meta name="Description" content="A demo for Http://justinyoung.cnblogs.com"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--start of CSS style-->
<style type="text/css">
*{
font-size:9pt;
}
h1{
font-size:200%;
}
h3{
font-size:120%;
}
#divForm{
border:1px solid red;
margin:10px;
padding:10px;
float:left;
clear:both;
}
.divFormItem{
float:left;
clear:both;
margin:10px 0;
}
#divArticle{
float:left;
clear:both;
margin:10px;
padding:10px;
}
.style1 {
font-family: "Courier New";
}
</style>
<!--end of CSS style-->
</head>
<body>
<h1>Div与Span以及Span与label</h1>
<h3>——驳暴牙齿《大便蛔虫表单》demo中label的使用</h3>
<div id="divArticle">
<pre>
div和span的争论由来已久，大家都感觉自己说的道理。我也不想在此说服谁，只提出我自己的观点。
倒是很多人忽视的lable和span，我要说上几句，虽然我不能保证自己的如何正确，但是“暴牙齿”
提供的那个“大便蛔虫的表单示例”里面的label我感觉一定是错误的。（注：我对暴牙齿没有任何敌
意，而且恰恰相反，我对他很感激，在我刚开始关注和学习web标准的时候，他的blog给了我很大的帮
助。）
先说div和span。按理说现在应该引用w3c的关于div和span的定义了。但是前人引来引去仍然让人云
里雾里。div作为分割文档结构自然使它最官方的语义，但是这样的官方语义太让人迷惑，大的结构还
好，但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》
里面的定义让人豁然开朗。
div：指定渲染 HTML 的容器。
span：指定内嵌文本容器。
一目了然：如果里面还有其他标签的时候就用div，如果里面只有文本的就应该用span。好了，关于
div和span我就发表这么多意见，一家之言。君自取之。
下面我们来重点说说label和span。首先我们来看看暴牙齿提供的那个demo里面的代码：
<div>
<label>姓名</label>
<input type="text" />
</div>
<div>
<label>性别</label>
<input type="text" />
</div>
<div>
<label>单位</label>
<input type="text" />
</div>
<div>
<label>职务</label>
<input type="text" />
</div>
<div>
<label>MSN号码</label>
<input type="text" />
</div>
<div>
<label>QQ号码</label>
<input type="text" />
</div>
“似乎没有问题，而且非常完美”，如果你这样说的话，多数是因为你是.net程序员。但是要知道此label
非彼label。
xhtml里面的label的真正语义应该是：为页面上的其它元素指定标签。请注意这里的“其他元素”，也就
是说，单独而没有指定服务对象（其他元素）的label是没有体现语义的。一直奇怪为什么.net的服务器控
件label“打到”前台以后是span。现在想想，如果不是span反而奇怪了。
那xhtml的label到底应该怎么用呢？你去vs2003（或者vs2005）拉一个radiobutton，看看它“打到”
前台的代码就知道了，或者看看下面这里例子：
注：水平有限，错误难免，请斧正之～谢谢！
</pre>
<div id="divForm">
<div class="divFormItem">
<span>Did you visited my blog：</span>
<input type="radio" id="radYes" name="visitedblog" checked="checked" /><label for="radYes">Yes</label>
<input type="radio" id="radNo" name="visitedblog"/><span><label for="radNo">No</label>(Press the text "Yes" or "No" not the radio)</span>
</div>
<div class="divFormItem">
<label accesskey="1" for="txtName">Your Name：</label><input type="text" id="txtName" value="Press Alt + 1"/>
</div>
</div>
</div>
</body>
</html>
keyword:div span,div与span,div span 区别,span与div的区别,html span,span与label,span与label的区别
浙公网安备 33010602011771号