What is an HTML file? A preliminary understanding of HTML files

Aug 13, 2018 pm 07:28 PM

This is an introductory tutorial on HTML5. In order to allow more beginners to find the right direction, this article is all about how beginners can learn HTML5 systematically.

1. What is an HTML file?

The full English name of TML is Hypertext Marked Language, and the Chinese name is "Hypertext Markup Language".

The difference from ordinary text is that an HTML file not only contains text content, but also contains some Tags, which are called "tags" in Chinese.

The suffix of an HTML file is .htm or .html.

You can write HTML files using a text editor.

2. Write an HTML file

The full English name of TML is Hypertext Marked Language, and the Chinese name is "Hypertext Markup Language".

The difference from ordinary text is that an HTML file not only contains text content, but also contains some Tags, which are called "tags" in Chinese.

The suffix of an HTML file is .htm or .html.

You can write HTML files using a text editor.

<html>
<head>
<title>PHP中文网</title>
</head>
<body>
This is my first homepage.<b>This text is bold</b> 
</body>
</html>

To view the first.html file, double-click it. Or open the browser, select Open from the File menu, and then select the file.

The first Tag of this file is . This Tag tells your browser that this is the header of the HTML file. The last Tag of the file is , indicating that the HTML file ends here.

The content between

and is Head information. Head information is not displayed and you cannot see it in the browser. But that doesn't mean the information isn't useful. For example, you can add some keywords to the Head information to help search engines search for your web page.

The content between

and is the title of this file. You can see this title in the title bar at the top of your browser.

The information between

and is the main text.

The text between and is in bold. As the name suggests, it means bold.

HTML files look similar to ordinary text, but they have more tags than ordinary text, such as , , etc. Through these tags, you can tell the browser how to display this file.

HTML Elements

HTML Elements are used to mark text and represent the content of the text. For example, body, p, and title are HTML elements.

HTML elements are represented by Tag, which starts with .

Tag usually appears in pairs, such as

. The starting one is called Opening Tag, and the ending one is called Closing Tag.

Currently, HTML Tags are not case-sensitive. For example, and are actually the same.

Attributes of HTML Elements

HTML elements can have attributes. Attributes extend the capabilities of HTML elements.

For example, you can use a bgcolor attribute to make the background color of the page red, like this:

Another example , you can use the border attribute to set a table to a borderless table. As follows:

Attributes usually appear in pairs of attribute name and value, like this: name="value". In the above example, bgcolor and border are name, red and 0 are value. Attribute values are generally marked with double quotes. The attribute is usually attached to HTML's Opening Tag, not the Closing Tag.

Text title

This example shows you how to define the text title in an HTML file.

HTML uses tags from

to

to define the text title, from large to small. Each text title is its own paragraph.

<h1>This is a heading</h1>
<h2 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h2>
<h3 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h3> 
<h4 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h4> 
<h5 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h5> 
<h6 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h6>

Paragraph division

Use

and

to divide paragraphs in HTML.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Line break

By using the
tag, you can wrap the line without creating a new paragraph.
No Closing Tag. It is a bad habit to use

for line breaks. The correct thing is to use
.

This
is a para
graph with line breaks

HTML comments

In HTML In the file, you can write code comments to explain your code, which will help you and others better understand your code in the future.

Comments can be written between . Browsers ignore comments, and you won't see your comments in the HTML body.

<!--This is a comment -->

Some tips

HTML files will automatically cut off extra spaces. No matter how many spaces you add, they are all counted as one space. A blank line is also considered a space.

Some Tags can separate the text into a paragraph without using

to segment it. For example, title tags such as

[Related recommendations]

The development history of HTML and HTML5

Basic elements of html, allowing you to learn HTML from scratch

The above is the detailed content of What is an HTML file? A preliminary understanding of HTML files. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

How to Add Audio to My HTML5 Website?Mar 10, 2025 pm 03:01 PM

This article explains how to embed audio in HTML5 using the <audio> element, including best practices for format selection (MP3, Ogg Vorbis), file optimization, and JavaScript control for playback. It emphasizes using multiple audio f

How do I use the HTML5 Page Visibility API to detect when a page is visible?Mar 13, 2025 pm 07:51 PM

The article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.

How do I use viewport meta tags to control page scaling on mobile devices?Mar 13, 2025 pm 08:00 PM

The article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159

How to Use HTML5 Forms for User Input?Mar 10, 2025 pm 02:59 PM

This article explains how to create and validate HTML5 forms. It details the <form> element, input types (text, email, number, etc.), and attributes (required, pattern, min, max). The advantages of HTML5 forms over older methods, incl

How do I handle user location privacy and permissions with the Geolocation API?Mar 18, 2025 pm 02:16 PM

The article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.

How to Create Interactive Games with HTML5 and JavaScript?Mar 10, 2025 pm 06:34 PM

This article details creating interactive HTML5 games using JavaScript. It covers game design, HTML structure, CSS styling, JavaScript logic (including event handling and animation), and audio integration. Essential JavaScript libraries (Phaser, Pi

How do I use the HTML5 Drag and Drop API for interactive user interfaces?Mar 18, 2025 pm 02:17 PM

The article explains how to use the HTML5 Drag and Drop API to create interactive user interfaces, detailing steps to make elements draggable, handle key events, and enhance user experience with custom feedback. It also discusses common pitfalls to a

How do I use the HTML5 WebSockets API for bidirectional communication between client and server?Mar 12, 2025 pm 03:20 PM

This article explains the HTML5 WebSockets API for real-time, bidirectional client-server communication. It details client-side (JavaScript) and server-side (Python/Flask) implementations, addressing challenges like scalability, state management, an

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks agoByDDD

Hot Tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software