3-1 line feed label <br>
A line feed label is a single label, also known as an empty label, and does not contain any or any content. You only need to use the <br> label in any location in the HTML file. When the file is displayed in the browser, the content after the tag is displayed in the next line.
See the following example: 3-1html
<HTML>
<Head>
<Title> example without line breaks </title>
</Head>
<Body>
No line feed mark: The Yellow River enters the current when the snow passes through the mountains in the white sky. To go to the next level.
<Br> There are line breaks: <br> boarding the Sparrow Tower <br> the Yellow River enters the current when the day falls to the mountains. <br>. <Br> if you want to learn more, <br> go to the next floor.
</Body>
</Html>
3-2 Change paragraph labels <p> and attributes:
The text identified by the <p> label represents the text of the same paragraph. The spacing between different paragraphs is equal to two linefeeds consecutively, that is, to separate a blank line to distinguish different paragraphs of a text. It can be used independently or in pairs. When used separately, the start of the next <p> indicates the end of the previous <p>. A good habit is to use them in pairs.
Format:
<P>
<P align = parameter>
Here, align is the attribute of the <p> label. The attribute has three left, center, and right parameters to set the alignment of the Left, center, and right positions of the paragraph text.
Example: 3-2html
<HTML>
<Head>
<Title> test the segmentation control label </title>
</Head>
<Body>
<P> flowers have nothing. They only have slight, clear, and helpless complaints in the wind,
Just like the fallen yarn, who suffered a fatal injury, sent a dying cry sadly and helplessly. </P>
<P align = "right"> Perhaps, this is the most miserable and sad end of the flower's short life. </P>
<P align = center> and beautiful bitter Short flowering period </P>
<P align = "Left"> it is an instant episode in the last sad autumn breeze. </P>
</Body>
</Html>
3-3 display text labels as is <PRE>
You can use the <PRE> label to retain the format of the original text layout, the method is to add the start tag <PRE> and end tag </PRE> before and after the prepared text layout content.
Example: 3-3html
<HTML>
<Head>
<Title> display text labels as is </title>
</Head>
<Body>
<PRE>
The day is full of mountains,
The Yellow River enters the current.
Thousands of miles,
To the next floor.
</PRE>
</Body>
</Html>
3-4 align labels in center <center>
The text is displayed in the center using the <center> label on the page. <center> is a pair of labels. Add <center> at the beginning of the content to be centered and add </center> at the end.
Example: 3-4html
<HTML>
<Head>
<Title> align tags in the center </title>
</Head>
<Body>
<Center>
Fuling for Meng Haoran <p>
The old man is in Hangzhou,
Huanghua went to the lower state in March.
Gu fan Xiaoying bishan,
However, we can see the growth of the Yangtze River.
</Center>
</Body>
</Html>
3-5 citation tags (contraction tags) <BLOCKQUOTE>
<BLOCKQUOTE> A tag can be used to create a quote. It is especially suitable for references of long texts. When the citation is displayed, it is automatically shifted to the right, and several spaces are left blank to distinguish between them.
Example: 3-5html
<HTML>
<Head>
<Title> citation tag </title>
</Head>
<Body>
Spring <br>
<PRE>
<BLOCKQUOTE>
Hope, Hope, Dongfeng is coming, spring is approaching. <Br>
Everything is just like waking up, And you are glad to open your eyes. The sun blushes and the water rises.
The grass was secretly drilled out of the earth, tender and green. In the garden, in the field, look at a large film full. Sit down, lie down, roll two, kick a few balls, run a few times, catch a few
Go back to the bucket. The wind is light and quiet, and the grass is soft.
</BLOCKQUOTE>
<BLOCKQUOTE>
Peach Tree, apricot tree, pear tree, you don't let me, I don't let you, it's full of flowers. Red like fire, pink like Xia, white like snow. Flowers have a sweet taste; closed eyes, the village seems to have
The sutra is full of peach, apricot, and pear. Thousands of bees are buzzing, and butterflies fly in and out. Wild flowers are everywhere: Miscellaneous, with names, no names, scattered in the grass
Like eyes, stars, and blinks.
"Blow the face is not cold Willow Wind", good, like your mother's hand stroked you. The wind brings some new soil breath, mixed with the smell of grass, and the fragrance of various flowers, are slightly wet
Brewing in the air. The birds will nest in the flowers and young leaves, happy to get up, call friends accompanied to sell crisp throat, sing a wan Song, with the light wind flow to meet. Shepherd on ox's back
At this time, it was very bright.
Rain is the most common. It takes three or two days. Don't bother. Look, like a Ox hair, like a flower needle, like a thin silk, closely oblique woven, the roof of the people all cage a thin layer of smoke. Leaves are green
Bright. The grass is also green to your eyes. In the evening, the light was on, and a little bit of yellow light turned out a quiet and peaceful night. In the country, on the small road, on the side of the stone bridge, there is a slow umbrella
People who walk slowly; there are still working peasants in the ground, wearing yarn and yarn. Their houses are quiet in the rain.
</BLOCKQUOTE>
<BLOCKQUOTE>
There are more kites and more children on the ground. In the countryside of the city, every household, old, old, and small, all come out one by one. Shuhuo bones and muscles
Shake your spirits and do everything separately.
"One year is in spring." When I first started, I had time and hope.
Spring is like a newly launched doll, which is new from the beginning to the foot and grows.
Spring is like a little girl, walking with a smile.
Spring is like a strong young man with an iron arm and waist. He leads us forward.
</BLOCKQUOTE>
</PRE>
</Body>
</Html>
3-6 horizontal separator labels <HR>
<HR> A label is a separate label and a horizontal line label. It is used to separate paragraphs and paragraphs, so that the document structure is clear and the text is organized in a more neat manner. You can set the attribute value of the <HR> label to control the style of the horizontal separator.
<HR> tag attributes
Attribute |
Parameters |
Function |
Unit |
Default Value |
Size |
|
Set the horizontal separator width |
Pixel (pixels) |
2 |
Width |
|
Set the horizontal separator width |
Pixel (pixels), % |
100% |
Align |
Left enter right |
Set the horizontal separator alignment |
|
Center |
Color |
|
Set the color of the horizontal separator. |
|
Black |
Noshade |
|
Remove 3D shadows from horizontal Separators |
|
|
Example: 3-6html
<HTML>
<Head>
<Title> horizontal separator label test </title>
</Head>
<Body>
<Center>
Chunxiao
<HR>
Xiaoxiao,
<HR size = "6">
Birds are everywhere.
& Lt; HR width = "40%" & gt;
Night storms,
<HR width = "60" align = "Left">
How much is spent?
<HR size = "6" width = "30%" align = "center" noshade color = Red>
</Center>
</Body>
</Html>
3-7 signature tag <address>
<Address> A signature tag is used to indicate who or which company the webpage is written and other related information. The text displayed between <address> </address> labels is italic.
Example: 3-7html
<HTML>
<Head>
<Title> signature tag </title>
</Head>
<Body>
<Center>
Leyouyuan
<HR width = "50%" size = "5" color = "ffcc00" align = center>
<PRE>
Xiang Weiyi,
Drive to the ancient city.
The sunset is infinitely good,
It's just near dusk.
</PRE>
<HR width = "50%" size = "5" color = "ffcc00" align = center>
<Address>
[Tang] Li Shangyin
</Address>
</Body>
</Html>
3-8 special characters
In HTML documents, some characters cannot be directly displayed, Such ?. Special characters can be used to express the characters that are not on the keyboard. Some special characters in HTML documents can be obtained on the keyboard, but the browser reports an error when parsing HTML files, for example, "<". To prevent code obfuscation, some code must be used to represent them.
Common special characters in HTML and their code tables
Special or special characters |
Character Code | Special or special characters |
Character Code |
| < | & Lt; | & Copy; | |
| > | & Gt; | × | & Times; |
| & | & Amp; | & Reg; | |
| " | & Quot; | Space | & Nbsp; |
Example: 3-8html
<HTML>
<Head>
<Title> special characters </title>
</Head>
<Body>
<Center>
& Lt; empower the farewell of the ancient grass & gt;
<HR width = "49%" size = "5" align = center noshade>
<PRE>
Leave the original grass,
One year old and one year old.
Not all,
The spring breeze is born again.
</PRE>
<HR width = "49%" size = "5" align = center noshade>
<Address>
Bai Juyi & copy;
</Address>
</Body>
</Html>
3-9 comment tags
You can add comments to HTML documents to search for and remember the file content and identifiers. The comments are not displayed in the browser.
The format of the annotation tag is as follows:
<! -- Comment content -->
Example: 3-9html
<HTML>
<Head>
<Title> comment tag </title>
</Head>
<Body>
<! -- The Body Tag is the body content -->
<Center>
& Lt; empower the farewell of the ancient grass & gt;
<HR width = "49%" size = "5" align = center noshade>
<PRE>
<! Pre stands for the original display layout format>
Leave the original grass,
One year old and one year old.
Not all,
The spring breeze is born again.
</PRE>
<HR width = "49%" size = "5" align = center noshade>
<Address>
Bai Juyi & copy;
</Address>
</Body>
</Html>
3-10 font attributes
3-10-1 title text label <HN>
<HN> the label is used to set the title text in the web page. The text to be set is displayed in bold or in bold.
Title label format: <HN align = parameter> title content </HN>
Note: <HN> tags appear in pairs. <HN> tags are divided into six levels. in
Instance 3-10-1html
<HTML>
<Head>
<Title> set titles at All Levels </title>
</Head>
<Body>
<H1 align = "center"> Level 1 title. </H1>
<H2> Level 2 title. </H2>
<H3> Level 3 title. </H3>
<H4> Level 4 title. </H4>
<H5 align = "right"> Level 5 title. </H5>
<H6 align = "Left"> level 6 title. </H6>
</Body>
</Html>
3-10-2 Text Format control label <font>
<Font> labels are used to control the font, size, and color of text. The control method is implemented by setting properties.
Font Tag attributes
Attribute |
Usage |
Default Value |
Face |
Set text font |
|
Size |
Set the text size |
3 |
Color |
Set text color |
Black |
Format: <font face = value 1 size = value 2 color = value 3> text </font>
Note: If the user's system does not contain the font specified by the face attribute, the default font will be used. The value of the size attribute is 1 ~ 7. You can also use "+" or "-" to set the relative font size. Color Attribute Value: RGB color "# nnnnnn" or color name
Example: 3-10-2html
<HTML>
<Head>
<Title> control text format </title>
</Head>
<Body>
<Center>
<Font face = size = 6 color = "red"> hope, hope, Dongfeng, spring is approaching. </Font> <p>
<Font face = size = + 3 color = "green">
Everything is just like waking up, And you are glad to open your eyes. <P> the sun blushes and the water rises.
</Font> <p>
<Font face = size = 4 color = "# ff00ff">
The grass was secretly drilled out of the earth, tender and green. <P> in the garden, in the field, a large film is full. <P> sit down, lie down, roll two times, kick a few feet, run a few times, catch a few times to hide. <P> the wind is light and quiet, and the grass is soft.
</Font>
</Center>
</Body>
</Html>
3-10-3 labels for specific text styles
In the display of relevant text, some special fonts or fonts are often used to emphasize, highlight, and differentiate to achieve the effect of the prompt. In HTML, tags used for this function can be divided into two types: physical type and logical type.
1. Physical type
(1) bold labels <B>
Text placed between the <B> and </B> labels is displayed in bold.
(2) italic label <I>
Text placed between the <I> and </I> labels is displayed in italic.
(3) Underline label <u>
Text placed between the <u> and </u> labels is displayed in the following line.
Instance 3-10-31html
<HTML>
<Head>
<Title> physical font type </title>
</Head>
<Body>
<Center>
<Font color = "# ff0000" size = "+ 2"> <B> the text is in bold </B> </font> <br>
<I> the text is italic </I> <br>
<U> these texts are underlined </u>
</Center>
</Body>
</Html>
2. Logical type
The logical type is to use some labels to change the font format and style, so as to generate the display effect that some viewers are accustomed to or agreed on. There are eight common logical type labels, the text placed between labels is controlled. See examples of common logical tags below
Instance 3-10-32htrml
<HTML>
<Head>
<Title> logical font type </title>
</Head>
<Body>
<PRE>
Em label: <em> the text to be emphasized, usually in italics </em>
Strong label: <strong> displays the highlighted text in bold. </strong>
Cite labels: <cite> used for citation and examples, usually italics </CITE>
Code Tag: <code> indicates this is a group of Code </code>
Small label: <small> the specified text is displayed as a small character </small>
Big label: <big> the required text is displayed with an uppercase letter </big>
SAMP label: <SAMP> display a commonly used computer font, that is, a font with the same width </SAMP>
KBD label: <KBD> the text entered by the user is usually displayed as a thick wide font </KBD>
VaR label: <var> used to represent variables, usually in italics </var>
Dfn label: <dfn> indicates a definition or description, which is usually displayed as italic </dfn>
Sup Tag: 12 <sup> 2 </sup> = 144
Sub Tag: the molecular formula of ferrous sulfate is Fe <sub> 2 </sub> SO <sub> 4 </sub>
</PRE>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
