HTML basic structure_Powernode Java Academy

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

Recommend

How to upload projects to Code Cloud in Linux system

Create a new project test1 on Code Cloud Enter th...

MySQL column to row conversion tips (share)

Preface: Because many business tables use design ...

Detailed tutorial on using the tomcat8-maven-plugin plugin in Maven

I searched a lot of articles online but didn'...

Learning Vue instructions

Table of contents 1. v-text (v-instruction name =...

In-depth understanding of Mysql transaction isolation level and locking mechanism issues

Overview Databases generally execute multiple tra...

HTTP Status Codes

This status code provides information about the s...

Steps to run ASP.NET Core in Docker container

There are too much knowledge to learn recently, a...

How to find identical files in Linux

As the computer is used, a lot of garbage will be...

On good design

<br />For every ten thousand people who answ...

Summary of precautions when writing EDM in HTML (general precautions for sending emails)

Format Encoding 1. Please set the page width with...

How to wrap HTML title attribute

When I was writing a program a few days ago, I wan...

Implementation of CSS3 3D cool cube transformation animation

I love coding, it makes me happy! Hello everyone,...

How to solve the problem that the project in eclipse cannot be added to tomcat

1. Right-click the project and select properties ...

JavaScript event delegation principle

Table of contents 1. What is event delegation? 2....

Detailed example of MySQL subquery

Subquery Classification Classification by returne...