Paragraph layout and line breaks in HTML web pages

The appearance of a web page depends largely on its layout. When there are long paragraphs of text on a page, they are usually divided into paragraphs, and there are also extremely strict divisions for line breaks. This section starts with the detailed settings of paragraphs, so that readers can use tags to handle large paragraphs of text freely after learning.
Text and paragraphs in HTML web pages Through the study of the previous chapter, readers have a solid foundation in setting up the overall presentation of web pages. However, readers not only want to see text on the web page, but also want the text on the web page to be typeset and modified. In this chapter, you will learn simple text layout, decoration, scrolling text and hyperlinks. Hyperlinks are ubiquitous in website development and are the focus of web pages.
When studying this chapter, create a directory named chapter3 under the D:\web\ directory, move the files from the previous chapter to D:\web\chapter3, and classify them. This chapter continues to create sample files in the D:\web\ directory, which makes it convenient to test the sample files using IIS.
— Note: Similar treatment will be adopted in subsequent chapters and no repetition will be given. For example, the files in Chapter 4 are classified into D:\web\chapter4.
4.1 Paragraph layout and line breaks The appearance of a web page depends largely on its layout. When there are long paragraphs of text on a page, they are usually divided into paragraphs, and there are also extremely strict divisions for line breaks. This section starts with the detailed settings of paragraphs, so that readers can use tags to handle large paragraphs of text freely after learning.
4.1.1 Divide large paragraphs of text into paragraphs To simply divide text into paragraphs, the tags are often used, that is, the tag is used at the beginning of a paragraph and the tag is used at the end of a paragraph. Some web pages omit when dividing into sections, that is, they are used as single tags, because the tag at the beginning of the next section means the end of the previous section.
— Note: I do not recommend using as a single tag, as this will result in non-standard code and prone to errors.
Create a web page file in the D:\web\ directory, name it p.htm, and write the code as shown in Code 4.1.
Code 4.1 Segment settings: p.htm

<html>
<head>
<title>Segment settings</title>
</head>
<body>
Film Biweekly: Special Review of "Infernal Affairs III: Ultimate Infernal Affairs"
It’s just the beginning
At the end of 2002, the myth began. In the autumn and winter of 2003, it reached its climax and finale. "Infernal Affairs" claims to be based on Buddhist concepts. Light and darkness, survival and extinction, existence and nothingness are entangled in one, and then suddenly fall apart. It is also a process of enrichment and unification. Where there is a cause, there is an effect; where there is sin, there is a fate. The beauty of the environment and the appearance lies in the limits of explanation in words. They cannot be revealed, nor can they be silenced. They rely on each other. The sound of the heart is always there, questioning oneself and questioning time and space. These are the best of times, these are the worst of times, people of almost every era say this. However, in the "Vimalakirti Sutra, Chapter 7: Contemplating All Living Beings" it says: If there is no dwelling, there is no root. Starting from the body's words and deeds, passing through the level of indescribable debate, it initially reaches the realm of self-reflection of existence, and finally it all comes down to the attitude of survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror images of fate. They can see themselves in each other, fighting, bursting out, being majestic, and showing off, as if they are doomed and distorted lives, hence "Infernal Affairs". 
Gu Zhun said from idealism to empiricism, Wang Xiaobo said we should be wary of tyrants and heroes, who is the hero? Where do they come from? So what if they come? Do we still need heroes in this era? When I was editing this issue of E Forum, I felt somewhat relieved. From the text, I could see that everyone was thinking. After all, we are no longer a generation that blindly follows others. In my opinion, entertainment has never been just entertainment itself. We can see a world from a drop of water, a flower, or a grain of sand. We are bound to think of more and our understanding can be infinitely varied from a movie. Each of us makes up this world, and whether this world is good or bad, we all have a part in it. Each of us has our own life, with strengths and weaknesses, which is the basis for our common progress. 
</body>
</html>
Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.1.

Figure 4.1 Paragraph settings Through the tags, the layout of large paragraphs of text is neat and tidy.
4.1.2 Add spaces to text Looking closely at Figure 4.1, the segmentation in the figure feels a bit awkward because there is no character space at the beginning of each paragraph.
— Note: According to Chinese writing habits, the first line of a paragraph must be separated by two Chinese characters.
As we have learned in the previous chapter, directly pressing the space bar on the keyboard in HTML code will not be displayed on the page. HTML uses " " to represent a space character (English space character). Since one Chinese character takes up the width of two English characters, add four " " characters at the beginning of the first line of the paragraph and modify the code of p.htm as shown in Code 4.2.

