HTML && css face questions

What is the difference between HTML and 1.XHTML

• WEB is a basic HTML web design language, XHTML is a markup language based XMl
• The main difference
• XHTML elements must be properly nested.
• XHTML elements must be closed
• Label names must be in lowercase
• XHTMl documents must have a root element

2. What is the Semantic HTML?

• An intuitive understanding of the label is good for search engines to crawl, do the right thing with the right label!
• HTML semantic structure is to make the content of the page, easy to browsers, search engines resolve;
• Also available in one document format in the absence of css style case, and it is easy to read. Search engine crawlers rely on markers to determine the weight of each keyword contextual and heavy, which will help SEO.
• People reading the source code easier to block sites on the Web site for easy reading comprehension maintenance.

2 (1), briefly your understanding of semantic HTML?

• 1, do the right thing with the right label.
• 2, html semantic structured content make the page structure more clear, easy to browsers, search engines resolve;
• 3, also shown in a document format even without CSS style case, and is easy to read;
• 4, the search engine crawler also depend on the context of HTML tags determine the weight and the weight of each keyword using SEO;
• 5, so that people who read the source code is easier to block sites on the site, to facilitate maintenance of reading comprehension.

3. Common browser kernel What?

• Trident kernel: IE, MaxThon, TT, The Word, 360, Sogou browser and so on. [Also known as MSHTML]
• Gecko-: Netscape6 and above, FF, MozillaSuite / SeaMonkey like;
• Presto kernel: Opera7 and above. [Opera kernel source as: Presto, now: Blink]
• Webkit core: Safari, Chrome and so on. [In the Chrome: (a branch Webkit) Blink]

3 (1). What kinds of common browser testing? What kernel (Layout Engine)?

• Browser: IE, Chrome, FireFox, Safari, Opera
• Kernel: Trident, Gecko, Presto, Webkit

What's new 4.HTML5 have removed which elements? How to deal with a new label HTML5 browser compatibility problems? How to distinguish between HTML and HTML5?

• HTML5 is now no longer a subset of SGML, mainly to increase about image, location, storage, multi-tasking and other features.
• Painting canvas
• video and audio elements for media playback
• LocalStorage local offline storage for long term storage of data, the browser is closed after data is not lost;
• sessionStorage data is automatically deleted when the browser is closed
• Semantics of better content elements, such as article, footer, header, nav, section
• Form controls: calendar, date, time, email, url, search
• The new technology webworker, websocktGeolocation
• Element to be removed
• Pure performance elements: basefont, big, center, font, s, strike, tt, u;
• The elements negatively affect the availability of: frame, frameset, noframes;
• HTML5 support new label:
• IE8 / IE7 / IE6 support label generated by the document, createElement method, you can use this feature to make these new browsers support HTML5 tags, the browser supports the new label, the label also need to add the default style.

5. Describe the difference between cookies, sessionStorage (session storage) and localStrorage (local storage)?

• cookie passed back and forth between the browser and the server. sessionStorage and localStorage not;
• LocalStorage greater sessionStorage and storage space;
• sessionStorage and localStorage more abundant use interface;
• sessionStorage localStorage and separate storage space;

5, (1) Please describe the cookies, sessionStorage and localStorage difference?

• A cookie is a website to indicate the user identity and data stored on the user's local terminal (Client Side) are (usually encrypted).
• cookie data is always carried in the http request homologous in (even if not needed), that will be passed back and forth between the browser and the server.
• sessionStorage and localStorage not automatically send data to a server, save only in the local
  存储大小：
• cookie data size can not exceed 4K.
• Although sessionStorage and localStorage storage size is also limited, but is much larger than the cookie, you can reach 5M or greater.
  有期时间：
• localStorage: to store persistent data, the browser is closed after data is not lost unless the initiative to delete data;
• sessionStorage: data is automatically deleted after the current browser window is closed
• cookie: cookie valid until the expiration time set, even if the window or browser is closed

