<DIV> </DIV> Division/section in the document can be defined to divide the documents into independent and different parts. <DIV> </DIV> Tags can be used as a strict organizational tool and do not use any format to be associated with it, which contains the idea of separating a HTML label and the expression style. In actual work, we usually specify ID or class properties for <div> </div> tags to make the tag more effective. <div> </div> is a block -level element, which means that its content automatically starts a new row. And actually changing is <div> inherently unique format.
The following HTML simulates the structure of the news website. Each of these pairs of <div> </div> tags combine the title and abstract of each news, that is, <div> </div> adds additional structure to the document. At the same time, because these <div> </div> belong to the same type of elements, you can use the class = news property to identify these <div> </div> tags. The semantics, and it is convenient to format the <div> </div>.
<div class = news> <h2> news headline 1 </h2> <p> some text. Some text. Some text ... </p> ... </div> <div class = news> <h2> <h2> <h2> <h2> NewS Headline 2 </h2> <p> Some text. Some text. Some text ... </p> ... </div>2. <span> </span> label
<span> Tags are used to combine the line elements in the document.
<span style = color: red> Note: </span>Second, block -level elements and line elements
Block Element and in -line elements/inner associated elements are concepts in CSS. Elements such as <div> </DIV> and </H1> are often called block -level elements. This is because these elements are displayed as a piece of content, that is, blocks. On the contrary, elements such as <Span> </span> and <strong> </strong> are called in -line elements. This is because their content is displayed in one line, that is, the line frame.
The concept of block -level elements and linen elements is not fixed, but relative. We can use the type of the Display attribute of the element to change the type generated box. This means that by setting the Display property to block, it can make the in -line elements (such as <a> elements) look like block -level elements; it can also be set to make the generated elements in the line by setting Display as Inline; and even we, we even The Display property can be set to NONE, so that the element has no frame at all. In this case, the frame and all their contents will not be displayed, and there is no space in the document.
<div ID = dv1 style = Display: block> I am a block -level element. </div> <div ID = dv2 style = display: inline> I am a line of line. </div> <div ID = div3 style = display: none> I am not visible </div>Third, comparison of <div> </div> and <span> </span>
1. Similarly: <div> </div> labels and <span> </span> tags are used to classify tags but do not have practical semantics; both are mainly used for application style tables.
2. Different points: <div> </div> The label is a block -level element, and the browser will automatically add a bank label before and after it </br>; The label will not be added automatically before and after.
If you want to display two contents in the same line in the web layout, the easiest way is to pack them with <span> </span> tags. For example, one page has two adjacent elements, one is <div> </div>, and the other is <span> </span>. If you want to display them in the same row, you can change this <div> </div> to <span> </span>. Of course, it can also be implemented by setting the Display property of <div> </div> and other labels through CSS to Inline.