Web Three-piece HTML——Web Overview (1)

Web three-piece HTML (1)

Overview of Web Front-end Development Technology

1.1 Web overview

origin

In 1980, Tim Berners (Tim Berners-Lee) built a project-ENQUIRE at the European Nuclear Physics Laboratory. This is a hypertext online editing database similar to Wikipedia. In March 1989, he wrote an article in which he mentioned a more sophisticated management model-the World Wide Web. Cooperated with Robert Cailliau in 1990. On November 13, 1990, he wrote the first web page on a NeXT workstation to realize his idea. Later this NeXT workstation became the world's first Internet server. During the Christmas holiday of the same year, it designed a set of all the tools needed to carry out network work: the first web browser (also an editor) and the first web server.

On August 6, 1991, an article about the World Wide Web was officially published in the alt.hypertext newsgroup. It marked the first appearance of the World Wide Web public service on the Internet.

Another major breakthrough of Tim Berners is the grafting of hypertext to the Internet. And invented a unique authentication system for global network resources: Uniform Resource Indentifier (URI).

Then, in order to prevent the world wide web from being controlled by a few people, Tim organized the World Wide Web Consortium, or W3C. Committed to guiding the Web to its greatest potential. The various versions of HTML agreement are from the W3C meeting.

1.2 Features of the Web

• 1. Easy to navigate and graphical interface

  The Web is very popular. It can display color and text on the same page at the same time, while the Internet can only display text information before. It’s very convenient to browse at the same time, just jump from one link to another.

• 2. Platform independence

  No matter what platform the computer system is, you can access the WWW through the Internet without platform restrictions.

• 3. Distributed structure

  A large number of pictures, audio, and video information will take up a lot of disk space, and it is difficult to predict how much information is in advance. For the Web, information can be placed on different sites, and there is no need to gather it together. When browsing, you only need to point your browser to the site. That is to realize that the information of a site is not necessarily physically integrated logically.

• 4. Dynamic

  The information of the site can be updated, and if real-time can be ensured, dynamics can be achieved.

• 5. Interactivity

  The interactivity of the Web is first reflected in its hyperlinks, and the user's browsing order is completely determined by him. In addition, dynamic information can be obtained from the server by expressing the form of Form. The user submits an application to the server, and the server returns response information according to the user's request.

1.3 How the web works

Quote a picture to illustrate:

Process description: The
user sends a request-"The browser and the server establish a connection-"The browser encapsulates the request data into a format that conforms to the protocol (request header, request body)-"The server receives the user request-"The request is analyzed and processed-"Return Corresponding request response (response body, response message header)-"The browser will analyze and display the information to the user after receiving the information

The input request is the URL, and then the domain name is resolved by the domain name resolver, and the web server of the specified ip address is accessed according to the resolution result, and the HTTP request is sent.

1.4 Web front-end development

Web1.0 era

In web page production, the website is only the publisher of information, the main content is presented in a static way, and the users are only visitors to the website.

Web2.0 era

Reconstruct the content of the website and use HTML+CSS+Javascript, DIV, DOM, AJAX and other technologies to achieve overall website optimization and user experience improvement. Developed countries: front-end personnel: back-end personnel=1:1. my country still lacks front-end personnel.

Therefore, the front-end development engineers spawned in the Web2.0 era are increasingly valued.

1.5 Web front-end development technology

1.5.1 Web Development Standard Three Musketeers HTML

HTML (Hypertext Markup Language) is a hypertext markup language. It is a markup language rather than a programming language because it does not require compilation. HTML is the structure of web pages. It uses markup to describe web pages. The content of the web page includes titles, subtitles, paragraphs, tables, forms, etc.

HTML document

A text file composed of HTML tags and plain text used to describe a web page. Web browsers can parse files of this type and display them in the form of web pages.

version	time
HTML1.0	June 1993
HTML2.0	November 1995
HTML3.2	January 1996
HTML4.0	December 1997
HTML4.01	December 1999
HTML5	October 2014

Uniform Resource Locator URL

Also called Uniform Resource Locator (Uniform Resource Locator). We can understand it as the address of a web page. It is the standard resource address (Adress) on the Internet.

Composition-protocol type://server address (port number)/path/file name

