Home Web Front-end H5 Tutorial What is an HTML file? A preliminary understanding of HTML files

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>
Copy after login

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 < and ends 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>This is a heading</h2>
<h3>This is a heading</h3> 
<h4>This is a heading</h4> 
<h5>This is a heading</h5> 
<h6>This is a heading</h6>
Copy after login

Paragraph division

Use

and

to divide paragraphs in HTML.

<p>This is a paragraph</p>
<p>This is another paragraph</p>
Copy after login

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 -->
Copy after login

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 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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1231
24
What exactly does H5 page production mean? What exactly does H5 page production mean? Apr 06, 2025 am 07:18 AM

H5 page production refers to the creation of cross-platform compatible web pages using technologies such as HTML5, CSS3 and JavaScript. Its core lies in the browser's parsing code, rendering structure, style and interactive functions. Common technologies include animation effects, responsive design, and data interaction. To avoid errors, developers should be debugged; performance optimization and best practices include image format optimization, request reduction and code specifications, etc. to improve loading speed and code quality.

How to run the h5 project How to run the h5 project Apr 06, 2025 pm 12:21 PM

Running the H5 project requires the following steps: installing necessary tools such as web server, Node.js, development tools, etc. Build a development environment, create project folders, initialize projects, and write code. Start the development server and run the command using the command line. Preview the project in your browser and enter the development server URL. Publish projects, optimize code, deploy projects, and set up web server configuration.

How to make h5 click icon How to make h5 click icon Apr 06, 2025 pm 12:15 PM

The steps to create an H5 click icon include: preparing a square source image in the image editing software. Add interactivity in the H5 editor and set the click event. Create a hotspot that covers the entire icon. Set the action of click events, such as jumping to the page or triggering animation. Export H5 documents as HTML, CSS, and JavaScript files. Deploy the exported files to a website or other platform.

How to make pop-up windows with h5 How to make pop-up windows with h5 Apr 06, 2025 pm 12:12 PM

H5 pop-up window creation steps: 1. Determine the triggering method (click, time, exit, scroll); 2. Design content (title, text, action button); 3. Set style (size, color, font, background); 4. Implement code (HTML, CSS, JavaScript); 5. Test and deployment.

Is h5 same as HTML5? Is h5 same as HTML5? Apr 08, 2025 am 12:16 AM

"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

H5 Code: Accessibility and Semantic HTML H5 Code: Accessibility and Semantic HTML Apr 09, 2025 am 12:05 AM

H5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.

What Does H5 Refer To? Exploring the Context What Does H5 Refer To? Exploring the Context Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

How to solve the h5 compatibility problem How to solve the h5 compatibility problem Apr 06, 2025 pm 12:36 PM

Solutions to H5 compatibility issues include: using responsive design that allows web pages to adjust layouts according to screen size. Use cross-browser testing tools to test compatibility before release. Use Polyfill to provide support for new APIs for older browsers. Follow web standards and use effective code and best practices. Use CSS preprocessors to simplify CSS code and improve readability. Optimize images, reduce web page size and speed up loading. Enable HTTPS to ensure the security of the website.

See all articles