Front-end development must learn to understand HTML tags every day (1)

Front-end development must learn to understand HTML tags every day (1)

2.1 Semanticization makes your web pages better understood by search engines

In this chapter, we will begin to introduce the tags commonly used in web pages one by one. When studying this chapter, you must remember that in the process of learning html tags, you should pay attention to two aspects: the purpose of the tag and the default style of the tag in the browser.

What is semantics? To put it simply, it means understanding the purpose of each tag (under what circumstances it is reasonable to use this tag). For example, the title of an article on a web page can be written with a title tag, and the names of various columns on a web page can also be written with a title tag. The paragraphs of content in the article must be placed in paragraph tags. If there is text in the article that you want to emphasize, you can use the em tag to indicate emphasis, etc.

2.2 Body tag, the web page display content is placed here

The page content to be displayed on the web page must be placed in the body tag. The following figure is a web page of a news article.

這里寫圖片描述


The browser effect is as follows:

這里寫圖片描述

2.3 p tag, add paragraph

If you want to display an article on a web page, you need the <p> tag and put the paragraphs of the article in the <p> tag.

Syntax: <p>段落文本</p> Note that there is one tag for each paragraph of text. For example, if there are three paragraphs of text in a news article, these three paragraphs should be placed in three <p> tags respectively. As shown in the following figure:

這里寫圖片描述


The browser display effect is as follows:

這里寫圖片描述

The default style of the <p> tag can be seen in the figure above. There will be blank spaces before and after the paragraph. If you don’t like this blank space, you can use CSS style to delete or change it. Paragraph validation code:

 XML/HTML CodeCopy content to clipboard
  1.  <!DOCTYPE HTML >   
  2.  < html >        
  3.  < head >            
  4.  < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >            
  5.  < title > p tag </ title >        
  6.  </ head >        
  7.  < body >            
  8.  < h2 > Paragraph Validation </ h2 >            
  9.  < p > My first paragraph. </ p >            
  10.  < p > My second paragraph. </ p >        
  11.  </ body >   
  12.  </ html >   

2.4 hx tag, add title

There are 6 title tags in total, h1, h2, h3, h4, h5, and h6 are the first-level title, second-level title, third-level title, fourth-level title, fifth-level title, and sixth-level title respectively. And in decreasing order of importance. <h1> is the highest level.

Syntax: <hx>標題文本</hx> (x為1-6)

As mentioned before, the title of the article can use title tags, and they can also be used for the titles of various columns on the web page. The following figure is the Tencent website:

這里寫圖片描述

Note: Because the h1 tag is more important in a web page, it is usually used for the website name. This is what Tencent website does. For example: <h1>騰訊網</h1> The default style of h1-h6 tags is:

XML/HTML CodeCopy content to clipboard
  1. < body >   
  2. < h1 > First level title </ h1 >   
  3. < h2 > Secondary Title </ h2 >   
  4. < h3 > Level 3 heading </ h3 >   
  5. < h4 > Level 4 heading </ h4 >   
  6. < h5 > Level 5 heading </ h5 >   
  7.      < h6 > Level 6 heading </ h6 >   
  8. </ body >   

Display styles in browser:

這里寫圖片描述

From the picture above, we can see that the styles of title tags are all bold, the h1 tag has the largest font size, the h2 tag has a smaller font size than h1, and so on, the h6 tag has the smallest font size.

2.5 strong/em adds emphasis

Now that we have paragraphs and titles, if we want to emphasize certain words in a paragraph, we can use <em>或<strong> tags.

There is a difference between the two in the tone of emphasis: <em> indicates emphasis, while <strong> indicates stronger emphasis. And in the browser, <em> is in italics by default, and <strong> is in bold by default. Compared with the two tags, domestic front-end programmers currently prefer to use <strong> to express emphasis.

grammar:

XML/HTML CodeCopy content to clipboard
  1. <em> Text to be emphasized </em>​      
  2. < strong > Text to be emphasized </ strong >   

Examples of em and strong tags:

這里寫圖片描述


In the browser it appears as:

這里寫圖片描述

The content of <em> is displayed in italics during browsing, and <strong> is displayed in bold. If you don't like this style, it doesn't matter, you can use CSS style to change it later.

2.6 style/span tag, set a separate style for text

Let's summarize the three tags <em>、<strong>、<span> :

<em> and <strong> tags are used to emphasize keywords in a paragraph. Their semantics is emphasis.

The <span> tag has no semantics and is used to set individual styles.

If we now want to set the three words "American Dream" in the first paragraph of the previous section to blue, but please note that this is not to emphasize "American Dream", but just to set a different style for it from other text (and we do not want the screen reader to emphasize the three words "American Dream"), so in this case we can use the <span> tag.

grammar:

 <span>文本</span>

