Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the basic knowledge points of html, which can be used for reference by interested friends. I hope you will gain a lot after reading this article.

HTML

Semantics

The semantics of HTML tags means that the structure of a document is properly represented by using tags that contain semantics, such as h2-h7.

The semantics of css naming refers to adding meaningful class to html tags.

Why do you need semantics:

After removing the style, the page presents a clear structure.

Blind people use screen readers to read better.

Search engines have a better understanding of the page, which is conducive to inclusion.

To facilitate the sustainable operation and maintenance of team projects

Briefly describe your understanding of the semantics of HTML?

Do the right thing with the right label.

The semantics of html makes the content of the page structured, the structure clearer, and makes it easy to parse browsers and search engines.

It is displayed in a document format even without a style CSS and is easy to read

Search engine crawlers also rely on HTML tags to determine the weight of context and keywords, which is good for SEO.

It makes it easier for people who read the source code to divide the website into blocks, which is easy to read and maintain and understand.

Doctype function? What is the difference between standard mode and compatibility mode?

The declaration is on the first line in the HTML document, before the tag. Tells the browser's parser what document standard to use to parse the document. DOCTYPE does not exist or is not properly formatted, causing the document to be rendered in compatibility mode

Both the standard mode of typesetting and the JS mode of operation run at the highest standards supported by the browser. In compatibility mode, the page is displayed in a loose, backward-compatible manner, simulating the behavior of older browsers to prevent the site from working

Why does HTML5 only need to write?

HTML5 is not based on SGML, so there is no need to reference DTD, but doctype is needed to regulate the behavior of browsers (let browsers run as they should)

HTML4.01 is based on SGML, so you need to reference DTD to tell the browser the type of document used by the document.

What are the elements in the line? What are the block-level elements? What are the void elements?

The elements in the line are: a b span img input select strong (tone of emphasis)

The block-level elements are: p ul ol li dl dt dd h 2 h 3 h 4 h 5... P

Common empty elements:

What's the difference between using link and @ import when importing styles into a page?

Link belongs to the XHTML tag, which can also be used to define RSS and rel connection properties in addition to loading CSS, while @ import is provided by CSS and can only be used to load CSS

When the page is loaded, the link will be loaded at the same time, while the CSS referenced by @ import will wait until the page is loaded.

Import is proposed by CSS2.1 and can only be recognized above IE5, while link is a XHTML tag and has no compatibility problem.

Tell me about your understanding of the browser kernel?

It is mainly divided into two parts: rendering engine (layout engineer or Rendering Engine) and JS engine

Rendering engine: responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing messages (such as adding CSS, etc.), and calculating how the web page is displayed, which is then output to the monitor or printer. Different browsers have different grammatical interpretations of web pages, so the rendering effect is also different. All web browsers, email clients, and other applications that need to edit and display web content require a kernel

JS engine: parse and execute javascript to achieve the dynamic effect of web pages.

At first, there was no clear distinction between the rendering engine and the JS engine. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

What are the common browser kernels?

Trident kernel: IE,MaxThon,TT,The World,360, Sogou browser, etc. [also known as MSHTML]

Gecko kernel: Netscape6 and above, FF,MozillaSuite/SeaMonkey, etc.

Presto kernel: Opera7 or above. [Opera kernel used to be: Presto, now: Blink;]

Webkit kernel: Safari,Chrome, etc. [Blink of Chrome (branch of WebKit)]

What are the new features of html5 and what elements have been removed? How to deal with the browser compatibility of new HTML5 tags? How to distinguish between HTML and HTML5?

HTML5 is no longer a subset of SGML, but is mainly about the increase of image, location, storage, multitasking and other functions.

Painting canvas

Video and audio elements for media playback

Local offline storage localStorage long-term storage data, the data will not be lost after the browser is closed

SessionStorage data is automatically deleted after the browser is closed

Better semantic content elements, such as article, footer, header, nav, section

Form controls, calendar, date, time, email, url, search

New technologies webworker, websocket, Geolocation

Removed elements:

Elements of pure expression: basefont,big,center,font, smeme, strike, Tet, etc.

Elements that have a negative impact on usability: frame,frameset,noframes

Support for new HTML5 tags:

IE8/IE7/IE6 supports tags generated by the document.createElement method

You can use this feature to enable these browsers to support new HTML5 tags

After the browser supports the new tag, you also need to add the default style of the tag.

Of course, you can also directly use mature frameworks, such as html5shim

