Home > Web Front-end > HTML Tutorial > Introduction to html block-level and row-level elements

Introduction to html block-level and row-level elements

王林
Release: 2020-02-17 18:02:33
forward
3330 people have browsed it

Introduction to html block-level and row-level elements

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 &nbsp hr
</body>
</html>
Copy after login

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!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template