Example:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      < head >   
  4.          < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >   
  5.          < title > The Great Gatsby </ title >   
  6.          < style >   
  7. span{
  8. color:blue;
  9. }
  10.          </ style >   
  11.      </ head >   
  12.      < body >   
  13.          < p > < span > American Dream </ span > . </ p >   
  14.          < p > < strong > Fitzgerald </ strong > </ p >   
  15.          < p > < em > Alice </ em > </ p >   
  16.      </ body >   
  17. </ html >   

Displayed in the browser as:

這里寫圖片描述


The ones using span become blue, the ones using the strong tag become bold, and the ones using the em tag become italic.

2.7 q tag, short text citation

Want to add a quote to your HTML? For example, if you want to quote a poem from a certain writer in an article on your webpage, which will make your article more outstanding, then tags are what you need. grammar:

 <q>引用文本</q>

Note that you do not need to put double quotes around the quoted text; the browser will automatically add double quotes around the q tag.

Note that the real key point of using the tag here is not its default style of double quotes (if that were the case, we might as well just type double quotes on the keyboard), but its semantics: quoting someone else's words.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      < head >   
  4.          < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >   
  5.          < title > q tag </ title >   
  6.      </ head >   
  7.      < body >   
  8.          < p > Zhou Yu, indeed, is worthy of the saying < q >" A man of extraordinary intelligence is a hero, and a man of extraordinary courage is a hero." </ q > </ p >   
  9.      </ body >   
  10. </ html >   
  11.   

There are no quotation marks in the code, but because it is a <q> tag, quotation marks are automatically added.

2.8 blockquote tag, long text quotation

The function of <blockquote> is also to quote other people's text. But it is a reference to a long text, such as introducing a long passage of text by a well-known writer in an article, in which case this tag is needed.

The <q> tag is used to quote a short text. For example, the <q> tag is used to quote a sentence.

Syntax: <blockquote>引用文本</blockquote>

The browser interprets the <blockquote> tag as an indented style.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. < head >            
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >            
  5. < title > Use of blockquote tag </ title >        
  6. </ head >        
  7. < body >            
  8. < h2 > My heart is like the blossoming osmanthus </ h2 >            
  9. < p > Everyone is busy with what they think is the most important thing, but they are unable to enjoy the fun of life and instead have to swallow the bitter fruit? </ p >            
  10. < blockquote > The color is dim and light yellow, the body is soft, the feelings are far away and only the fragrance remains. </ blockquote >            
  11. < blockquote > Why need the light green or deep red color? It is the best among flowers. </ blockquote >            
  12. < p > This is a line from Li Qingzhao's Ode to Osmanthus. In Li Qingzhao's opinion, osmanthus is dull green and yellow in color, gentle in temperament, indifferent and self-satisfied, and far more praiseworthy than those bright red and purple flowers. </ p >        
  13. </ body >   
  14. </ html >   

The display effect in the browser is as follows, you can see that the part surrounded by the <blockquote> tag is indented before and after:

這里寫圖片描述

2.9 br tag displays text in separate lines

How can I add a line break after each line of poetry? Then you can use the <br /> tag. Add <br />，<br /> tag is equivalent to the carriage return in a Word document.

grammar:
xhtml1.0 writing method: <br />
HTML4.01 writing method: <br>

Unlike the tags we have learned before, the <br /> tag is an empty tag. A tag without HTML content is an empty tag. An empty tag only needs to write an opening tag. Such tags include <br />、<hr />和<img /> .

Summary: Entering carriage returns and spaces in HTML code has no effect. If you want to enter a carriage return and line feed in HTML text, you must enter <br /> .

 XML/HTML CodeCopy content to clipboard
  1.  <!DOCTYPE HTML >   
  2.  < html >        
  3.  < head >            
  4.  < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >            
  5.  < title > Use of br tag </ title >        
  6.  </ head >        
  7.  < body >            
  8.  < h2 > Ode to Osmanthus fragrans </ h2 >            
  9.  < p >                
  10.  Dark light yellow soft, < br >                
  11.  Love is far away but the fragrance remains. < br >                
  12.  Why light green or deep red ,                
  13.  It is the best among flowers.
  14.  </ p >        
  15.  </ body >   
  16.  </ html >     
 Browser effect: 
這里寫圖片描述

2.10 Add some spaces to the web page

It has been explained that entering spaces and entering returns in HTML code will have no effect. To enter a space, you must write

Syntax: &nbsp;

Insert two spaces as follows:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      < head >   
  4.          < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >   
  5.          < title > Space Explanation </ title >   
  6.      </ head >   
  7.      < body >   
  8.          < h1 > Realizing Dreams </ h1 >   
  9. Source: Composition Network Author: Fly for the Dream
  10.      </ body >   
  11. </ html >   
  12.   

2.11 hr label, add horizontal line

When displaying information, sometimes you need to add some horizontal lines for separation, which will make the article look neater. For example, the following web page

grammar:

html4.01 version <hr>
xhtml1.0 version <hr />

The < hr /> tag is also an empty tag like the <br /> tag, so there is only one start tag and no end tag.

