written in front
Hello everyone, I am [ Lin-Xiaobai ], a student majoring in software engineering , who likes computer knowledge . I hope everyone can learn and progress together ! I am a college student , and my professional level is limited. If you find any mistakes or deficiencies , please correct me! thank you all! ! !
If brothers and sisters are interested in my articles, please don't be stingy with your little hands, give more likes and follow ! ❤❤❤ Love you guys! ! !
Table of contents
1.1 First experience with HTML
2. The basic structure of HTML
2.1 How to view the specific code of a certain structure in a web page?
2.2 The difference between [Check] and [View Webpage Source Code]:
2.3 Basic structure of web pages
4. Introduction to HTML introductory knowledge
【Past review】
[HTML series] Pre-chapter · HTML preamble knowledge
【other series】
1. Introduction to HTML
1.1 First experience with HTML
- Step 1: Right mouse button => New => Text document => Enter the following content and save.
- <marquee> This is my first HTML file </marquee>
- Step 2: Modify the suffix to .html , and then double-click to open it.
- For the suffix here, you can use .htm , but it is recommended to use the more standard .html .
- What programmers write is called source code , which is handed over to the browser for rendering.
- View the source , the specific operation:
- In the blank space of the webpage: right mouse button ==> view the source code of the webpage
1.2 HTML tags
- Tags , also known as elements , are the basic units of HTML.
- Labels are divided into: double label and single label (most of them are double label).
- Tag names are not case-sensitive, but lowercase is recommended because it is more standardized.
- Double tab:
Sample code:<marquee>这是我的第一个HTML文件</marquee>
- Single label:
Sample code:<input>
- The relationship between tags: parallel relationship, nested relationship, you can use the tab key to indent:
<marquee> 这是我的第一个HTML文件 <input> </marquee> <input>
1.3 HTML tag attributes
- Used to provide additional .
- Can be written in: start tag or single tag , the form is as follows:
For example:
<marquee loop="1" bgcolor="orange">这是我的第一个HTML文件</marquee> <input type="password">
- Some special attributes do not have attribute names, only attribute values, for example:
<input disabled>important point:
- Different tags have different attributes; there are also some common attributes (can be written in any tag, which will be summarized in detail later).
- Attribute names and attribute values cannot be written indiscriminately, as stipulated by W3C.
- Attribute names and attribute values are not case-sensitive, but lowercase is recommended.
- Double quotation marks can also be written as single quotation marks, or even not written, but it is still recommended to write double quotation marks.
- Do not use attributes with the same name in the tag, otherwise the later written ones will be invalid, for example:
<input type="text" type="password">
2. The basic structure of HTML
2.1 How to view the specific code of a certain structure in a web page?
- Click the right mouse button and select " Inspect " .
2.2 The difference between [Check] and [View Webpage Source Code]:
- [View the source code of the webpage] What you see is: the source code written by the programmer.
- [Check] What you see is: the source code after being "processed" by the browser.
- Remarks: In daily development, [Check] is used the most.
2.3 Basic structure of web pages
- The content you want to display in the web page is written in the body tag.
- The content in the head tag will not appear in the web page.
- The title tag in the head tag can specify the title of the web page.
- code:
<html> <head> <title>网页标题</title> </head> <body> ...... </body> </html>
3. Install VSCode
There are many tutorials for installing VSCode on the Internet, so I won't go into details here.
4. Introduction to HTML introductory knowledge
4.1 HTML comments
1. Features: The content of the comment will be ignored by the browser and will not be displayed on the page, but it is still visible in the source code.2. Function: explain and illustrate the code.3. Writing method:<!-- 下面的文字只能滚动一次 --> <marquee loop="1">这是我的第二个HTML文件</marquee> <!-- 下面的文字可以无限滚动 --> <marquee>这是我的第二个HTML文件</marquee>4. Comments cannot be nested. It is wrong to write the following (counter-example).<!-- 我是一段注释 <!-- 我是一段注释 --> -->
4.2 HTML document declaration
- Function: Tell the browser the version of the current web page.
- Writing:
- Old way of writing : It depends on the HTML version used by the web page . There are many ways of writing.
- New way of writing: everything has become easier! W3C recommends using HTML 5 .
<!DOCTYPE html> 或 <!DOCTYPE HTML> 或 <!doctype html>
- Note: The document statement must be on the first line of the web page and outside the html tag.
4.3 HTML character encoding
- Computer operations on data:
- When storing, the data is: encoded .
- When reading, the data is: decoded .
- Encoding and decoding will follow a certain standard - character set .
- There are many character sets, the common ones are (understand):
- Principle 1 : Be sure to use appropriate character encoding when storing.
- Otherwise: cannot store, data will be lost!
- Principle 2 : Whichever method is used for encoding when storing, which method is used for decoding when reading.
- Otherwise: the data is disordered (garbled characters)!
- For example, the following text contains: Chinese, English, Thai, Burmese
我爱你 I love you! ฉันรักเธอนะ ကȁန်မကိǽ ချစ်တယ်။
- If you use ISO8859-1 encoding to store , there will be a problem at the moment of saving, because ISO8859-1 only supports English ! In order to ensure that all input can be stored and read normally, almost all of them now use: UFT - 8 encoding. So when we write html files, we also uniformly use UFT - 8 encoding.
Summarize:
- When writing code, uniformly use UTF - 8 encoding (the safest).
- In order for the browser not to make mistakes when rendering html files, the character encoding can be specified through the meta tag and the charset attribute .
<head> <meta charset="UTF-8"/> </head>
4.4 HTML setting language
main effect:
- Let the browser display the corresponding translation prompt.
- Good for search engine optimization.
Specifically written:<html lang="zh-CN">Extended knowledge: The writing rules of the lang attribute (as an extra-curricular extended knowledge, just understand it).
- The first way of writing ( language-country), for example:
- zh - CN : Chinese - Mainland China (Simplified Chinese)
- zh - TW : Chinese - Taiwan (Traditional Chinese)
- zh : Chinese
- en - US : English-United States
- en - GB : English-UK
- The second way of writing ( language-specific type) is not recommended, for example:
- zh - Hans : Chinese—Simplified
- zh - Hant : Chinese—Traditional
4.5 HTML standard structure
The HTML standard structure is as follows:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我是一个标题</title> </head> <body> </body> </html>
- Enter ! and press Enter to quickly generate a standard structure .
- In the generated structure, there are two meta tags, which we will not use temporarily, so we can delete them first.
- Configure the built-in plug- in emmet of VScode to customize the properties of the generated structure.
- In the folder where the code is stored, store a favicon.ico image, which can configure the website icon.
epilogue
I will continue to update the article! I hope everyone will click three times , your encouragement is the motivation for the author to keep updating
