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>

<h1>这是标题1</h1>

<h2>这是标题2</h2>

<h3>这是标题3</h3>

<h4>这是标题4</h4>

<h5>这是标题5</h5>

<h6>这是标题6</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.

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

Try it out . . .

The following example describes the hierarchy of headings and paragraphs:

<h1>三国演义</h1>

<p>罗贯中</p>

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

<p>话说天下大势,分久必合,合久必分。</p>

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

<p>且说董卓字仲颖</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒</p>


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="http://www.w3cschool.cn">这是一个链接</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 "https://www.your-image-source.com/your-image.jpg" 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>

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


Try it out . . .

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