Code 4.2 Space character settings: p.htm

<html>
<head>
<title>Segment settings</title>
</head>
<body>
Film Biweekly: Special Review of "Infernal Affairs III: Ultimate Infernal Affairs"
It’s just the beginning
    At the end of 2002, the myth began. In the autumn and winter of 2003, it reached its climax and finale. "Infernal Affairs" claims to be based on Buddhist concepts. Light and darkness, survival and extinction, existence and nothingness are entangled in one, and then suddenly fall apart. It is also a process of enrichment and unification. Where there is a cause, there is an effect; where there is sin, there is a fate. The beauty of the environment and the appearance lies in the limits of explanation in words. They cannot be revealed, nor can they be silenced. They rely on each other. The sound of the heart is always there, questioning oneself and questioning time and space. These are the best of times, these are the worst of times, people of almost every era say this. However, in the "Vimalakirti Sutra, Chapter 7: Contemplating All Living Beings" it says: If there is no dwelling, there is no root. Starting from the body's words and deeds, passing through the level of indescribable debate, it initially reaches the realm of self-reflection of existence, and finally it all comes down to the attitude of survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror images of fate. They can see themselves in each other, fighting, bursting out, being majestic, and showing off, as if they are doomed and distorted lives, hence "Infernal Affairs". 
    Gu Zhun said that from idealism to empiricism, Wang Xiaobo said that we should be wary of tyrants and heroes. Who is the hero? Where do they come from? So what if they come? Do we still need heroes in this era? When I was editing this issue of E Forum, I felt somewhat relieved. From the text, I could see that everyone was thinking. After all, we are no longer a generation that blindly follows others. In my opinion, entertainment has never been just entertainment itself. We can see a world from a drop of water, a flower, or a grain of sand. We are bound to think of more and our understanding can be infinitely varied from a movie. Each of us makes up this world, and whether this world is good or bad, we all have a part in it. Each of us has our own life, with strengths and weaknesses, which is the basis for our common progress. 
</body>
</html>
Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.2.

Figure 4.2 Setting the space character The paragraph has taken shape and the space character has been displayed. Readers can add any number of spaces in a paragraph to test.
4.1.3 Set text to wrap or not Figure 4.1 seems to be fine. The text will wrap automatically when it reaches the browser boundary. However, when the width of the browser is adjusted, the position of the text wrapping also changes accordingly, and the formatting appears quite confusing. To standardize formatting, readers should use a single tag tag to force a line break at the location where a line break is required when writing code. On the contrary, the part that does not need line break is enclosed by double tags . Modify the p.htm code as shown in Code 4.3.

Code 4.3 Line break control: p.htm
<html>
<head>
<title>Segment settings</title>
</head>
<body>
Film Biweekly: Special Review of "Infernal Affairs III: Ultimate Infernal Affairs"
It’s just the beginning
    At the end of 2002, the myth began. In the autumn and winter of 2003, it reached its climax and finale. Infernal Affairs admits to being inspired by Buddhist philosophy, where light and darkness, survival and extinction, existence and nothingness are intertwined in one, then suddenly fall apart, which is also a process of enrichment and unification. Where there is a cause, there is an effect; where there is sin, there is a fate. The beauty of the environment and the appearance lies in the limits of explanation. They cannot be revealed, nor can they be silent. They rely on each other. The sound of the heart is always there, questioning oneself and questioning time and space. These are the best of times, these are the worst of times, people of almost every era say this. However, in the "Vimalakirti Sutra, Chapter 7: Contemplating All Living Beings" it says: If there is no dwelling, there is no root. Starting from the body’s words and deeds, passing through the level of being difficult to express in words, it initially reaches the realm of self-reflection of existence, and finally it all comes down to the attitude towards survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror images of fate. They can see themselves in each other, fighting, bursting out, being majestic, and showing off, as if they are doomed and distorted lives, hence "Infernal Affairs". 
    Gu Zhun said that from idealism to empiricism, Wang Xiaobo said that we should be wary of tyrants and heroes. Who is the hero? Where do they come from? So what if they come? Do we still need heroes in this era? When I was editing this issue of E Forum, I felt somewhat relieved. From the text, I could see that everyone was thinking. After all, we are no longer a generation that blindly follows others. In my opinion, entertainment has never been just entertainment itself. We can see a world from a drop of water, a flower, or a grain of sand. We are bound to think of more and our understanding can be infinitely varied from a movie. Each of us makes up this world, and whether this world is good or bad, we all have a part in it. Each of us has our own life, with strengths and weaknesses, which is the basis for our common progress. 
