日期:2014-05-17 浏览次数:20662 次
div与span
大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义,但是这样的官方语义太让人迷惑,大的结构还
好,但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》
里面的定义让人豁然开朗。
div:指定渲染 HTML 的容器。
span:指定内嵌文本容器。
说白了就是如果里面还有其他标签的时候就用div,如果里面只有文本的就应该用span。
?
span与label
由于有了以上关于span的说法,那么我们就可以对文本进行span的容器操作了,可以定义css样式什么的,但是label好像也可以?但是两者区别有时什么呢?
label标签主要用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
span则是对普通的文本的一种容器
?
div-span-label
<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>
?
?
Label的for属性与Accesskey属性
Label的for属性与其他元素的ID属性绑定,就像超链接锚点一样,点击Label标签焦点就会转移到绑定的元素上。 <Label for="input1">姓名</Label>
???
//点击Label文本“姓名”焦点就会转移到ID="input1"的input标签上 <input ID="input1" type="text">
????????? ? <Label for="InputBox"
Accesskey="N">姓名</Label>
<input ID="InputBox" type="text">
AccessKey属性所设置的快捷键不能与浏览器的快捷键冲突。 ? ? ? ? SPAN元素和DIV元素有什么区别?
(转自: http://zhangjf.blog.51cto.com/264589/49250 ) ? 最明显的区别是:DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN
的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。块元素相当于内嵌元素在前后各加一
个<br>换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,
给内嵌元素定义了display:block就成了块元素了。
具体步骤:
代码示例:
<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>