How to distinguish the new structural elements and functional elements of the HTML5: DOCTYPE declaration

How to use the offline storage of HTML5? can you explain how it works?

When the user is not connected to the Internet, the site or application can be accessed normally, and the cache file on the user's machine can be updated when the user is connected to the Internet.

Principle: HTML5's offline storage is based on a newly created .appcache file caching mechanism (not storage technology), through the parsing list on this file to store resources offline, these resources will be stored like cookie. Later, when the network is offline, the browser will display the page through the data stored offline.

How to use:

Add a manifest attribute to the header as below

Resources stored offline in the preparation of cache.manifest files

When offline, operate window.applicationCache to realize the requirements.

CACHE MANIFEST # v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / / offline.html

How do browsers manage and load HTML5's offline storage resources?

When online, the browser finds that the html header has a manifest attribute, and it will request the manifest file. If it is the first time to access the app, the browser will download the corresponding resources according to the contents of the manifest file and store them offline. If you have already visited app and the resources have been stored offline, the browser will load the page using offline resources, and then the browser will compare the new manifest file with the old manifest file, and if the file has not changed, it will do nothing, and if the file has changed, the resources in the file will be re-downloaded and stored offline.

When offline, browsers directly use resources stored offline.

Could you describe the difference between cookies,sessionStorage and localStorage?

Cookie is the data (usually encrypted) stored on the user's local terminal (Client Side) by a website to identify the user.

Cookie data is always carried in the same origin http request (even if it is not needed) and will be passed back and forth between the browser and the server

SessionStorage and localStorage do not automatically send data to the server, only save it locally

Storage size:

Cookie data size cannot exceed 4k

Although sessionStorage and localStorage also have storage size limits, they are much larger than cookie and can reach 5m or more

Due date:

LocalStorage stores persistent data, and the data will not be lost after the browser is closed unless the data is actively deleted.

SessionStorage data is automatically deleted after the current browser window closes

The cookie expiration time set by cookie is valid until the window or browser is closed

What are the shortcomings of iframe?

Iframe blocks the Onload event on the main page

The search program of the search engine can not interpret this kind of page, which is not good for SEO.

Iframe and the main page share connection pool, while browsers have restrictions on connections in the same domain, so it will affect the parallel loading of pages.

You need to consider these two disadvantages before using iframe. If you need to use iframe, it is best to dynamically add the value of the src attribute to iframe through javascript, so that you can avoid the above two problems

What is the purpose of Label? How does it work?

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

How does HTML5's form turn off autocomplete?

Set the form or some input that you do not want to prompt to autocomplete=off.

How to realize the communication between multiple tabs in the browser? (Ali)

WebSocket 、 SharedWorker

You can also call local storage methods such as localstorge and cookies

How is webSocket compatible with low browsers? (Ali)

Adobe Flash Socket 、

ActiveX HTMLFile (IE),

Send XHR based on multipart coding,

XHR based on long polling

What can be used for Page Visibility API?

Check whether the page is currently visible and the time it takes to open the page by the value of visibilityState.

Automatically pause the playback of music or video when the page is switched to another background process

How to achieve a circular clickable area on the page?

Map+area or svg

Border-radius

Pure js implementation requires a simple algorithm for a point on a non-circle, obtaining mouse coordinates, and so on.

Do not use border to draw high 1px lines, and maintain the same effect in standard mode and weird mode of different browsers.

What is the webpage CAPTCHA for? what security problems do you want to solve?

A fully automatic public program that distinguishes whether a user is a computer or a human. It can prevent malicious password cracking, ticket brushing and forum irrigation.

Effectively prevent hackers from constantly trying to log in to a specific registered user by means of a specific program.

What is the difference between title and H2, b and strong, I and em?

The title attribute has no clear meaning and only indicates that it is a title, while H1 represents a hierarchical title, which also has a great impact on the crawling of page information.

Strong is to mark the key content, with the meaning of emphasis, when using reading equipment to read the network: it will reread, but show the emphasis.

I the content is displayed in italics, and em represents the emphasized text

What's the difference between using link and @ import when importing styles into a page?

Link belongs to the HTML tag. Besides loading CSS, it can also be used to determine RSS, etc. @ import can only be used to load CSS.

When the page is loaded, the link is loaded at the same time, while the CSS referenced by @ import waits until the page is loaded.

@ import can only be recognized above IE5, while link is a HTML tag and has no compatibility issues.

