Basic concepts and techniques in Web Development


Today, this article introduces some basic concepts and technologies used in web development for beginners. There are 26 items from a to Z, each corresponding to a concept or technology.


AJAX is called “asynchronous JavaScript and XML” (asynchronous JavaScript and XML). It is a web development technology to create interactive web applications. According to Jesse James Garrett, the Ajax proponent, AJAX:

Using XHTML + CSS to represent information;
Using JavaScript to operate DOM (document object model) for dynamic display and interaction;
Using XML and XSLT for data exchange and related operations;
Use XMLHttpRequest object to exchange asynchronous data with web server;
Use JavaScript to bind everything together.
Similar to DHTML or lamp, AJAX does not refer to a single technology, but organically utilizes a series of related technologies. In fact, some Ajax based “derivative / composite” technologies are emerging, such as aflax.

B — Browser

Web browser is a kind of software that displays the files in web server or file system and lets users interact with these files. It is used to display text, images and other information in the world wide web or local area network. These words or images can be hyperlinks to other web sites, and users can browse various information quickly and easily. Most web pages are in HTML format. Some web pages need a specific browser to display correctly. According to the market share in January 2010, the common web browsers on personal computers are Microsoft’s Internet Explorer, Mozilla’s Firefox, Google’s Google Chrome, Apple’s Safari and opera, respectively. Browser is the most frequently used client program. Web developers should make sure that their programs work in every major browser.

C —  CSS

Cascading style sheets, also known as string style lists, English: cascading style sheets, abbreviated as CSS, a standard defined and maintained by W3C, a computer language used to add styles (fonts, spacing, colors, etc.) to structured documents (such as HTML documents or XML applications). The latest version is CSS 2.1, which is a candidate recommendation for W3C. The next version of CSS 3 is still in development.


Document object model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language. The history of document object model can be traced back to the “browser wars” between Microsoft and Netscape in the late 1990s. In order to survive in JavaScript and JScript, both sides gave the browser powerful functions on a large scale. Microsoft has added a lot of exclusive things in the web page technology, including VBScript, ActiveX, and Microsoft’s own D HTML format, which makes many web pages unable to display normally using non Microsoft platforms and browsers. DOM is a masterpiece that was brewed at that time.

E — Events

Events are actions that can be recognized by the control, such as pressing the OK button and selecting a radio button or check box. Each kind of control has its own events, such as loading, clicking and double clicking of the form, changing the text of the edit box (text box), and so on.

Events include system events and user events. System events are triggered by the system, for example, every 24 hours, the deposit date of the bank depositor increases by one day. User events are triggered by the user. For example, the user clicks a button to display a specific text in a text box. Event driven controls perform a function. The object that triggers the event is called the event sender; the object that receives the event is called the event receiver.

The event mechanism can be used to implement: when a state of a class object changes, the system will call the method of dealing with the event in the class or the object triggering the control event through some way, and all registered event handlers of the control will be called.

F — Firebug

Firebug is an extension of Mozilla Firefox, a web browser. It is a debugging tool. Users can use it to debug, edit, or even delete CSS, HTML, DOM, and JavaScript code of any website. Firebug also provides other web development tools, such as Yslow, a web speed optimization tool of Yahoo. Firebug was written by Joe Hewitt. He was one of the original founders of Firefox.

G — Grid

Grid, also known as grid, is more accurate by definition. Find a more appropriate definition of Web Grid System on the Internet: guide and standardize the layout and information distribution of web pages with regular grid array. Web grid system is developed from plane grid system. For web page design, the use of grid system can not only make the information of web page more beautiful and easy to read, but also more available. Moreover, for front-end development, web pages will be more flexible and standardized. If there are many CSS frameworks supporting grid function, please refer to the article “Introduction to 27 classic CSS frameworks”.


Hypertext markup language (HTML) is a markup language designed for “web page creation and other information that can be seen in web browser”. Html is used to structure information such as headings, paragraphs, lists, and so on. It can also be used to describe the appearance and semantics of documents to some extent. HTML, originally defined by Tim Berners Lee and further developed by IETF with simplified SGML (Standard General Markup Language) syntax, became an international standard and maintained by the World Wide Web Consortium (W3C).

The latest version is HTML5, the next major revision of HTML, which is still in its infancy. The goal is to replace the HTML 4.01 and XHTML 1.0 standards set in 1999, so as to make the network standards meet the needs of the contemporary network when the Internet application develops rapidly. When talking about HTML5 in a broad sense, it actually refers to a set of technical combinations including HTML, CSS and JavaScript.

I — IE

Windows Internet Explorer (formerly known as Microsoft Internet Explorer, Internet Explorer for short, ie for short) is a web browser launched by Microsoft. As of September 2010, statistics show that Internet Explorer has a market share of 59.65%. Although it is still the most widely used web browser, its market share is more than 30% different from the peak in 2003.

