Web Front End Questions collation (HTML)

Web Front End Questions collation (HTML)
Need web front-end course tool and ebook, can add: 33 group 105601600; 22 Group 120342833
1. H5 improvements:
New element
Canvas CANVAS:HTML5 <canvas> elements are used for drawing drawings, which are done by script (usually JavaScript)
Audio
Video
Semantics: article, nav, footer, section, aside, Hgroup, etc.
Time

New properties
Drag and drop: draggable
Editable: contenteditable

New events
Drag and Drop Ondrag OnDrop
Close Page onunload
Window size Change onresize
Removed some elements: font center, etc.
The new DOCTYPE statement <! DOCTYPE html>
Full support CSS3
Video and Audio
2d/3d Cartography
Local storage
Local SQL data
Web Apps


2. What is semantic HTML?
What?
Depending on the structure of the content (content semantics), choosing the Right Tags (code semantics) allows developers to read and write more elegant code while allowing browser crawlers and machines to parse well.

Why?
In order to be in the absence of CSS, the page can also show a good content structure, code structure: In order to look at the bare-ben;
User experience: For example title, Alt used to interpret nouns or interpret picture information, label labels;
SEO friendly: Good communication with search engines helps crawlers crawl more effective information: crawlers rely on tags to determine the weight of context and individual keywords
facilitates other device parsing (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
Facilitate team development and maintenance, semantic more readable, is the next page of important trends, follow the standards of the standard team to follow this standard, can reduce differentiation.

How?
Use as few semantic-free tag div and span as possible;
When the semantics is not obvious, can use Div or P, as far as possible with P, because p in the default case has up and down spacing, to compatible with the special terminal is advantageous;
Do not use a plain style label, such as: B, Font, u, etc., instead of using CSS settings.
The text that needs to be emphasized, can be contained in strong or EM tag (browser preset style, can use CSS to specify without them), strong default style is bold (do not use B), EM is italic (without i);
Use the table, the title to use caption, table head with THEAD, the main part with tbody surrounded, tail with tfoot surrounded. Table header and general cell to distinguish open, table head with th, cell with TD;
form field should be wrapped with fieldset label, and use legend label to describe the form;
The description text for each input tag needs to use the label label, and by setting the ID property for input, set For=someld in the Lable label to associate the explanatory text with the corresponding input.


3. From the front-end point of view to do SEO need to consider what?
Semantic HTML tags
Reasonable title, description, keywords;
Important HTML code put in front
With less IFRAME, search engines don't crawl content in the IFRAME
Picture Plus Alt


4. Document Type (DOCTYPE)
Role:
The DOCTYPE declaration is located in the front of the document, before the label, telling the browser which specification to use.
Type:
Three species: Strict, Transitional and Frameset
If you do not declare: Do not write doctype, the browser will enter quirks mode (promiscuous). That is, if you do not declare doctype, the browser does not introduce the standard, then the early browser will be in accordance with their own analytic way to render the page. The behavior of the browser to parse the page in its own way is called "quirks mode", or "odd mode", or "strict mode" in the form of a web-based solution. If the full adoption of Strictmode will not make any mistakes, but this will reduce the program's fault tolerance, increase the difficulty of developers

In which case:
No DOCTYPE declaration using quirks Mode parsing
For most of the DOCTYPE, standard Mord is used.

Special cases:
For those browsers do not recognize the DOCTYPE, the browser uses quirks mode;
There is no declaration of DTD or HTML version declarations below 4.0 using quirks mode, others using standard mode;
IE6, if there is an XML declaration before the DOCTYPE declaration (for example: <?xml version= "1.0" encoding= "iso-8859-1"?>), then quirks mode is used to parse

The difference between a standard pattern and a weird pattern:
Standard mode: Browser renders pages according to specifications
Promiscuous mode (weird mode): The page is displayed in a more lenient and compatible way.
Their biggest difference is the analysis of the box model.
In strict mode: Width is the contents of the breadth, that is, the element's true width = margin-left + border-left-width + padding-left + width + padding-right + border- Right-width + margin-right;
In quirks mode: width is the actual width of the element, content width = width-(margin-left + margin-right + padding-left + padding-right + border-left-wid th + border-right-width)


5. What are the limitations of using XHTML?
XHTML is more stringent, the label must be closed, must be body,head, etc.
If the page uses ' application/xhtml+xml ' some old browsers are not compatible


6. What do I do if the content of the Web page requires multiple languages?
Unified encoding Utf-8 mode is used
"The content display is limited, can add the group to download, the group file will update the study material regularly, as well as practiced hand small case"

Web Front End Questions collation (HTML)