Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use Web front-end development technology". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Development environment settings

Install vs-code and install plug-ins commonly used by front-end development engineers.

Vscode-icon: file icon

Class autocomplete for HTML: automatic completion of html code

Beautify: formatting code to make javascript, JSON, CSS, Sass, HTML code more beautiful

HTML Snippets: a super practical and rudimentary H5 code snippet and hint

HTML CSS Support: let the html tag write the styles supported by the class smart prompt for the current project

Debugger for chrome: let vscode map the debug function of chrome. Static pages can be debugged using vscode break points.

Path Intellisense: automatic path completion

JQuery Code Snippets:jQuery prompt plug-in

ESLint:JavaScript code detection tool

HTMLHint:html code detection

Bootstrap 3 sinnpet:bootstrap Code hint

Basic introduction of web front-end development

Web front-end development engineer is a very new profession, and it has been valued for no more than 10 years at home and abroad.

Web front-end development evolved from web page making. In the evolution of the Internet, web page making is the product of the web1.0 era, when the main content of the website is static, and the behavior of users using the website is mainly browsing.

Since 2005, the Internet has entered the web2.0 era, a large number of web applications similar to desktop software have emerged (website client), and the front end of the website has undergone earth-shaking changes. Web pages no longer just carry a single text and pictures, a variety of rich media make the content of the web page more vivid, which are based on front-end technology.

The working content of web front-end

HTML typesetting the structure of the page

CSS carries on the overall layout and style design of the page.

Javascript realizes the interactive effect of the page

Ajax technology for data request

IT web page development process

Visual design photoshop UI/ artist

Cut pictures, artists or front end.

Front end of page layout and layout (html, css)

Front end of page effect (javascript)

Foreground and background interactive front end (ajax)

Data storage analysis, complex logic background (java, php, etc.)

Development tools

VS Code

Sublime

Hbuilder

WebStorm

Dreamweaver

Operating environment / browser

The job of the WEB browser is to read HTML documents and display them as web pages. Instead of displaying HTML tags, browsers use tags to interpret the content of the page.

Common browsers: Chrome, Safari, Firefox, Internet Explorer

The Origin and Development of WEB

The Origin and Development of WEB

The origin of web can be traced back to the ENQUIRE project built by Tim Berners-Lee in 1980.

While working at CERN in 1980, Tim Berners-Lee proposed a project based on a hypertext system that would allow scientists to share and update their research results. Together with Robert Cailliau, he built a prototype system called ENQUIRE.

Tim Berners-Lee Tim in 1984. Berners. Li returned to the European Nuclear Physics Laboratory to create the World wide Web. He wrote the world's first web browser (World Wide Web) and the first web server (httpd).

Tim Berners-Lee set up its first website (and the first in the world): http://info.cern.ch/.

World wide Web WWW and W3C

The inventor of the World wide Web for British computer scientists: Tim Berners-Lee

In October 1994, the non-profit World wide Web Consortium W3C (World Wide Web Consortium) was founded at the MIT computer Science Lab.

What is W3C?

W3C refers to World wide Web Consortium (World Wide Web Consortium)

W3C was founded in October 1994

W3C is created by Tim Berners-Lee

W3C is a member organization

The work of the W3C is to standardize web

W3C creates and maintains WWW standards

W3C standard is called W3C recommendation (W3C Recommendations)

What is WWW?

WWW means the World wide Web (World Wide Web)

The World wide Web is also often called Web.

Web is a network of computers all over the world

All computers in Web can communicate with each other

All of these computers use a communication standard called HTTP

How does WWW work?

Internet Explorer (IE kernel)

Mozilla Firefox (Fiefox kernel)

IE Kernel + Webkit Kernel, dual Core browser)

Google browser (webkit kernel)

Web information is stored in a document called a web page

Web pages are stored on a computer called a Web server

The computer that reads web pages is called the Web client.

Web clients view web pages through browsers

The main browsers are

What is a brower?

What is a server (server)?

How Web works

Web works based on the mode of request and response, where the client browser sends http requests and the web server responds to http.

Static content of a web page: the content that is fixed in a web page.

Dynamic content of web pages: read from the database or dynamically generated by JavaScript.

URL URL structure:

Http://localhost:8888/hello

Http refers to the network protocol

Localhost refers to the domain name.

8888 refers to the port number

Hello refers to a path

