Introduction to Front-End Technology

Disclaimer: This article is reproduced from http://www.lvyestudy.com/les_hj/hj_1.1.aspx, if you need more information about the front-end, please check the link

Before we start the HTML tutorial, we need to talk about some knowledge of web development. It is very useful to know the knowledge about how to go to the future of your website development and what to learn. At the same time also avoid you go too many detours. first, from the Web page production to front-end development 1, the web1.0 era of Web page production

Web page production is the product of the web1.0 era, when the Web page is mainly static Web pages, the so-called static Web page is not with users to interact with only for readers to browse the page, such as a QQ log, a blog post and other display of the article. In the Web 1.0 era, the only thing users can do is to browse the content of the text images of the site, and users cannot comment on the communication (lack of interactivity) as they do on most websites today. Now most people have heard the "Dreamweaver+fireworks+flash of the Three Musketeers", which is the product of the Web 1.0 era.

: Web Page The musketeers refer to "Dreamweaver, fireworks and flash". 2, the front-end development of the web2.0 era

"Front-End development" is from the "Web production" evolved.

Since 2005, the Internet into the Web 2.0 times, by a single text and pictures of static Web pages can not meet the needs of users, users need a better experience. In the Web 2.0 era, Web pages have static pages and dynamic pages. The so-called Dynamic Web page, is not only users can browse the Web, but also with the server to interact. For example, you log on to Sina Weibo, to enter the account password, this time will require the server to your account and password to verify the adoption of the line. The pages of the web2.0 era include not only flashy animations, audio and video, but also user comments, uploading and downloading files (interactivity) in a Web page. The Web page of this era, if it is made with "the Dreamweaver+fireworks+flash of the Three Musketeers of the webpage", it is far from satisfying the demand. Now the site development, whether it is difficult to develop, or the development of the way, are closer to the traditional background of the Web site development, so now no longer called "web production", but called "Web front-end development."

Therefore, in the web2.0 era of you, if you want to learn Web site development technology, do not believe that the so-called "Web Page Three Musketeers Dreamweaver+fireworks+flash", because this combination is already the product of the last internet age. And this combination developed a lot of web site problems, such as code redundancy, site maintenance difficulties (learning to the late, you will know why not use this combination). Second, front-end technology 1, front-end development of the core technology

We know that with the so-called Web page, the Three Musketeers can not meet the demand, that front-end development to learn what technology. The Web page is made up of 3 parts: structure, performance and behavior. The new standard for Web pages is the Internet, and the current pattern is HTML, CSS, and JavaScript.

Front-End development of the core of the 3 technology (1) HTML is what.

HTML, full name "Hyper text Markup Language (Hypertext Markup Language)", in short, the Web page is made of HTML language. HTML is a descriptive language and is a very easy to get started language. (2) CSS

CSS, full name "(Cascading style sheet)". In the future we see "cascading Style Sheets", "CSS Styles", and CSS in other places. (3) JavaScript

JavaScript is a scripting language. (4) The difference between HTML, CSS and JavaScript

We all know that the core of the front-end technology is HTML, CSS and JavaScript three kinds. But what are these three for?

HTML is the structure of Web pages, CSS is the look of the Web, and JavaScript is the behavior of the page. ”

I faint, this is not equal to not say. Well, let me give you a metaphor. We compare the process of front-end development to "building a house", making a Web page like building a house, building the house structure (HTML) first. After building the house, decorate the house (CSS), such as installing curtains to windows and paving beautiful tiles to the floor. Finally, after the decoration, when the night falls, we have to turn on the Light (JavaScript), so as to see inside. Now I probably understand.

Let's go back to the actual example and look at the navigation bar of the Green Leaf Learning network. We first analyze the "front-end technology" this column has the following basic features: ① navigation bar text color is white, ② size is 14px ③ background color is green, ④ mouse move to the top color will become dark green;

How are these effects made? In fact, the idea is to "build the house like" above. We first build the Web page structure with HTML, by default, font, font color, font size and background color are as follows:

Text that only uses HTML

Then we decorate it with CSS, change its font, font size, font color and background color, get the following effect chart:

Add CSS to HTML based text

Finally, we define the mouse behavior through JavaScript, that is, when the mouse moves to the top, the background color will change to dark green, the effect is as follows:

Add JavaScript effects

Now we all know how a colorful Web page is done, and why "front-end technology is the core of HTML, CSS and JavaScript" bar. 2, front-end development of other technologies

The core of front-end technology is HTML, CSS, and JavaScript, but for a real front-end engineer, even if you are proficient in these three, you cannot be called a real "front-end engineer". Because the front-end technology in addition to HTML, CSS and JavaScript three kinds, but also need to learn Ajax, SEO and so on. (1) Ajax

Ajax, or "Asynchronous JavaScript and XML (asynchronous JavaScript and XML)", is a web development technology that creates interactive Web applications.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page. Traditional Web pages (without Ajax) if you need to update your content, you must overload the entire page.

