HTML and browsers

Doctype? What is the difference between standard mode and compatible mode?

DOCTYPE is used to declare document types and DTD specifications.
declaration is the first line in an HTML document, not an HTML tag, before the HTML tag. Tell the browser’s parser what document to use to parse the document. A non-existent or improperly formatted DOCTYPE will cause the document to be rendered in compatibility mode.

Standard mode typography and JS mode are run to the highest standards supported by the browser. In compatibility mode, pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work.

Declare to a DTD in HTML4.01. Since HTML4.01 is based on SGML, the DTD specifies markup rules to ensure that browsers render content correctly

HTML Global attributes

Global attributes are attributes common to all HTML elements; They can be used for all elements, even if attributes may not work on some elements.

Global properties | MDN

Difference between Canvas and SVG

Canvas is a new element provided by HTML5, and SVG has a longer history than Canvas, which has been more than ten years. SVG is not a label specific to HTML5. Originally SVG was a language for describing two-dimensional graphics using XML technology (Hypertext Extension Language, which allows custom tags or attributes). In H5, Canvas looks very similar to SVG, but there are huge differences.

First of all, canvas can be regarded as a canvas in terms of its functions. , the graph drawn by it is a scalar graph. Therefore, JPG or PNG images can be introduced into canvas. In actual development, large online games are made with canvas canvas, and canvas technology is quite mature now. In addition, we like to use Canvas to make some charts for statistics, such as bar chart, curve chart or pie chart. SVG, on the other hand, is a vector graph, so its use is limited. Since only vector images can be drawn, normal images cannot be introduced in SVG because vector images have a non-distorting effect, which we will use to make small ICONS in our projects. But because its essence is vector map, it can be infinitely magnified without distortion, which is very suitable for making maps, and Baidu map is made with SVG technology.

In addition, technically speaking, graphics drawn in canvas cannot be captured by the engine. For example, we want to make a picture in canvas follow the mouse event: canvas.onmouseover=function(){}. Graphics in SVG can be captured by the engine, supporting event binding. Style =”width:XXX; width:XXX; width:XXX; height:XXX;” To define.

What are the inline elements? What are block-level elements? What are the void elements?

Definition: According to the CSS specification, each element has a display attribute, which determines the type of the element. Each element has a default display value. For example, if the default display value of div is “block”, it is a “block-level” element. The default value of the span display attribute is “inline”, which is the “inline” element.

  • A b span IMG input select strong

  • Block level elements are: div ul OL Li DL dt DD H1 H2 H3 H4… p

  • Empty elements:

    • Br hr IMG Input link meta
    • Uncommon: Area Base Col Command Embed KeyGen Param Source Track WBR

Different browser (version), (5) HTML4, CSS2 slightly different actual reference: stackoverflow.com/questions/6…

What is the difference between using link and @import when importing page styles?

  • Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, rel connection attributes, etc. @import is provided by CSS and can only be used to load CSS;
  • When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded.
  • Import is CSS2.1, only in IE5 above can be recognized, and link is XHTML tag, no compatibility problems;
  • Link supports using JS to control the DOM to change styles, while @import does not.

What is your understanding of the browser kernel?

It is mainly divided into two parts: layout Engineer or Rendering Engine and JS Engine.

Rendering engine: Takes the content of a web page (HTML, XML, images, etc.), organizes the information (such as adding CSS, etc.), calculates how the page should appear, and renders it to the user’s screen.

The JS engine parses and executes javascript to implement logic and control DOM interactions.

At the beginning, rendering engines and JS engines were not clearly distinguished, but later JS engines became more and more independent, and the kernel tended to refer only to rendering engines.

It changes


  • New semantic elements

    • header footer nav main article section
    • Removed some pure style tags

  • Form to enhance

  • The new API

    • Offline (applicationCache)
    • Audio and Video (Vidio)
    • Graphics (Canvans)
    • Real time communication (Websoket)
    • LocalStorage (localStorage, indexDB)
    • Device capability (map location, mobile phone shake)

Difference between EM and I

  • The effect is all italic
  • Em is semantic tag, table emphasis
  • I is for style tag, table italic

Which elements are self-closing?

  • Form element Input
  • img
  • br, hr
  • meta, link

HTML and DOM

  • HTML is just a string
  • The DOM is parsed from HTML
  • JS can maintain the DOM

Property and attribute differences

For example, an input tag has a 3 attribute, but if you use input.value = 4 or change the value to 4, then you still get “3” when you go to getAttribute.

The form function

  • Submit the form directly
  • Use the Submit/Reset button
  • Make it easy for the browser to save the form
  • Third-party libraries can be evaluated as a whole
  • Third-party libraries can do form validation

Mainstream browser machine kernel

