1. Introduction to HTML
1. What is HTML
HTML is a language used to describe web pages.
- HTML refers to Hypertext Markup Language
- HTML is not a programming language, but a markup language, a markup language is a set of markup tags
- HTML uses markup tags to describe web pages
- HTML documents contain HTML tags and their text content** (HTML tags are analogous to the braces in C language, and the text content is like the output of code writing in C language)**
- HTML documents are also called web pages
2. HTML tags
- HTML tags are keywords surrounded by angle brackets, such as <html>
- HTML tags usually appear in pairs, such as <b> and </b>
- The first tag in the tag pair is the start tag, and the second tag is the end tag ** (yes, it is similar to the braces in C language) **
- Start and end tags are also called open tags and closed tags
3. HTML element
"HTML tags" and "HTML elements" usually describe the same meaning
But strictly speaking, an HTML element contains a start tag and an end tag
4. HTML page structure
Below is a visual HTML page structure
Only the <body> area (white part) will be displayed in the browser
Examples:
<html>
<head>
<title>大佬做的第一个网页</title>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</html>
operation result:
5. <!DOCTYPE> statement
- This statement helps the browser to display the webpage correctly
- doctype declaration is not case sensitive
- This declaration is used to declare the version of HTML, <!DOCTYPE HTML> is declared as an HTML5 document
6. Chinese encoding
At present, in most browsers, Chinese garbled characters will appear when directly outputting Chinese. At this time, we need to declare the characters as UTF-8 or GBK in the header.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大佬做的第一个网页</title>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</html>
7. Analysis of some of the HTML tags appearing above
- The <html> element is the root element of the HTML page
- The <head> element contains the meta data of the document. For example, <meta charset="utf-8"> defines the web page encoding format as utf-8
- The <title> element describes the title of the document** (i.e. "the first webpage of the big guy" above)**
- The <body> element contains the visible page content
- The <h1> element first has a headline** (similarly <h2>,<h3>...<h6> represents the next level of heading, similar to the graded heading in Markdown language)**
- The <p> element defines a paragraph
2. HTML basics
1.HTML title
HTML title is defined by <h1>-<h6> tags
2. HTML paragraph
HTML paragraphs are defined by the tag <p>
3. HTML link
HTML links are defined by the tag <a>
Examples:
<a href="http://www.baidu.com">啥也不知道就问百度</a>
(Specify the link address in the href attribute, and wrap this link between <a> and </a>, which is equivalent to adding a hyperlink to a paragraph of text)
Three. HTML elements
1. HTML element
2. HTML element syntax
- HTML elements start with an opening tag
- HTML elements are terminated by closing tags
- The content of the element is the content between the start tag and the end tag
- Some HTML elements have empty content
- The empty element is closed in the opening tag (ends with the end of the opening tag)
- Most HTML elements can have attributes
3. Nested HTML elements
- Most HTML elements can be nested (HTML elements can contain other HTML elements)
- HTML documents are composed of nested HTML elements
4. HTML empty elements
- HTML elements with no content are called empty elements. The empty element is closed in the opening tag
- <br> is an empty element without closing tag (<br> tag defines line break)
- Adding a slash in the opening tag, such as </br>, is the correct way to close empty elements
5. HTML tips: use lowercase tags
HTML tags are not case sensitive:
Equivalent to
Four. HTML attributes
1. HTML attributes [^ attributes are additional information provided by HTML elements]
- HTML elements can set attributes
- Attributes can add additional information to the element
- The attributes are generally described in the opening tag
- Attributes always appear in the form of name/value pairs, such as: name="value"
2. Attribute examples
HTML links are defined by tags. The address of the link is specified in the href attribute:
3. HTML attributes commonly reference attribute values
- The attribute value should always be enclosed in quotation marks
- Double quotation marks are the most commonly used, but single quotation marks are no problem
- In some individual cases, such as the attribute value itself has double quotation marks, then single quotation marks must be used, such as: name='John “ShotGun” Nelson'
Five. HTML part of the basic tags
| label | description |
|---|---|
| <html> | Define HTML document |
| <body> | Define the body of the document |
| <h1> - | Define HTML title |
| <hr> | Define the horizontal line |
| <!–…--> | Definition comment |
| <p> | Define a paragraph |
| <br> | Insert a single line break (line break) |
Explain the two tags not mentioned above
1. <hr> defines the horizontal line, examples are as follows
2.<!-- -->, comment (will not appear in the browser)
3.<br>, insert a single split line (line break)
Note that the browser ignores the typesetting in the source code (extra spaces and line breaks are omitted). For
example
, the result is
6. Text formatting
1. HTML formatting tags
HTML uses tags <b> and <i> to format the output text, such as bold or italic . These HTML tags are called formatting tags
