The difference between a Div, span, label label in HTML

Div and Span

Everyone in the beginner div+css layout, there is a lot of confusion in the use of Div and span did not feel that there is a certain "composition", think two difference is not small, in the web of the definition of Div and span : div As the structure of the split document naturally make it the most official semantics, But such official semantics are so confusing that the big structure is
OK, but the small place is still confusing with div or span. In fact, it's the Microsoft MSDN Library
The definition of the inside makes people enlightened.

DIV: Specify a container for rendering HTML

Span: Specify an inline text container

In layman's words, if there are other tags in the time use Div, if only text inside should use span

A DIV is a block-level element that provides the structure and background for chunks of content within an HTML document

span is an inline element that defines an area within a row (that is, a row can be divided into several areas by <span>)

A div tag can be set with a span tag (a DIV can be considered a large container, span is a small container, and a large container can of course put down a small container)

Span and label

With the above statement about span, we can manipulate the span of the text, define CSS styles and so on, but the label seems to do the same. But what is the difference sometimes?

Label labels are primarily used to bind a form element, and when a label is clicked, the bound form element gets the input focus

span is a container for plain text.

Example:

<div id= "Divform" >
<div>
<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>
<label accesskey= "1" for= "Textname" >your name:</label>
<input type= "text" id= "txtname" value= "Press alt+1"/>
</div>
</div>

Operation Result:

There is one problem:

AccessKey This property is not set shortcut key? But the keys 1 and alt+1 have no reaction, do not know what the situation, is depressed, I hope the master can give answers to label label accesskey usage.

Attached: The specific use of label tags:

The label tag is a callout tag that supports binding with other user interactive controls and triggers the corresponding event in place of the bound control by specifying the for property value as the ID of the destination control (the bound control). In general, it is common to use a label binding when using a radio box and a check box.
The two properties in the label are very useful, one for, and one for accesskey
For property:
Function: Represents the HTML element to which the label tag is bound, and when you click on the tag, the bound element will get the focus
Usage:
<label for= "InputBox" > Name </label>
<input id= "InputBox" type= "text" >
AccessKey Properties:
Function: Represents the hotkey that accesses the element to which the label tag is bound, and when you press the hotkey, the bound element gets the focus.
Usage: <label for= "InputBox" accesskey= "N" > Name </label>
<input id= "InputBox" type= "text" >
Limitation: the shortcut key set by the AccessKey property does not conflict with the browser's shortcut key, otherwise the priority or the browser's shortcut key.


Comments:
To bind a label to another control, set the for property of the label element to be the same as the ID of the control. Binding a LABEL to the control's NAME property is useless. However, to submit a form, you must specify a NAME for the control to which the LABEL element is bound.


There are two ways to add underscores to the shortcut keys you specify. Rich text support for the LABEL element allows you to add a U element to both sides of the shortcut key character specified by the ACCESSKEY property. If you prefer to use a style sheet (CSS) to apply a style, you can include the character in SPAN and set the style to "Text-decoration:underline".


If the user clicks the label, the onclick event on the label is triggered first, and then the OnClick event on the control specified by the Htmlfor property is triggered. Pressing the shortcut key set by the LABEL sets the focus but does not trigger the onclick event.


tags do not allow nesting.


This element is available in HTML and scripts for Internet Explorer 4.0 and later.


This element is an inline element.


This element needs to close the label.

The difference between a Div, span, label label in HTML