May 02, 2021 HTML
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 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>
You can also try to challenge the settings of an h2 title through a hands-on experiment:
HTML Title Real-World Experiment
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.
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>
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:
<h1>
for each page, which is the main title, and all other titles are below the hierarchy.
<h3>
for the subheading, followed by
<h2>
for the subheading, which makes no sense and can lead to strange results.
There may be a lot of spaces in the code -- this is not necessary
The following two snippets are equivalent:
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 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.
Tip: Specify the address of the link in the
hrefproperty.(You'll learn more about attributes later in this tutorial)
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.
Note: The name and size of the image are provided as attributes.
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:
In HTML, we can also mark such a request with the
<strong>(strong importance)
, which is bold by the browser default:
Note: For different font styles, we should use elements and some CSS styles.