Summarize the differences and usage of div and span

What is the span tag element?

In the html tag element, the span element is an in-line element, that is, an inline element. Its characteristic is that it does not occupy a single line. It is opposite to block-level elements, which are on their own line. The span element has no practical meaning. It exists purely to apply styles and add to a piece of content. #Notes can style their content by defining styles on span.

What is the DIV tag element?

DIV can define a division or section (division/section) in the document. The

DIV tag can divide the document into independent and different parts. It can be used as a strict organizational tool and does not use any formatting associated with it.

If you use id or class to mark a DIV, the tag will become more effective. The div tag is also used to create logical sections in HTML files. But unlike the span tag, which works at the text block level, it introduces line separation before and after the HTML elements it contains.

The following article summarizes the use of span tag elements and the differences between DIV and span.

First you can learn free courses related to php Chinese website1. Learn

"HTML+CSS Basic Introductory Tutorial" 》

in HTML Basic Tutorial - Tag Chapter

#2. Watch"Dark Horse Programmer HTML Video Tutorial"

Medium

Text DIV and span tags Video course

Span tag element content

1. Introduction to p and span tags in HTML5

Only when the target element is very unique , you should only use ID when you will never use this term elsewhere on the site. In other words, you should only use ID if you are absolutely sure that this element will only appear once. If you think you may need a similar element in the future , just use the class. The main function of the element is to group or identify the elements in the row.

2.

The solution to the problem of defining the minimum height of span has no effect

A friend once asked: Why after using CSS to define the height and width of a span, its width and height still do not change, as if it has failed? In fact, this problem is very simple - you must first understand the properties of span, because span is an inline element, and inline elements ignore width and height. Once you understand this, the solution is very simple. The solution is Just use css to turn span into a boxed element.

3.
What is the standard use of span tag in HTML?

Does it meet the standard to put text, pictures, or other things in span?

No semantic inline elements.

Define the style of content within a paragraph that is different from the style of the paragraph. You can use span tags for content that meets the following conditions: 1. Inline elements (inline); 2. No semantics; 3 , when you need to add a specific style to it or do a js hook.

DIV tag element content1.

The content of the DIV tag in html Instructions

Using CSS-DIV mainly relies on the

tag. When you put HTML content in the

tag, you can call it: "DIV block", "DIV element" ”, “CSS-layer”, or simply “layer”.

2. Html5 implements how to drag and drop images between two DIV elements

Call preventDefault() to To avoid the browser's default processing of data (the default behavior of the drop event is to open it as a link), obtain the dragged data through the dataTransfer.getData("Text") method. This method will return any data set to the same type in the setData() method. The dragged data is the id of the dragged element ("drag1"). Append the dragged element to the placement element (target element)

3. CSS sets the transparency of the DIV element

Opacity=Starting opacity (it will not be transparent if it is 100)
FinishOpacity=Ending opacity (it will not be transparent if it is 100)
Style=Style, starting from 0, 1.2 .3....There is uniform transparency, radial shape transparency...
StartX=X coordinate to start transparency, basically the upper left corner (0) of the picture and layer
StartY=Y to start transparency Coordinates, basically the upper left corner of the picture or layer (0)
FinishX=X coordinate to end transparency, basically also the lower right corner of the picture or layer (width of the picture or layer)
FinishY=End transparency The Y coordinate is basically the lower right corner of the picture or layer (the height of the picture or layer)

The difference and usage of DIV and SPAN

1. Explanation of the difference between DIV and span in HTML

DIV tags and SPAN tags process some content as a whole, for example, the whole Hide, move as a whole. Something like a box. Doing this can streamline the code and improve efficiency.

DIV puts the content into a rectangular block, and moving it at will will affect the layout. Span only defines the content as a whole and operates it without affecting the layout and display.

2. What is the difference between DIV and span? Analysis and explanation

The biggest feature of DIV and SPAN elements is that by default, no formatting is performed on the objects within the elements. render. Mainly used for applying style sheets. The most obvious difference between the two is that DIV is a block element, while SPAN is an inline element (also translated as inline element).

3. Get the difference between CSS SPAN and DIV

The difference between SPAN and DIV is that DIV (pision) is a block-level element that can contain paragraphs, titles, tables, and even things like chapters, abstracts, and notes. SPAN is an inline element. There will be no line breaks before and after SPAN. It has no structural meaning and is purely for applying styles. When other inline elements are not suitable, SPAN can be used.

Related Questions and Answers

##1.

How to overwrite the imported css with the style of this element tag

2.

The impact of floating on span height

3.

Why do multiple span elements always fall down when the container size is almost the same

4.

How to make a DIV element blurry and clear when the mouse is moved up

[Related recommendations]

1. PHP Chinese website free video tutorial:

《2016 New Curriculum System HTML+CSS》

2. PHP Chinese website free tutorial:

《HTML Development Manual》

The above is the detailed content of Summarize the differences and usage of div and span. For more information, please follow other related articles on the PHP Chinese website!