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   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
Recommend
Example code of CSS responsive layout system
Responsive layout systems are already very common...
Detailed explanation of the middleman mode of Angular components
Table of contents 1. Middleman Model 2. Examples ...
Reasons and solutions for being unable to remotely connect to MySQL database under CentOS7
Preface I recently encountered a problem at work....
How to change the color of the entire row (tr) when the mouse stops in HTML
Use pure CSS to change the background color of a ...
Some settings of Div about border and transparency
frame: Style=”border-style:solid;border-width:5px;...
How to run MySQL using docker-compose
Directory Structure . │ .env │ docker-compose.yml...
Solution to MySQL connection exception and error 10061
MySQL is a relational database management system ...
How to use the flash plug-in to call the PC's camera and embed it into the TML page
Preface The reason for writing this article is mai...
Practical Optimization of MySQL Paging Limit
Preface When we use query statements, we often ne...
Sample code for using CSS to write a textured gradient background image
The page length in the project is about 2000px or...
MySQL 8.0.17 installation and configuration graphic tutorial
This article records the graphic tutorial of MySQ...
How to use the realip module in Nginx basic learning
Preface There are two types of nginx modules, off...
HTML multi-header table code
1. Multi-header table code Copy code The code is a...
How to add ansible service in alpine image
Use apk add ansible to add the ansible service to...
Solution to the conflict between nginx and backend port
question: When developing the Alice management sy...