Front End Interview HTML article finishing __html

HTML5 new features, semantic

Semantic label than traditional div+css style layout, more follow the rules of the world, is conducive to team development and maintenance, more conducive to SEO optimization, convenient for other equipment analysis

Give a few examples to illustrate:

label	of Semantics
<section></section>	Defines the sections and segments of the body part in a document.
<article></article>	Define the imported external text
<aside></aside>	Used as side bar
	Page Head
<footer></footer>	Page tail
<nav></nav>	Navigation bar
<datalist>	The Drop-down selection box that you can enter

Personally think the most useful new property is the form property
New With reference links
Other HTML5 new utility property browser Standard mode and weird mode

There are two modes of browser parsing CSS: Standard mode and weird mode. In standard mode, browsers parse the execution code according to the standard of the web; in weird mode, in order to solve compatible old pages, browsers follow their own patterns to parse documents

How does a browser differentiate between these two modes?
1. Standard mode:
That is, the document's head has a complete DOCTYPE reputation; The browser will resolve according to the DTD declaration in DOCTYPE, such as

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

The browser will parse by the HTML 4.01 standard

2. Bizarre mode:
There is no DOCTYPE declaration in the document, or there is no strict DTD declaration, in another case: if DOCTYPE declares XML, IE will parse into weird mode.

standard mode and weird mode for CSS parsing of the Difference box model: IE Standard under: Content+padding+border+margin;ie Strange under: Content+margin, The content contains the vertical alignment of the elements in the padding and border: Gecko based Browsers "Mozilla Firefox, Hotbrowser, Mozilla Suite, Camino" standard mode alignment to baseline, Weird mode to the bottom of the weird mode, ie6/7/8 do not know the!important declaration; In standard mode, only IE6 does not recognize the width of the!important declaration to set the elements in the row: In standard mode, setting the Wdith and height of the element in the same row will not take effect. And in weird mode, it takes effect. Using margin:0 Auto allows elements to be centered horizontally in standard mode, but is invalidated in weird mode. the difference between XHTML and HTML

XHTML is actually an improved HTML that conforms to the XML standard, as is the case for syntax-critical programs and other xml-based applications; the benefits of using data-

HTML data-* Property: Using the Data-* property to embed custom data
Stored (custom) data can be leveraged in a page's JavaScript to create a better user experience (without Ajax calls or server-side database queries)

In a high version browser, you can use the JS method dataset to get the data meta tags stored in the data-

The role of META Tags: the data stored inside it is for machine interpretation, tell the machine how to parse this page

It will not appear on the page, but it is readable for the machine.
Available in browsers: 1. (How to display content or reload pages), 2. Search engine (keywords), 3. or other Web services.

Required attributes and optional attributes for meta:
Must attribute: When there is a http-equiv or name attribute, be sure to have the content attribute to describe it.
Optional attributes for meta: HTTP-EQUIV, name, and scheme

<meta http-equiv= "Refresh" content= "5;url=http://www.baidu.com"/>

Add this in the page, after 5 seconds will jump to Baidu

Common Properties and Usage:

CharSet: Declare code format, solve garbled
SEO Optimization: Use name= "*" content= "..."
Mobile End Page Layout:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >

Tell each browser what to do
For example: Use the latest chrome version first

<meta http-equiv= "x-ua-compatible" content= "chrome=1"/>

UC Mobile browser Full screen Display page

<meta name= "Full-screen" content= "yes" >

Canvas

Talking about canvas, I have to say is the difference with SVG:

Canvas is a new element provided by HTML5 <canvas>
SVG is much earlier than canvas, using XML technology (a language that describes two-dimensional graphics)
Canvas can be seen as a canvas. It draws the graph to be the scalar graph, may introduce in the canvas the JPG or the PNG such format picture, is suitable for the production game, the chart and so on
SVG, however, plots the graph as a vector graph. SVG can not introduce ordinary pictures, suitable for making small icons;
The graphics inside the canvas cannot be crawled by the engine, the event bindings are not supported, and SVG can be implemented with tags, and SVG can support event binding.
Canvas can use Canvas.onmouseover=function () {} IE6 bugs, and some positioning notation

IE6 to document parsing is a lot of bugs, such as the bilateral distance problem, odd width, 3px after floating problem, position:absolute positioning left and bottom positioning errors, and so on;

These IE6 bugs can be solved by triggering layout, and how to trigger layout.

The position:absolute of an absolutely positioned element (containing block) is often problematic in this respect.
Float:left|right because of the characteristics of layout elements, the floating model will have a lot of weird performance
Display:inline-block when an inline-level element needs to be layout, it is often used, which may also be the only effect of the CSS attribute--Make an element have layout
Width: Any value other than auto
Height: any value except auto
Zoom: Any value except auto

One of the most common fixes for locating bugs is:

1, to the parent layer set ZOOM:1 trigger layout.
2. Set width (position left)/height (position bottom) to the parent layer. about Viewport

When you set name= "viewport" in the META tag
Content contents

Field name	type	Description
Width number	Device-width	Control the width of the viewport
Height number	Device-width	Control the width of the viewport
Initial-scale Device-width	The initial scaling ratio, which is the scale when the page is first load
Maximum-scale	Number	The maximum percentage that allows the user to zoom
Minimum-scale	Number	The minimum scale that allows the user to scale
User-scalable	Yes \no	Whether the user can scale manually

If you do not set the viewport, then the width of the default is 980, if all the elements of the page are less than 980, then the width is 980, if the widest position of the page more than 980, then width is equal to the maximum breadth.
For example

Then the iOS width or 980 display (that is, the default will be the DPI zoom)
The width of the viewport can be obtained by document.documentElement.clientWidth.