1, Text introduction
1. Page elements
In HTML, I mainly learn how to make a static page.
A static page is mostly composed of the following four elements:
- written words
- picture
- Hyperlinks
- Audio, video
Therefore, if you want to develop a page, you have to carefully study the tags used to display these contents.
(1) The difference between static pages and dynamic pages
Whether to interact with the server.
① A page that does not move is called a dynamic page
The following five situations are not necessarily dynamic pages:
- With Flash animation.
- With CSS animation.
- With JavaScript sound.
- With audio and video.
- In addition, even if JavaScript is used in the page, it is not a dynamic page unless back-end technology is used.
2.HTML text
This chapter mainly studies the following six aspects:
- Title label
- Paragraph label
- Wrap label
- Text label
- Horizontal line label
- Special symbols
After learning, the most basic task is to make this plain text web page.
2, Title label
In an HTML page, there are usually various levels of titles.
1. Six levels of Title labels
In HTML, there are six levels of title tags: h1, h2, h3, h4, h5 and h6.
(1) Label importance
The importance of these six title tags in the page is different, among which h1 tag is the most important and h6 tag is the least important.
① h1 unique
Generally, a page can only have one h1 tag, while h2 ~ h6 tags can have multiple. Where h1 represents the largest title in the page. This is the same as writing a composition in Chinese. An article can only have one topic, not two or three, A composition can have multiple subheadings.
② Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> <title>Title label</title> </head> <body> <h1>1 Level label</h1> <h2>2 Level label</h2> <h3>3 Level label</h3> <h4>4 Level label</h4> <h5>5 Level label</h5> <h6>6 Level label</h6> </body> </html>
Title label png
(2) Order of Title labels
As can be seen from the above figure, the larger the level of the title label, the larger the font. Title labels h1~h6 are also in a certain order. h1 is used for headline, h2 is used for secondary title... And so on. These six Title labels do not need to be used completely, and can be applied flexibly according to needs.
(3) Title and SEO
The title tag seems simple, but it plays a very important role in search engine optimization (SEO), which will be introduced in later articles.
(4) title tag and h1 tag
Don't confuse the two. The title tag is used to display the title of the address bar and the h1 tag is used to display the title of the article.
3, Paragraph label
1. Paragraph label: < p > < / P >
In HTML, you can use < p > < / P > to display a piece of text.
(1) Grammar
<p>Paragraph content</p>
① Example
Paragraph labels png
Paragraph label 1 png
Ⅰ. Paragraph label wrap
Paragraph labels wrap automatically and there is some space between paragraphs.
2. Line feed label: < / BR >
If you want to wrap text at will, you need a wrap label < / BR >. And, < / BR > is a self closing label.
3. Comparison of line feed functions
(1) Wrap with p label
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> <title>Paragraph label</title> </head> <body> <h3>Moonrise</h3> <p> The moon is bright, and the best people are colleagues. It's easy and quiet, and it's hard and quiet. The moon shines brightly, and the best people shine. </p> <p> I feel comfortable and tired. The moon is shining, and the outstanding people are burning. It's easy to be young and sad. </p> </body> </html>
Paragraph labels wrap png
(2) Wrap with br label
br label wrap png
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> <title>Paragraph label</title> </head> <body> <h3>Moonrise</h3> <p> The moon is bright, and the best people are colleagues. It's easy and quiet, and it's hard and quiet. The moon shines brightly, and the best people shine. <br/> I feel comfortable and tired. The moon is shining, and the outstanding people are burning. It's easy to be young and sad. </p> </body> </html>
(3) The difference between the two
- The p label will cause a certain gap between segments, while the br label will not.
- Br tags are used to wrap text; The P tag is used to segment text. (if the content is two paragraphs of text, you don't need to use the br label to wrap the line. Just use two p labels.)
4, Text label
1. Bold label - strong
You can use the strong tag or b tag to bold text.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> <title>Bold label</title> </head> <body> <p>Plain text</p> <strong>Bold text</strong><br/> <b>Bold text</b> </body> </html>
Bold labels png
After < br / > is removed, two bold fonts are displayed on the same line with a certain gap between them.
Bold label 1 png
(2) Actual development
In the actual development, if you want to achieve the BOLD effect of text, try to use the strong label instead of the b label. This is because the strong tag is more semantic than the b tag.
2. Italic label em
You can use em tags, i tags, or cite s tags to italicize text.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> <title>Bold label</title> </head> <body> <i>Italic effect</i><br/> <em>Italic effect</em><br/> <cite>Italic effect</cite> </body> </html>
Label in italics png
After < br / > is removed, two italicized fonts are displayed on the same line with a certain gap between them.
Italic label 1 png
(2) Actual development
In the actual development, if you want to achieve the italic effect on the text, try to use em tags instead of i and CIT tags. This is because em tags are more semantic than i and cite tags.
3. Superscript label
You can use the sup tag to achieve the superscript effect of the text.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <p> (a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab </p> </body> </html>
Superscript label png
If you want to turn a number or some text into a superscript effect, just put the number or text in the label.
4. Subscript label
You can use the sub tag to achieve the subscript effect of the text.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <p> H<sub>2</sub>SO<sub>4</sub> </p> </body> </html>
Subscript label png
If you want to turn a number or some text into a subscript effect, just put the number or text in the label.
5. Middle marking label
You can use the s tag to achieve the underline effect of text.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <p> <s>Reject all negative energy</s> </p> </body> </html>
Center scribed label png
The middle line effect is generally used to display those incorrect or irrelevant contents. It is often used to mark the price of commodity promotion.
(2) Actual development
After learning CSS, the strikeout effect is generally implemented with CSS, and almost not with the s tag.
6. Underline label
You can use the u tag to underline text.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <p> <u>See the good and think of the good</u> </p> </body> </html>
Underline labels png
(2) Actual development
After learning CSS, we generally use CSS to realize the underline effect, and hardly use the u tag.
7. Large label and small label
In HTML, the big tag can be used to increase the font size, and the small tag can also be used to reduce the font size.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <p> <big>Large size</big></br> <small>Small size</small> </p> </body> </html>
Size label png
(2) Actual development
In the actual development, the change of font size is hardly realized by big tag and small tag, but by CSS.
8. Summary
(1) Important text labels
label | semantics | explain |
|---|---|---|
strong | strong (emphasis) | bold |
em | Highlighted | Italics |
sup | Superscript (superscript) | Superscript |
sub | Subscribed (subscript) | subscript |
5, Horizontal line label
In HTML, you can use the hr tag to implement a horizontal line.
1. Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <p> <hr/> </p> </body> </html>
6, div tag
In HTML, div tags are used to divide the HTML structure, and CSS is used to control the style of a block as a whole.
1. Division of areas
div, used to divide an area. div tags can contain all other tags, such as p tags, strong tags, hr tags, etc. Div tags are used to divide regions, making the code more logical. Of course, the most important use of div tag is to divide the area, and then control the style of the area in combination with CSS. CSS will know this later.
7, Self closing and labeling
Most labels appear in pairs. These labels have a "start symbol" and an "end symbol". However, some tags do not have an end symbol, such as: < br / >, < HR / >.
1. General labels and self closing labels
(1) General label
For general labels, since there are start symbols and end symbols, other labels or text can be inserted inside.
(2) Self closing and labeling
For self closing labels, since there is only a start symbol and no end symbol, labels or text cannot be inserted inside. The so-called "autistic and" means that it was supposed to be closed with a paired end symbol, but it closed itself.
label | explain |
|---|---|
< meta/> | Define the information of the web page (for search engines to view) |
< link/> | Import external CSS files |
< br/> | Wrap label |
< hr/> | Horizontal line label |
< img/> | Picture label |
< input/> | Form label |
8, Block elements and inline elements
Block elements and inline elements are extremely important concepts in HTML and an important foundation of CSS. In the browser preview effect, some elements are exclusive, and other elements cannot be on the same line as this element, such as p, div, hr, etc. While some elements are not exclusive to one line, other elements can be on the same line as this element, such as strong, em, etc. In particular, the so-called "exclusive line" is not exclusive in HTML code, but exclusive in the browser display effect. Tags, also known as elements, such as batch: p tags, also known as p elements, have different names and the same meaning. In HTML, elements can generally be divided into two categories according to their expression forms:
- Block element
- Inline element
1. Block element
In HTML, block elements occupy a whole line in the browser display state, and other elements are excluded from the same line. In addition, generally, other block elements and inline elements can be accommodated inside the block element.
Common HTML block elements
Block element | explain |
|---|---|
h1 ~ h6 | Title element |
p | Paragraph element |
div | div element |
hr | level |
ol | Ordered list |
ul | Unordered list |
(1) Example
Block element example png
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <div> <h3>See you for the first time</h3> <p>Why don't you take Wu hook and collect 50 states in Guanshan.</p> <strong>See the good and think of the good</strong> <em>Where there is a will, there is a way. The hundred and two Qinguan pass eventually belongs to Chu. A hardworking man can live up to his duty. He can swallow Wu for 3000 Yue armor. </em> <hr/> </div> </body> </html> <!-- ① h3 and p Is a block element. The display effect on the browser is exclusive, and any element is excluded from being on the same line as them. ② strong and em It is an element within a line. Even if the code is not on the same line, the display effect on the browser is on the same line (the display effect has nothing to do with whether the code is on the same line) ③ h3,p,strong,em All in div Inside the element. That is, other block elements and inline elements can be accommodated inside the block element. -->
(2) Block element characteristics
- A block element monopolizes a row and excludes other elements (including block elements and inline elements) from being on the same row.
- Other block elements and inline elements can be accommodated inside the block element.
2. Inline elements
In HTML, inline elements are the opposite of block elements. Inline elements can be on the same line as other inline elements. In addition, the inside of the inline element (inside the label) can only accommodate other inline elements, not block elements.
HTML common inline elements
Inline element | explain |
|---|---|
strong | Bold element |
em | Italic element |
a | Hyperlinks |
span | Common inline elements define styles in combination with CSS |
(1) In line element characteristics
- Inline elements can be on the same line as other inline elements.
- In line elements can accommodate other in line elements, but not block elements.
Re understanding, rather than memorizing what are the block elements and what are the in-line elements? Block elements and inline elements are very complex. Take your time.
9, Special symbols
1. Spaces in web pages
In web page layout, in order to make paragraphs more beautiful, the first line of each paragraph will be indented by 2 characters. By default, however, the first line of paragraph text for the p label is not indented.
If we want to indent the first line of each paragraph by 2 characters, we will subconsciously press spaces in the code to achieve our goal, but this method is invalid. In HTML, spaces also need code, and the space code is & nbsp.
(1) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <h3>Ailian said</h3> <p> The flowers of land and water plants are very lovely. Tao Yuanming of Jin Dynasty loved chrysanthemums alone. Since Li Tang, the world loves peonies very much. To love the lotus alone, out of the mud without dyeing, clean the ripples without demons, It is straight in the middle and straight in the outside. It is clear that the fragrance is far away. It can be seen from a distance and can not be blasphemed. </p> <p> To say chrysanthemum, flower seclusion also; Peony, the flower of the rich also; Lotus is a gentleman of flowers. Oh! Chrysanthemum love is rarely heard after pottery. Who gives the love of lotus? The love of peony is suitable for many! </p> </body> </html>
Spaces in web pages png
2. Special symbols in web pages
(1) Start with &; ending
In HTML, if you want to display a special symbol, you also need to enter code. The codes corresponding to these special symbols start with & and start with; (English semicolon) end.
(2) Special symbols fall into two categories
- It is easy to input through the input method without using code.
- It is difficult to input through the input method and needs to be implemented with code.
① Easy to input HTML special symbols
Special symbols | explain | code |
|---|---|---|
" | Double quotation marks (English) | & quot; |
' | single opening quote | & lsquo; |
' | single closing quote | & rsquo; |
× | multiplication sign | & times; |
÷ | division sign | & divide; |
< | Less than sign | & lt; |
> | Greater than sign | & gt; |
& | And | & amp; |
— | Long dash | & mdash; |
Vertical line | & #124; |
② Difficult to input HTML special symbols
Special symbols | explain | code |
|---|---|---|
§ | Section break | & sect; |
© | Copyright symbol | & copy; |
® | Registered trademark | & reg; |
™ | trademark | & trade; |
€ | euro | & euro; |
£ | pound | & pound; |
¥ | Yen | & yen; |
° | degree | & deg; |
In fact, spaces & nbsp; It is also a special symbol. Just remember the spaces & nbsp; This special symbol is OK. Check it when you encounter others.
(3) Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--Must be placed in title Labels and others meta Before label--> </head> <body> <p>Registered trademark: ®</p> <p>euro: €</p> <p>pound: £</p> </body> </html>
Special symbols in web pages png