HTML Interview Manual

This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

HTML Interview Manual

HTML 5 new features

• Video and Audio elements for media playback
• Local offline storage localStorage stores data for a long time without data loss after the browser is closed
• The data in sessionStorage is automatically deleted after the browser is closed
• Semantically better tags such as article, footer, header, nav, section, etc
• Device compatibility HTML5 provides an unprecedented open interface for data and application access
• New technologies Web Worker, WebSocket, Geolocation, add drag and drop API, drawing Canvas

Inline elements, block-level elements, and empty elements

• Inline elements:span.img.input.select.a.strongEtc.
• Block-level elements:div.ul.li.h1-5.p.dl.dt.ddEtc.
• Empty elements:br.hr.link.metaEtc.

Site files and resources optimized

• File merge (reduced HTTP requests)
• File compression (reduce file download size)
• Use the cache
• Backlink, website outside the chain optimization
• Use CDN to manage resources
• Gzip compresses the required JS and CSS files
• Meta Tag optimization (title.description.keywords),headingTag optimization,altTo optimize the

Page import CSS, use the difference between link and @import

• linkIs an HTML tag, and@importIs the CSS
• @importThere are compatibility issues, only available in IE5 and above, whilelinkNo compatibility problem
• When the page loads,linkWill be loaded at the same time, and@importThe referenced CSS waits until the page is loaded
• linkIs heavier than@importThe weight of

The role of the label

The label defines the relationship between form controls. When the user selects the label, the browser automatically shifts the focus to the form controls associated with the label.

 <label for="Name">Number:</label> 
 <input type="Text" name="Name" id="Name"/>
Copy the code

The difference between the title and Alt attributes of the tag

• altTo give text when the picture does not display properly.
• titleProperty provides advisory information for the element on which it is set.

Benefits of semantic tags

• The removal or loss of style can give a clear structure to the page

• Convenient equipment parsing rendering web pages

• Is conducive toSEO, establish good communication with search engines, help crawlers to crawl more effective information: crawlers rely on tags to determine the context and the weight of each keyword

• Easy to team development and maintenance, semantic more readable

Multiple tabs within the browser communicate

Use localStorage methods, such as localStorage and cookies.

Pros and cons of iframe

Advantages:

• Can communicate across domains
• You can upload files without refreshing
• Solve the loading problem of third-party content

Disadvantages:

• Is not conducive to SEO
• The page will add server requests
• Blocks the Onload event on the main page

SRC is different from href

• srcReplaces the current element; Href is used to establish a connection between the current document and the referenced resource
• srcThe location of an external resource that will be embedded in the document where the current tag is located. whilehrefPoints to the location of a network resource and establishes a link between the current element (anchor) or the current document (link).

Why is it more efficient to have multiple domain names to store web resources

• savecookieBroadband;
• CDNCaching is more convenient;
• Breaking browser concurrency limits;
• Save the number of connections of the primary domain name, optimize the response speed under the page;
• Prevent unnecessary safety problems;

HTML5 Local Storage

HTML5 Web storage storage methods are: sessionStorage and localStorage.

• sessionStorageUsed to store data locally in a session and is destroyed when the session ends.

• localStorageLocal storage for persistence, where data never expires unless the user proactively deletes it;

• cookieData stored locally by a web site to identify a user.

The difference between:

• In terms of the transfer between the browser and the server:cookieData is always carried in the same source HTTP request, i.ecookieBack and forth between the browser and the server; whilesessionStorageandlocalStorageIt is stored locally and does not automatically send data to the server.

• Look from the size: Storage size limits are different,cookieData cannot exceed4k, only suitable for storing very small data; whilesessionStorageandlocalStorageThere is also a storage size limit, but less thancookieMuch larger, up to 5M or more.

• From the data validity period:sessionStorageThe session is closed immediately, so it does not last long.cookieThe cookie is valid until the set expiration time, even if the window or browser is closed. whilelocalStorageIt always works.

• In terms of scope:sessionStorageNot shared across different browser Windows, even the same page; whilelocalStorageandcookieAre shared across all the same origin Windows.

Common browser kernel

If this article helped you, please give it a like