Chenxi's html Study Notes and chenxi Study Notes

Chenxi's html Study Notes and chenxi Study Notes

1. browser kernel:
1. ie: trident Kernel
2. firefox: gecko (gecko) Kernel
3. safari: webkit (Browser core) Kernel
4. opera: It used to be the presto (Rapid) kernel. Now it is switched to Google's blink (flickering) kernel.
5. Chorme: blink (developed jointly by Google and opera software Based on webkit)

(Appendix: What is the understanding of the browser kernel ?)
The browser kernel is divided into two parts: the rendering engine and the js engine.

1. Rendering Engine: obtains the webpage content, organizes messages, and computes the webpage display mode, and then outputs the information to the display or printer. Different browser kernels have different syntax interpretations for Web pages, so rendering effects are also different. All Web browsers, email clients, and other applications that need to edit and display network content require the kernel.
2. js engine: parse and execute js to achieve dynamic web page effects;

2. Understanding and understanding of web standards and w3c
Tag closure, lower-case tags, non-chaotic nesting, increase the search probability of Search Engine robots, correct use of semantic tags, use css and js scripts of external links, and structure behavior separation; it is easy to maintain and easy to modify. without changing the page content, you can print the version without copying the content to improve the ease of use of the website.

3.what is the difference between XHTML and html?
Html is a basic web page design language. xhtml is an xml-based markup language.
Differences:
Xhtml elements must be correctly nested
The xhtml element must be disabled.
The tag name must be in lower case.
Xhtml must have the root element

(Appendix: xml extension)
What is xml?
Xml (extensible markup language) can be used as a supplement to hypertext markup language. It is a standard for data transmission and storage, and an information transmission tool independent of software and hardware. A communication protocol between different devices.
4. Doctype
It is used to declare which specification (html/xhtml) is used in a document. It is generally divided into strict and Transitional modes. It is a framework-based html document.
If the Doctype does not exist or the format is incorrect, the document is displayed in compatibility mode;

(Expansion: What is the difference between the standard and compatible modes ?)
Standard-mode typographical and js operations are performed based on the highest standards supported by the browser.
In compatibility mode, pages are displayed in a loose and backward compatible manner, simulating the behavior of older browsers to prevent sites from working.