The browser The kernel note
IE Trident IE, Cheetah security, 360 speed browser, Baidu browser
firefox Gecko
Safari webkit Since Safari was launched, its rendering engine has been Webkit, and when you think of Webkit, the first thing that comes to mind is Chrome.
chrome Chromium/Blink The Blink rendering engine (browser core) was developed in the Chromium project and built into Chrome. Blink is actually an offshoot of WebKit. Most of the latest versions of domestic browsers use the Blink kernel. Secondary development
Opera blink The Opera kernel was Presto, and now follows Chrome with blink kernel.

What is your understanding of HTML semantics?

  • Do the right thing with the right label.
  • HTML semantics make the content of the page structured, clearer structure, easy to browser, search engine parsing;
  • Displays in a document format even without styling CSS and is easy to read;
  • Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO.
  • Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

Please describe the difference between cookies, sessionStorage and localStorage?

  • Cookies are data stored (usually encrypted) on a user’s Client Side by a website to identify the user.

  • Cookie data is always carried in the same HTTP request (even if it is not needed) and is passed back and forth between the browser and the server.

  • SessionStorage and localStorage do not automatically send data to the server and only store data locally.

  • Storage size:

    • Cookie data size cannot exceed 4K.
    • SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more.

  • Validity period (life cycle) :

    • LocalStorage: stores persistent data. Data will not be lost after the browser is closed unless the data is deleted actively.
    • SessionStorage: Data is automatically deleted after the current browser window is closed.
    • Cookie: The set cookie expiration time remains valid even if the window or browser is closed

  • Shared

    • SessionStorage cannot be shared, localStorage is shared between same-origin documents, and cookies are shared between same-origin documents that comply with the PATH rule

What’s the difference between the title attribute and the Alt attribute in HTML?

<img SRC ="#" Alt =" Alt "/>Copy the code

When the image does not output information, the Alt message will be displayed. When the mouse is on, the Alt message will not be displayed.

<img src="#" alt="alt信息" title="title信息" />
Copy the code
  • When the image does not output information, the Alt message will be displayed and the title message will be displayed when the mouse is placed;
  • When the image is output normally, there is no Alt message, the mouse over the title message will appear.
  • In addition to purely decorative images must be set to meaningful values, search engines will analyze.

A few more things to know about the title attribute:

  • The title attribute can be used on all tags except base, Basefont, head, HTML, Meta, Param, script, and title.
  • The function of the title property is to prompt. Use the title attribute for additional descriptive and non-essential information. The title attribute value can be set longer than the Alt attribute value.
  • The title attribute is useful for adding descriptive text to links, especially if the link itself is not quite clear about the purpose of the link.

Why did we abandon the table tag?

Table of the drawback is that the code is loaded into the local server in the process of load is originally a line to perform a line, but after every label is what’s inside the table, download will be displayed, so if many images leads to a web page has been loaded out, unless all of the pictures and content all finish loading. It would have been too slow to wait until all the images were loaded, so the table tag is now mostly abandoned.

Head element

The head child elements fall into three categories:

  • Describes the basic information of a web page
  • Links to other files needed to render web pages
  • Major manufacturers according to their own needs customized

Basic Page Information

A web page has to have a title, just like a person has a name. In addition, you can also supplement some basic information according to actual needs.

  • Document title (text displayed in a browser TAB) : Take a closer look at the HEAD element
  • Encoding format: If your page is garbled, it is usually the wrong encoding format
  • Window Settings:
  • Search engine optimization related content:
  • IE browser version rendering Settings:

Other file links

  • The CSS file:

However, in order to make the appearance of the page visible to the user earlier, it is common to put the JS file at the bottom of the body

Manufacturers of custom

Also share the page to QQ chat window, some pages directly is a link, but some pages have titles, pictures, and text introduction. Why is the difference so stark? To see if the following three things are set

<meta ItemProp ="name" content=" "/> <meta ItemProp ="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" /> <meta name="description" itemprop="description" Content =" This is the content to share "/>Copy the code

Four things to look out for in mobile projects

Set viewPort in meta

To prevent users from sliding in and out of pages, add meta elements to index. HTML and set viewPort.

<meta name="viewport" The content = "width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" / >Copy the code

CSS style unification problem

We need to reset the page styles because the default CSS styles are not uniform across mobile browsers. Workaround: Use reset.css to reset the default styles for all elements

One pixel border problem

Some phones have higher resolution, such as 2x or 3x, and the browser on the phone will display 1 pixel of CSS as 2 or 3 physical widths. Solution: Add a border. CSS library, which will use the principle of scroll scaling to reset the border. When we want to use a one-pixel border, we just need to add the corresponding class name to the label. For example, if we want to use a one-pixel border, we add the class name of “border-bottom” to the label

300 ms click delay problem

In mobile development, using the click event on some models can delay execution by 300ms, which affects the user experience. Solution: Introduce fastclick.js.