HTML -- a simple and complete web page structure

Sanmuqi 2022-05-14 14:36:45 阅读数:754

htmlsimplecompletewebpage

Preface : This article briefly summarizes A simple and complete web page structure contains the main elements .


Catalog

HTML—— Declare document format :DOCTYPE

HTML—— Root element :HTML 

HTML—— Head element :head 

HTML—— Page title element :title

HTML—— Meta information element :meta

meta——meta brief introduction

meta—— Coding format :charset

meta—— describe :description

meta—— key word :keywords

HTML—— Theme elements :body

Finally, take a simple example


HTML—— Declare document format :DOCTYPE

Why declare document types ?

Because in Web In the world , There are many different document types , So we First All you need to do is declare that the document is HTML, So that the browser can display the web page correctly .

for instance

<!DOCTYPE HTML>  Declares that the document is HTML5

HTML—— Root element :HTML 

<HTML> The element tells the browser that it is a HTML file .

Except for the first line , The rest of the page content should be included in <HTML> In the elements , So it's also called the root element .

HTML—— Head element :head 

Attributes add additional information to the element ,head Element can add more information to the whole web page . Can be used in head The labels in are <base>, <link>, <meta>, <script>, <style>, as well as <title>.

HTML—— Page title element :title

title The content of the element is the page title , It is one of the necessary elements of a web page .

<title> The content of is usually used as the tag name of the web page , It is written as follows :

<title> Title Content </title>

HTML—— Meta information element :meta

meta——meta brief introduction

meta Element provides metadata information , It mainly includes :

  1. The page code ;

  2. Webpage title ;

  3. Web description ;

  4. Web keywords .

This information , On the one hand, it can be used to tell the browser how to display the page , On the other hand, it can be provided to search engines to retrieve .
Because search engines will pass meta Elemental name and content Property to retrieve the page , So when we add appropriate keywords and descriptions , Pages are easier to find by search engines .

meta—— Coding format :charset

Usage is as follows :

<meta charset="utf-8">

This line defines the encoding used by the browser when parsing web documents . Usually , We use utf-8 Code to support national languages . 

meta—— describe :description

Mainly for : Description information , Use one sentence to tell the search engine what the main content of our web page is .

Usage is as follows :

<meta name="description" content=" One sentence description of web content ">

meta—— key word :keywords

Mainly for : Similar to description ,keyword The same is to send information to search engines .

keywords Keyword information can use multiple parallel keywords to tell the search engine what the keywords of our web content are .

Usage is as follows :

<meta name="keywords" content=" Key words 1 , Key word two , Key words three ">

HTML—— Theme elements :body

<body> Element is the body of a document , The contents of the document are contained in <body> In the elements , Finally appear on the web page .

Usage is as follows

<body>

</body>

Finally, take a simple example

<!DOCTYPE html>
<html>
<head>
<title> Self introduction </title>
<meta charset="utf-8" >
<meta name="description" content=" A website that outputs hello ">
<meta name="keywords" content=" Hello ">
</head>
<body>
<h1 align="center"> Hello </h1>
</body>
</html>

  Self summary : I wanted to briefly summarize meta Of meta information elements , However, it is found that it is more convenient to summarize into the complete structure of the web page .


Come on together !

版权声明:本文为[Sanmuqi]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/134/202205141431542083.html