6. How to achieve communication between multiple tabs within the browser?

• Call localstorage, cookies and other local storage
• WebSocket、SharedWorker
• localstroge another browser context is added, deleted, or modified, it will trigger an event, by listening to our event, control its value to a page of information and communication.
• Note quirks: Safari set localstorge value without trace mode thrown QuotExceededError of.

7.HTML5 Why just write! DOCTYPE HTML?

• HTMl5 not based on SGML, and therefore does not need to be referenced DTD, doctype but need to regulate the behavior of the browser (let the browser run in accordance with the way they should be); and HTMl4.01 based SGMA, so it is necessary to DTD referenced to tells the browser the document type used in the document.

8.Doctype role? What is the difference between standard mode and compatibility mode variety?

• ! The first line of the HTML document Doctype statement, precedes the html tags. Tells the browser parses the document parser what the document standard. doctype does not exist or incorrectly formatted documents presented will result in compatibility mode.
• JS standard mode layout and mode of operation are the browser supports the highest standards of operation. In compatibility mode, page lenient way backwards-compatible displays, simulate the behavior of older browsers to prevent the site does not work.

9.Doctype? How strict mode and mixed mode trigger these two models, which distinguish what is the significance?

• Which is used to declare the document specification (html / Xhtml) is generally based on the strict framework of the transition html document uses.
• May trigger the XML declaration added, resolved to change the way the Bug IE5.5 IE5.5 have.

9 (1), HTML5 Why just write <! DOCTYPE HTML>?

• HTML5 is not based on SGML, and therefore does not need to be referenced DTD, doctype but need to regulate the behavior of the browser (so that the browser should be carried out according to their way)
• The HTML4.01 based on SGML, DTD is required to be a reference to a document informing the type of browser used in the document.

10, html document is doing it?

• HTML namely: HTML, an application of Standard Generalized Markup Language, "hypertext" refers to the inside pages can contain images, links, and even music, programs and other non-text elements.
• HTML Document namely: HTML Document objects, each loaded in the browser's HTML document will be the Document object
• Since the Document object is part of the window object, it can be accessed by its window.document property.

11, html5 What can SEO optimization

• title tag; meta tags; header label; footer tag
• Meta tags (meta tags); navigation tabs (nav label); article tags (article label); left or right side of the label (aside tag)

12, css box model and the difference between what content-box border-box padding-box

Q1

• IE box model box-sizing: border-box; (odd mode)

• W3C standard box model box-sizing: content-box; (standard mode) default mode

  Q2

• content-box: This is the default style specified CSS standards. Measurement content only width and height attributes including, but not border, margin, or padding.
• padding-box: width and height attributes include the size of the padding, and does not include the margin border
• border-box: width and height attributes including padding and border, but not the margin. This is when the document box model, Internet Explorer uses Quirks mode.

• content-box does not include padding, border-box comprising padding. So if you set the size is the same, content-box look, it will be larger than the border-box

13, the difference between inline elements and block elements? Compatibility elements in the fast line to use? (IE8 or less)

• Inline elements: YES arranged in a horizontal direction, can not contain an element fast level, setting the width and inefficiency height (may be provided line-height), margin invalid down, the upper and lower invalid padding
• Block-level elements: for each line, that are arranged in the vertical direction. Then start a new line ending line break
• Compatibility: the display: inline-Block; the display: inline; Zoom:. 1;

14, when the page is imported styles, use the link and @import What is the difference?

• 1.link HTML tags belong, in addition to CSS loading, the RSS can be used to define, rel connection attributes defined role; @import CSS is provided only load CSS;
• 2. When the page is loaded, link will also be loaded, and references @import CSS will wait until the page has finished loading before loading;
• import is proposed CSS2.1, only to be recognized in IE5 or more, while link is HTML tag, no compatibility issues;

14 (1) .css way of introducing what? The difference between link and @import is?

• Inline, embedded, outside the chain, introducing
• Difference: while loading,
• The former non-compatibility, which does not support the following browsers css2.1
• link supports the use of javascript change pattern, the latter is not.

