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

This article mainly introduces "what are the essential basic knowledge points of the Web front end". In the daily operation, I believe that many people have doubts about the essential basic knowledge points of the Web front end. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the necessary basic knowledge points of the Web front end?" Next, please follow the editor to study!

Because you want to tell the browser's parser what document standard to use to parse the document, write the document type declaration at the beginning of the document. H5 document type declaration is much more concise than H4 document type declaration. Because H5 is not based on SGML (Standard Universal markup language), there is no need to reference DTD document type definitions, but H4 is based on SGML and must reference DTD. The three document type declarations of H4 are: transition mode, strict mode, and framework mode.

HTML is HyperText Markup Language (Hypertext markup language). Through HTML, the browser can parse the document and show the content and structure of the document on the page. At the same time, HTML

It is also one of the three cornerstones of the network: URL (uniform Resource Locator) and HTTP (Hypertext transfer Protocol). Hypertext is video, audio and pictures.

What are the inline tags, block-level tags and empty tags of HTML?

Inline label: a b span img input select strong

Block level label: div ul ol li dl dt dd h2-h7 p

Empty / single tag: br hr img link meta base source

If you are still confused in the world of programming and don't know your future plans, you can join the web Front-end Learning Exchange Group: 731771211 where you can communicate with the Great God and get out of the confusion. Rookies can join the group to get study materials for free to see how their predecessors move forward proudly in the world of programming! The latest tutorials and learning methods are constantly updated in the group (into the web front-end system learning route, detailed front-end project actual combat teaching videos), there are those who want to learn the front-end of web, or change careers, or college students, and those who want to improve their abilities at work, welcome to join us.

Click: join

What's the difference between using link and @ import when the page imports an external style file?

(1) link belongs to the XHTML tag. In addition to loading CSS, you can also define RSS, define rel connection attributes and other functions, while @ import is provided by CSS and is only used to load CSS.

(2) when the page is loaded, the link will be loaded at the same time, and the CSS referenced by @ import can only be loaded until the page is loaded.

(3) there is no compatibility problem with link, while @ import can only be recognized on IE5+.

The difference between HTML and XHTML?

(1) the XHTML tag must have the root element HTML

(2) labels must be correctly nested

(3) the label must be closed correctly

(4) labels must be in lowercase letters

(5) empty tabs must be closed

(6) XHTML compatibility is better.

(7) target= "_ blank" is not allowed in XHTML.

(8) XHTML tag attribute values must be in quotation marks

W3C standards and label semantics?

W3C standard:

(1) all labels are in lowercase letters

(2) all attribute values are enclosed in quotation marks

(3) tags are properly nested / closed

(4) comply with the rules of HTML,CSS,JS

(5) structure layer + presentation layer + behavior layer

Compliance with W3C standards and label semantics are beneficial to:

Make the page more friendly, support more terminals, so that more people can use the Internet to get the information they want.

(1) the search of search engine is beneficial for crawlers to grab content.

(2) support multiple terminals

(3) support style layout to make the site support personalization

(4) it is beneficial to development and maintenance

(5) it is beneficial to reduce the cost.

(6) improve user experience

(7) the page can better present the content structure.

Understanding of the browser kernel?

The kernel of the browser is divided into two parts: the rendering engine and the JS engine, but as the JS engine becomes more and more independent, the kernel is inclined to the rendering engine. But because the kernel of each browser is different, their rendering

The engine is different, so the rendered page is different, which is why browsers are different and why we have to adapt to browser compatibility.

What is the kernel of the browser?

Firefox kernel: Gecko

IE TT 360Windows of the world Sogou browser kernel: Trident

Opera:Presto is now: Blink

Safari Chrome:Webkit

Chrome:blink

H5 New Features + New semantic tags

HTML5 is not a subset of SGML (Standard Universal markup language). It is mainly about the increase of image, location, storage multitasking and other functions.

New semantic tag:

Painting: canvas

Video: video

Audio: audio

Article footer header nav section calendar date time email url search

Low-end IE adds tags through document.createElement method

What's new:

Client storage mechanism

Cookie is the data stored on the user's local terminal by the website to identify the user (encrypted)

Cookie data is always carried (even if not needed) in homologous http requests and passed back and forth between the browser and the server.

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

Storage size:

Cookie data cannot exceed 4k

Although sessionStorage and localStorage also have storage size limits, they can reach 5m or more.

Time limit:

Data is not lost after the localStorage browser is closed unless the data is deleted

SessionStorage data is automatically deleted after the current browser window closes

The scope is limited to the document source, and the document source url is determined by protocol + host + port. Data can be shared with the same document source, but not by different document sources.

The cookie setting is valid until the expiration time, even if the window or browser is closed

Cookie is compatible, but difficult to use. It is an early customer server storage mechanism designed for server-side scripts.

Webworker provides an easy way to enable web content to run scripts in the background.

Communication between websocket tabs

1. Geographic location API

Geolocation API (https://www.w3.org/TR/geolocation-API/) it allows browsers (if the user allows it) to detect the user's geographic location.

two。 History Management API

It allows web applications to save and update their status so that when users click the browser's back and forward buttons, they respond immediately without refreshing the page.

3. Cross-document message delivery

Units and fonts

1.px: (Pixel) unit name pixel, relative to the unit of length, relative to the screen resolution of the monitor. It is widely used in China.

2.em: the unit name is a unit of relative length, relative to the font size of the text within the current object. If the current font size for inline text is not set, it is relative to the default font size of the browser. It is often used abroad.

3.pt: the unit name is point, and the absolute length unit is generally used in the old version of table, but it is no longer used now.

4.rem: is a newly added unit value in CSS3, which is a unit of relative length.

Em is calculated relative to the font-size of the parent element of the element.

Rem is calculated relative to the font-size of the root element html.

In this way, rem bypasses complex hierarchical relationships and implements functions similar to em units.

CSS

Box model:

Standard box (W3C box model): content+padding+margin+border

IE box model: content (padding+border+content) + margin

CSS selector? Which attributes can be inherited?

Id# class. Tag adjacent + subselector > descendant selection li a wildcard * attribute selector pseudo class selector

Style that can be continued: font-size font-family color ul li dl dd dt

Non-inheritable style: border padding margin width height

How is the CSS priority algorithm calculated?

Weight of the same level, follow the principle of proximity

The loading style is positioned as the last loaded

At this point, the study of "what are the basic knowledge points necessary for the front end of Web" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.