Home > Article > Web Front-end > Introduction to html block-level and row-level elements
Introduction to html block-level and row-level elements
- 王林forward
- 2020-02-17 18:02:333303browse
html elements can be divided into block-level elements and row-level elements.
What are block-level elements?
It can occupy a line by itself, and can set the width and height. The default is 100%;
(recommended related tutorials: html tutorial)
Row-level elements On the contrary, its content determines its width and height, and special characters are treated as text.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> HTML块级、行级元素，特殊字符，嵌套规则</title>
</head>
<body>
<!-- 块元素:独占一行，可以设置宽高、默认宽度100% -->
块元素分为文字类和容器类
文字类块元素:p、h1——h6
容器类块元素：div、table、tr、td、frame、ul>li、ol、dl、dt、dd（序列）
<!-- 行元素:不独占一行，宽高度取决于内容 -->
行元素：a img input strong em del span
特殊字符：文字 br   hr
</body>
</html>Nesting rules:
1. Block elements can be nested in row elements;
2. Row elements can be nested Nested line elements;
3. Line elements cannot be nested in block elements;
4. Text block elements cannot be nested in block elements;
5. Container classes Block elements can nest block elements.
If you want to learn more programming knowledge, please visit the Programming Tutorial column of the php Chinese website!
The above is the detailed content of Introduction to html block-level and row-level elements. For more information, please follow other related articles on the PHP Chinese website!