Reprinted from the product is slightly Library http://www.pinlue.com/article/2020/04/0122/4710102529903.html
Front-end engineers has become one of the important positions in the R & D system.
But the contrast is that very few computer science courses at the University of willingness to offer front-end, knowledge of most of the front-end engineers, are also at work in practice and continuous learning.
Recently received a message back many students, he said that he hoped to introduce more tutorials number of front-end direction.
Today we bring you a beginner's course for the front end, the front end of the core skills can take you from zero entry HTML, CSS, JS, React, etc., and create a to-do management application -
Project results:
Courses from the most basic HTML / CSS / JS talk, also includes explaining TypeScript / React / Fabric and other common skills. Deep progressive layers, if you want to get started quickly React framework, this course will be your very good choice.
Click on "build-do application from 0-1" will be able to learn all the course content.
The following is the content of the first section of the course - "Introduction to HTML" HTML Quick Start with you, let us enter the front door to see it:
"Introduction to HTML"
Experimental introduction
This experiment is to learn HTML, and a more detailed explanation of how the Web works. The main contents are: HTML common tags, HTML document structure, HTML tables and forms, HTML ordered list and unordered list. By studying this section, you can build a simple HTML page.
Knowledge Point
What is HTML
How the Web works
Document Structure
Common Tags
form
Forms
Ordered list and unordered list
What is HTML
HTML (Hypertext Markup Language) is a standard for creating a web page markup language. HTML does not need to compile, can be executed directly from the browser, it depends on the resolution of the browser kernel. It is not a programming language, but a markup language.
How the Web works
Let us demonstrate how users see a page that appears.
Specifically:
When the user enters a URL through a browser, the browser to find it on the DNS server, and then parse it.
After the completion of the analysis, the browser sends an http request to the server.
Server agreed to this request, put the HTML file is sent back to the browser.
The browser to get the HTML file, the implementation of its resolution, displayed on the user's screen.
HTML document structure
First we look at an example:
<!DOCTYPE html><html> <head> <title>HTML 简介</title> <meta charset="utf-8" /> </head> <body></body></html>
This is a basic skeleton of HTML, we will gradually introduce what these are.
Document Type Declaration
The document is a statement of our head. He told the browser, this document deals with HTML documents.
html tags
html tags i.e. root element, the document starts here represented, the tag comprises two sub-tabs: head and body.
head element
The following head tag included in the label (will be mentioned later) from the title, meta, link, style, script and the like.
title tags
Role: set the title or the name of the document. Content Browser usually the label is displayed on the top of the window or tab. Each HTML document can only have one, you must have a title tag.
meta tags
Encoding format <metacharset = "UTF-8"> character is declared utf-8.
body tag
Tag defines the main body of the document, which is our main content (such as text, hyperlinks, images, tables and lists, etc.).
Common Tags
1.h Department of class labels
h label has six h1, h2, h3, h4, h5, h6, it represents our title.
<! DOCTYPE html> <html> <head> <title> HTML Introduction </ title> <meta charset = "utf-8" /> </ head> <body> <h1> I am a headline </ h1> <h2> I is the second title </ h2> <h3> I was three title </ h3> <h4> I was four title </ h4> <h5> I was five title </ h5> <h6 > I was six heading </ h6> </ body> </ html>
In order that we can more effectively learn, use laboratory building environment. First, we create a new file, click File, then New File, named index.html.
Then enter the code above.
Let us look at the effect of running it. Right index.html file, click Open With, and then click Preview.
The final results are:
2.p label
p tag is our text labels, p tags will automatically create some gaps between its two labels. Deletion of the code on the tag of the content, the next content to the tag inside.
<P> I am the first paragraph, laboratory building, to experiment, to learn programming </ p> <p> I am the second paragraph of the text, laboratory building, to experiment, to learn programming </ p>
3. Image tag
The image is defined by HTML tags. Syntax: <imgsrc = "Image URL" /> delete sections of the code on the label in the content, the following contents into the label inside.
<p> laboratory building Pictures: </ the p-> <img src = " http://image99.pinlue.com/thumb/img_jpg " />
4.a label
<a href="https://www.pinlue.com/">品略网</a>
Click on the text:
Jump to page:
"Building do list application from 0-1" will be able to continue learning.
