December 2020-Phase 01-Front-end Basics-Know the WEB

Know the WEB

1. Know the page

网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

Thinking:

How is the web page formed?

December 2020-Phase 01-Front-end Basics-Know the WEB

to sum up

The web page is composed of pictures, links, text and other elements. Our next task is to write this part of the web page elements in code.

2. Browser Introduction

浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。

December 2020-Phase 01-Front-end Basics-Know the WEB

2.1 Check the market share held by the browser

View website:http://tongji.baidu.com/data/browser

December 2020-Phase 01-Front-end Basics-Know the WEB

In 2008, the famous Internet giant Google released its first browser, the Chrome browser.
No way, the backstage is too strong, and it is indeed blessed with innate ability.

2.2 Common browser kernels (understand)

First explain what the browser kernel is. The English name is: Rendering Engine, with many Chinese translations, typesetting engine, interpretation engine, and rendering engine, which are now popularly called browser kernels.

负责读取网页内容,整理讯息,计算网页的显示方式并显示页面.

Because there are too many browsers, but the main popular ones are the following:

Browser Kernel Remarks
IE Trident IE, Cheetah Security, 360 Speed ​​Browser, Baidu Browser
Firefox Gecko It's a pity that the past few years have been declining. The opening speed is slow, the upgrade is frequent, the teammate flash like a pig, and the opponent Chrome like a god.
Safari webkit Many people now mistakenly call webkit the chrome kernel (even if the chrome kernel is already blink). Apple felt like someone had robbed her of her daughter-in-law, and she cried out in the toilet.
Chrome Chromium/Blink In the Chromium project, the Blink rendering engine (that is, the browser core) is developed and built into the Chrome browser. Blink is actually a branch of WebKit. The latest version of most domestic browsers uses the Blink kernel. Secondary development
Opera Blink Now follow chrome with blink kernel.

Further reading:

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。

iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的

3. Web standards (emphasis)

  • Can tell the three-layer composition of web standards in web pages
  • Can be combined with people to express the three layers of web standards

Web standards are not a certain standard, but a collection of a series of standards developed by the W3C organization and other standardization organizations.

W3C World Wide Web Consortium is the most famous international standardization organization. Since its establishment in 1994, it has published nearly a hundred standards related to the World Wide Web and made outstanding contributions to the development of the World Wide Web.

w3c is similar to the United Nations in the real world.

3.1 Why should we follow the WEB standard?

Through the different cores of the above browsers, we know that their display pages or layouts are slightly different.

December 2020-Phase 01-Front-end Basics-Know the WEB

3.2 Benefits of Web Standards

遵循web标准可以让不同我们写的页面更标准更统一外,还有许多优点

1、让Web的发展前景更广阔 
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度

3.3 Web standard composition

Composition: It mainly includes three aspects : structure (Structure), performance (Presentation) and behavior (Behavior).

standard Description Remarks
structure The structure is used to organize and classify web page elements . We mainly learn HTML . December 2020-Phase 01-Front-end Basics-Know the WEB
which performed Performance is used to set the layout, color, size and other appearance styles of web page elements , mainly referring to CSS. December 2020-Phase 01-Front-end Basics-Know the WEB
behavior Behavior refers to the definition of web page model and the preparation of interaction, we mainly learn Javascript December 2020-Phase 01-Front-end Basics-Know the WEB

Ideally our source code: .HTML .css .js

Combine people to remember web standards:

Structural standard: It is your natural physical
performance standard: Determines whether you look beautiful (clothes? Make-up?)
Behavior standard: Determines whether you have attractive behaviors (actions)

Summary of web standards

  • The web standard has a three-layer structure, namely structure (html), performance (css) and behavior (javascript)
  • The structure is similar to the human body, the appearance is similar to the dress of a person, and the behavior is similar to the behavior of a person
  • Ideally, their three layers are independent and put in different files

4. Expansion@

  • Introduce your understanding of the browser kernel? What are the common browser kernels?
  • The browser kernel consists of two parts, the rendering engine and the js engine. The rendering engine is responsible for reading the content of the webpage, organizing the information, calculating the display mode of the webpage and displaying the page, and the js engine is to analyze and execute js to obtain the dynamic effect of the webpage. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

IE:Trident
Firefox:Gecko
Chrom、safari:webkit
Opera:Presto
Microsoft Edge:EdgeHTML

In-depth reading: The origin of the five major browser kernels and a summary of the major browser kernels in China

Guess you like

Origin blog.51cto.com/15065901/2665105