This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Thank you for meeting me. Hi, I’m Ken

Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).

This blog is suitable for those who are new to HTML and those who want to review after a long time

🌊🌈 About:

6.4_ Element types and conversions

Next, we’ll look at element types and conversions in detail.

6.4.1_ Type of the element

The HTML markup language provides a rich set of tags for organizing pages. In order to make the structure of the page easier and more reasonable, HTML tags are defined into different types, generally divided into block tags and inline tags, also known as block elements and inline elements. Understanding their features can lay the groundwork for using CSS to set styles and layouts, as follows:

1. Block element

Block elements appear in the form of regional blocks in the page, which is characterized by that each block element usually occupies a whole line or more whole lines alone. You can set width, height, alignment and other attributes on it, which is often used for the construction of web page layout and web page structure. _ Common block elements include < h1> ~ < h6>, < p>, < div>, < ul>, < ol>, < li> and so on, among which < div> tag is the most typical block element.

2. Inline elements

Inline elements, also known as inline or embedded elements, do not have to start on a new line and do not force other elements to appear on the new line. An inline element is usually displayed on the same line as other inline elements before and after it. They do not occupy an independent area. They only rely on their own font size and image size to support the structure. _ Common inline elements are < strong>, < b>, < em>, < I >, < del>, < s>, < ins>, < u>, < a>, < span>, etc. The < span> tag is the most typical inline element.

Case study: Further understanding block elements and inline elements,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Block elements and inline elements</title>
<style type="text/css">

h2 {  
/* Define h2's background color, width, height, horizontal text alignment */
background: #FCC;
width: 350px;
height: 50px;
text-align: center;
}

p { 
background: # 090; 
}  /* Define the background color of P */

strong { 
/* Define strong's background color, width, height, horizontal text alignment */
background: #FCC;
width: 360px;
height: 50px;
text-align: center;
}

em { 
background: #FFO; 
}  /* Define em background color */

del {
background: #CCC; 
}  /* Define the background color of del */

</style>
</head>
<body>

<h2>The h2 tag defines the text.</h2>
<p>The text defined by the p tag.</P>
<strong>Text defined by the strong tag.</strong>
<em>Text defined by the EM tag.</em>
<del>The text defined by the del tag.</del>

</body>
</html>
Copy the code

In the above case, you first define the text with the block tags < h2>, < p> and the inline tags < strong>, < em>, and < del>, and then apply different background colors to them, while applying the same width, height, and align attributes to < h2> and < strong>.

After running, you can see that different types of elements occupy different areas of the page. The < h2> and < p> blocks each occupy a rectangular area. Although < h2> and < p> are adjacent, they are not on the same line. Instead, they are arranged vertically. < p> without width, height, and alignment properties will fill the page left and right. However, elements < strong>, < em>, and < del> are arranged on the same line and are wrapped at the edge. Even though < strong> has the same width, height, and alignment attributes as < h2>, this does not take effect in the actual display.

It is worth mentioning that inline elements are usually nested within block elements, whereas block elements cannot be nested within inline elements. For example, you can nest < strong>, < em>, and < del> in the < p> tag from the above case as follows.

<p>
<strong>Text defined by the strong tag.</strong>
<em>Text defined by the EM tag.</em>
<del>The text defined by the del tag.</del>
</p>
Copy the code

After running, you can see that when an in-line element is nested within a block element, it occupies a certain range on the block element and becomes part of the block element.

Bottom line: A block element usually occupies a single line (logical line). You can set the width, height, and alignment attributes, which inline elements typically do not own a row and cannot be set. Inline elements can be nested in block elements, while block elements cannot be nested in inline elements.

  • Note: there are several special tags in inline elements — < img /> and < input /> — that you can set width, height, and alignment attributes on. Some data might call them inline block elements.

6.4.2 _ < span > tag

Like < div>, < span> is widely used in THE HTML language as a container tag. Unlike < div > tags, < span> is an inline element. < span> and < /span> can only contain text and various inline tags, such as bold < strong>, inclined < em>, etc. < span> can also be nested in multiple < span>.

The < span> tag is often used to define specific text to be displayed on a web page and is used in conjunction with the class attribute. It itself has no fixed format, only when the style is applied, the visual changes will occur. The < span> tag is used when other inline tags are inappropriate.

Example: Demonstrate the use of the < span> tag,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Span tags</title>
<style type="text/css">

#header {  /* Set the general style of the text in the current div */
font-family: "Black";
font-size: 14px;
color: #FFA500;
}

.huanzhi { 
 /* Controls the special text */ in the first span
color: # 515151;
font-size: 20px;
padding-right: 20px;
}

.course {  /* Controls the special text */ in the second span
font-size: 18px;
color: #87CEEB;
}