</body>
</html>
Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.3.

Figure 4.3 Line break control From this example, we can see that the part enclosed by will not automatically wrap unless there is a forced line break .
4.1.4 Set text alignment The text in a paragraph sometimes needs to have different alignments. The default alignment is left. The alignment attribute of the tag is align. By setting align to left, right or center, left alignment, right alignment and center alignment can be achieved. Modify the p.htm code as shown in Code 4.4.

Listing 4.4 Alignment control: p.htm
<html>
<head>
<title>Segment settings</title>
</head>
<body>
Film Biweekly: Special Review of "Infernal Affairs III: Ultimate Infernal Affairs"
It’s just the beginning
    At the end of 2002, the myth began. In the autumn and winter of 2003, it reached its climax and finale. "Infernal Affairs" claims to be based on Buddhist concepts. Light and darkness, survival and extinction, existence and nothingness are entangled in one, and then suddenly fall apart. It is also a process of enrichment and unification. Where there is a cause, there is an effect; where there is sin, there is a fate. The beauty of the environment and the appearance lies in the limits of explanation in words. They cannot be revealed, nor can they be silenced. They rely on each other. The sound of the heart is always there, questioning oneself and questioning time and space. These are the best of times, these are the worst of times, people of almost every era say this. However, in the "Vimalakirti Sutra, Chapter 7: Contemplating All Living Beings" it says: If there is no dwelling, there is no root. Starting from the body's words and deeds, passing through the level of indescribable debate, it initially reaches the realm of self-reflection of existence, and finally it all comes down to the attitude of survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror images of fate. They can see themselves in each other, fighting, bursting out, being majestic, and showing off, as if they are doomed and distorted lives, hence "Infernal Affairs". 
    Gu Zhun said from idealism to empiricism, Wang Xiaobo said we should be wary of tyrants and heroes, who is the hero? Where do they come from? So what if they come? Do we still need heroes in this era? When I was editing this issue of E Forum, I felt somewhat relieved. From the text, I could see that everyone was thinking. After all, we are no longer a generation that blindly follows others. In my opinion, entertainment has never been just entertainment itself. We can see a world from a drop of water, a flower, or a grain of sand. We are bound to think of more and our understanding can be infinitely varied from a movie. Each of us makes up this world, and whether this world is good or bad, we all have a part in it. Each of us has our own life, with strengths and weaknesses, which is the basis for our common progress. 
</body>
</html>
Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.4.

Figure 4.4 Alignment Control
4.1.5 Adding a horizontal separator line
HTML provides horizontal dividing lines for modifying paragraphs, which can be easily used in many occasions without the need for additional drawing. The horizontal separator is a single tag <hr />, which occupies one line by default.
Create a web page file in the D:\web\ directory, name it hr.htm, and write the code as shown in Code 4.5.

Code 4.5 Separator settings: hr.htm
<html>
<head>
<title>Settings for separator lines</title>
</head>
<body>
Review of the glory of Cantonese songs in the music industry
<hr />
    There is still controversy as to which song is the earliest Cantonese song. In 1973, Cinderella, a member of "Chopstick Sisters", sang the theme song of the TV series "Tears and Laughter" written by Joseph Koo. This song is also the first Cantonese drama theme song in the Hong Kong music scene. In the same year, the fledgling Adam Cheng also starred in the TVB drama "My Fair Princess" and sang the theme song of the same name. The theme song of the hit movie "Ghosts and Twins" sung by Sam Hui in 1974 was a blockbuster in the music industry. It became the first Chinese song played on the BBC radio station in the UK. It was very famous at the time and was the most recognized origin of Cantonese songs. 
</body>
</html>
Enter http://localhost/hr.htm in the browser address bar, and the browsing effect is shown in Figure 4.5.