(Appendix: Why does html5 only need to be written? <! Doctype html> ?)
1. html5 is not based on SGML (Standard General Markup Language/Standard Generalized Markup Language). Therefore, you do not need to reference DTD (Document Type Declaration/Document Type Declaration, but doctype is required to regulate browser behavior (let the browser run as they should)
2. HTML4.01 is based on SGML, so you need to reference the DTD to inform the browser of the document type used.

5. What is BFC?
BFC (block formatting context block-level formatting context)
It is an independent rendering area that specifies how the interior is laid out and has nothing to do with the exterior of the area.
What will generate BFC?
Root element: html
Floating Box with float not set to none
Position: absolute and fixed
Display is a block container with inline-block, table-cell, flex, table-caption, and inline-flex non-block boxes.
The block box where overflow is not visible.
Triggering hasLayout features of ie

(Appendix 1: Extended display common attributes)
Each element has a display value by default, but can be explicitly set and overwritten.
: None; remove the element and its child element from the normal Document Stream, if it does not exist.
: Inline; this element generates one or more rows in the box. the space occupied by the row-level elements is the size defined by its label. The upper and lower margin, padding, and width and height cannot be set.
: Block. This element is used to generate a block-level box. All block-level elements start from a new row and extend to the width of the container;
: List-item; the method in which an element is rendered as a list item. Specifically, it is like a block-level element, however, a tag box that can be modified by the list-style attribute is generated.
: Inline-
This element generates a block-level box, but the entire box acts like an inline element. You can set attributes of element elements at the block level, such as width and height. However, ie6 does not recognize this attribute, but using inline-block in ie triggers layout, so that the inline element has the inline-block table disease (Set width and height ).
Solution: 1.div{ display: inline-block} // trigger layout first
Div {display: inline} // You must split the inline into two steps.
2. Set it to inline directly, and use zoom to trigger layout to achieve similar results.
Div {* display: inline; * zoom: 1}
(Appendix 1.1: zoom)
You can set or retrieve the scaling ratio of an object in the private attribute of ie to trigger the hasLayout attribute of ie to clear floating and margin overlaps.

(Appendix 2: hasLayout attribute summary in ie)
Haslayout is an internal component of the IE browser rendering engine. An element can either calculate the size and organization of its own content. You can either calculate the size and organization content based on the parent element. To adjust these two concepts, the rendering engine uses the hasLayout attribute. The attribute value can be true or false. When the hasLayout attribute value of an element is true, we say that this element has a layout, which is used to calculate and locate the size of itself and its potential descendants.

6. What is the quirks mode? What is the difference between it and the standards model?
In versions earlier than ie6, if the webpage does not declare a DTD, the browser will be forward compatible with the previous layout. The quirks mode is also called the weird mode.

Differences:
Box Model: In w3c standard, if you set the width and height of an element, it refers to the width and height of the element content. In quirks mode, the width and height of ie also include padding and border;

Set the height and width of an element in the row: in standard mode, setting the width and height for the element in the row does not take effect, but in quirks mode, the upper and lower margin take effect.

Set the width and height of the percentage: In standards mode, the width and height of an element are determined by the content it contains. If the parent element does not set the width and height of the percentage, it is invalid to set the width and height of the sub-element to a percentage. In the weird mode, the percentage width of sub-elements takes effect, and the height is weird (No answer is found ).
(Appendix: the parent element is not configured with width or height, and the sub-element percentage is equal to the width or height. ie8 or earlier versions take effect)

Use margin: 0 auto; set horizontal center: in standard mode, but not in weird mode.

7. What is semantic html?
Intuitive understanding of tags, structured page content, easy to parse browsers, search engines, crawlers rely on tags to determine the weights of context and keywords, facilitate resolution of other devices (screen readers, blind readers, and mobile devices ). It can also be displayed in a clear document structure without css styles.

8. What are the advantages of div + css layout over table?
It is more convenient to modify the css file.
The page loading speed is faster, the structure is clear, and the page display is concise.
Separation of representation and Structure
Seo is easy to optimize and ranking is easier.

9. What is the difference between alt and title of img? What is the difference between strong and em?
The alt attribute can be displayed as a replacement text when the image fails to be loaded.
The title attribute can be used to set the description or text of the element set for this attribute. It is displayed when you move the cursor in.

Strong indicates the importance of the content, and it carries the default style bold labels;
Em indicates a more intense content emphasis point with a default style italic label.

10. What is the difference between progressive enhancement and graceful degradation?
Progressive enhancement: first, build pages for low-version browsers to ensure the most basic functions. Then, improve the effects and interactions of advanced browsers and append functions to provide a better user experience.
Elegant downgrade: build complete functions at the beginning and then implement compatibility with earlier versions.

Difference: graceful degradation starts from a complex situation and tries to reduce the supply of user experience. progressive enhancement begins with a very basic version that can work and continues to expand, to meet the needs of the future environment. Downgrading means looking back, and progressive enhancement means looking forward, while at the same time ensuring its foundation is in a safe zone.

 

12. What are the differences between cookie, sessionStorage and localStorage?
SessionStorage is used to locally store data in a session. This data can be accessed only on the same session page and the data will be destroyed after the session ends. SessionStorage is not a persistent local storage. LocalStorage is used for persistent local storage. Unless data is actively deleted, the data will never expire.
Differences between web storage (including sessionStorage and localStorage) and cookie:
The concept of web storage is similar to that of cookie. The difference is that it is designed for larger storage capacity. The cookie size is limited, and the cookie will be sent every time a new page is sent, which wastes the bandwidth. In addition, the cookie also needs to specify the scope and cannot be called across domains.
Web storage has methods such as setItem, getItem, romoveItem, and clear. developers need to encapsulate setCookie and getCookie by themselves.
Cookies interact with servers and exist as part of HTTP specifications. web storage is only generated for local "storage" data.

13. Differences between src and href
Src (source) points to the location of external resources. The content to be directed will be embedded into the location of the current tag in the document; when a src resource is requested, the resources directed to it are downloaded and applied to documents, such as js scripts, img images, iframe, and other elements.
When the browser parses this element, the download and processing of other resources will be suspended until the resource is loaded, compiled, and executed, similar to embedding the pointed resource into the current tag.
Href (hypertext reference/hypertext reference) points to the location of the network resource and establishes a link with the current element (Anchor) or the current document (link, if we add <link href = "common.css" rel = "stylesheet"/> to the document, the browser recognizes this document as a css file, resources will be downloaded in parallel and the processing of the current document will not be stopped. This is why it is recommended that css be loaded using link instead of @ import.

(Appendix 1: css introduction method)
1. link
2. @ import "style.css"; // @ import url ("style.css ")
(The official definition of the import rule must be prior to any other css rules except @ charset)
The reason why @ import is not recommended:
1. Impact on browser parallel download
2. Multiple @ import leads to disordered download order
(Appendix 2: Why avoid using @ import)
If css @ import is used, css cannot be downloaded in parallel. Only after the css file referenced by @ import is downloaded and parsed, the browser will know that there is another css that needs to be downloaded before downloading. After downloading it, it will start a series of operations such as parsing and constructing the rendering tree, therefore, the css parsing delay caused by css @ import will prolong the page white-keeping period. Therefore, we recommend that you avoid using css @ import instead of link labels.
(Extended: What are the detailed differences between link and @ import ?)
1. link is An XHTML label. In addition to loading css, link can also be used to define RSS and rel link Attributes. @ import is provided by CSS and can only be used to load CSS.
2. When a page is loaded, the link will be loaded in parallel, and the CSS referenced by @ import will be loaded after the page is loaded (as shown above .)
3. import is proposed by CSS2.1 and is recognized only after IE5 or above, while linkXHTML labels are not compatible;

14. The performance of css and js is optimized. When a js request is refreshed by a user, which of the following operations will cache the request?
Dns cache, cdn cache, browser cache, and server cache.
(Appendix: cache Introduction)
DNS (Domain Name System/Domain Name resolution System ):
When you access a website multiple times in a short period of time, the system will design a local "dns cache". After the first access to chenxixunhan.com, the dns returns the correct ip address, the system will temporarily store this result, which is the dns cache. It will have an expiration time. During this time, when you access the server again, the system will return the result to you from the local dns cache of the computer, instead of asking the dns server again, in disguise, "acceleration" is used to parse the website.
CDN (Content Delivery Network/Content Delivery Network)
By caching content in different locations, and then directing user requests to the nearest Cache Server through Server Load balancer and other technologies, the response speed of user visits to the website is improved.
Browser cache
To save network resources and accelerate browsing, the browser stores recently requested documents on the user's disk. When a visitor requests this page again, the browser can display documents from the local disk, in this way, the page can be accelerated.
Web Server Cache
The application modes of the Web Cache Server are forward proxy and reverse proxy. In the forward Proxy mode, a Proxy network user accesses the internet. The client sends a connection request sent directly to the source server on the internet to the Proxy server for processing. The purpose of forward proxy is to accelerate the request response time when users access the Internet using a browser, and improve the utilization of Wan lines. The forward proxy browser does not need to establish contact with the site, but only accesses the Web cache. Through forward proxy, the access speed of subsequent users is greatly improved, so that they do not need to cross the Internet any more. They can obtain the required information from the local Web Cache, avoiding bandwidth problems, at the same time, it can greatly reduce the transmission of repeated requests on the network, thus reducing network traffic and saving costs.
The Reverse Proxy mode is used for Web Server acceleration. In this mode, the cache server is placed in front of the web application server. When a user accesses the web application server, first, it passes through the cache server and writes the user's request and the application server's response content to the cache server, so as to provide faster response for subsequent user access.

15. How to optimize loading and user experience for a large number of images on the page?
1. Image lazy loading. Add a scroll event in the Invisible Area of the page to determine the distance between the image position and the top of the browser and the page. If the former is smaller than the latter, load the event first.
2. If it is a slide, album, etc., you can use the image pre-loading technology to download the first and last of the currently displayed images first.
3. If the image is a css image, you can use technologies such as css Sprite and SVGsprite.
4. If the image is too large, you can use a specially encoded image. A compressed thumbnail is first loaded to improve the user experience.
5. If the image display area is smaller than the actual image size, compress the image on the server based on the business needs. The image size after compression is consistent with the display size.

16. From the previous perspective, what should I consider for SEO (Search Engine Optimization/Search Engine Optimization?
1. Learn how search engines crawl webpages and how to index webpages.
2. meta tag Optimization
Including the title, description, and key words ). There are other hidden texts such as author, category, and language.
3. How to select keywords and place them on the webpage
Keywords are used for search. Keyword analysis and selection are one of the most important tasks of SEO. First, determine the keywords for the website (generally in five upper and lower cases), and then optimize these keywords, including the keyword Density (Density), relevance (Relavacy), and Prominency.
4. Understand major search engines
It mainly plays a decisive role in website traffic.
English: Google, Yahoo, Bing, etc;
Chinese: Baidu, sogou, youdao, etc.
Different search engines have different page crawling, indexing, and sorting rules. The relationship between different search portals and search engines.
5. Main internet directories.
6. Click-based search engines
7. Search Engine Login
8. Link Exchange and link extensiveness
9, reasonable label use (detailed link http://www.jb51.net/css/238279.html 16th points)

What are the new features of 17.html 5? How can I handle html5 tag browser compatibility?
Htm5 is no longer a subset of SGML, mainly about the addition of image, location, storage, and multi-task functions;
1. painting canvas;
2. video and audio used for media playback
3. Local offline storage localStorage stores data for a long time. data will not be lost after the browser is closed.
4. sessionStorage data is automatically deleted after the browser is closed;
5. Better semantic content elements, such as article, footer, header, nav, and section
6. Form controls, such as calendar, date, time, email, url, and search;
7. New counting webworker (multithreading), websocket (bidirectional communication), geolocation (geographic location); (new understanding)

Compatibility:
1. ie6 ~ Ie8 supports tags generated by using the document. createElement method. This feature allows these browsers to support html5 new tags and add default styles.
2. Use mature frameworks such as html5shiv;
<! -- [If lt IE 9]>
<Script> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [Endif] -->

18. What happened between the url input and the web page display to the user?
1. Enter the address
2. Search for the IP address of the domain name in the browser
(Including dns search: browser cache-> system cache-> router cache)
The dns search process is as follows:
1. browser cache-the browser caches dns records for a period of time, but the operating system does not tell the browser to store dns record events. Therefore, different browsers will set a fixed time (2 ~ 30 minutes );
2. system cache-if no required record is found in the browser cache, the browser will make a system call to obtain records in the system cache;
3. Router cache-Next, the request is sent to the router, which generally has its own dns cache;
4. ISP (Network Service Provider) DNS Cache-Next, check the server where the ISP caches DNS. The corresponding cache records can be found here.
5. recursive search-the DNS server of the ISP performs recursive search from the server with the domain name, from the top-level domain name server of com to the Domain Name Server of example.
3. the browser sends an HTTP request to the web server
The request may contain cookies for storing the domain name, as well as the login username and password, and some user settings.
4. Establish HTTP (Hypertext Transfer Protocol) Requests
Establish a TCP (Transmission Control Protocol) Link: Before HTTP starts, the web browser must first establish a connection with the web server through the network, which is completed through TCP, this protocol is used together with the IP protocol to build the Internet, that is, the famous TCP/IP protocol family. Therefore, the Internet is also called a TCP/IP network. HTTP is an application layer protocol higher than TCP. According to the rules, connections to higher-level protocols can be established only after the lower-level protocols are established. Therefore, you must first establish a TCP link. Generally, the port number of the TCP link is 80. In TCP/IP, TCP provides reliable connection services and uses three handshakes to establish a connection.
The first handshake: host A sends the syn code 1 and generates A random seq (sequence serial number) number = 1234567 data packet to the server. Host B is known by syn = 1 and A requires online connection;
The second handshake: after receiving the request, host B confirms the online information and sends ack (Acknowledgement confirmation) number = (seq + 1 of host A), syn = 1, ack = 1. generates packets with seq = 7654321 at random;
The third handshake: After receiving the handshake, host A checks whether the ack number is correct, that is, the seq number + 1 sent for the first time, and whether the bid syn is 1. If yes, host A then sends ack number = (seq + 1 of host B), ack = 1; host B receives the message and confirms that the seq value and ack = 1 are established successfully.
After three handshakes are completed, data is transmitted between host A and host B.
Once a TCP connection is established, the web browser sends a request command to the web server.
After the browser sends the request, it also sends some other information to the web server in the form of header information, and then the browser sends a blank line to notify the server, it has ended sending this header.
5. Permanent server redirect response
The server returns a 301 permanent redirect response to the browser so that the browser will access "http://www.chenxixunhan.com/#but not" http://chenxixunhan.com /".
Why redirect instead of sending back the webpage content that the user wants to see?
One reason is related to the search engine ranking.
If a page has two addresses, like "http://www.chenxixunhan.com/#and" http://chenxixunhan.com/", the search engine will think they are two websites and the result is that every search link is reduced to lower the ranking. If the search engine knows that 301 is permanently redirected, it will rank the addresses with or without www in the same website ranking.
Another reason is that different addresses may cause poor cache friendliness. When a page has several names, it may appear in the cache several times.
HTTP/1.1 301 Moved Permanently
Cache-Control: private, no-store, no-cache, must-revalidate, post-check = 0,
Pre-check = 0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Location: HTTP: // www.facebook.com/
P3P: CP = "dsp law"
Pragma: no-cache
Set-Cookie: made_write_conn = deleted; expires = Thu, 12-Feb-2009 05:09:50 GMT;
Path =/; domain = .facebook.com; httponly
Content-Type: text/html; charset = UTF-8
X-nningction: close
Date: Fri, 12 Feb 2010 05:09:51 GMT
Content-Length: 0
6. browser tracking and redirection address
Now, the browser knows that "http://www.chenxixunhan.com/?" is the address of the website to be accessed. If so, a request is sent.
Get http: // www.facebook.com/HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml + xml, [...] Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...] Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: lsd = XW [...]; c_user = 21 [...]; x-referer = [...] Host: www.facebook.com
The header information has the same meaning in the previous request;
7. The server "processes" requests
The server receives the GET request and then returns a response.
8. The server sends back an HTML response
HTTP/1.1 200 OKCache-Control: private, no-store, no-cache, must-revalidate, post-check = 0, pre-check = 0 Expires: Sat, 01 Jan 2000 00:00:00 GMTP3P: CP = "dsp law" Pragma: no-cacheContent-Encoding: gzipContent-Type: text/html; charset = utf-8X-Cnection: closeTransfer-Encoding: chunkedDate: Fri, 12 Feb 2010 09:05:55 GMT 2b3Tn @ [...] the overall response size is 35 Kb, most of which are transmitted as blob (Binary) after sorting.
The content encoding header tells the browser to use the gzip algorithm to compress the entire response body. After extracting the blob, you can see the html document.
For compression, the header information shows whether to cache this page, how to do it if it is cached, what cookies should be set (this is not the case in the previous response), and privacy information.
Note: Set Content-type to "text/html" in the header ". The header allows the browser to render the response content in HTML format instead of downloading it in file format. The browser will decide how to explain the response based on the header information, but it will also consider other factors such as URL extension content.
9. the browser starts displaying HTML
When the browser does not fully accept all HTML documents, it starts to display this page.
10. The browser sends an object to obtain the object embedded in HTML.
When the browser displays HTML, it will notice the tags that need to be obtained from other addresses. In this case, the browser sends a request to obtain these files again.
The following are the URLs that must be retrieved when the author Lei Feng accesses facebook.com.
* Image
HTTP: // static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
HTTP: // static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
... * CSS style table
HTTP: // static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
HTTP: // static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
... * JavaScript files
HTTP: // static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
HTTP: // static.ak.fbcdn.net/rsrc.php/z6r9l/hash/cq2gbs8.js

These addresses all go through a process similar to HTML reading. Therefore, the browser will search for these domain names in DNS, send requests, redirect, and so on.
Static files can be cached by browsers instead of dynamic pages. Some files may not need to communicate with the server, but are directly read from the cache. The server contains the retention period of static files, so the browser knows how long it will take to cache them. Also, each response may contain the ETag header (the entity value of the requested variable) Like the version number. If the browser observes that the file version ETag already exists, stop the transfer of this file immediately.
11. The browser sends an asynchronous (Ajax) Request
Under the guidance of the great spirit of web2.0 (... The customer is still in contact with the server after the page is displayed.
Taking the Facebook chat function as an example, it will keep in touch with the server to update your bright and gray friends in a timely manner.
To update the friend status of these pictures, the javascript code server executed in the browser sends an asynchronous request. This asynchronous request is sent to a specific address, which is a get or send request constructed by program.
Facebook chat provides an interesting case about ajax: Pushing data from the server to the client, because HTTP is a request-response protocol, therefore, the chat server cannot send new messages to the customer. Instead, the client has to poll the server every few seconds to check whether there are any new messages.
In these cases, long polling is an interesting technique to reduce server load. If the server does not receive any new message when it is poll, it will ignore this client. When the client receives a new message that has not timed out, the server will find the unfinished request and return the new message to the client as a response.
(I wipe, you are really a refined little fairy, really Nima can do, from: http://www.qdfuns.com/notes/15102/a5bee6b87d22ab0ecb28101f385db2e4.html)

(Extended: The Return status code of the request url response and its text description? (Details: D: \ notes_web_book \ http .pdf ))
The status code consists of three digits. the first digit defines the response category and has five possible values:
1xx: indicates that the request has been received and continues to be processed.
2xx: Success-indicates that the request has been successfully received, understood, and accepted
3xx: Redirection-further operations are required to complete the request
4xx: client error-the request has a syntax error or the request cannot be implemented
5xx: Server Error -- the server fails to fulfill the valid request

Common status codes and descriptions:
200 OK // client request successful
400 Bad Request // The client Request has a syntax error and cannot be understood by the server
401 Unauthorized // request for Unauthorized authorization. This status code must be reported with WWW-Authenticate.
// Use the header domain together
403 Forbidden // The server receives the request but rejects the service.
404 Not Found // The requested resource does Not exist. For example, the incorrect URL is entered.
500 Internal Server Error // unexpected Server Error
503 Server Unavailable // The Server cannot process client requests at present, and may return to normal after a period of time
Eg: HTTP/1.1 200 OK