HTML basics HTML structure

HTML basics HTML structure
What is an HTML file?
HTML stands for Hyper Text Markup Language.
An HTML file is a text file that contains markup.
These tags control how the browser displays the page.
HTML files must have an htm or html extension.
HTML files can be created with a simple text editor.


Let me first briefly introduce the HTML language (what we are instilling here is that you can actually operate it). HTML is the universal language of the Internet, a simple and universal full-featured markup language. It allows web page creators to create complex pages that combine text and images, and these pages can be viewed by anyone else on the Internet, regardless of the type of computer or browser used. Is it amazing? Not at all, because what you are seeing now is a page written in this language.

Yes, HTML is not very magical, just because you don't know it very well. Now let's start to unveil it. First, let's introduce the composition structure of HTML:

The structure of HTML (head, eyes, body -- just like a person, right?)

1. Head. As long as you have learned English, you should know how to write "头" in English! Yes, it is HEAD; therefore, the HTML writing of the head is <head>head content</head>. Isn’t it simple? Please note that these two are very similar, except that the latter one has an extra “/” symbol than the former. This will be used frequently in the future.

2. Eyes. Just like human eyes, they are windows to the soul, and the eyes of a web page should be its title. How should the title be described? title,yes! As we all know, eyes are on the head, so: <title>Title</title> should be placed between <head> and </head>. That is
<head><title>Title</title></head>

3. Body. The body is the most important part of a web page, because what we have talked about before is not what is displayed on the page, and what you see is the body of the page (of course, its TITLE can be seen in the upper left corner of the browser), the body----BODY, its writing method is: <body>page content</body>
Finally, don't forget to combine these parts into one - a web page, so we wrap them with <html></html>.
Okay, let's take a general look at the structure of the web page:

Copy code
The code is as follows:

<html>
<head>
<title>
title
</title>
</head>
<body>
Page Contents
</body>
</html>

Would you like to try it?
If you are running Windows, open Notepad and enter the following text:

Tip: You can modify some of the code before running

Save this file as "mypage.htm".
Double-click the file directly; or start the browser -> select "Open" (or "Open Page") in the File menu, a dialog box will appear -> select "Browse" (or "Choose File") -> locate the HTML file you just created - "mypage.htm", select it and click "Open" ->. Then in the dialog box, you will see the address of this file, for example: "C:\MyDocuments\mypage.htm" -> click "OK", the browser will display this page.


About HTML Editor:
With some WYSIWYG editors, such as frontpage, dreamwaver, you can easily create a page without writing code in plain text.
But if you want to become a skilled web developer, we strongly recommend that you write code in a plain text editor, which helps to learn the basics of HTML.

FAQ Q: I have written the HTML file, but I cannot see the result in the browser. Why?
A: Please make sure you save the file and use the correct file name and extension, for example: "c:\mypage.htm", and make sure you use the same file name when opening it with a browser.
Q: I edited an HTML file, but the changes are not displayed in the browser. Why?
A: The browser caches your pages so it doesn't have to read the same page twice. You modified this page and the browser doesn't know it. Please use the Refresh/Reload button to force the browser to read the edited page.

<<:  Detailed steps to install CentOS7 system on VMWare virtual machine

>>:  A quick solution to the problem of PC and mobile adaptation

Recommend

JavaScript basics for loop and array

Table of contents Loop - for Basic use of for loo...

JavaScript to achieve all or reverse selection function

This article shares the specific code of JavaScri...

MySQL partitions existing tables in the data table

Table of contents How to operate Operation proces...

Solution to Navicat Premier remote connection to MySQL error 10038

Remote connection to MySQL fails, there may be th...

Detailed explanation of how to configure Nginx web server sample code

Overview Today we will mainly share how to config...

Use the njs module to introduce js scripts in nginx configuration

Table of contents Preface 1. Install NJS module M...

Solve the problem of ifconfig being unavailable in docker

Recently, when I was learning docker, I found tha...

Detailed examples of Linux disk device and LVM management commands

Preface In the Linux operating system, device fil...

Win2008 Server Security Check Steps Guide (Daily Maintenance Instructions)

The document has been written for a while, but I ...

Details of Linux file descriptors, file pointers, and inodes

Table of contents Linux--File descriptor, file po...

Some improvements in MySQL 8.0.24 Release Note

Table of contents 1. Connection Management 2. Imp...

Implementation of CSS border length control function

In the past, when I needed the border length to b...

JavaScript implements countdown on front-end web page

Use native JavaScript to simply implement the cou...

Detailed explanation of using grep command in Linux

Linux grep command The Linux grep command is used...

A brief analysis of the basic implementation of Vue detection data changes

Table of contents 1. Object change detection 2. Q...