15, the following describes your understanding of the browser kernel?

• 1, is divided into two parts: the rendering engine (layout engineer or Rendering Engine), and the JS engine.
• 2, rendering engine: responsible for obtaining content pages (HTML, XML, images, etc.), organize messages (for example, adding CSS, etc.), as well as how to count page, and then output to the monitor or printer. Different kernel browser for grammar explanation page will be different, so the effect of rendering is not the same. All web browser, email client and others need to edit, display web content applications that require kernel
• 3, JS engine then: parsing and executing the javascript to achieve the dynamic performance of your pages.
• 4, the beginning JS rendering engine and the engine does not distinguish very clearly, then JS engine more independent, nine cores tend to refer only to the rendering engine.

16, box-sizing common attributes What? What are the role?

• box-sizing：content-box|border-box|inherit
• content-box: the width and height, respectively, applied to the content of the box element.

17, clear float which way? Which is a better way

• 1, the parent div defined height.
• 2, at the end add empty div tag clear: both.
• 3, pseudo parent div class definitions: after and zoom.
• 4, the parent div define overflow: hidden.
• 5, the parent div define overflow: auto.
• 6, also the parent div float, to define a width.
• 7, the parent div defined display: table.
• 8, br tag at the end add clear: both.
• A third is good, a lot of sites are so used

18, html5 What's new there? How to deal with a new label HTML5 browser compatibility problems? How to distinguish between HTML and HTML5?

Q1

• HTML5 is now no longer a subset of SGML, mainly to increase about image, location, storage, multi-tasking and other features;
• 1, painting canvas;
• 2, video, and playback medium for auto elements;
• 3, local offline storage localStorage long-term storage of data, the browser is closed after data is not lost;
• 4, sessionStorage data is automatically deleted when the browser is closed;
• 5, the semantics of better content elements, such as article, footer, header, nav, section;
• 6, form controls: calendar, date, time, url, search;

• 7, new technology

  Q2

• IE8 / IE7 / IE6 support document.createElement label produced by the method;

    <!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
    <![endif]-->

19, iframe role?

usage

• . 1, is used to insert third party iframe page in the page, the page using iframe earlier primarily used for navigation such many pages are part of the same, so that when switching to avoid duplicates page.

  advantage

• 1, easy to modify, simulate separation, as some of the information management system will be used.

• 2, but now basically not recommended. Unless special needs, it is generally not recommended.

  Shortcoming

• 1, iframe created two orders of magnitude slower than the average DOM element
• 2, load the iframe tag will block the page if the page onload event does not trigger a timely manner, will let users feel very slow page loads, the user experience is not good, you can be set dynamically by js iframe src attribute in Safari, and Chrome to avoid obstruction.

• 3, iframe for SEO friendly, alternative mechanisms for dynamic languages ​​in general is Incude and ajax dynamically populate content.

20, box-sizing, transition, translate, respectively, what is?

• 1, box-sizing: the size of the model used to calculate the manner specified. Divided into border-box (frame size from the fixed box), content-box two calculations (box fixed size from the contents).
• 2, transition: when the current element as long as the "property" changes can smooth transition. Provided by transition-propety transition attribute; transition-duration setting the transition time; transition-timing-function set the transition speed; transition-delay setting transition delay.
• 3, translate: by changing the position of the mobile element; the x, y, z three properties

21, selector priority is what?

• 1,! important> inline styles> id selector> class selector> tag selector> wildcard> Inherited
• 2, weighting algorithm: (0,0,0,0) == "0 corresponds to a first number of important, the second is the number 0 corresponding to the id of the selector, corresponding to the third class 0 the number of selectors, and the fourth is the number 0 corresponding to the tag selector, the selector is currently heavy weight

• 3. Comparison: start with the first zero comparison, if the first big 0, then that is the right choice of high weight, if the first one and the same, comparing the second, and so on.

  22, there is a navigation bar in Chrome inside style intact? In IE, the text is to gather together, which is the compatibility issues?

