Block-level and line-level elements, special characters, and nesting rules in HTML

If we introduce the nesting rules of basic HTML web page tags, the first thing we need to talk about is the classification of elements. Elements can be divided into block-level elements and line-level elements. What are block-level elements? It can occupy a single line, and you can set the width and height, the default is 100%; the row-level element is the opposite, its content determines its width and height, and special characters are treated as text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML block-level, line-level elements, special characters, nesting rules</title>
</head>
<body>
    <!-- Block element: occupies a single line, width and height can be set, default width is 100% -->
    Block elements are divided into text and container types. Text block elements: p, h1-h6
    Container block elements: div, table, tr, td, frame, ul>li, ol, dl, dt, dd (sequence)
    <!-- Row element: does not occupy a single row, width and height depend on the content-->
    Row element: a img input strong em del span
    Special characters: literal br &nbsp hr
</body>
</html>

The nesting rules are summarized as follows:

1. Block elements can be nested within row elements

2. Row elements can be nested within row elements

3. Row elements cannot be nested within block elements

4. Text block elements cannot be nested within block elements

5. Container block elements can nest block elements

The following blog posts on the basic concepts of HTML web pages, the basic structure of HTML web pages, the introduction of HTML basic tags, images, text, hyperlinks, lists, tables, the interactive principles of HTML basic tags, radio buttons, check boxes, drop-down boxes, and the comparison between web page DIV+CSS layout and ifame traditional layout are all the parts of HTML. The main purpose of learning HTML is to understand its semantic nesting rules to build pages. As for the CSS and interactive logic JS of the page, they are the content to be practiced below!

<<: How to display percentage and the first few percent in MySQL

>>: How to set the position of the block element in the middle of the window

CentOS 7.x docker uses overlay2 storage method

Block-level and line-level elements, special characters, and nesting rules in HTML

CentOS 7.x docker uses overlay2 storage method

Detailed explanation of Linux dynamic library generation and usage guide

A brief discussion on Python's function knowledge

How to use iframe to apply the data of other web pages while maintaining compatibility

Writing daily automatic backup of MySQL database using mysqldump in Centos7

Detailed explanation of the use and difference between relative and absolute in HTML

Django uses pillow to simply set up verification code function (python)

Vue axios interceptor commonly used repeated request cancellation

How to install Postgres 12 + pgadmin in local Docker (support Apple M1)

mysql row column conversion sample code

Recommend

Manually install mysql5.7.10 on Ubuntu

JS ES new features: Introduction to extension operators

How to modify the master-slave replication options in MySQL online

Vue song progress bar sample code

Detailed example of removing duplicate data in MySQL

Vue+Element UI realizes the encapsulation of drop-down menu

Solutions to the Problem of Creating XHTML and CSS Web Pages

Modification of time zone problem of MySQL container in Docker

MySql 5.7.20 installation and configuration of data and my.ini files

Detailed explanation of CSS counter related attributes learning

Teach you a trick to permanently solve the problem of MySQL inserting Chinese characters

How to deal with too many Docker logs causing the disk to fill up

How to install Oracle_11g using Docker

Introduction to the use of HTML element noscript

Element table header row height problem solution