Introduction to HTML for front-end developers

1 Introduction to HTML

1.1 First experience with code, making the first web page

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > Making my first web page </ title >
</ head >
< body >
< h1 > Hello World </ h1 >
</ body >
</ html >

1.2 The relationship between HTML and CSS

To learn the basic technologies of web front-end development, you need to master: HTML, CSS, and JavaScript languages. Let's take a look at what these three technologies are used to achieve:
1. HTML is the carrier of web page content. Content is the information that web page creators put on the page for users to browse, which can include text, pictures, videos, etc.
2. CSS styles are expressions. Like the outer shell of a web page. For example, changing the title font or color, or adding a background image or border to the title. All these things that change the appearance of the content are called presentation.
3. JavaScript is used to achieve special effects on web pages. For example: When the mouse moves over a pop-up drop-down menu. Or the background color of the table changes when the mouse moves over it. There is also a rotation of top news (news photos). It can be understood that animation and interaction are generally implemented using JavaScript.
The following code demonstrates the effect of CSS. HTML is used to represent web page elements, and CSS makes elements more expressive, such as element position, size, color, font, etc.:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > The relationship between Html and CSS </ title >
< style type = "text/css" >
h1{
font-size:19px;
color:#930;
text-align:center;
}
</ style >
</ head >
< body >
< h1 > Hello World! </ h1 >
</ body >
</ html >

(1) Line 8 of the code affects the text size of the window.
(2) Line 9 of code affects the change of window text color.
(3) Line 10 affects the changes in the centering of the window text.

1.3 Understanding HTML tags

There are various web pages, all of which are composed of html tags. Here is a simple web page:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > Understanding HTML tags </ title >
</ head >
< body >
< h1 > Courage </ h1 >
< p > When I was in the third grade, I was still a timid little girl. I never dared to answer the teacher's questions in class, for fear that the teacher would criticize me if I answered incorrectly. I have never had the courage to answer the questions asked by the teacher. I don’t have the courage to participate in activities organized by the school. </ p >
< p > In the second semester of the third grade, our class had an open class. The teacher asked a very simple question. Many students in the class raised their hands, even those whose grades were much worse than mine, and said, "I'll do it, I'll do it." I looked around, and I was the only one who didn't raise my hand. </ p >
< img src = "http://img.imooc.com/52b4113500018cf102000200.jpg" >
</ body >
</ html >

The effect is as follows:

Analyze the HTML components of this web page:
(1) "Courage" is the title of the article on the web page. <h1></h1> is the title tag, and its code on the web page is written as <h1>Courage</h1>.
(2) "When I was in third grade...I didn't have the courage to join." is a paragraph in the article on the web page, and <p></p> is a paragraph tag. The code on the web page is written as <p>In the third grade...I didn't have the courage to participate. </p>
(3) The picture of the little girl on the web page is completed by the img tag. Its code on the web page is written as <img src="1.jpg">

1.4 Tag Syntax

1. Tags are enclosed by English angle brackets < and >, such as < and >.
2. Tags in html generally appear in pairs, divided into start tags and end tags. The end tag has one more / than the start tag.
3. The schematic diagram of the label structure is as follows:

4. Label examples:

(1) <p></p>
(2) <div></div>
(3) <span></span>

5. Tags can be nested, but the order must remain consistent. For example, if <p> is nested in <div>, then </p> must be placed before </div>. As shown in the figure below.

6. HTML tags are not case sensitive. <h1> and <H1> are the same, but lowercase is recommended because most programmers use lowercase.
7. Test: There is a webpage code, but line 9 is missing. Please add:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
Syntax of the <title> tag </title>
</ head >
< body >
< h1 > In this tutorial, you will learn how to create a website using HTML </ h1 >
< p > When special styles need to be applied to individual elements, inline styles can be used.
</ body >
</ html >

1.5 html/head/body Understand the basic structure of HTML files

Learn the structure of HTML files: An HTML file has its own fixed structure.

XML/HTML CodeCopy content to clipboard

< html >
< head > ... </ head >
< body > ... </ body >
</ html >

Code explanation:
1. <html></html> is called the root tag, and all web page tags are in <html></html>.
2. The <head> tag is used to define the header of the document, and it is the container for all header elements. The header elements include <title>, <script>, <style>, <link>, <meta> and other tags. The header tags will be introduced in detail in the next section.
3. The content between the <body> and </body> tags is the main content of the web page, such as <h1>, <p>, <a>, <img> and other web page content tags. The content in the tags here will be displayed in the browser.

The HTML file structure of the following code is incomplete because the tags <html> and </html> are missing:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > Understand the basic structure of HTML files </ title >
</ head >
< body >
< h1 > In this section, you will learn the basic structure of HTML files </ h1 >
</ body >

1.6 head tag

•The role of tags: The header of a document describes various properties and information of the document, including the title of the document. Most document headers contain data that is not actually displayed to the reader as content.
• The following tags can be in the head section:

XML/HTML CodeCopy content to clipboard

< head >
< title > ... </ title >
< meta >
< link >
< style > ... </ style >
< script > ... </ script >
</ head >

•<title> tag: The text between the <title> and </title> tags is the title information of the web page, which will appear 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 the web page is. Search engines can quickly determine the theme of the web page through the title of the web page. The content of each web page is different, and each web page should have a unique title.
For example, the content of the <title> tag "hello world" will be displayed in the title bar of the browser, as shown in the figure:

XML/HTML CodeCopy content to clipboard

< head >
< title > hello world </ title >
</ head >

1.7 Understand HTML code comments

The role of code comments: help programmers mark the purpose of the code. After a period of time, when you look back at the code you wrote, you can quickly remember the purpose of the code. Code comments not only help programmers recall the purpose of previous codes, but also help other programmers quickly understand the functions of your program, making it easier for multiple people to collaborate in the development of web page codes.
Grammar:

Lines 8 and 12 of the following code are comment codes, but it is found that they will not be displayed in the result window:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > HTML code comments </ title >
</ head >
< body >
< div >
< p > One-stop registration consultation! < href = "#" > Consult the registration consultant </ a > </ p >
</ div >
</ body >
</ html >

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

Original address: http://blog.csdn.net/qq_17416741/article/details/51416313

<<: CSS3+HTML5+JS realizes the shrinking and expanding animation effect of a block

>>: Very practical MySQL function comprehensive summary detailed example analysis tutorial