</style>
</head>
<body>

<div id="header">
<span class="huanzhi">Ken o CSDN</span>welcome<span class="course">Click to enter</span>Welcome!</div>

</body>
</html>
Copy the code

In the above code, some text is defined using the < div> tag, and two pairs of < span> are nested within the < div> to control the particular display of text, and then they are styled separately using CSS.

The special text displayed after running is set using the CSS control < span> tag.

After running, we can see that the < span> tag can be nested within the < div> tag as a child element, but the reverse is not true, that is, the < span> tag cannot be nested within the < div> tag. The distinction and connection between < div> and < span> gives a deeper understanding of block and inline elements.

6.4.3_ element conversion display

Web pages are arranged by boxes of block elements and inline elements. If you want inline elements to have some of the characteristics of block elements, such as width and height, or if you want block elements to have some of the characteristics of inline elements, such as not having an exclusive row, you can use the display attribute to convert the type of the element.

The common values and meanings of the display attribute are as follows:

  • Inline: This element is displayed as an inline element (the default value of the display property for inline elements).
  • Block: This element is displayed as a block element (the default value of the display attribute for a block element).
  • Inline-block: This element appears as an in-line block, on which you can set attributes such as width, height, and alignment, but it does not own a single line.
  • None: This element is hidden, does not appear, and does not take up page space. It does not exist.

Example: To demonstrate the use and effect of the display attribute,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Transformation of elements</title>
<style type="text/css">

div.span {     /* Set both div and span styles */
width: 200px;   / * * / width
height:50px;    / * * /
background: #FCC;   /* Background color */
margin: 10px;  /* Margin */
}

.d_one..d_two { 
display: inline; 
} /* Convert the first two divs to an in-line element */

.s_one { 
display: inline-block; 
} /* Convert the first span to an in-line block element */

.s_three { 
display: block; 
} /* Convert the third span to a block element */

</style>
</head>
<body>

<div class="d_one">Text in the first div</div>
<div class="d_two">Text in the second div</div>
<div class="d_three">Text in the third div</div>
<span class="s_one">Text in the first span</span>
<span class="s_two">Text in the second span</span>
<span class="s_three">Text in the third span</span>

</body>
</html>
Copy the code

In the above code, you define three pairs of < div> and three pairs of < span> tags and give them the same width, height, background color, and margin. Also, apply “display:inline; “Style to convert them from block elements to inline elements by applying the first and third < span>” display: inline-block; “And” display: inline; “Style to convert them to inline block elements and inline elements, respectively.

After running, you can see that the first two < div> s are lined up on the same line, their width and height supported by their own text content because they are converted to inline elements. The first and third < span> are displayed with a fixed width and height, but the former does not have an exclusive row, and the latter an exclusive row, because they are converted to inline blocks and block elements, respectively.

In the above case, the conversion between block elements, inline elements, and inline block elements can be implemented using the associated attribute values of display. If you want an element not to be displayed, you can also use “display: none; “Take control. For example, if you want the third < div> in the above example not to be displayed, you can add the following style to your CSS code.

.d_three { 
display: none; 
} /* Hide the third div*/
Copy the code

When you run the code, you can see that when you define an element with the display attribute none, the element disappears from the page and takes up no more page space.

Note:

According to the results of the above case, it can be found that the vertical margin between the first two < div> and the third < div> is not equal to the sum of the margin-bottom of the first two < div> and the margin-top of the third < div>. This is because the first two < div> s are converted to inline elements, and inline elements can only define left and right margins, not top and bottom margins.

6.5_ Stage case – Making the focus map of the web page

To help readers better organize their pages using float and positioning, this section will create a focus map using case studies.

6.5.1_ Analysis effect diagram




That’s the end of today’s introductory study

Peace

🌊🌈

Akken’s HTML, CSS guide for getting started (1)_HTML basics akken’s HTML, CSS guide for getting started (2)_HTML page elements and attributes Akken’s HTML, CSS guide for getting started (3)_ Text style attributes Aken’s HTML, CSS getting started guide (four)_CSS3 selector Aken’s HTML, CSS getting Started guide (five)_CSS box model Aken’s HTML, CSS getting Started guide (six)_CSS box model Aken’s HTML, CSS getting Started guide (seven)_CSS box model Akken’s HTML, CSS guide for getting Started (8)_ Floating and positioning

🌊🌈 About postscript:

Thank you for reading, I hope it can help you if there are flaws in the blog, please leave a message in the comment area or add a public account in the profile of the home page to chat with me privately

Thank you for your advice

Ken has recently created a nuggets technology exchange group for interested players to join[Gold mining technology Exchange Group]Welcome to the exchange and discussion

Original is not easy, “like” + “comment” thanks for supporting ❤