The default style of the <hr /> tag in the browser is thicker and gray. Some people may find this style unsightly, but it doesn’t matter. These external styles can be modified after we learn CSS style sheets.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. < head >            
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >            
  5. < title > hr tag usage </ title >        
  6. </ head >        
  7. < body >            
  8. < p > The train speeds through the village in the dark night. The moonlight always makes people feel lonely and yearning. </ p >            
  9. < hr >            
  10. < p > Every dandelion blown by the wind is filled with the affectionate farewell of a pair of eyes and the reluctance of a gaze. </ p >        
  11. </ body >   
  12. </ html >   

Effect in browser:

這里寫圖片描述

2.12 address tag, add address information to the web page

Generally, there will be some website contact address information on the web page that needs to be displayed on the web page. This contact address information, such as the company address, can be labeled. It is also possible to define an address (such as an e-mail address), a signature, or the authorship of a document.

grammar:
 <address>聯系地址信息</address>
 <address> 本文的作者：<a href="mailto:[email protected]">lilian</a> </address>
The style displayed on the browser is italic. If you don't like italics, of course you can use CSS style to modify the default style of the <address> tag in the following courses.
XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. < head >            
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >            
  5. < title > Introduction to address tag </ title >        
  6. </ head >        
  7. < body >            
  8. < h2 > MOOC.com </ h2 >            
  9. < p > Super cool free learning platform for Internet and IT technology! Company address: < address > No. 10 Dewai Street, Xicheng District, Beijing </ address > </ p >         
  10. </ body >   
  11. </ html >   

2.13 code tag, add a line of code

In websites that introduce language technology, it is inevitable to display some computer professional programming codes on the web page. When the code is one line, you can use the <code> tag. Note: if you want to insert multiple lines of code in an article, you cannot use the <code> tag. As in the following example:

 <code>var i=i+300;</code>
Note: If it is multiple lines of code, you can use the <pre> tag.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML >   
  2. < html >        
  3. < head >            
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8" >            
  5. < title > code tag introduction </ title >        
  6. </ head >        
  7. < body >            
  8. < p > We may know the implementation of horizontal gradient, which is similar to this: < code > {background-image:linear-gradient(left, red 100px, yellow 200px);} </ code > </ p >        
  9. </ body >   
  10. </ html >   

Browser effect:

這里寫圖片描述

2.14 pre tag, add large code

In the previous section, we introduced that the tag for adding a line of code is <code> , but in most cases, you need to add a large section of code, as shown in the figure below. What should you do? It is not necessary to add a <code> tag to each code. It is not that complicated. You can use the <pre> tag at this time:

這里寫圖片描述

The main function of the <pre> tag: preformatted text. Text enclosed in a pre element usually preserves spaces and line breaks. Note: The <pre> tag is not only used to display computer source code, it can be used when you need to pre-display the format in a web page. However, a common application of the <pre> tag is to display computer source code.

 XML/HTML CodeCopy content to clipboard
  1.  <!DOCTYPE HTML >   
  2.  < html >        
  3.  < head >            
  4.  < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />            
  5.  < title > Use of pre tag </ title >        
  6.  </ head >        
  7.  < body >            
  8.  < pre > var message = "Welcome" ;for(var i = 1 ;i < =10;i++){ alert(message);}
  9.  </ pre >        
  10.  </ body >   
  11.  < /html >   

Browser effect:

這里寫圖片描述

In the above example, you can see that spaces and line breaks in the code are preserved. If you use the previous method, you need to enter <br> sign for the return, and a space for the &nbsp .

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  js native carousel plug-in production

>>:  Detailed explanation of how to manually deploy a remote MySQL database in Linux

Recommend

Alignment issue between input text box and img verification code (img is always one head higher than input)

In web page production, input and img are often pl...

Example analysis of the search function of MySQL regular expressions (regexp and rlike)

This article uses examples to illustrate the sear...

Mybatis statistics of the execution time of each SQL statement

background I am often asked about database transa...

A brief discussion on several specifications of JS front-end modularization

Table of contents Preface The value of front-end ...

How to match the size of text in web design: small text, big experience

With the rise of mobile terminals such as iPad, p...

Common methods and problems of Docker cleaning

If you use docker for large-scale development but...

Solution to the problem that order by is not effective in MySQL subquery

By chance, I discovered that a SQL statement prod...

Implementation of scheduled backup in Mysql5.7

1. Find mysqldump.exe in the MySQL installation p...

js to implement add and delete table operations

This article example shares the specific code of ...

Teach you how to build a Hadoop 3.x pseudo cluster on Tencent Cloud

1. Environmental Preparation CentOS Linux release...

Method of dynamically loading geojson based on Vue+Openlayer

Load one or more features <template> <di...

Sample code for JS album image shaking and enlarging display effect

The previous article introduced how to achieve a ...

MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control

Table of contents 1. Concurrent access control 2....

Markup Language - List

Standardized design solutions - markup languages ...

Button does not specify type as submit. Clicking the button does not jump to the specified URL.

Today, due to project requirements, js is needed t...