• With the display: flex properties in IE10 The following are invalid.

23.CSS levels to achieve vertical centering

HTML结构：

<div class="wrapper">
    <div class="content"></div> </div>

CSS：

.wrapper{position:relative;}
.content{
    background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }

方法二

.content{
        position:absolute;
        left:50%;
        top:50%; width:200px; height:200px; background:red; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }

What value 24.display there? Their functions.

• block block type. Default width of the parent element width, width and height can be provided, shown with a line.
• none default. Inline elements like the same type of display.
• The inline type element row. Default width is the width of the content, width and height can not be set, the display peer.
• inline-block content default width is the width, width and height may be provided, the display peer.
• list-item image display block type, like elements, and add style list mark.
• This element table as a block-level table to display.
• inherit provisions should inherit the value of the display property from the parent element.

25. What are the elements in the row? Block-level elements are there? The box model css?

• Block-level elements: div, p, h1, form, ul, li
• Inline elements: span, a, label, input, img, strong, em;
• css box model: content, border, margin, padding;

26, write about the audio tab, how to pause and play music

• play () to start, pause () pause

26 (1), write property video tag preloaded video used in what is

• preload

27.css selectors What? What attributes can be inherited? How priority algorithm? Which inline and important high priority?

• Label selector; class selectors; ID selector
• id> class> tag selection
• High important priority

28.css are several ways to remove floating?

• Empty clear label tape properties;
• The use css overflow property;
• Use of css: after pseudo-element;

• At the same time the need for compatibility with the zoom using the same IE6,7

       .clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clear{zoom:1;}

• Use adjacent processing elements;
• Parent arranged inline-block;
• br clear float
• Made to float float (float parent simultaneously)
• Provided to the floating height of the element's parent
• To a parent element to overflow: hidden clear float method;

• Problem: the need for compatibility with the width or zoom IE6 IE7;

       overflow: hidden;
       *zoom: 1;

29, px, em, rem the distinction?

• 1, px pixels. Absolute units, pixel px is relative to the screen resolution of the display is a virtual unit. It is digitized image length unit of the computer system, if px be converted into a physical length, specify the precision DPI.
• 2, em is a relative unit of length with respect to the current font size of the text objects. If the current line of text in the font size is not man-made settings, the relative browser's default font size. It inherits the font size of the parent element, and therefore is not a fixed value.
• CSS3 rem is a relatively new unit (root em, root em), set the font size to use rem things for elements, but relatively still relative size of just HTML root element.
• 4, the difference between: IE can not call those the font size to use px as a unit, and rem em while you can zoom, rem opposed to just HTML root element. This unit can be said to set the relative merits of the absolute size and size in one, both can be done only by modifying the root element of all proportion to adjust the font size, and font size layer by layer to avoid complex chain reaction. Currently, in addition to IE8 and earlier, all browsers already support rem.

30, CSS3 What are the new features?

• 1, Color: Add RGBA, HSLA mode
• 2, shaded text (text-shadow)
• 3, the bezel: fillet (border-radius) dark borders: box-shadow
• 4, box model: box-sizing
• 5, background: background-size background image set size, background-origin origin set background image, background-clip set background image cropped area to "," background partition may set up multiple, adaptive layout
• 6, gradients: linear-gradient, radial-gradient
• 7, the transition: transition can achieve animation
• 8, custom animation
• 9, the dummy elements are introduced only CSS3 :: selection
• 10, multi-media queries, multi-column layout
• 11、border-image
• 12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
• 13,3D conversion

31. What is the difference on the label title and alt attributes are?

• When the picture is not displayed when Alt, words on behalf of
• Title for the property to provide information

32, describes the role and use of css reset?

• Reset Reset your browser's default css properties, different browsers species, different styles, and then reset, so that they unify.

33, explained css sprites, how to use?

