Hbuilder automatically completes the formatting, and the shortcut key for formatting is: ctrl+shift+f </p>
Hahahahaha, happy! Note that it is in English! ! !</p>
1.</p>
<p>This is a paragraph</p>
The p tag is the beginning of a paragraph. If you don't set the position deliberately, it will start from the left.
If the position is set, the position effect is the same as the h title tag
<h2 align="center">Look, the background color has changed!</h2>
The h tag is the title tag, and it is also on the left by default. If you want to be centered, you must also set the position <h2 align="center">
<h1> defines the largest heading. <h6> defines a minimal heading.
Summary: The difference between p and h is that h is automatically bolded and looks like a title, emphasizing the meaning.
2.
The <hr /> tag creates horizontal lines in the HTML page. You can set your favorite color <hr color="#0000FF" />
3
<br\>The label is a new line according to the desired segmentation effect of the self-study, and there is no blank line in the middle
but
The <p> tag is a paragraph tag, there is a line break between the two paragraphs
doubt:
For example, in a verse, how to make each line indent incrementally?
Of course, the <pre> tag is used, hahaha!
The <pre> tag can be typeset according to the ideal format, showing the ideal effect
<p><pre>
Chunmian doesn't realize it,
Heard birds chirping everywhere.
night wind and rain,
How many flowers fall.
</pre>
</p> 
All the codes of the above renderings are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 align="center">this is a title</h1>
<p>this is a paragraph</p>
<p>this is another paragraph</p>
<p><a href="http://www.baidu.com">This is a link</a>This is a link to jump to the current page</p>
<p><a href="http://www.w3school.com.cn/" target="_blank">This is another link</a>This is a link to a new page</p>
<a href="#tips">Helpful Tips</a>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">Helpful Tips</a>
<img src="img/2.jpg" width="150px" height="150px"/>
</body>
<body bgcolor="aqua">
<h2 align="center">Look, the background color has changed! </h2>
<h1>This is a heading</h1>
<hr color="#0000FF" />
<h2>This is a heading</h2>
<hr />
<h3>This is a heading</h3>
<p>This is<br />a para<br />graph with line breaks</p>
<p>This is</p>
<p>a para</p>
<p>graph with line breaks</p>
<p> Chunmian does not realize the dawn, and hears birds chirping everywhere. night wind and rain,How many flowers fall.</p>
<p> Chunmian doesn't realize it,<br />Heard birds chirping everywhere.<br />night wind and rain,<br />How many flowers fall.</p>
<p><pre>
Chunmian doesn't realize it,
Heard birds chirping everywhere.
night wind and rain,
How many flowers fall.
</pre>
</p>
<p><a name="tips">Basic Considerations - useful tips</a></p>
<!--
Author: 1980750699@qq.com
Time: 2019-05-01
description: style style
-->
<p>
<a href="#C4">See Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
4. Style
HTML Style Example - Background Color
HTML style example - font, color and size
Note: When multiple conditions (font, color, size) exist at the same time, all attributes are enclosed in a large quotation mark in style, separated by semicolons
HTML Style Example - Text Alignment
5.
The <q> tag can display quotation marks, and put the content that needs to be quoted in the middle of the q tag
<p style="text-align: center;"><q>The heading above is aligned to the center of this page.</q></p>
6.
<blockquote> for indentation
<blockquote>For fifty years, WWF Always working to protect the future of the natural world.</blockquote> <blockquote>WWF Works in 100 countries and is supported by 1.2 million members in the U.S. and nearly 5 million worldwide</blockquote>
Effect picture:
The above image code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>interface</title>
</head>
<body style="background-color: chartreuse;">
<h2 style="background-color: #FF0000; font-family: modern;"align="center">
This is a headline</h2>
<h3 align="center" style="font-family: 'rockwell extra bold';background-color: chocolate;">This is a headline</h3>
<p style="background-color: azure;font-size:20px;">This is a paragraph</p>
<h1 style="text-align: center;background-color:yellow;">this is a title</h1>
<p style="text-align: center;"><q>The heading above is aligned to the center of this page.</q></p>
<blockquote>For fifty years, WWF Always working to protect the future of the natural world.</blockquote>
<blockquote>WWF Works in 100 countries and is supported by 1.2 million members in the U.S. and nearly 5 million worldwide</blockquote>
<p><abbr title="World Health Organization">WHO</abbr> Founded in 1948.</p>
<address>the author is: xxx(italics)</address>
<code>
(code format)var person = {firstName:"Bill", lastName:"Gats", age:50}
</code>
</body>
</html>
7. <dfn>, <abbr>I don't understand???</h2>
8.HTML CSS can not understand???
9. Links
(1) Common connection
There are two types, the current page and the jump to a new page:
<p><a href="http://www.baidu.com">This is a link</a>This is a link to jump to the current page</p> <p><a href="http://www.w3school.com.cn/" target="_blank">This is another link</a>This is a link to a new page</p>
(2) Picture link:
<a href="http://www.baidu.com"> <img src="img/witch.jpeg" width="60px" height="100px" align="center"/> </a>
It is equivalent to replacing the text description of ordinary links with inserting pictures. Of course, inserting pictures requires the help of the <img> tag.
(3) The name attribute specifies the name of the anchor (the second case is not well understood)
The first is to find the specified element in the current page and jump directly to this element, so that users do not need to keep scrolling the page to find the information they need, that is, linking to different locations on the same page.
Method: first mark the name of the anchor with name, and then use herf to point to the anchor
<a name="top">here is TOP part</a> <a name="content">here is CONTENT part</a> <a name="foot">here is FOOT part</a> <a name="add">I am the anchor add duck! Come tease me!</a> <a href="#top">Click me to link to TOP</a> <a href="#content">Click me to link to CONTENT</a> <a href="#foot">Click me to link to FOOT</a> <a href="#add">jump to add</a>
The meaning of this example is that when you click the three commands below, you will jump to the corresponding position of the command above.
The second:
This is to directly use herf to jump to the specified page with the corresponding anchor of the specified website.
The website link directly opens the top navigation bar of the website page and copy and paste is ok.
In fact, this is a dude duck similar to a hyperlink! ! ! It's just that the last step adds #xxxxx to specify the anchor point of the new page
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">I will jump to the new website page where there are designated anchor tips</a>
10. Insert pictures
(1) There are two kinds of simple insertion (the second one is not clear)
<p>an image:
<img src="img/5.jpg" width="100px" height="80px"/>
</p>
<p>Second image:
<img src="http://www.w3school.com.cn/images/boat.gif" />
</p>(2) Background image (how to control the size?)
<body background="img/Chihiro.jpeg">
<h2 align="center">Background picture</h2>
<p>
gif and jpg files can be used as HTML background.
</p>
(3) Alignment of images (what's the use? No effect)
What effect does the bottom, middle and top have? ? ?
As long as you use <p> to wrap the paragraph, it's ok, right?
<h2>Image with no alignment set:</h2> <p>image <img src ="img/thousand.jpeg" width="60px" height="100px"> in the text</p> <h2>Aligned image:</h2> <p>image <img src="img/thousand.jpeg" width="60px" height="100px" align="bottom"> in the text</p> <p>image <img src ="img/thousand.jpeg" width="60px" height="100px" align="middle"> in the text</p> <p>image <img src ="img/thousand.jpeg" width=60px" height="100px" align="top"> in the text</p> <p>caution, bottom Alignment is the default alignment.</p>
(4) Display the replacement text for the picture and do not understand the alt
(5) Picture link
Call the <a> tag, the same as the text link usage
Image link: Click on the image to jump to the specified page
<a href="http://www.baidu.com"> <img src="img/witch.jpeg" width="60px" height="100px" align="center"/> </a>
Text link:
<p><a href="http://www.baidu.com">This is a link</a>This is a link to jump to the current page</p>
Summary: All elements that are used as link objects are placed between the beginning and end of the <a> tag
<a>As a connected element<\a>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>image</title> </head> <body background="img/5.jpg"> <h2 align="center">Background picture</h2> <p>gif and jpg files can be used as HTML background.</p> <p>an image: <img src="img/5.jpg" width="100px" height="80px"/> </p> <h2>Image with no alignment set:</h2> <p>image <img src ="img/thousand.jpeg" width="60px" height="100px"> in the text</p> <h2>Aligned image:</h2> <p>image <img src="img/thousand.jpeg" width="60px" height="100px" align="bottom"> in the text</p> <p>image <img src ="img/thousand.jpeg" width="60px" height="100px" align="middle"> in the text</p> <p>image <img src ="img/thousand.jpeg" width=60px" height="100px" align="top"> in the text</p> <p>caution, bottom Alignment is the default alignment.</p> <a href="http://www.baidu.com"> <img src="img/witch.jpeg" width="60px" height="100px" align="center"/> </a> </body> </html>
(6) Create a map of the image, each area of which is a hyperlink. (It's funny, but I don't get it)
(7) Convert the image to an image map (I don't understand, is it the kind that zooms in wherever the mouse is placed when buying shoes?)
11. Forms
<p>Each table begins with a table tag.</p>
<p>Each table row begins with a tr tag. </p>
<p>Each table data starts with a td tag. </p>
That is to say: table indicates a large table, tr indicates each row of the table, and several trs are several rows; td indicates the specific data of each column corresponding to each row, and there are several td in each tr, indicating that there are Several columns; there can be multiple elements in a td at the same time.
<h4>a row:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table>
Among them, border represents the thickness of the border. The larger the number, the thicker the border.
<h4>Thickness of the border:</h4> <table border="8"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table>
(1) Use <th> for the header
but!
Simply using <td> can also be achieved, does <th> have any special effects?
Of course there is! !!
The headers in the table are displayed in bold!
td without header effect:
<h4>header:</h4> <table border="1"> <tr> <td>Heading</td> <td>Another Heading</td> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
The real header effect th:
<h4>header:</h4> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr>
Vertical and horizontal application of headers:
<h4>Horizontal header:</h4> <table border="1"> <tr> <th>Name</th> <th>address</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>Qingdao</td> <td>555 77 855</td> </tr> </table> <h4>Vertical header:</h4> <table border="1"> <tr> <th>Name</th> <td>Bill Gates</td> </tr> <tr> <th>address</th> <td>Qingdao</td> </tr> <tr> <th>Telephone</th> <td>555 77 855</td> </tr> </table>
(2) Tables without borders: It is ok not to set borders. <table>
<table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
(3)