Learning knowledge
- Master HTML structure
- Master the use of common HTML tags
- What is HTML? The full name of HTML is hypertext markup language, which is a markup language. It includes a series of tags. Through these tags, the document format on the network can be unified, and the scattered Internet resources can be connected into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can explain text, graphics, animation, sound, tables, links, etc.
- HTML tags.
-
Keywords surrounded by angle brackets, such as < HTML >
-
It usually appears in pairs, such as < title > and < / Title > or < div > and < / div >
-
The first label in the label pair is the start label and the second label is the end label
-
Start and end labels are also called open and closed labels.
-
There are also labels presented separately, such as: < img SRC = "XX. JPG" / > and < input / >.
-
Generally, the labels appear in pairs, and their contents are in the middle of the two labels. If the tag is presented separately, assign a value in the tag attribute, such as < H1 > Title < / H1 > and < input type = "text" value = "button" / >.
-
The content of the web page should be in the < HTML > tag, the title, character format, language, compatibility, keywords, description and other information should be displayed in the < head > tag, while the content of the web page should be nested in the < body > tag.
<html><!-- The content of the web page needs to be in<html>In label --> <head><!-- Title, character format, language, compatibility, keyword, description and other information are displayed in the<head>In label --> <meta charset="utf-8" /> <title></title> </head> <!-- The content to be displayed on the web page should be nested in<body>In label --> <body><!-- this body The tag is the start tag, also known as the open tag--> <div>This is a label that appears in pairs</div> <img src="xx.jpg"/><!-- This is a label rendered separately--> <h1>Here is the content</h1> <input type="text" value="content"/><!-- The content here is reflected in the tag attribute--> </body><!-- this body Labels are end labels, also known as and close labels--> </html>
-
Practical operation
- In the actual code, we can use some simple tags to make a simple web page. The < br / > special tag is used in the content of the first < p > tag. Its actual function is to wrap lines, and multiple < br / > tags can be reused. Change several lines as many as the < br / > tag is used.
- The < ol > and < li > tags are used to create a sequential table. It should be noted here that the display content can only be placed in < li >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><<Sweet and sour pork ribs>></title> </head> <body> <h1><<Sweet and Sour Spare Ribs>>Manufacturing method of</<></h1> <p>Dish name:Sweet and Sour Spare Ribs<br/>market price:26<br/>Member price:24</br>Use ingredients:spareribs.sugar.Vinegar</br>Dish type:Stir fry</p> <p>practice</p> <ol> <li>Wash the pork chops</li> <li>Pour a small amount of oil into the pot</li> <li>Fried spare ribs</li> <li>Add seasoning</li> <li>Braised over low heat</li> <li>20 Pour salt in minutes</li> </ol> <hr/> <p>2015 Grandma's private dishes</p> </body> </html>
- This code compares the ordered linked list label of < ol > with the unordered linked list label of < UL >.
- < DL > each < DT > tag can correspond to multiple < DD > tags, one < DD > tag for each < DT > tag, or one < DD > tag for multiple < DT > tags.
- The < Table > tag defines an HTML table. A simple HTML table consists of a table element and one or more tr, th, or td elements< border=1px in the table > label indicates the thickness of the border. The cellspacing attribute specifies the space between cells, and the celladding attribute specifies the space between the edge of the cell and its content.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>Search engine ranking</h2> <ol> <li>Google</li> <li>Baidu</li> <li>Bing</li> <li>Sogu</li> </ol> <h2>Software programming language</h2> <ul> <li>Java</li> <li>C++</li> <li>Python</li> <li>JavScript</li> </ul> <h2>health food</h2> <dl> <dt>Fruits</dt> <dd>Apple</dd> <dd>Banana</dd> <dt>Vegetables</dt> <dd>Broccoli</dd> <dd>Spinach</dd> </dl> <table border="1px" cellspacing="0" cellpadding="10" > <tr align="center"> <th>ranking</th> <th>key word</th> <th>trend</th> <th>Search today</t1h> <th>Last seven days</th> <th>Related links</th> </tr> <tr> <td>1</td> <td>Ghost blow lamp</td> <td><img src="img/up.jpg"/></td> <td>356</td> <td>3560</td> <td> <a href="#"> Post Bar</a> <a href="#"> picture</a> <a href="#"> Encyclopedia</a> </td> </tr> <tr> <td>1</td> <td>Ghost blow lamp</td> <td><img src="img/down.jpg"/></td> <td>356</td> <td>3560</td> <td> <a href="#"> Post Bar</a> <a href="#"> picture</a> <a href="#"> Encyclopedia</a> </td> </tr> <tr> <td>1</td> <td>Ghost blow lamp</td> <td><img src="img/up.jpg"/></td> <td>356</td> <td>3560</td> <td> <a href="#"> Post Bar</a> <a href="#"> picture</a> <a href="#"> Encyclopedia</a> </td> </tr> <tr> <td>1</td> <td>Ghost blow lamp</td> <td><img src="img/up.jpg"/></td> <td>356</td> <td>3560</td> <td> <a href="#"> Post Bar</a> <a href="#"> picture</a> <a href="#"> Encyclopedia</a> </td> </tr> <tr> <td>1</td> <td>Ghost blow lamp</td> <td><img src="img/up.jpg"/></td> <td>356</td> <td>3560</td> <td> <a href="#"> Post Bar</a> <a href="#"> picture</a> <a href="#"> Encyclopedia</a> </td> </tr> </table> </body> </html>