HTTP response (HTTP Response)

Http version (http version number), such as http/1.1

Http status code (http status code): 20010 ok

Http response body (http response body): Hello,world!

Characteristics of web

Web is easy to navigate and graphical

Web is platform independent.

Web is a branch structure.

Web is dynamic.

Web is interactive.

Web standard

The theme of web rules is W3C.

W3C refers to World wide Web Consortium (World Wide Web Consortium)

Web standard is the various specifications of W3C.

The core web standards are HTML, CSS, XML

The latest HTML standard is XHTML1.1

website

A website (website) refers to a collection of web pages related to specific content created on the Internet by using tools such as HTML according to certain rules.

Web pages: the basic elements that make up a website.

Home page: also known as the home page, the entry page of a website, the home page is often edited to make it easy to understand the site and guide Internet users to browse other parts of the site. This part of the content is generally regarded as a directory nature of the content. Most of the file names that serve as home pages are index, default, main, or portal with an extension.

Static website

HTML 、 CSS 、 Javascript

Dynamic website

Background, database, other

Web server

Web server: a site that provides Web access services on Internet, which is an organic whole composed of computer software and hardware.

You must configure the IP address and domain name for the Web server to provide Web services to the outside world.

IP address, port number

On the network, computers are identified by IP addresses or hostnames, which makes it possible for computers in different geographical locations to access and communicate with each other.

Ip is represented by 32-digit numbers and is usually divided into four parts. For example: 192.168.0.1

IP address of the local loop: 127.0.0.1 or localhost

Port (port number): a logical data transmission channel, or analog channel.

For example, the web service uses port 80, and the FTP service uses port 21, etc.

The range of port numbers is between 0 and 65535, and the port numbers between 0 and 1023 have been occupied by some well-known network services and applications (we generally do not use them).

Unified Resource Locator (URL)

Uniform Resource Locator (Uniform Resourse Locator,URL) is also known as web address. Like tickets on the Internet, it is the Address of standard resources on the Internet.

Format: protocol type: / / server address (: Port number) / path / file name

The default port number can be omitted

Https://www.sina.com.cn

Https://www.baidu.com

Example:

Https is the protocol.

Zhidao.baidu.com is the server name

/ question/1820387867264893668.html is the directory / file name. File suffix

? qbl=relate question 1&word=url is the parameter to be passed to the background (key-value pair)

Https://zhidao.baidu.com/question/1820387867264893668.html?qbl=relate question 1&word=url

Protocol Typ

Http: hypertext transfer Protocol

Https: hypertext transfer protocol for encrypted transmission

Ftp: file transfer protocol

Mailto: email address

Ldap: lightweight Directory access Protocol search

News:Usenet newsgroup

File: files shared on a local computer or online

Gopher:gopher protocol

Hyperlink

A connection from one page to another, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application.

Hyperlinks are essentially part of a web page, an element that allows us to connect with other pages or sites.

Website construction technology

HTML 4.01&HTML5

Use of CSS (style sheet)

XHTML

XML and XSLT

Client script

Server-side script

Manage data through SQL

Full stack of website development

Front-end Front End:HTML5, Javascrip, CSS

Backend Back End:Java, Python, Node.js, Ruby on Rail

Database Data sets:Mysql, MongoDB

Architecture Infrastructure:Servers (server), Cloud (Ali cloud, AWS) (cloud), Container (container)

BS architecture: brower, server, request and response

Technology stack

Client: Javascript, CSS, HTML

Server: Programming Language (programming language), database (database), web server (server), operating system (operating system)

Three-tier structure of Web front-end development

HTML is the basis of web page information structure.

CSS is a web presentation technology that provides more precise control over page layout, fonts, colors, backgrounds, and other effects:

Javascript and HTMLDOM are the behaviors of web pages, which realize the dynamic and interactive functions of web pages.

HTML

HTML is Hyper Text Markup Language (Hypertext markup language), which is used to describe the content and structure of a page.

HTML is the foundation of a Web page (Page), and the latest version is HTML5.

The Development History of HTML Hypertext markup language

Since the birth of the early days of the network, there have been many HTML versions:

Version release time HTML1991HTML+1993HTML 2.01995HTML 3.21997HTML 4.011999XHTML 1.02000HTML52012XHTML52013 a simple HTML page

My0.html

Document

Welcome to learn web front-end technology.

Basic structure of HTML

