HTML5 Now is not SGMLa subset of the increase was mainly about the image, location, storage, multi-tasking and other features
Painting canvas for media playback videoand audioelements of local offline storage localStoragefor long term storage of data, the browser is closed after data is not lost sessionStoragedata is automatically deleted when the browser is closed meaning of better content elements of language, such as article, footer, header, nav, section form controls, calendar, date, time, email, url, search new technologies webworker, websocket,Geolocation
Pure performance basefontelements: big, center, font, s, strike, tt, , u produce a negative impact on the availability of frameelements: frameset, ,noframes
Support for HTML5new tags:
IE8/IE7/IE6 supports document.createElementtags generated by methods. This feature can be used to make these browsers support HTML5 new tags. After the browser supports new tags, you also need to add the default style of the tags.
Of course, you can also directly use mature frameworks, such as html5 shim
< ! - [ if lt IE 9 ] > < script > src="http://html5shim.googlecode.com/svn/trunk/html5.js" < / script > < ! [ endif ] - >
What are the html5 new features
HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.
- New Semantic Elements − These are like <header>, <footer>, and <section>.
- Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag.
- Persistent Local Storage − To achieve without resorting to third-party plugins.
- WebSocket − A next-generation bidirectional communication technology for web applications.
- Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
- Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.
- Geolocation − Now visitors can choose to share their physical location with your web application.
- Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
- Drag and drop − Drag and drop the items from one location to another location on the same webpage.
Which SEOs should the front-end pay attention to?
keywordsSearch right in front of the three-by-weight decreases,
titlethe value of the focus to emphasize the important keywords appear no more than 2 times, and the former rely on different pages
titleto be different;
descriptionthe high-level summary page content, length Appropriate, do not pile up keywords too much, different pages
descriptionare different; just
keywordslist important keywords
HTMLcode, in line with W3C specifications: Semantic code makes it easy for search engines to understand web pages
- Important content
HTMLcode is placed first: the search engine crawling
HTMLorder is from top to bottom, and some search engines have restrictions on the crawl length to ensure that important content will be crawled
- Do not use
jsoutput for important content : crawlers will not execute js to obtain content
- Use less
iframe: search engines will not crawl
- Non-decorative pictures must be added
- Improve website speed: website speed is an important indicator of search engine ranking
Steps to enter the URL from the browser address bar to the displayed page
- According browser requests
DNSDNS to find real
IP, initiates a request to a server;
- The server returns the data after the background processing is completed, and the browser receives the file (
HTML、JS、CSS, image, etc.);
- The browser parses the loaded resources (HTML, JS, CSS, etc.), and establishes the corresponding internal data structure (such as HTML DOM);
- Load the parsed resource file, render the page, and finish.
- Received from the browser
urlto start the network request thread (this part can expand the mechanism of the browser and the relationship between the process and the thread)
- Start the network thread to issue a complete
HTTPrequest (this part involves dns query,
TCP/IPrequest, five-layer Internet protocol stack, etc.)
- From the server receiving the request to the corresponding background receiving the request (this part may involve load balancing, security interception and internal processing in the background, etc.)
HTTPinteraction between the background and the foreground (this part includes knowledge of the
HTTPheader, response code, message structure,
cookieetc., which can improve the
cookieoptimization of static resources , as well as encoding and decoding, such as
- Carry out a separate cache problem,
HTTPa cache (Cache This section includes http header
- Browser receives the
HTTPresolution process (after parsing a packet
html– lexical analysis and then parsed into
doma tree, parsing
css, combined into
renderthe tree, and then
layout、paintingrendering the synthesized composite layer,
GPUprocess drawing, outside the chain of resources,
DOM Content Loadedthe like)
CSSVisual format model (elements rendering rules, such as including blocks, control boxes,,
JSEngine analysis process (
JSinterpretation phase, preprocessing phase, execution phase to generate execution context
VO, scope chain, recycling mechanism, etc.)
- Other (different knowledge modules can be expanded, such as,
hybridmode and much more)
How to optimize website performance
HTTP requests: merge files,
DNScache, distribute resources to the appropriate number of hostnames, reduce the
DOMnumber of elements
Gzip Compressioncompression on components
- aspect Optimize the picture: According to the actual color needs to select the color depth, compress the optimization
csswizard, do not
HTMLstretch the picture in the middle
cssaspect Put the style sheet at the top of the page Do not use
CSSexpressions Use or
jsaspect The bottom of the script into the page
cssthe introduction of pressurized from the outside
cssscript removes unwanted reduce
- Simply put: do the right thing with the right label!
HTMLSemantic is to structure the content of the page to facilitate the analysis of browsers and search engines;
CSSis also displayed in a document format without a style and is easy to read.
- Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is beneficial
- Make it easier for people who read the source code to divide the website into blocks, which is convenient for reading, maintaining and understanding
Please describe the difference between cookies, sessionStorage and localStorage?
cookieIt is the data (usually encrypted) stored on the user’s local terminal (Client Side) by the website in order to identify the user
cookieThe data is always carried in the same http request (even if it is not needed), that is, it will be passed back and forth between the browser and the server
localStoragewill not automatically send the data to the server, only save it locally
- Storage size:
cookieThe data size cannot exceed 4k
localStoragealthough there is also a storage size limit, the ratio is
cookiemuch larger and can reach 5M or more
localStorageTo store persistent data, the browser is closed after data is not lost unless the initiative to remove data
sessionStoragedata is automatically deleted after the window closes the current browser
cookieremain in effect until the expiration time, or even if the browser window is closed
Restrictions on page access cookies
cookie (data stored on the user’s local terminal)
Cookies refer to data stored on the user’s local terminal by certain websites in order to identify the user’s identity and perform session tracking. Cookies are almost everywhere in the network system. When we browse the websites we have visited before, the webpage may appear: Hello XXX.
1. Cross-domain issues:
cookieAllow web developers to keep their users’ login status. However, problems can arise when your site has more than one domain name. According to the
cookiecan only be used for one domain name and cannot be sent to other domain names. Therefore , if one is set for a domain name in the browser
cookiewill be invalid for other domain names.
- Reverse proxy through nginx
- jsonp request
2. HTTP only is set:
HttpOnlyattribute is set in the cookie, the
cookieinformation will not be read through the program (JS script, Applet, etc.) , which can effectively prevent
The role and drawbacks of cookies
The role of cookies
- The user data can be saved on the client, which plays a simple role in caching and user identification.
- Save the user’s login status, and the user logs in. After successfully logging in, the server generates a specific cookie and returns it to the client. Next time the client visits any page under the domain name, it sends the cookie information to the server . Determine whether the user is logged in.
- Record user behavior.
- To increase traffic consumption, you need to bring cookie information with each request.
- For security risks, cookies are transmitted in clear text. If the cookie is intercepted by someone, that person can get all the session information.
- Limits on the number and length of cookies. Each domain can only have 20 cookies at most, and each cookie cannot exceed 4KB in length, otherwise it will be truncated
What is the difference between xhtml and html?
- Functional differenceMainly XHTML is compatible with major browsers, mobile phones and PDAs, and the browser can also compile web pages quickly and correctly
- Differences in writing habitsXHTML elements must be properly nested, closed, case sensitive, and the document must have a root element
What are the disadvantages of iframe?
- iframe will block the main page
- The retrieval program of the search engine cannot interpret this page, which is not conducive to
iframesharing the connection pool with the main page, and the browser has restrictions on the connection of the same domain, so it will affect the parallel loading of the page
iframeThese two disadvantages need to be considered before use . If you need to use it
iframe, it is best to
srcattribute values to the iframe , which can bypass the above two problems
What does the webpage verification code do and what security issues are it to solve?
- A public fully automatic program that distinguishes whether the user is a computer or a human. Can prevent malicious password cracking, ticket swiping, and forum irrigation
- Effectively prevent hackers from continuously attempting to log in to a specific registered user using specific programs to brute force
What is the difference between title and h1, b and strong, i and em?
titleThe attribute has no clear meaning and only means that it is a title,
H1which means a title with a clear level, which also has a great influence on the crawling of page information;
strongKey content is marked with the tone strengthen meaning when read using a reading device network,
<strong>it will be re-read, and
<B>is showing emphasize content.
iThe content is displayed in italics,
emindicating emphasized text;