Tell me about your understanding of the browser kernel?

The browser kernel is mainly divided into two parts: rendering engine (layout engineer or Rendering Engine) and JS engine

The rendering engine is responsible for getting the content of the web page for layout and style rendering, and then outputting it to the monitor or printer

The JS engine is responsible for parsing and executing JS scripts to achieve dynamic web pages and user interaction.

At first, there was no clear distinction between the rendering engine and the JS engine. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

What are the common browser kernels?

Blink kernel: new version of Chrome, new version of Opera

Webkit kernel: Safari, original Chrome

Gecko kernel: FireFox, Netscape6 and above

Trident kernel (also known as MSHTML kernel): IE, domestic browser

Presto kernel: original Opera7 and above

What are the new features of HTML5?

Add selector document.querySelector, document.querySelectorAll

Drag and drop release (Drag and drop) API

Video and audio played by the media

Local storage localStorage and sessionStorage

Offline application of manifest

Desktop Notification Notifications

Semantic tags article, footer, header, nav, section

Enhanced form controls calendar, date, time, email, url, search

Geographic location Geolocation

Multitasking webworker

Full-duplex communication protocol websocket

History Management history

Cross-domain resource sharing (CORS) Access-Control-Allow-Origin

Page visibility change event visibilitychange

Cross-window communication PostMessage

Form Data object

Painting canvas

Which elements does HTML5 remove?

Pure elements: basefont, big, center, font, s, strike, tt, u

Elements that have a negative impact on availability: frame, frameset, noframes

How to deal with the browser compatibility of new HTML5 tags?

Create a new tag through document.createElement

Use gasket html5shiv.js

How to distinguish between HTML and HTML5?

DOCTYPE declaration, new structural elements, functional elements

How does HTML5's offline storage work? can you explain how to use it?

The offline storage principle of HTML5:

Save and update the cache file on the user's machine when the user is online; when the user is offline, you can normally visit the offline storage site or application content

Offline storage of HTML5 uses:

Set the manifest attribute in the html tag of the document, such as manifest= "/ offline.appcache"

Create a new manifest file in the project. The manifest file should be named xxx.appcache.

Configure the correct MIME-type, namely text/cache-manifest, on the web server

How do browsers manage and load HTML5's offline storage resources?

When online, the browser finds that the html tag has a manifest attribute, and it will request the manifest file.

If this is the first time to visit app, the browser will download the corresponding resources according to the contents of the manifest file and store them offline.

If the app has been accessed and the resource is stored offline, the browser compares the new manifest file with the old manifest file, and does nothing if the file has not changed. If the file changes, the resources in the file will be re-downloaded and stored offline

When offline, browsers directly use resources stored offline.

What are the advantages and disadvantages of iframe?

Advantages:

Used to load slower content (such as advertising)

Allows scripts to be downloaded in parallel

Communication across subdomains can be realized.

Disadvantages:

Iframe blocks the onload event on the main page

Can't be identified by some search engines.

It will generate a lot of pages, which are not easy to manage.

What is the purpose of label? How do you use it?

Label tags to define the relationship of form controls:

When the user selects the label tag, the browser automatically shifts the focus to the form control associated with the label tag

Use method 1:

Number:

Method 2:

Date:

How to realize the communication between multiple tabs in the browser?

Iframe + contentWindow

PostMessage

SharedWorker (Web Worker API)

Storage event (localStorge API)

WebSocket

How is webSocket compatible with low browsers?

Adobe Flash Socket

ActiveX HTMLFile (IE)

Send XHR based on multipart coding

XHR based on long polling

What can be used for Page Visibility API?

Automatically pause the playback of music or video when the page is switched to another background process

When the user browses other pages, pauses the slide on the home page of the site to play automatically.

After logging in, there is no refresh to automatically synchronize the login status of other pages

What is the difference between title and H2, b and strong, I and em?

Title represents the entire page title, while H2 represents a hierarchical title, which has a great impact on the crawling of page information.

Strong marks the key content and has the meaning of emphasis. When you use a reading device to read the network, strong will reread it, while b

Is to show and emphasize the content.

I the content is displayed in italics, and em represents the emphasized text

Natural style tags: B, I, u, s, pre

Semantic style tags: strong, em, ins, del, code

Semantic style tags should be used accurately, but should not be abused. If you are not sure, use natural style labels first.

Thank you for reading this article carefully. I hope the article "what are the basic knowledge points of html" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.