A must-read for zero basics of HTML - getting started with HTML, programming is so simple
Chapter 5: Element Type (Tag Classification)
Preface
We learned in Chapter 1 that html tags mainly have three components: elements, attributes, and values. The element here actually refers to the label, and the element type is to classify the label. Commonly used element types: block-level elements, inline elements, and inline block elements. This chapter will explain these three element types!
1. Block-level elements
1. Common block-level elements
Common block-level elements include: div, p, h1~h6, ul, ol, li, dl, dt, dd, form, table, etc.
2. Block-level element characteristics
- It occupies an exclusive line and will not be displayed side by side with other elements. It will wrap automatically.
- When the width is not set, the default is to inherit the width of the parent (by default, if the parent is not written, the browser inherits the browser width of 100%).
- When no width is set, it is stretched by the content.
- Width and height can be set, supporting inner and outer margins
<head>
<title>块级元素</title>
<link rel="stylesheet" href="rest.css">
<style>
h1{
background-color: pink;
}
p{
width: 400px;
background-color: purple;
}
div{
width: 600px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h1>我是h1，我没有设置宽和高。我的宽度是继承我父级的宽度，高度是我自己撑开的</h1>
<p>我是p，我设置了宽度。我的高度是我自己撑开的</p>
<div>我是div，我设置了宽和高</div>
</body>
Rendering:
2. Inline elements
1. Common inline elements
Common inline elements include: a, img, span, i, em, sub, sup, strong, etc.
2. Characteristics of inline elements
- It does not occupy the position, shares a row of display with other in-line elements, does not automatically wrap, and leaves a certain gap between the elements in each row.
- The width and height attributes are not supported. The default width and height are 0, and the size depends on the text content.
- Does not support top and bottom margins, does not support auto attribute, can be moved by left and right margins.
- Supports padding to expand content.
<head>
<title>行内元素</title>
<link rel="stylesheet" href="rest.css">
<style>
span, i, em{
background-color: pink;
}
.span1{
/* 行内元素不支持上下外边距和auto属性 */
margin: 10px auto;
}
.span2{
/* 行内元素不支持上下外边距，但支持左右外边距 */
margin: 50px 60px;
}
.span3{
/* 行内元素支持内边距，可由内边距撑开盒子 */
padding: 80px;
}
</style>
</head>
<body>
span class="span0">我是span0</span>
<span class="span1">我是span1</span>
<span class="span2">我是span2</span>
<span class="span3">我是span3</span>
<i>我是i</i>
<em>我是em</em>
</body>
Rendering:
3. Inline block elements
1. Common inline block elements
Common block-level elements include: img, input, textarea, select, button, etc.
2. Characteristics of inline block elements
- It is essentially an inline element and has the characteristics of inline elements. It is displayed side by side without automatic line wrapping. There is a certain gap between each inline block element.
- Supports width and height settings. The width and height are supported by the content, and has the characteristics of some block-level elements.
- Margins are supported, but the auto attribute is not supported.
- Supports padding.
<head>
<title>行内块元素</title>
<link rel="stylesheet" href="rest.css">
<style>
.pic1{
/* 行内块元素：支持宽高设置 */
width: 300px;
height: 300px;
border: 1px solid pink;
/* 行内块元素：支持外边距，但不支持auto属性 */
/* margin:20px auto ; */
margin: 20px;
/* 行内块元素：支持内边距 */
padding: 20px;
}
.pic2{
width: 300px;
height: 300px;
border: 1px solid red;
margin:20px;
padding: 30px;
}
</style>
</head>
<body>
<img src="./img/1.jpg" alt="" class="pic1">
<img src="./img/2.jpg" alt="" class="pic2">
</body>
Rendering:
Note: Inline elements such as img and input can set the width and height.
- Because
img、input and so on are replacement elements. Displaced elements create boxes within their display, which is why some inline elements can set the width and height. - Replacement elements in html include
<img>、<input>、<textarea>、<select>、<object>、<iframe> 和 <canvas>etc. - Most elements of html are non-replacement elements. Except for replacement elements, all elements are non-replacement elements.
3. Solve the gap problem between inline block elements
Let’s look at a piece of code first:
<head>
<title>解决行内块元素间空隙问题</title>
<link rel="stylesheet" href="rest.css">
<style>
div{
width: 700px;
height: 400px;
border: 2px solid red;
}
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>
<img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
</body>
Rendering:
We found that there is a certain gap between the two inline block elements img. This is related to the gap problem between the inline block elements. The solution is as follows:
1. When writing code on the compiler, block part of the code in each line without allowing line breaks, squeeze it into one line, and delete spaces.
2. Reset the text size attribute to 0 (font-size: 0) for the parent of the inline block element, and then redefine the text size in the inline block box.
<div>
<!-- 解决办法一：在编译器上编写代码时，使各行内块部分代码不让换行，删除空格。 -->
<img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<style>
/* 解决办法二：
给行内块元素父级重新设置一下文字大小属性为0（font-size：0），然 后在行内块盒子里再重新定义文字大小。
*/
div{
width: 700px;
height: 400px;
border: 2px solid red;
/* 给行内块元素父级重新设置一下文字大小属性为0（font-size：0） */
font-size: 0;
}
img{
width: 300px;
height: 300px;
/* 然后在行内块盒子里再重新定义文字大小。 */
font-size: 16px;
}
</style>
4. Solve the problem of baseline alignment of inline block elements
vertical-align vertical baseline alignment attribute, attribute value:
top: top alignment
middle: middle alignment
bottom: bottom alignment, etc.
Let’s look at a piece of code first:
<body>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<span>我是span</span>
</body>
Rendering:
We see the text underneath and it's uncomfortable. How to make the text in the middle or at the top involves the baseline alignment of inline block elements.
The solution is to add vertical-align to any element to set a baseline alignment attribute value. Top, middle, or bottom alignment will also be mentioned in the next chapter (2. Supplement)
<head>
<title>解决行内块元素基线对齐问题</title>
<link rel="stylesheet" href="rest.css">
<style>
img{
vertical-align: middle;
}
</style>
</head>
<body>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<span>我是span</span>
</body>
Rendering:
At this point we find that we can set the baseline to be aligned through the vertical-align attribute.
5. Element type conversion
Use the display attribute, attribute value:
display: block: becomes a block-level element
display: inline: becomes an inline element
display: inline-block: becomes an inline block element
display: none: hides the element
Summarize
The above is the element classification compiled by the editor for everyone, and a relatively detailed explanation of the solution to the problem of intra-line block gaps, baseline alignment problems, element type conversion, etc. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.