The front face questions Summary - HTML & CSS

What is the meaning 1. doctype?

• Let the browser rendering in standard mode
• Let the browser know the elements of legitimacy

2. HTML, XHTML, HTML5 relationship?

• HTML belong to SGML
• XHTML belongs to XML, HTML for XML is the result of strict
• HTML5 does not belong to SGML or XML, XML lenient than

3. HTML5 what has changed?

• New semantic elements
• Forms enhancements
• The new API (off-line, audio and video, graphics, real-time communication, local storage, device capabilities)
• Classification and nested change

4. em and i What is the difference?

• em is the semantic tags, for emphasis
• i is the pure form of labels, the table italics
• I do not recommend using HTML5 in general used as icon

5. What is the semantic meaning?

• Developers easy to understand
• Extremely easy to understand structure (search, screen reader software)
• SEO helps
• semantic microdata

6. What elements can be self-closing?

• Form elements input
• Pictures img
• br、hr
• meta、link

7. HTML and DOM relationship?

• HTML is dead
• DOM parsing evolved from HTML, is alive
• JS can maintain DOM

8. property and attribute the difference?

• attribute is dead, it is written in html
• property is alive
• Changes do not affect each other

9. form of action?

• Directly submit the form
• Use submit / reset button
• Easy browser save form
• Overall third-party libraries can extract value
• Third-party libraries can form validation

10. Select weights?

• ID selector #id +100
• Classes, properties, pseudo-class +10
• Elements, pseudo-elements +1
• Other selectors +0

11. css background?

(1) Background gradient

.c2{
		height:90px;
        /* background: -webkit-linear-gradient(left, red, green); */
        /* background: linear-gradient(to right, red, green); */
        /* background: linear-gradient(180deg, red, green); */
        /* background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%); */
        background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
                linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);  /* 交叉线背景 */
        background-size: 30px 30px;
    }

12. character Origyo?

• overflow-wrap (word-wrap) Wrap common control - whether to retain the word
• word-break for multi-byte character - Chinese sentence is the word
• white-space blank whether newline

13. base64 use?

• HTTP requests for reducing
• For small pictures
• 4/3 of the original volume of about base64

14. The difference between pseudo-classes and pseudo-elements?

• Pseudo-class status table
• Pseudo-element is really an element
• The former single colon, colon latter bis

15. How landscaping checkbox?

• label[for]和id
• Hidden native input
• :checked + label

16. How to achieve the 3D effect?

• perspective: 500px;
• transform-style:preserve-3d;
• transform: translate rotate …

17. css animation?

Principle (1) Animation

• Persistence of vision effect
• The picture gradually changes

Role (2) Animation

• Pleasure
• Attention
• Feedback
• cover up

(3) css animation type

• transition motion tween
• keyframe keyframe animation, frame by frame animation (animation)

(4) the motion tween

• Position - the translation (left / right / margin / transform)
• Azimuth - rotation (transform)
• Size - Zoom (transform)
• Transparency (opacity)
• Other - linear transformation (Transform)

(5) keyframe animation

• Equivalent to multiple tween animation
• Regardless of changes in the elemental state
• More flexible definition of

(3) frame by frame animation

• Movies can not be applicable to the calculation of tweens
• Greater resources
• 适用steps() animation-timing-function: steps(1);

18. The difference between the transition animation and keyframe animation?

• Transition animation requires a change in state
• Keyframe animation does not require state changes
• Keyframe animation can be controlled more finely

19. How to achieve frame by frame animation?

• Using keyframe animation
• Tween removed (steps)

20. css animation performance?

• Performance is not bad
• In some cases superior JS
• JS but can do better
• Box-shadow attribute part of other risk