: document declaration, this type of doctype declaration HTML5 document

The root element of the HTML page

Contains the metadata of the document

Contains implicit information about the page, such as charset= "utf-8" in Chinese, etc.

Document title, displayed in the header section

Contains the visible content of the page

Most of the above structures appear in pairs. For example: and so on.

Browser compatibility

Different browsers have different levels of support for HTML standards.

To view browser support, you can visit the following URL:

Https://caniuse.com

How to learn HTML?

Clearly understand the semantics of each tag and attribute

Only content and structure are described in HTML, and styles are left to CSS

Handwritten HTML to avoid using generation tools

The reference website of HTML Learning:

Https://www.htmldog.com/guides/html/

Https://www.w3school.com.cn/

CSS

Cascading style sheets CSS (Cascading Style Sheet) cascading style sheets.

CSS function: can effectively achieve more precise control over the page layout, font, color, background and other effects.

Development history of CSS

CSS1: issued on December 17, 1996, W3C recommendation, revised on January 11, 1999

CSS2: released on January 11, 1999, W3C recommendation, CSS2 added support for media (printers and hearing devices) and downloadable fonts

CSS3: divide CSS into smaller modules, including:

Box model, list module, hyperlink mode, language module, background and border, text special effects, multi-column layout, etc.

JavaScript

The emergence of JavaScript makes the web page and users to achieve a real-time, dynamic, interactive relationship, so that the web page contains more active elements and more wonderful content.

The origin of JavaScript: JavaScript, originally designed by Brendan Eich of Netscape, is a client scripting language developed from Netscape's LiveScript. Its main purpose is to provide the basic function of data verification for the server language.

JavaScript, and a complete JavaScript implementation is made up of the following three different parts.

Core (ECMAScript)

Document object Model (DOM)

Browser object Model (BOM)

JavaScript case

My1.html

Document alert ("the first JS page"); [xss_clean] ("Welcome to learn web front-end technology")

Js code can be added to head or body, usually in head.

Body implements content and script implements interaction.

My2.html

A test page var now = new Date (); / create Date object var year = now.getFullYear (); / / get year var month = now.getMonth () + 1; / / get month var day = now.getDate (); / / get date var hour = now.getHours (); / / get hour var minutes = now.getMinutes () / / get minute var sec = now.getSeconds (); / / get seconds var time = year+ "year" + month+ "month" + day+ "day" + hour+ "hour" + minutes+ "minute" + sec+ "second"; alert (time); [xss_clean] (time) Var arrayWeek = new Array ("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"); var week = arrayWeek [day]; alert (week)

HTML DOM

HTML DOM is the Document Object Model document object model

DOM structure: organize nodes or pieces of information in a hierarchical structure

AJAX

AJAX, namely "Asynchronous Javascript + XML" (asynchronous JavaScript and XML), refers to a web page development technology that creates interactive web page applications.

Traditional web pages (without AJAX) if you need to update the content, you must reload the entire page. AJAX is a technology used to create fast dynamic web pages. By exchanging a small amount of data with the server in the background, AJAX can update web pages asynchronously. This means that some part of the page can be updated without reloading the entire page.

JQuery

JQuery definition:

JQuery is a set of cross-browser JavaScript libraries that simplify the operation between HTML and JavaScript.

The first version was released by John Resig on BarCamp NYC in January 2006.

It is currently being developed by a development team led by Dave Methvin. Fifty-nine per cent of the top 10,000 most visited websites in the world use jQuery, which is currently the most popular JavaScript library.

References to the jQery library:

The external jQuery file library is introduced through the src attribute of the script tag.

Development environment / browser

Microsoft Internet Explorer (IE)

Mozilla Firefox

Google Chrome

Opera

Safari

Development and debug are recommended to be done in Google browser or Firefox.

Web front-end development tools and environment configuration

Development tools

SublimeText3

VS Code

Hbuilder

WebStorm

Dreamweaver

Environment configuration and examples

Comprehensive case

My3.html

Preliminary application of Web front-end development technology p {font-size:20px; color: red; text-indent: 2em;} h4 {font-size:24px; font-style: bolder; color: # 000099;} Web front-end development technology

HTML

CSS

JavaScript

Web-based learning resources HTML tutorial alert ("Web front-end development engineers have good employment prospects and high pay!")

This is the end of the content of "how to use Web front-end development technology". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.