Internet Explorer supports some standardized technologies to some extent, but there are also many running gaps and compatibility failures, which leads to the increasing criticism of technology developers. The increase in criticism is largely due to the fact that Internet Explorer competitors have relatively provided complete technical support, and the application of standards compliant has become more and more widespread. Because Internet Explorer is widely used all over the world, network developers often find Internet Explorer vulnerabilities, private function sets and imperfect support for standards when they are looking for cross platform code.

The Internet Explorer 9 browser released on March 14, 2011 has greatly improved its support for CSS3, HTML5 and other W3C specifications. This version is also the first version of Internet Explorer browser to adopt GPU acceleration. The official version obtained 95 / 100 points in the acid3 test, which is a great progress compared with the previous version. It can be considered that starting from Internet Explorer 9, the support of Internet Explorer browser for W3C specification will no longer be an issue.

J —  JavaScript

JavaScript is a scripting language widely used in client-side web development. It is often used to add dynamic functions to HTML pages, such as responding to various operations of users. Originally designed by Brendan EICH of Netscape, it is a dynamic, weakly typed, prototype based language with built-in support classes. JavaScript is a registered trademark of Sun Corporation. ECMA international has developed ECMAScript standard based on JavaScript. JavaScript can also be used in other situations, such as server-side programming. The complete JavaScript implementation consists of three parts: ECMAScript, document object model, byte order token.

Netscape initially named its scripting language livescript, and Netscape changed its name to JavaScript after working with sun. JavaScript was originally inspired by Java, and one of its purposes was to “look like Java”. Therefore, there are similarities in syntax. Some names and naming specifications are borrowed from Java. But the main design principle of JavaScript comes from the similarity between self and scheme. JavaScript and Java name, which is the result of Netscape reaching an agreement with Sun company for marketing consideration at that time. In order to gain technical advantages, Microsoft has launched JScript to meet the script language of JavaScript. For interoperability, ECMA International (formerly the European Association of computer manufacturers) created the ecma-262 standard (ECMAScript). Now both belong to the implementation of ECMAScript. Although JavaScript is promoted and publicized as a scripting language for non programmers, rather than as a programming language for programmers, it has very rich features.

K — Keyword Optimization

Keyword optimization, also known as search engine optimization (SEO), is a way of using search rules of search engines to improve the ranking of target websites in relevant search engines. Because many studies found that search engine users often only pay attention to the first few items of search results, so many websites hope to affect the ranking of search engines through various forms. In particular, various kinds of websites rely on advertising for survival.

The so-called “optimized processing for search engines” means to make websites more easily accepted by search engines. The search engine will compare the content of each website with other’s data, and then the browser will reflect the content to the searcher in the fastest and most complete way.

Search engine optimization for any website, in order to succeed in website promotion, search engine optimization is a key task. At the same time, with the search engines constantly changing their ranking algorithm rules, every algorithm change will make some websites with good ranking fail overnight, and the direct consequence of losing the ranking is to lose the inherent considerable visits of the website. So every time the search engine algorithm changes, it will cause a lot of disturbance and anxiety in the website. It can be said that search engine optimization is an increasingly complex task.

L — Less

Less is a ruby gem, which makes CSS have dynamic language features, including variables, operators, nesting rules. In fact, the real role of less is to convert CSS using advanced features into standard CSS. These are done through HTTP handler when the web client initiates the request. It can also be done at the time of editing. In addition, less can be configured to automatically minimize the generated CSS files, not only saving bandwidth, but also taking the end-user experience to the next level. There is also a. Net version of less.


MVC mode (model view controller) is a software architecture mode in software engineering. The software system is divided into three basic parts: model, view and controller. MVC mode was first proposed by Trygve Reenskaug in 1974. It is a software design mode invented by Xerox PARC for Smalltalk in 1980s. The purpose of MVC mode is to realize a kind of dynamic program design, to simplify the subsequent modification and expansion of the program, and to make it possible to reuse a part of the program. In addition, this mode makes the program structure more intuitive by simplifying the complexity. The software system not only separates its basic parts, but also endows each basic part with its own functions.

N — Node.JS

Node is a JavaScript runtime environment. In fact, it encapsulates the Google V8 engine (applied to Google Chrome browser). The V8 engine executes JavaScript very fast and performs very well. Node optimizes some special use cases and provides alternative API, which makes V8 run better in non browser environment. For example, in the server environment, processing binary data is usually necessary, but JavaScript does not support it enough. Therefore, v8.node adds buffer class, which is convenient and efficient for processing binary data. Therefore, Node not only uses V8 simply, but also optimizes it to make it more powerful in various environments. Node.js is all inclusive, but most importantly, it provides a way to run JavaScript outside of your web browser. JavaScript is widely used in front-end development of websites. Node enables this popular programming language to run in more environments, even on the server side of the website.

O — Object

Object is a term in object-oriented, which not only represents a specific thing in the objective world problem space, but also represents the basic elements in the solution space of software system. In a software system, an object has a unique identifier. An object includes properties and methods. Properties are the information that needs to be remembered. Methods are the services that an object can provide. In object oriented software, an object is an instance of a class.


