HTML-Summary
HTML summary of web Application Technology
HTML summary
1. Introduction to HTML:
The full name of HTML is HyperText Markup Language, which means hypertext editing language. Html is used to build web pages.
hypertext refers to a link that connects pages within a single website or between multiple websites
HTML is responsible for constructing the meaning and structure of the content of the web page, CSS is responsible for describing the performance and display results of the web page, and JavaScript or typescript is responsible for the function and behavior of the website.
HTML is not a programming language, but a markup language used to define the content structure.
You can view the HTML document of any web page by F12 or right clicking to view the source code.
2.HTML document structure
Demo code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>Page title</title> </head> <body> <h1>My first Web page</h1> <p>It's a little ugly at the moment:)</p> </body> </html>
HTML uses "markup" to indicate text, pictures, and other content for easy display in browsers. HTML tags contain some specified "elements", such as,
,, < header >, < footer >, < article >, < section >, < p >, < div >, < span >, < img / >, < / span > < side >,,,,,,, < NAV >,,, etc</ nav></aside></div></p> </section></article></footer></header>
The figure is an analysis of an element:
- Opening tag: contains the name of the element (p in this case), surrounded by left and right angle brackets. The presentation element starts or works from here -- in this case, the paragraph begins.
- Closing tag: similar to the start tag, except that it contains a slash before the element name. This indicates the end of the element -- in this case, the end of the paragraph. Beginners often make the mistake of forgetting to include the end tag, which may produce some strange results.
- Content: the content of the element. In this case, it is the input text itself.
- Element: the combination of start tag, end tag and content is a complete element.
Structure of HTML document:
- <! DOCTYPE HTML >: declares the document type. For historical reasons, it is dispensable now.
- <html>< / HTML >: < HTML > element. This element wraps the entire page and is a root element into which other elements are nested.
- < head > < / head >: < head > element. This element is a container that contains all the content you want to include in the HTML page but don't want to display in the HTML page. These include keywords and page descriptions that you want to appear in search results, CSS styles, character set declarations, and so on.
- < meta charset = "utf-8" >: this element sets the document to be encoded using the utf-8 character set, which contains most of the human text. Basically, he can recognize all the text content you put on it. There is no doubt about using it, and it can avoid many other problems in the future.
- < link rel = "shortcut icon" href = "favicon. ICO" type = "image / x-icon" >: Specifies the icon of the page, which appears on the browser label. (note the directory where the icon file is placed)
- < title > < / Title >: set the page title, which appears on the browser label. It can be used to describe the page when you tag / favorite page.
- <body>< / body >: < body > element. Contains all the content you can see on the page, including text, pictures, audio, games and so on.
3. Relevant instructions of HTML documents:
notes:
Demo code:
<p>I'm outside the comments, you can show!</p> <!-- <p>I'm in the notes! The browser will ignore me</p> -->
Annotation shortcut: ctrl+/
Note: HTML files are not case sensitive, but it is recommended to use all lowercase tags.
Empty element: there is only one start tag
General tags have start tags, content tags and end tags. But some have only one start tag, such as
<br>Line feed < HR > horizontal split line < input > input box < img > picture < a > hyperlink, etc
Elements can be nested. For example, images can be embedded into hyperlinks, which is shown by clicking on the image to jump
Attribute of element:
Elements can have related attributes. Attribute contains additional information about the element that will not be displayed in the browser.
Demo code:
<!-- Paragraph input box with attributes --> <p title="This is a title attribute">Move the mouse up and try!</p> <!-- Input box with attributes --> <input type="text"> <input type="password">
An attribute must contain the following:
- A space between the attribute and the element name. (if there are already one or more attributes, there is a space between the previous attribute and the previous attribute.)
- Property name, followed by a = sign.
- A property value enclosed by a pair of quotation marks' '.
4. Heading of HTML document
The first to sixth level titles provided by HTML correspond to < H1 > < H2 > ~ < H6 >, respectively
<h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr>
5. Text format
The text format you need to know is as follows:
< mark > mark / highlight < del > strikethrough < s > strikethrough < ins > < U > underline < small > small font display < strong > bold < EM > Italic
Demo code:
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p>
VScode operation effect:
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-jzlj2gmt-1623563510680) (C: \ users \ admin \ appdata \ roaming \ typora \ typora user images \ image-20210330202355405. PNG)]
6. Hyperlink
Hyperlinks
Syntax example:
<a href="https://www.baidu. com/" target="_ Blank "> Baidu</a>
- href is the address URL to jump to (uniform restore locator)
- target attribute is_ blank means to open a hyperlink on a new page (the default is to open it on the current page, i.e. _self)
- The content contained in the hyperlink tag (currently the text "Baidu click") is displayed on the page for users to click. If it is modified into a picture, it will become a hyperlink picture
Anchor point
Anchors, also known as bookmarks, are used to mark an element or location on a page. Through the anchor, we can easily jump in the long page.
First use the id attribute to generate an anchor point of an element, and then use a hyperlink to point to the anchor point.
Example code:
<!-- The rest of the document --> <h2 id="C4">The fourth chapter discusses the importance of patient zero</h2> <!-- The rest of the document --> <a href="#C4 "> skip to Chapter 4</a> <!-- The rest of the document --> ...
- The id value of the element must be unique, that is, the page can no longer have the id value of other elements as C4
- Addresses in hyperlinks need to have # symbols
7. Picture and file path
picture
Insert a picture on the page as follows:
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
explain:
- The src attribute is the URL of the location where the picture file is to be displayed, that is, the path of the picture file
- alt property the text (placeholder) to display when there is a problem getting the picture
- You can specify a high width for the picture, but it is not recommended (which may cause the picture to deform)
Tip: for small-size pictures, base64 coding can now be used to improve the page loading speed and user experience. You can go and have a try.
File path
To get the picture file, we need to specify where the file is located, which is called the file path. There are two kinds of file paths: relative path and absolute path.
The example in the picture above is the absolute path. The following is an example of a relative path:
| example | explain |
|---|---|
| <img src="picture.jpg"> | The picture file is in the same directory as the current document |
| <img src="./images/picture.jpg"> | The image file is in the images directory under the current directory |
| <img src="../picture.jpg"> | The picture file is in the upper directory |
8. table
Sometimes, the content of a page needs to be presented in a table. We can use labels such as < Table >:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
In the code, < tr > represents the line, < td > represents the unit in the line, < th > is the unit of the header (it will be displayed in BOLD)
9. List
We can also use lists to present content, which are divided into unordered lists and ordered lists.
Unordered list
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
The unordered list uses the < UL > label. By default, the solid dot is used as the sign of each item. Other signs can be hollow circle, solid square and no sign.
<ul type="square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Ordered list
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
The ordered list uses the < ol > tag. By default, the number is used as the symbol of each item. Other symbols can be uppercase A, lowercase a, Roman i, etc.
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
10. Form
When the website needs to obtain some of our information, such as user name, password, what to buy, how much to buy, comments, etc., we need to use forms to let users fill in or choose.
<form>
<!-- Text box, note placeholder Prompt -->
user name:<br>
<input type="text" name="name" placeholder="enter one user name"><br>
<!-- Password box -->
password:<br>
<input type="password" name="ps" placeholder="Please input a password"><br>
Age:<br>
<!-- Digital input box, note min and value attribute-->
<input type="number" name="age" min="18" value="18"><br>
<!-- radio button, be careful checked attribute -->
Gender:<br>
<input type="radio" name="gender" value="male" checked> male<br>
<input type="radio" name="gender" value="female"> female<br>
<input type="radio" name="gender" value="other"> other<br>
<!-- Drop down list, note selected attribute -->
Party:<br>
<select name="party">
<option value="D">the Democratic Party of the United States</option>
<option value="R" selected>republican party</option>
<option value="N">without party affiliation</option>
</select><br>
<!-- Checkbox -->
Which means of transportation do you have:<br>
<input type="checkbox" name="vehicle1" value="Bike"> Bicycle<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> motorcycle<br>
<input type="checkbox" name="vehicle3" value="Car"> Car<br>
<input type="checkbox" name="vehicle4" value="Jet"> aircraft<br>
<!-- Date Pickers -->
Your working date:<br>
<input type="date"><br>
<!-- File selector -->
Upload your photos:<br>
<input type="file" name="photo"><br>
<!-- Text entry area, note rows and cols attribute -->
Your suggestion:<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- Form submission/Reset button to cancel or transfer the data in the form to the server for processing -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
11. Others
Elements of HTML can be displayed in a way called chunking or inline.
block element
When a block element is displayed in the browser, it usually starts (and ends) with a new line. Such as: < H1 >, < pre >, < UL >, < Table >, < div >, etc.
<h2>block element </h2> <div>Hello</div> <div>World</div> <p>Single line</p>
Inline element
Inline elements, on the contrary, are always displayed one by one and do not start a new line. Such as: < span >, < input >, < td >, < a >, < img >, etc.
<h3>The following elements will be displayed on one line</h3> <span>full name:</span> <input name="username"> <span>Ha ha ha</span> <a href="https://google.com/">Google</a> <img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">
Preset format
If you want to display a poem or some specially formatted text on the web page, please use the pre tag.
<!-- pre The content in the label will remain formatted -->
<pre>
If I love you——
Not like climbing Campanula,
Borrow your tall branches to show off yourself;
If I love you——
Never learn from infatuated birds,
Repeat monotonous songs for the shade;
It's not just like a spring,
It brings cool comfort all the year round;
It's not just like dangerous peaks,
Increase your height and set off your majesty.
Even sunlight.
Even spring rain.
No, that's not enough!
I must be a kapok near you,
Stand with you as the image of a tree.
Root, firmly held in the ground,
Leaves touch each other in the cloud.
Every gust of wind,
We all greet each other,
But no one,
Understand our words.
You have your copper branch and iron stem,
Like a knife, like a sword,
Also like halberd;
I have my red flowers,
Like a heavy sigh,
Like a heroic torch.
We share the cold wave, wind, thunder and thunderbolt;
We share mist, flowing haze and rainbow.
As if separated forever,
But they depend on each other for life.
This is great love,
Perseverance is here:
Love——
Not only love your great body,
Also love your position and the land under your feet.
</pre>
Special characters
Consider what the following code will show?
<p>How much Far away, get out How far is it?</p>
Or if you want to display a piece of HTML source code on the page, you plan to use the tag < pre >:
<pre> <h1>This is a primary title</h1> <p>This is a paragraph<p> <a href="https://twitter. COM / "> what you see, where you feel, where you are, and who you think</a> <pre>
The above code will not get the result you want.
The reason is: in HTML, some characters are reserved.
The less than sign (<) and the greater than sign (>) cannot be used in HTML because browsers mistakenly think they are tags.
If we want to display reserved characters correctly, we must use character entities in the HTML source code
<p>How much Far away, get out How far is it?</p> <hr> <h2>test.html</h2> <pre> <h1>This is a primary title</h1> <p>This is a paragraph<p> <a href="https://twitter. COM / "& gt; what you see, where you feel, where you are, who you think & lt; / A & gt; <pre>
Special characters can be referenced ISO-8859-1 character entity manual