电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

HTML中Div、span、label标签的区别

2020-10-29 09:22:23 出处:[ 菜菜电脑网 ] 人气:次阅读

p与span

大家在初学p+css布局时,有很多厌烦,在p与span的用到过程没有真是有一定的”章法”,心里两个区别相当大,在w3c的关于p和span的定义:p作为划分文档结构自然使它最官方的语义,但是这样的官方语义太让人误以为,大的结构还
好,但是小的地方到底是用p还是用span仍然让人查觉。其实恰恰是《Microsoft MSDN Library》
里面的定义让人豁然开朗。

p:指明位图HTML的容器

span:所选附加文本容器

通俗地谈论就是如果里面还有其他标签的时候就用p,如果里面只有文本就一定会用span

p是一个块级元素,用来为HTML文档内大块的内容备有结构和背景

span是行内元素,在行内定义一个区域(也就是一行内可以被<span>分为好几个区域)

p标签中可以四角span标签,(p可以视作是一个大容器,span是一个小容器,大容器当然可以收起一个小容器啦)


span与label

由于有了以上关于span的传闻,那么我们就可以对文本展开span的容器转换了,可以定义css样式什么的,但是label像是也可以?但是两者区别有时什么呢?

label标签主要应用于附加一个表单元素, 当该网站label标签的时候, 被可选的表单元素就亦会获取读取焦点

span则是对普通的文本的一种容器。

例子:

<p id="pForm">
<p>
<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>
</p>
<p>
<label accesskey="1" for="textName">Your Name:</label>
<input type="text" id="txtName" value="Press Alt+1"/>
</p>
</p>

直通结果:



有一个问题是:

accesskey这个属性不是设置快捷键的么?可是按键1和alt+1都不能反应,不告诉什么情况,很是苦恼,期盼高手可以给以探究label标签accesskey的用法。




附有:label标签的确切用法:

label标记为标上标记,该标记默许与其他用户交互式控件同步进行启动时,并换成被适配控件激活除此以外的事件,COM的方法是:将for属性值选定为目的控件(链接控件)的ID。一般情况下,在用到单选框和复选框时用label附加比较常用。
Label中两个属性非常有效率,一个是for,一个就是accesskey
For属性:
功能:暗示Label标签要初始化的HTML元素,你双击这个标签的时候,所默认的元素将借助焦点
用法:
<label for="inputBox">姓名</label>
<input id="inputBox" type="text">
Accesskey属性:
功能:问到回访label标签所加载的元素的热键,当您按下热键,所初始化的元素将换取焦点。
用法:<label for="inputBox" accesskey="N">姓名</label>
<input id="inputBox" type="text">
局限性:accessKey属性所设置的快捷键必须与浏览器的快捷键冲突,否则将优先级或浏览器的快捷键


注解 :
要将 LABEL 启动时到其它的控件,代为将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 默认到控件的 NAME 属性毫无用处。但是,要审批表单,你必须为 LABEL 元素所链接到的控件指明 NAME。


有两种方法给所所选的快捷键加到下划线。LABEL 元素的 rich text 支持者可以在 ACCESSKEY 属性所所选的快捷键字符两侧以致于 U 元素。如果你更不愿用到样式表(CSS)来技术的发展样式,可以将该字符包涵在 SPAN 中,并设置样式为“text-decoration: underline”


如果用户单击 LABEL,则就会先激活 LABEL 上的 onclick 事件,然后即会由 htmlFor 属性所选定的控件上的 onclick 事件。按下 LABEL 实体化的快捷键将设置焦点但并不激活 onclick 事件。


标签不准许嵌套。


此元素在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中最简单。


此元素是附加元素。


此元素所需暂停标签。

以上就是HTML中Div、span、label标签的区别的详尽内容,更多问注意php中文网其它涉及文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152