Ajax is the technology of the front and back end interaction, mainly implemented in the front-end. (Don't understand.) It doesn't matter, we'll explain it in the Ajax tutorial) (2) SEO

SEO, namely "Search Engine optimization (search engine Optimization)". SEO optimization is a special use of search engine searching rules to improve the current site on the search engine in the natural ranking of the way (the domestic common search engine has Baidu, 360, Sogou, etc.).

In short, you built the site does not represent your site can be search engines, we generally use Baidu search materials, search out a lot of pages, but we generally see the results of the first to second page will no longer look down. SEO, is to our website can be ranked in front of the search results, so that your site will have traffic. You do the website, I believe you also want to let your site have more people to browse it. third, back-end technology

If we only learn the front-end technology, in fact, it is almost possible to develop their own web site. However, this time the development of the site is a static site, the only function is for users to browse, lack of interaction with users, users can do not many things. Therefore, if we want to develop a better user experience, more powerful web site, we need to learn back-end technology.

What kind of technology is back-end technology? For a simple example, many large Web sites have a registration function, only after the user has a certain right to register, such as you want to use QQ space, you have to register a QQ to use. Such a function is implemented by backend technology. Again, Taobao is not a lot of business. These businesses have a wide variety of products that can only be achieved using database technology from back-end technology. 1, PHP

PHP is a general-purpose open source scripting language. The syntax absorbs the features of C, Java, and Perl, is easy to learn, is widely used, and is mainly applicable to the web development field. 2, JSP

JSP technology is similar to the ASP technology, it is in the traditional Web page HTML file Insert Java Program (scriptlet) and JSP tags (tag), thus forming a JSP file. Web applications developed with JSP are Cross-platform, run on Windows systems, and run on other operating systems, such as Linux. 3, ASP.net

Asp. NET's predecessor is we often say ASP technology. Green Leaf Learning Network is the use of asp.net developed. Asp. NET is a technology recommended in this series of courses. Of course, we can choose for ourselves.

All of the above three kinds of dynamic Web technology, we can go here to learn more about: Baidu Encyclopedia Dynamic Web Technology

Many people think that "Web site is a collection of many pages", in fact, this understanding is too appropriate. Accurately, it should be "the site is the front-end and the back end of the combination." Iv. learning routes from front-end development to back-end development 1, the common web technology

Common web Technologies 2. Learning Route

From the above we can see that the web technology is too much, many students do not know how to start, the Internet to ask others, answers and various. This is recommended on this website:

Getting Started with HTML →CSS introductory →html Advanced →CSS Advanced →javascript Getting Started →jquery Getting started (or getting Started with PHP) →asp.net Advanced (or PHP Advanced)

This route is the ideal one from the front-end development to the back-end development of the learning route, in fact, you do not look at this route so long, in fact, I was truncated to customize, to master also on a number of technologies: HTML, CSS, JavaScript, ASP. NET (PHP), Ajax, and so on.

When we were just getting started with HTML, you didn't have to learn html to be proficient enough to learn the CSS primer (which is also impossible), which is one of the most stupid and time-consuming learning patterns. So for beginners, never mind mastering a technology, then to master another technology. If you can do it, I'm sure a lot of great gods have worshipped you as a teacher. Because the technology is to "pass 10 lines" will be a line to pass.

If you take another route, you may have a lot of detours to take. This route is I start from the front-end technology beginners, to develop the green Leaf Learning Network, Guangzhou Intelligent Engineering Research Institute website, Graduation topic system, a lot of online tools and read a lot of technical books after the painstaking summary. Of course, this line is also a suggestion, not a tough one.

Next, is our first step into the front-end development--html Introductory tutorial.  question

1, what is called Xhtml+css+javascript.

We see many titles on the market are called "div+css" or "html+css", in fact, these two terms are not rigorous, accurate is "xhtml+css." But called more people, we also know is that meaning, so the conventional is simply called "div+css" or "html+css". So later, we see "div+css" or "html+css", in the mind should also know that refers to the "xhtml+css." But what is XHTML, as we'll say in the later chapters, is that readers don't have to rush around.

2, the common JavaScript framework should learn which.

We know that HTML, CSS, and JavaScript are the most basic 3 elements in the front-end technology. They have no other framework for HTML and CSS, but for JavaScript it has many frameworks, such as:

"JQuery, ExtJS, Dojo, YUI ..."

That's a good way for beginners to choose which JavaScript framework to select. Of course it's not jquery. jquery, the most popular JavaScript framework in the world, is one of the easiest JavaScript frameworks for beginners to get started with.  Summary

1, from web1.0 to web2.0, Web page production has become the front-end development. Now for front-end development, you have to learn is not what "web Three Musketeers", but "html+css+javascript";

2, the front-end technology is the core elements of HTML, CSS and JavaScript, but we have to learn some ajax, SEO knowledge;

3, front-end technology can only develop static Web pages, and further learning back-end technology, you can develop a better user interaction, more powerful web site;

4, back-end technology has asp.net (or PHP), SQL Server, etc.

5. Learning routes: Introductory HTML →CSS Introductory →html Advanced →CSS Advanced →javascript Getting Started →jquery Getting started (or PHP Getting started) →asp.net Advanced (or PHP advanced);