• css sprite, put a bunch of small pictures integrated into a large picture on (png), reduce the number of server requests for a picture.

33 (1), why use css sprites

• css sprites put a bunch of small pictures integrated into a larger picture, to reduce the number of requests the server for a picture
• css sprites in fact, the number of pages in the background image integrated into an image file, and then use css of "background-image", a combination of "background-position" in the background positioning, this can be reduced.
• A lot of overhead pictures request because the request takes longer; although requests can be complicated, but if too many requests the server will add significant pressure.

34. The method of open links in new windows are?

• target:_blank

35, page layout and reasonable structure and performance of the separation often heard, what structure? What manifestations?

• Structure is html, css performance is

36, outlining the understanding of the semantic Web?

• Is to make the browser better understand the code you write, making HTML structure, performance, behavior designed to make use of semantic tags, the program code concise, easy to operate and carry out web site SEO, convenience of a team kinds of standards in an attempt to implement a "barrier-free" web development.

37, display: none; with visibility: hidden is what is the difference?

• display: none; After using this property, HTML elements (objects) various attribute value width and the height and the like will be "lost";
• visibility: hidden; After using this property, HTML elements (objects) only is invisible (fully transparent), and it occupies a spatial position remains, it still has That attribute value of the height, width and the like.

38, please use css definition of p labels, required to achieve the following effects; font color in IE6 black (# 000000); IE7 under red (# ff0000); and other browser-green (# 00ff00)

p{
    color:green;
    *color:blue;
    _color:black;
}

39, the front page which has three layers, what are? What is the role?

• Structure, presentation, behavior layer
• Structural layer (structural layer): the responsibility of the HTML or XHTML markup language of the class is created.
• Presentation layer (presentation layer): a css responsible for creating.
• Behavior layer (behaviorlayer): responsible for answering the question "how content should react to events." This is an area dominated by DOM and Javascript language.

40, to achieve intermediate adaptive layout width, the left and right two columns fixed width

    <style>
        .box{
            display:flex; } .left{ width: 200px; height: 600px; background:red; } .right{ width: 200px; height: 600px; background:red; } .center{ width: 100%; height:600px; background:green; } </style> </head> <body> <div class="box" > <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>

41, how to achieve a circular clickable area on the page?

• 1, map + area or svg
• 2、border+radius
• 3, pure js implemented request is not a point on the circle simple algorithm, the mouse coordinates, etc.

42, tell us about the css box model standard? Lower versions of IE box model What is the difference?

• 1, there are two: IE box model, W3c of box model
• 2, the cartridge model: the content (Content), filler (padding), border (margin), the border (border).
• 3, the difference: content IE part of the border, and padding inside calculated

43, how to optimize your site's files and resources? Expect solutions include:

• File merge
• Minimize file / file compression
• Use CDN hosting
• The use of cache

44, IE8 following versions of the browser box model What is the difference?

• The following IE8 browser box model defined width and height of elements does not include inner edge margins, and drama

45, wrote several IE6 BUG solution

• 1, from bilateral BUG float caused by the use of display
• 2,3-pixel problem using the float cited the use of display: inline -3px;
• 3, after clicking a hyperlink hover failure to use the correct write order link visited hover active
• 4, le z-index problems add to the parent position: relative
• 5, png js code changed using transparent
• 6, min-height minimum height! important to solve
• 7, select the cover using iframe nested ie6
• 8. Why is there no way to define the width is about 1px (IE6 default row height caused by use over: hidden, zoom: 0.08, line-height: 1px)

46, css selectors What? What attributes can be inherited? How priority algorithm? Which inline and important high priority?

• css selectors: class selector, tag selector, ID selector, the selector progeny (derived selector), group selector
• Can inherit: class selector, tag name selector, descendant selectors (descendent selectors), group selector
• Priority algorithm:
• The tag directly defined: 1000
• ID selector: 100
• Class Selector: 1
• In inline, and the important, important high priority

47, constitute the basic statement of css that?

• Selectors, attributes, values