PHP (H ypertext P reprocessor) is a kind of script language running on the computer. Its main purpose is to deal with dynamic web pages, including command line interface or GUI program. PHP was first invented by rasmus Lerdorf in 1995, and now PHP standards are maintained by the PHP group and the open source community. PHP uses php license as its license agreement, but because this agreement limits the use of PHP name, it is not compatible with the open source license agreement GPL.

PHP is widely used, especially in the development of Web programs. Generally speaking, PHP mostly runs on the web server, and generates the web pages that users browse by running PHP code. PHP can run on most servers and operating systems, and using PHP is completely free. According to the statistics of April 2007, PHP has been installed on more than 20 million websites and 1 million servers.

Q — Query

Query, there are many meanings. For example, query language is used to interact with extended systems that store data. A good example is SQL used to operate relational databases. Another meaning is that a query string, as part of the URL, is used to transfer data in a web application. The format of the query string is generally the form of key value pairs.

R — Regular Expressions

Regular expression (English: regular expression, regex or regexp, abbreviated as re) is also translated into normal representation and regular representation. In computer science, it refers to a single string used to describe or match a series of strings that conform to a certain syntactic rule. In many text editors or other tools, regular expressions are often used to retrieve and / or replace text content that conforms to a certain pattern. Many programming languages support string manipulation with regular expressions. For example, a powerful regular expression engine is built in Perl. The concept of regular expression was first popularized by UNIX tools such as sed and grep.

S — Source Control

Source code management, also known as version control, is a software engineering skill, which can ensure that the same program files edited by different people are synchronized in the process of software development. Software designers often use version control to track and maintain changes in source code, files, profiles, and so on, and provide procedures to control these changes. In the simplest case, a software designer can keep many different versions of a program and number them appropriately. This simple method has been used in many large software projects. It’s a way to get there, but it’s not efficient enough. In addition to maintaining many almost the same code backups at the same time, it also relies heavily on the self-cultivation and development discipline of software designers, but this is often the cause of errors.

Sometimes, it is necessary for a program to have more than two versions at the same time. For example, in one version for deployment, program errors have been fixed but no new functions have been added; in another development version, new functions are being developed and new errors need to be solved, which makes different versions and modifications needed at the same time. In addition, in order to find out the bugs that only exist in a specific version, or to find out the version of the bugs, the software debugger must also compare different versions of the code to find out the location of the problems.


Test driven development is one of the modern computer software development methods. Test is used to drive the design and implementation of software program. Test drivers became popular in the 1990s. Test driven development is a method of program development advocated in extreme programming. The main method is to write the test program first, and then code it to pass the test. The purpose of test driven development is to get quick feedback and use the “illustrate the main line” method to build the program.

Test Driven Development metaphor. Development can be viewed from two aspects: the function and quality of implementation. Test driven development is more like the development mode of two hat thinking method. First, put on the hat to realize the function, and quickly realize the correct function with the help of test; then put on the hat of reconstruction, and under the protection of test, improve the reusability of code and realize the improvement of quality by removing redundant and repeated code. It can be seen that test is indeed the core of test driven development, which runs through the whole development process.

U — Unit Testing

Unit test (also known as module test) is a test work to verify the correctness of program modules (the smallest unit of software design). Program unit is the smallest testable component of application. In procedural programming, a unit is a single program, function, process, etc.; for object-oriented programming, the smallest unit is a method, including methods in the base class (super class), abstract class, or derived class (subclass).

Generally speaking, every time a programmer modifies a program, he or she will carry out at least one unit test. In the process of writing a program, it is likely to carry out multiple unit tests before and after the program to verify that the program meets the requirements of the software specification (EN: Specification) without bugs. Although unit testing is not necessary, it is not bad, which involves the policy of project management Decision.


VIM is a text editor developed from VI. Code completion, compilation, error jump and other convenient programming functions are particularly rich, which are widely used in programmers. And Emacs to become a UNIX like system users favorite editor. The first version of vim was released by Bram moorenaar in 1991. The initial abbreviation is v I im itation. With the increasing functions, the official name has been changed to V I im proven. Now it’s free software distributed in open source mode.

W — WordPress

WordPress is a blog platform developed in PHP language. Users can set up their own blogs on servers supporting PHP and MySQL databases. You can also use WordPress as a content management system (CMS). WordPress is a free, open source project licensed under the GNU General Public License. At present, the latest version is the official simplified Chinese version of 3.0.5 released on February 24, 2011. In addition, there are multiple languages including English.


Cross site scripting (XSS) is a kind of security vulnerability attack of web application, which allows malicious users to inject code into the web page, and other users will be affected when watching the web page. Such attacks usually involve HTML as well as client-side scripting languages.


Yahoo! UI Library (YUI) is an open source JavaScript library. In order to build a highly interactive web page, it uses Ajax, DHTML, DOM and other code technologies. It also contains many CSS resources.

Z — Z index

Is a CSS property that sets the stacking order of elements. Elements with a higher stacking order always precede elements with a lower stacking order. This attribute sets the position of a positioning element along the Z axis, which is defined as the axis extending vertically to the display area. If it is a positive number, it is closer to the user; if it is a negative number, it is farther away from the user.