There is still controversy over which song is the earliest Cantonese song. In 1973, the "Chopstick Sisters" Cheng Zhongxiandula sang the theme song of the TV series "Tears and Laughter" written by Gu Jiahui. This song is also the first Cantonese drama theme song in the Hong Kong music scene. In the same year, the fledgling Adam Cheng also starred in the TVB drama "My Fair Princess" and sang the theme song of the same name. The theme song of the hit movie "Ghosts and Twins" sung by Sam Hui in 1974 was a blockbuster in the music industry. It became the first Chinese song played on the BBC radio in the UK. It was very famous at the time and was the most recognized origin of Cantonese.

Figure 4.5 Setting the separator line A simple <hr /> tag can implement the separator line, which easily modifies the paragraph layout and makes it more beautiful. However, for different application scenarios, the default single line style obviously cannot meet the requirements. The various attributes of the <hr /> tag solve this problem. Commonly used attributes include width, size, align, color and title. Width is the width setting. The default unit of the attribute value is pixels. You can also use percentage to express the proportion of the space occupied by the separator line. Size can be understood as the thickness or height of the separator line. The default unit of the attribute value is the same as width. align is the alignment method, similar to 's align. Color means color. You can set different colors of the separator line as needed. The title attribute is not used very often. When the viewer's cursor hovers over the separator line, a hint of the attribute value appears.
— Note: The default alignment of <hr /> is center. The default unit of HTML width and height attributes is pixels, and generally there is no need to identify the unit. However, the unit must be identified in the style attribute.
<hr />Another attribute is noshade. When the dividing line has no color set and a certain size is set, the dividing line looks three-dimensional and concave with a shadow. If the noshade attribute is used, the separator line will be solid color. Modify the hr.htm code as shown in Code 4.6.

Code 4.6 Separator style settings: hr.htm
<html>
<head>
<title>Settings for separator lines</title>
</head>
<body>
Set a 300 pixel wide right-aligned divider: 
<hr width="300" align="right" />
Set a 50% width and center-aligned divider: 
<hr width="50%" align="left" />
A separator line with 50% width, 50 pixels thickness and no noshade is set:
<hr width="50%" size="50" />
Set the thickness to 50 pixels and use noshade for the divider: 
<hr size="50" noshade="noshade" />
Set the thickness to 50 pixels and set a dark red dividing line: 
<hr size="50" color="770000"/>
Set the thickness to 50 pixels, set the color to light blue, and set the separator line with the prompt "Thank you for coming!":
<hr size="50" color="0000cc" title="Thank you for coming!"/>
</body>
</html>
Enter http://localhost/hr.htm in the browser address bar, and the browsing effect is shown in Figure 4.6.

Figure 4.6 Separator style settings

<<: JavaScript to achieve tab switching effect

>>: The difference between datatime and timestamp in MySQL

Implementation of Webpack3+React16 code splitting

Paragraph layout and line breaks in HTML web pages

Implementation of Webpack3+React16 code splitting

How to submit a pure HTML page, pass parameters, and verify identity

Detailed explanation of how to dynamically enable/disable hyperthreading technology in Linux

Solution to the problem of Failed when configuring IDEA to connect to MYSQL database

How to solve the problem of ERROR 2003 (HY000) when starting mysql

Shell script builds Docker semi-automatic compilation, packaging and release application operations

MySQL5.7.21 decompressed version installation detailed tutorial diagram

Advanced explanation of javascript functions

Set the contenteditable attribute to edit the content of HTML tags (can replace textarea)

CnBlogs custom blog style sharing

Recommend

Simple implementation method of Linux process monitoring and automatic restart

How to connect to Alibaba Cloud Ubuntu 16.04 server from local Windows remote desktop

Vue uses the video tag to implement video playback

Solution for VMware Workstation Pro not running on Windows

Problems with creating placeholders for HTML selection boxes

Write a shopping mall card coupon using CSS in three steps

Complete steps to install mysql5.7 on Mac (with pictures and text)

Several ways for Vue to achieve communication between components (multiple scenarios)

Implementation of webpack code fragmentation

How to use Docker to build a pypi private repository

Tutorial on installing php5, uninstalling php, and installing php7 on centos

JavaScript event loop case study

Summary of basic knowledge points of Linux group

HTML+CSS+JavaScript realizes the display of selected effect following the mouse movement

How to open port 8080 on Alibaba Cloud ECS server