HTML basic structure_Powernode Java Academy

Many times when learning web page development, the first thing that impresses us is the web page ending with html or htm suffix. We classify this type of web page as a static web page, except for pseudo-static ones.

So what is the difference between html or htm and other web pages ending with suffixes such as php, asp, aspx, jsp, etc.?

First of all, HTML pages are static. There is no program execution from beginning to end. They are pure HTML language. They are sent directly to the browser and presented to the viewer without being processed by the server.
Web pages ending with other suffixes are relatively dynamic web pages. Dynamic pages are processed by the server through respective program translation and database operations, and then the browser sends the processed data program to the user. The web page content data can change with the background data.

So what is the basic language structure of HTML?

Let's take a look at the HTML structure first:

 <html>  
<head>  
<title>Place the article title</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //This is the web page encoding, now it is gb2312 
<meta name="keywords" content="Keywords" />  
<meta name="description" content="Description of this page or keyword description" /> 
</head> 
<body> 
This is the main content</body> 
</html>

Complete HTML includes html DOCTYPE declaration, title, head, web page coding declaration, etc.

Initially with full html source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN"
 "http://wwwworg/TR/xhtml1/DTD/xhtml1-transitionaldtd"> 
<html xmlns="http://wwwworg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Title part - power node</title> 
<meta name="keywords" content="Keywords" />  
<meta name="description" content="Description of this page or keyword description" /> 
</head> 
<body> 
Contents</body> 
</html>

The latest complete HTML structure-HTML source code (recommended):

<!DOCTYPE html>  
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Webpage title</title> 
<meta name="keywords" content="Keywords" /> 
<meta name="description" content="Description of this page" /> 
</head> 
<body> 
Web page content</body> 
</html>

Whether it is html or a dynamic page with other suffixes, the html language structure is the same, but it ends with a different suffix when naming the web page file.

1. Whether it is a dynamic or static page, it starts with "<html>" and ends with "</html>" at the end of the web page.

2. After "<html>" comes the page header "<head>". The content in <head></head> cannot be displayed in the browser. This is the area for the server, browser, link external JS, a link CSS style, etc., and the web page title is placed in "<title></title>".

3. Then the contents of these two tags “<meta name="keywords" content="Keywords" /> <meta name="description" content="Description of this page or keyword description" />” are for search engines to see the keywords of this page and the main content of this webpage, etc., which can be used by SEO.

4. Next is the main text "<body></body>", which is often called the body area. The content placed here can be presented to users through the browser. The content can be in table layout format, DIV layout format, or directly text. This is also the most important area, the content presentation area of the web page.

5. It ends with “</html>”, which means the web page is closed.

The above is a complete and simplest basic structure of HTML language. Through the above, you can add more styles and content to enrich the web page.
Note: Web pages generally require each tag to be closed according to the xhtml standard, such as: starting with <html> and ending with </html>; if there is no closure, such as <meta name="keywords" content="Keywords" />, there is no </meta>, so <meta /> is required to complete the closure.

The above is the simplest HTML language structure in layman's terms. If you need to see more rich HTML language structures, you can open a website's web page, then click "View" on the browser - then click "View Source Code" to see the HTML language structure of the web page. In this way, you can analyze the HTML language structure and content of this web page based on the source code.

<<: Common considerations for building a Hadoop 3.2.0 cluster

>>: Some wonderful uses of URL objects in JavaScript

A complete list of meta tag settings for mobile devices

HTML basic structure_Powernode Java Academy

A complete list of meta tag settings for mobile devices

JS quickly master ES6 class usage

CentOS 8 is now available

Detailed explanation of MySQL slow queries

TypeScript interface definition case tutorial

Install mysql5.7.13 using RPM in CentOS 7

React homepage slow loading problem performance optimization case detailed explanation

MySQL infrastructure tutorial: detailed explanation of the query statement execution process

CSS implements five common 2D transformations

The actual process of encapsulating axios in the project

Recommend

How to solve the problem of Chinese garbled characters when inserting table data into MySQL

vue.js downloads pictures according to picture url

Detailed explanation of the difference between JavaScript onclick and click

Optimization methods when Mysql occupies too high CPU (must read)

How to quickly modify the table structure of MySQL table

MySQL infobright installation steps

Ubuntu terminal multi-window split screen Terminator

Tutorial on deploying multiple servers with WebApi and configuring Nginx load balancing

Windows Server 2012 No Remote Desktop License Server can provide a license, and the remote session is disconnected

Implementation of sharing data between Docker Volume containers

In-depth explanation of hidden fields, a new feature of MySQL 8.0

Use scripts to package and upload Docker images with one click

Detailed explanation of the update command for software (library) under Linux

After idea publishes web project, Tomcat server cannot find the project and its solution

Vue.js cloud storage realizes image upload function