• protocol

  如HTTP，HTTPS，ftp，file

• Host domain name and path (port etc.)

  http://info.cern.ch/www20/
  http:/www.enu.cn/kexuetansuo_12385/index.html
  ftp://ftp.pku.edu.cn/
  

• The specific address of the host resource

Protocol and host domain name with a //separated rest with /.

Web server

Also called a website, it refers to a site that provides web access services on the Internet. An organic whole composed of software and hardware. The IP address and domain name must be assigned to the Web server to provide external Web services. The basic number of the architecture is the B/S structure. The first webpage a user sees is also called the homepage, so the design of the homepage is very important.

Hyperlink

Use <a></a>tags to import hyperlinks. Web pages are composed of several hyperlinks. Web hyperlinks are important!

<a href='https://www.baidu.com'>百度百科</a>

1.5.2 Web Development Standard Three Musketeers CSS (Cascading Style Sheet)

Because NetScape and Microsoft continue to add new HTML tags and attributes to the HTML specification in their browser software, it becomes difficult for the content of the website to be independent of the presentation layer of the website. The W3C organization shoulders the mission of HTML standardization. A style was created outside of HTML4.0. All major browsers support CSS (Cascading Style Sheets)

The role of CSS

Cascading Style Sheet (CSS) is also called Cascading Style Sheet. It can effectively control page layout, font, color and other effects more precisely. You only need to make some simple modifications to the corresponding code to change different parts of the same page. The use of CSS technology is to solve the problem of separation of web content and performance.

CSS is a markup language that is directly parsed by the browser. The CSS standards are developed and maintained by W3C's CSS work.

example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8'>
    <title>CSS样式表应用</title>
    <style type="text/css">
    p{
     
     
      font-size:24px; /*设置字号*/
      font-family:黑体;/*设置字体*/
      text-indent:2em;/*设置首行缩进*/
      color:#FF0000;/*设置颜色*/
    }
    #div1 p{
     
     
      font-size:18px;
      color:blue;
      border:1px doublle #000099;/*边框样式*/
    }
    </style>
  </head>
  <body>
    <p>第一个段落</p>
    <div id="div1" class="">
     <P>图层段落</p>
    </div>
  </body>
</html>

Effect display:

Development History

• CSS1: Published on December 17, 1996, W3C recommended standard

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

• CSS3: It is planned to divide CSS into smaller modules. These modules are divided into box model, list model, hyperlink method, language model, background and border, text characteristics, multi-column layout, etc.

1.5.3 The JavaScript of Web Development Standard Three Musketeers

Origin

JavaScript is a client-side scripting language driven by objects and events with relative security. At the same time, it is also a scripting language widely used in client-side Web development, often used to add dynamic functions to HTML. Such as responding to various operations of the user. Originally designed by Brendan Eich of Netscape (Brandon Eich), it was developed from Netscape's LiveScript and prototyped and inherited an object-oriented dynamic type client script language. Only Netscape cooperated with Sun and changed its name to JavaScript. At the same time, ECMA (European Computer Manufacturers Association) formulated the ECMAScript standard based on JavaScript.

Composition of JavaScript

A complete JavaScript consists of three different parts:

• Core (EMCAScript)
• Document Object Model (DOM)
• Browser Object Model (Browser Object Model, BOM)

Javascript is actually a text file document, which needs to be embedded in the HTML document when used. So any document editor can develop JavaScript programs.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>JavaScript的简单应用</title>
  </head>
  <body>
  <script>
  document.write("hello,World");/*直接在浏览器视窗显示*/
  alert("hello,World");/*开启对话窗显示*/
  </script>
  </body>
</html>

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-GqXRtNti-1598152051197)(2020-08-23-10-07-05.png)]

1.5.4 HTML DOM

HTML DOM is the abbreviation of (Document Object Meodel) HTML document object model. According to the W3C DOM specification, DOM is a browser- and platform-independent interface that allows users to access other standard components on the page. The combination of DOM and JavaScript realizes the separation of behavior and structure of Web pages.

