Basic knowledge of text control tags in html

Block-level elements and inline elements

Block element

A block-level element refers to an element that is displayed as the content of a block. When the browser displays it, it usually starts (and ends) with a new line. Its characteristics are:

• Always start on a new line
• Height, row height and inner and outer margins are all controllable
• The default width is 100% of the container
• You can nest inline elements and other block-level elements

Elements in the line

Inline elements are also called inline elements, which refer to elements that are displayed as a line of content. When displayed in the browser, they will be arranged in one line in sequence without starting a new line. Its characteristics are:

• Line up with other elements
• Uncontrollable height, row height and inner and outer margins
• The width is the width of its content and cannot be changed
• Inline elements can only hold text or other inline elements

Heading paragraph tag

Text title tag

The text title tag <hi>is a double tag, block-level element, used to specify the level of the text content title. 6 levels of title tags are provided in HTML, starting from level 1 <h1>to level 6 <h6>, font size decreases in order.
By default, <h1><h2><h3>the content displayed in most browsers is larger than the default size of the text in the web page <h4>, <h5>and <h6>the content is basically the same size as the default text, and the content of the sum is smaller than the default text.
You can use the align attribute of the label to control the alignment of the text title. The default attribute value is left.

The value of the related attribute align

• left: left aligned
• center: center aligned
• right: right aligned
• justify: justify

Paragraph tag

The paragraph tag <p>is a double tag, block-level element, used to define the text content as a paragraph, the paragraph content starts from a new line, and there is a blank line between the previous paragraph. The align attribute of the label
can be used to <p>set the alignment attribute of the paragraph text, and the value of the related attribute align is the same as that of the <hi>label.

Text decoration label

Newline label

The line break tag <br>is a single tag that can wrap the text without ending the text content. It does not produce a blank line, but multiple consecutive <br>labels can produce the effect of multiple blank lines.

Note : The <br>tag simply starts a new line, and when the browser encounters the <p>tag, it usually inserts some vertical space between adjacent paragraphs.

Horizontal line label

The horizontal line label <hr>is a single label used to generate a horizontal line. You can set the thickness, length, alignment, presence or absence of shadows, and line color attributes of the horizontal line.

Attributes related to horizontal line labels

• size: The thickness of the horizontal line, the unit of length, the default is px
• width: horizontal line length, length unit, default is px
• align: horizontal line alignment, can be left, center, right
• color: The color of the horizontal line. The value can be a color word or a color code.
• noshade: No shadow setting, no shadow when adding, and shadow when not adding.

Text decoration label

The text decoration tags are all double tags, inline elements. Used to set the style of the text. These labels and their function descriptions are shown in the figure below.

font tag and its attributes

The font tag can modify the font size, font and color of the text. The corresponding attributes are:

• size: set the text font size, the value is 1~7
• face: set text font
• color: set the text color, the value is a color word or color code
• align: set the text alignment, the value can be left, center, right, justify

Block label

Block tags <div>are double tags, block-level elements. It is used to typeset large paragraphs, and the webpage can be divided into independent parts to realize the planning and layout of the webpage. You can set the style through the style attribute, or apply the style through the class or id attribute.

Inline label

Inline tags <span>are double tags, inline elements. It is used to combine inline elements in the document to facilitate style definition or use JavaScript to manipulate it. The usage method and <div>label are basically the same.

<span><div>The main difference between label and label is:
<span>label does not wrap, while <div>label wraps; <span>cannot contain <div><p>label, but <div>label can contain both <span>label and <p>label.

Special character quote

When browsing web pages, you often see texts containing special characters, such as mathematical formulas, copyright information, etc. These characters cannot be used directly, and can only be realized by the way of reference shown in the figure below.

Related concepts multiple choice questions and reference answers

Multiple choice

1. Among the following options, those that are not block-level elements are

A、
<h3>

B、
<b>

C、
<p>

D、
<div>

2. In the following options, the size of the displayed content is basically the same as the size of the browser default text ().

A、
<h1>

B、
<h2>

C、
<h4>

D、
<h6>

3. In the following options, a space character in the browser is ().

A、
<&nbsp>

B、
<&nbsp;>

C、
&nbsp

D、
 

4. In the following options, the label used to generate a horizontal line is ().

A、
<hr>

B、
<br>

C、
<line>

D、
<u>

5. Regarding the nesting of tags, which of the following options is correct ().

A.
<span>
<div>
Is this nesting correct?
</div>
</span>
B.
<b>
<h1>
Is this nesting correct?
</h1>
</b>
C.
<div>
<h1>
Is this nesting correct?
</h1>
</div>
D.
<span>
<h1>
Is this nesting correct?
</h1>
</span>

Reference answer

1、B
2、C
3、D
4、A
5、C