2020-08-08 html https support + css position absolute and float + JS realization of abnormal jump + soft skills image compression tool

2020-08-08 Source of topic: http://www.h-camel.com/index.html

[html] Which features of H5 need https support?

The Chrome 56 browser released in January 2017 began to mark HTTP pages that collect passwords or credit card data as insecure. HTTP pages with input data and all HTTP pages browsed in private mode will be marked as insecure.

HTTP与HTTPS

HTTP is a hypertext transfer protocol, based on request and response, a stateless application layer protocol, often based on TCP/IP protocol to transfer data. Multiplexing proposed by HTTP/2: multiple request response messages are initiated through a single HTTP/2 request to achieve multiple parallelism instead of establishing multiple TCP connections.

HTTPS is a transmission protocol for secure communication through a computer network. It communicates via HTTP and uses SSL/TLS (TLS is a transport layer encryption protocol, formerly the SSL protocol) to establish a channel and encrypt data packets. The main purpose of HTTPS is to provide identity authentication to the website server, while protecting the privacy and integrity of the exchanged data.

Features of HTTPS: Content encryption; identity verification; protection of data integrity.

[css] Please tell me what is the difference between position:absolute and float?

The process of layout of elements is a flow arrangement from left to right and top to bottom. Elements out of the document flow: They have no actual height, they are all block-level elements.

 .firstdiv{
    background-color:rgba(125,125,235,0.4);
    height:200px;
    width: 200px;
  }
  .seconddiv{
    background-color: #faf;
    height:300px;
    width: 300px;
    border:1px solid red;
  }
  <div class="firstdiv">
     这是第一个DIV
  </div>
  <div class="seconddiv">
     这是第二个DIV
  </div>

1.position: absolute; Will be completely out of the text flow. Positioning is based on the first non-static positioned parent element, and generally the parent positioning will be set to relative. In the above example, if firstdiv is set to absolute, then the two divs will overlap.

2. Float, similar to the text wrapping effect in printing, the floating element is still part of the document flow, it can be said that float is a kind of pseudo detachment, other boxes will ignore this element, but the text in other boxes will still be this element Give up your position and surround yourself.

 

You can refer to the article: https://blog.csdn.net/qq_21184771/article/details/56049662

 

[js] Use js to achieve abnormal jump

Fibonacci sequence

https://blog.csdn.net/zdhui_fly/article/details/81114687

[Soft Skill] How do you compress pictures? What tools are used?

Scenario: When a user uploads a picture, any one can be several megabytes in size, and then the size and quality of the picture are processed by the back-end area, which not only affects the transmission efficiency, but also causes unnecessary pressure on the server. Therefore, it is very necessary to start image compression from the front end.

Here is a framework weui framework https://github.com/Tencent/weui

Actual use https://zhuanlan.zhihu.com/p/27823933