Home Web Front-end HTML Tutorial Basic structure of html document (basic knowledge of web page production)_HTML/Xhtml_web page production

Basic structure of html document (basic knowledge of web page production)_HTML/Xhtml_web page production

May 16, 2016 pm 04:38 PM
html document

How HTML works:

1. Run locally: open the html file with a browser

2. Remote access operation: local browser accesses remote server (tomcal)

It is best not to have Chinese characters in the file name of the webpage, because in the future webpage files will be saved on the server. It is recommended to use English when saving HTML files. You can use either .htm or .html file suffix.

2. Basic structure of HTML document

1. The skeleton of the document: All web files usually consist of the following four pairs of tags to form the skeleton of the document


Copy code
The code is as follows:


< head>
Web page title</title<br /></head></p> <p><body><br>Here is the content to be displayed on the web page<br></body><br></html><br> </div> <br><html> ;....</html>: Marks the beginning and end of the web page. All html elements must be placed in this pair of tags <br><head>....</head>: Marks the web page file The header information, such as title, search engine keywords, etc. The content inside is loaded first <br><title>....: identifies the title of the web page file
. ...: identifies the main part of the web page file, that is, the visible content of the page

2. meta tag

meta tag is used to define file information and describe web pages to facilitate search engines. It should be placed between

Set keywords: (relatively short, used for search engines)
value indicates the keyword to be set, and is used between multiple keywords , separated by
Set description: (used to expand keywords, or provide an overview of the content of the web page)
value Indicates the description to be set. Multiple descriptions are separated by,
Set the author:
The author name is usually the company name
Set the encoding of the web page:

Set the page timing jump:
(content="2;url=http://www.baidu.com" 2 means How many seconds will it take for this webpage to jump to the destination specified by url)

Describe the version of the web page:

You can set other web page information:

Describe the software through which the web page is generated:


Copy code
The code is as follows:

http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">







Basic structure of HTML document _meta tag


meta tag is used to define file information and describe web pages to facilitate search engine searches,


3. Head area

Copy the code
The code is as follows:


Web page titleFile title statement
Some document information, such as the document keywords, description, character set Settings and more.
Hyperlink URL base reference point
JavaScript and VBScript programs
stylesheet can be used to set layout declarations
can reference external files, such as CSS layout samples

3. Syntax of HTML tags

The most basic syntax of HTML is Content. Markers are usually used in pairs with an opening tag and an ending tag. There is also a single tag without an ending tag. Such as


HTML tag types: single tag and double tag
Double tag:
With attributes: ... For example: < font size="3">....
No attribute: ... For example: .... .

Single tag:
With attributes: For example:


(the default is centered)
Without attributes: < ;Mark name> For example:


Copy code
The code is as follows:


2. The physical education teacher said: Whoever dares to wear a skirt in my class will be punished by making her stand on her head!

< /p>



3. Live in my heart, have you paid the rent?
4. You made it impossible for me to get off the stage, and I made it impossible for you to even get on stage

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

See all articles