Learning html from scratch (1) and learning html from scratch

Learning html from scratch (1) and learning html from scratch

I. Create my first webpage for the initial code experience

1 <! Doctype html> 2 Initial code experience
In the code, enterHello World String.
Note:Hello WorldThe text must be writtenBetween two labels. For example:
 
Ii. Relationship between Html and CSS
 
1 <! Doctype html> 2 Relationship between html and css
To learn basic web Front-end development technologies, you must master the following: HTML, CSS, and JavaScript. Next, let's take a look at what these three technologies are used to achieve:
1. HTML is the carrier of webpage content. The content is the information that the Web Builder places on the page and allows users to browse, including text, images, and videos.
2. CSS styles are representations. It is like a webpage coat. For example, the title Font, color change, or adding a background image or border to the title. All these things used to change the appearance of the content are called representations.
3. JavaScript is used to implement special effects on webpages. For example, move the mouse over the drop-down menu. Or move the mouse over the table to change the background color. There is also a shift in the focus of News (news images. It can be understood that animation and interaction are generally implemented using JavaScript.
Understanding with an object-oriented approach is like a person:
HTML (that is, the material of human limbs, eyes, and bones)
CSS (clothes, skin color, makeup)
JavaScript (such as eating, walking, and talking)
Try: Add a style for Hello World
1. In line 2 of the Code, enterfont-size:12px;(Font-size: 12px; set the text size, pay attention to the text size change in the result window ).
2. In line 2 of the Code, entercolor:#930;(Color: #930; set the text color, pay attention to the text color changes in the result window ).
3. In line 2 of the Code, entertext-align:center;(Text-align: center; set the text position (center), pay attention to the text center change in the result window ).
Note:
1. semicolon;And：All numbers must be entered in the halfwidth and English format.
2. Add at the end of each line of css code;(H1 {does not need to be added because it is not a statement)
3.#930Before the color value#Do not forget.
3. Recognize html tags
1 <! Doctype html> 2 Recognize html tags
Let's get a preliminary understanding of html tags through learning a Web page. Internet surfing is usually used to browse various types of web pages, which are composed of html tags. The following is a simple web page. As follows:
 
Let's analyze which html tags the webpage consists:
"Courage" is the title of the webpage content article,Is the title tag, which is written in the Code on the webpage<H1> courage .
 
"In the third grade, I did not have the courage to participate ." Is the section of the article on the webpage,<p></p>Is a paragraph label. It writes code on the webpage<P> in the third grade, I did not have the courage to participate. </P>
 
The picture of the girl on the webpageimgTag. The code on the webpage is written
 
The complete code of the webpage is as follows:
 
 
In this case, each content in a webpage is displayed in a browser and stored in various labels.
 
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> This is written in the header of the HTML file.
 
Meta is the meta tag in html, which contains the relevant html information. The client browser or server-side program processes the information according to the information.
 
Mainly tell the browser this content type is HTML document, the content is the use of text and HTML, character set is UTF-8.
 
Because there is no annotation character set, it is possible to select GB by default in the web page, so you are generally used in the compilation of the UTF-8 international character set for encoding, however, garbled characters are displayed on the webpage.
 
Http-equiv = "Content-Type" indicates the Type of the description document, similar to the HTTP header protocol. It responds to some useful information to the browser to help display the webpage Content correctly and accurately.
Content = "text/HTML (content type); document mime type. The webpage format is text. The webpage mode is html. if javascript is text/javascript. (Important)
Page character set,
 
Charset = UTF-8 (encoding): especially important !!! The webpage is encoded in UTF-8 and Chinese. Note that the webpage content is encoded rather than the file itself. Other types of Chinese encoding may contain garbled characters. Other encoding: eg: gb2312, iso-8859-1, UTF-8
 
Iv. Tag syntax
 
1 <! Doctype html> 2 Syntax of tags
1. labels are enclosed by Angle brackets.<And>For exampleIs a tag.

2. tags in html are usually paired, with the start and end tags. The end tag is one more than the start tag./.
For example:
(1)<p></p>
(2)<div></div>
(3)<span></span>

3. labels and labels can be nested, but the order must be consistent, for example, <div> nested <p>, </p> must be placed before </div>. As shown in.

4. HTML tags are case-insensitive,And<H1>It is the same, but it is recommended that the lower case, because most programmers take the lower case as the standard.
 
Line 1 of the Code lacks the code. Please add it.
 
1. Do not forget to add the end label/.
 
<Start tag>... </end tag>
 
2. Do not forget that the tag code in html may appear in pairs and must be correctly nested.
 
For example:
 
<div><p>...</p></div>
 
5. Understand the basic structure of html files
 
1! Doctype html> 2 3 Understanding the basic structure of html files
An HTML file has its own fixed structure.
Code Description:
1.It is called the root tag. All webpage tags are in  
2.A label is used to define the header of a document. It is a container for all header elements. The Header element has<title>,<script>,<style>,<link>,<meta>.
 
3. In<body>And</body>The content between tags is the main content of the webpage, such,<p>,<a>,The content in the tag is displayed in the browser.
 
Lines 2nd and 10th of the Code are missing. Please add.
 
6. Understanding head labels
 
1 <! Doctype html> 2 Understanding head labels
Let's take a look.Label. The document header describes various attributes and information of the document, including the document title. Most of the data contained in the document header is not actually displayed to the reader as the content.

The following labels are available in the head section:
<title>Tag: the text between the <title> and </title> tab is the title information of the web page, which appears in the title bar of the browser.
The title tag of a Web page is used to tell users and search engines what the main content of this web page is. Search Engines can quickly determine the subject of a Web page through the web page title.
. The content of each webpage is different, and each webpage should have a unique title.
For example:
<title>"Hello world" is displayed on the title bar of the browser, as shown in:

Lines 3rd and 6th in the Code do not have code. Please add. Note:titleWhether the tag is in.

7. understand HTML code comments
1 <! Doctype html> 2 View Code
What is code annotation? The purpose of code annotation is to help programmers to mark the purpose of the code. After a while, I will look at the code you have written, and I will soon think of the purpose of this Code.
Code comments not only help programmers recall the purpose of the previous code, but also help other programmers quickly understand the functions of your program and facilitate collaborative development of Web code.
Syntax:
<! -- Comment text -->
For example, if the Code contains lines 8th and 12, the Comment code is not displayed in the result window.
Comment or cancel the comment shortcut: ctrl +/