HTML foundation

May 02, 2021 11:06 HTML

Table of contents

HTML Foundation - 4 instances

This chapter describes examples of labels that are more commonly used in HTML.

You may not have been exposed to these instances yet, but don't worry, you'll be able to master them by reading this chapter!

HTML title

HTML headings are defined by the hashtags .

h an header the English header title, which is ubiquitous and has a wide range of applications: website structure, writing, PPT, etc.

Here are six title element tags -- <h1> <h2> <h3> <h4> <h5> <h6> element represents a different level of content in the document:

The main title (the main <h1> the secondary subheadings (subheadings), the third-level subheadings (sub-subheadings), and the size of the <h4> fonts decreases in turn. <h2> <h3> <h5> <h6>







Try it out . . .

You can also try to challenge the settings of an h2 title through a hands-on experiment:

HTML Title Real-World Experiment

HTML paragraph

HTML paragraphs are defined by the tag <p> P is an paragraph paragraph and is often used to create a paragraph that, just like your writing, allows you to do a real-life walkthrough.


Try it out . . .

The following example describes the hierarchy of headings and paragraphs:



<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>


<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>




Try it out . . .

What the elements involved in the above examples represent depends entirely on what the author edits, as long as the hierarchy is reasonable. When creating such structures, you only need to keep the following in mind:

  • First, you should only use <h1> for each page, which is the main title, and all other titles are below the hierarchy.
  • Second, make sure that the titles are used in the correct order in the hierarchy. <h3> for the subheading, followed by <h2> for the subheading, which makes no sense and can lead to strange results.
  • Finally, of the six title levels available, you should ensure that no more than three are used at the title level on each page, unless you think it is necessary to use more. D ocuments with many heading levels can become difficult to operate and navigate. I n this case, if possible, it is recommended that you spread the content across multiple pages.

Spaces in HTML

There may be a lot of spaces in the code -- this is not necessary

The following two snippets are equivalent:

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗        很

呆 萌。</p>

Try it out . . .
No matter how many spaces you use, including space characters, including line breaks, when rendering the code, the HTML interpreter reduces the consecutive space characters to a single space character.

Why do we use so many spaces?

The answer is for readability - if your code is well formatted, it's easy to understand your code, and it's confusing. In our HTML code, we have each nested element indented in two spaces.

The style you use to format your code depends on you (for example, how many spaces you use for each layer indentation), but remember that you should stick to a certain style.

HTML links

HTML links are <a> . a label, also known as the anchor anchor(锚点) can be used to link to an external address to implement page jump functionality, or to link to a part of the current page to implement internal navigation.

<a href="">这是一个链接</a>

Try it out . . .

Tip: Specify the address of the link in the href property.

(You'll learn more about attributes later in this tutorial)

HTML Link Real-World Quiz

HTML image

HTML images <img> the img element to add a picture to your site, and use the src property to point to the specific address of a picture.

For example: slt;img src "" rel"external nofollow"

Note: img is a self-closing element and does not require an end tag.

<img src="logonew2.png" width="206" height="36">

Try it out . . .

Note: The name and size of the image are provided as attributes.

HTML Images Reality Quiz

HTML emphasis

In human language, in order to highlight the meaning of a sentence, we usually emphasize certain words, and we usually want to mark certain words as a focus or to indicate some degree of difference. HTML provides many semantic elements and allows us to mark the body content with the meaning of those elements, and in this section we will see the most common small number of elements.

In HTML, we can em(emphasis) element to mark a situation where the browser's default style is italic:

<p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>

Try it out . . .

In HTML, we can also mark such a request with the <strong>(strong importance) , which is bold by the browser default:


<p>我就指望你<strong>不会</strong> 迟到!</p>

Try it out . . .

Note: For different font styles, we should use elements and some CSS styles.