The origin of DOM
can be traced back to the "browser war" between Microsoft and Netscape in the late 1990s. In order to fight to the death in JavaScript and JScript, the two sides added powerful browser features on a large scale. As a result, non-Microsoft browsers cannot display normal web pages. DOM resolves the conflict between Netscape's JavaScript and Microsoft's JScript. Provides a standard method for processing HTML or XML documents for Web designers and developers.

HTML DOM defines a standard method for accessing and manipulating HTML documents. JavaScript can reconstruct the entire HTML document, but it needs to get access to HTML document elements. This entry, along with operations such as moving, adding and deleting HTML elements, must be obtained through the DOM.

DOM structure

DOM is a collection of nodes or information fragments organized in a hierarchical model. Plan the entire page as a document composed of nodes. Allow developers to traverse node information. As shown in the figure: it is considered a tree-based or object-based structure

HTML DOM Level

• HTML DOM Level1 was released in October 1998, W3C recommended specification, including DOM Core and DOM HTML modules
• HTML DOM Level2 introduces DOM views, DOM events, DOM styles, DOM traversal and templates; used to handle new interface types
• HTML DOM Level3 introduces a method to load and maintain documents in a unified way, including the new module DOM Load and Save and DOM Validation methods to further expand the DOM

1.5.5 GOOD

BOM (Browser Object Model) is also called the browser object model. The browser object model defines the interface of each functional component of the browser that JavaScript can operate. Provides diagrams and operating methods for accessing various functional parts of the document (such as the window itself, screen functional parts, browser history).

The BOM mainly deals with browser windows and frames, but usually browser-specific JavaScript extensions can be regarded as part of the BOM. These extensions include: support for cookies, pop up new browser windows, adjust the size, etc.

Common BOM objects are: Window, Navigator, Screen, History, Location

1.5.6 AJAX

AJAX (Asynchronous JavaScript and XML) is also called asynchronous JavaScript and XML. It is one of the most used technologies in the Web2.0 era. It is a combination of multiple technologies. Standardized presentation using XHTML and CSS, dynamic display and interaction using DOM, and data interaction and processing using XML and XSTL. More importantly, it breaks the conventional technology combination of using page reloading.

Working principle
The core of AJAX is the JavaScript object XMLHTTPRequest. This object was first introduced in Internet Explorer 5, and it supports asynchronous request technology. You can use JavaScript to make a request to the server and process the response without blocking the user.

Through AJAX, you can use JavaScript's XMLHTTPRequest object to directly communicate with the server, without the need to reload the page to interact with the web server.

AJAX uses asynchronous data transfer (HTTP request) between the browser and the web server, so that a web page can request a small amount of information from the server instead of the entire page

1.5.7 jQuery

jQuery is a cross-browser JavaScript library that simplifies the operation between HTML and JavaScript. Is an excellent JavaScript framework. Purpose: "Write less, do more"-write less code and do more.

How to add web pages in jQuery

We can download the latest jQuery file library on the jQuery official website, and then add it to the web page in the following ways:

<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>

Alternative to jQuery

If you don’t want to store the jQuery file library on your computer, you can load it from goole or the Microsoft content distribution network:

1, Google-like CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" ></script>
</head>

2, Microsoft CDN

<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" type="text/javascript" ></script>
</head>

Features of jQuery
Since it is a JavaScript function library, the features are as follows:

• HTML element selection, element operation
• CSS operations
• HTML event function
• JavaScript special effects and animation
• AJAX
• Utilities
• HTML DOM traversal and modification

Example program

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery的简单应用</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" type="text/javascript" ></script>
    <script>
      $ (document).ready(function(){
     
     
        $ ("p").click(function(){
     
     
          $ (this).hide();
        });
      });
    </script>
  </head>
  <body>
    <p>你点击我我会隐藏</p>
    <p>你点击我我也会隐藏</p>
    <p>你也要点击我！</p>
  </body>
</html>

1.6 Exercises and experiments

1. Multiple choice questions

Wrong question:

• The company that designed JavaScript was Netscape, not Sun

2. Fill in the blanks

Wrong question:

• HTML documents are text files composed of HTML tags and plain text.
• The full name of AJAX is asynchronous JavaScript and XML.
• The full name of CSS is Cascading Style Sheet.
• The format of the URL is: protocol type: //domain name (port)/resource path