36-Way front-end test html+css

1. What are the Web standards and the understanding?

Tag closure, label lowercase, no nesting, improve search robot search probability, use of external chain CSS and JS scripts, structure behavior of the separation, file download and page speed, content can be accessed by more users, content can be accessed by a wider range of devices, less code and components, easy maintenance, revision convenience, No need to change the content of the page, provide a print version without the need to copy content, improve the usability of the site;

These standards are designed primarily to improve web page loading speed and facilitate development. It is also a business approach that allows manufacturers to value and reposition specifications, fully support those specifications in new browsers and network devices, and facilitate the development of the industry as a whole.

2. What is the difference between XHTML and HTML?

HTML and XHTML are different stages of a language, somewhat akin to the relationship between classical and vernacular Chinese. Tag names in XHTML, attribute names must be lowercase, tags must be tightly nested, and must be closed. HTML is a basic Web page design language, defined as Hypertext Markup Language.

3. Doctype? Strict and promiscuous modes-how do you trigger these two patterns to differentiate between them?

Used to declare documents using that specification (html/xhtml) is generally strictly over-frame-based HTML documents.

Adding an XML declaration can be triggered by changing the parsing to a bug that IE5.5 has IE5.5.

4. What are the inline elements? What are the block-level elements? CSS box model?

Block-level elements: div ph1 H2 H3 h4 form UL

Inline elements: A b br i span input Select

CSS box model: content, border,margin,padding

5. What are the ways CSS is introduced? What is the difference between link and @import?

Inline embedded outer chain import

Difference: Loading at the same time

The former does not have compatibility, the latter CSS2.1 the following browsers do not support

Link supports the use of JavaScript to change styles, which are not supported.

6. What are CSS selectors? What attributes can be inherited? How is the priority algorithm calculated? Inline and important which priority is high?

Tag Selector class Selector ID Selector

Inheritance is better than specifying id>class> tag selection

The latter has a high priority

7. What are the three layers of the front-end page, and what are the roles?

Structure Layer Html (function:) presentation layer CSS behavior Layer JS

8. What is the basic statement structure of CSS?

Selector {Attribute 1: value 1; Property 2: Value 2; ...}

9. What are the browsers that you have made? What are the cores of the browser?

IE (ie kernel) firefox (Gecko) Google (WebKit) opear (Presto)

10. How to solve several ie6bug

1. Use display for double-sided bug float

2.3 MP problem using float caused by use of dislpay:inline-3px

3. Hyperlink hover After click fails to use the correct writing order link visited hover active

4.iez-index problem add position:relative to Parent

5.Png Transparent use JS code to change

6.min-height min Height! Important Solution '

7.select hiding under IE6 using IFRAME nesting

8. Why there is no way to define a width container around 1px (IE6 default row height, using over:hidden,zoom:0.08line-height:1px)

9.ie 6 does not support!important

What is the difference between the title and ALT attributes on the IMG tag?

Alt when the picture is not displayed is represented by the text.

Title provides information for this property

12. Describe the role and use of cssreset.

Reset the browser's CSS default properties browser for different symbols, different styles, and then reset them to unify

13. Explain csssprites, how to use, what is his merit?

The CSS Wizard consolidates a bunch of small images onto a large picture, reducing the number of requests to the server for pictures

14. What is the difference between browser standard mode and weird mode?

Different rendering modes for box models

Use Window.top.document.compatMode to show why the pattern

15. How do you optimize your website's files and resources? The expected solutions include:

File merge

File minimization/File compression

Using CDN Hosting

Use of the cache

16. What is semantic HTML?

Intuitive recognition tags are good for search engine crawling

17. Several ways to clear the float, the advantages and disadvantages of each

1. Use empty label to clear floating clear:both (theoretically clear any label,, add meaningless label)

2. Use Overflow:auto (empty tag element to clear floating and have to increase the abuse of unintentional code, using zoom:1 for IE compatibility)

3. The Afert pseudo-element is used to clear the float (for non-IE browser) first to talk about after, the so-called after, that is, the last child element of the tag behind. So, we can use CSS code to generate an element with a clear property, where the key style is the content. Perhaps the content you see on the Web is "." A point, I have a lot of times, seemingly casually write anything is no problem.

CSS hack

<!--[if IE 6]--><! [End If]-->

_marging\\ie 6

+margin\\ie 7

Marging:0auto \9 All IE

Margin \0\\ie 8

19. Hover style does not appear after hyperlink access?

The workaround is to change the order in which CSS properties are arranged: L-v-h-a.

Example:<style>
a:link{background:red;}
A:hover{background:blue;}
A:visited{background:green;}
A:action{background:white;}
</style>

IE6 double margin Bug

Adds a style to the current element so that the current element is not a block, such as: Display:inline;display:list-item so that when the element floats, there is no problem of doubling the margin under IE6.

Expand: How did this bug appear?

When block-level elements have floating styles, add margin-left and margin-right styles to the elements, and double margins appear under IE6.

21. Why does the text under FF not open the height of the container?

Because the container for fixed height values in standard browsers is not being stretched like IE6.

How do you want to set the height and want to be open?

The way is to remove height setting min-height:200px; Here in order to take care of the IE6 do not know min-height can be defined as:
{
Height:auto!important;
height:200px;
min-height:200px;
}

22. Why is IE unable to set the scrollbar color in the Web Standard?

The color of the scroll bar has been only support IE browser, IE browser's proprietary properties, Firefox and so on are not supported.

The solution is to replace the body with HTML.

Note: Original style <style type= "Text/css" >
Body {scrollbar-face-color: #f6f6f6; Scrollbar-highlight-color: #fff; Scrollbar-shadow-color: #eeeeee; Scrollbar-3dlight-color: #eeeeee; Scrollbar-arrow-color: #000; Scrollbar-track-color: #fff; Scrollbar-darkshadow-color: #fff; }
</style>

23. Why can't I define a container with a height of around 1px?

IE6 This problem is due to the default row height (about 10px), there are many workarounds, such as: Overflow:hidden | zoom:0.08 | line-height:1px.

24. How can I make the layer appear above flash?

The workaround is to set the flash to transparent.

25. How do I make a layer vertically centered in the browser?

Needle for a known size element. The absolute position of the percent is used first, at this point the top left corner of the layer is in the middle of the browser, in order to make the center of the layer in the middle of the browser to make the top left corner of the layer up, move to the left height, half the width of the method, negative value of its own width of the height divided by two

Example:

<styletype= "Text/css" >
. center{background:red;
width:200px;
height:300px;
Position:absolute;
top:50%;
left:50%;
margin:-150px 0 0-100px;}
</style>

<body>
<div class= "center" > Layer vertically centered in the browser </div>
</body>

How to fix the center problem of Firefox nested div tags

Suppose the following is the case:

<div id= "A" style= "width:200px;border:1px solid red;text-align:center;" >

<div id= "B" style= "width:30px;" >&nbsp;</div>

</div>

If you want to implement B centered in a, you can generally just set the Text-align property of a to center with CSS. This method looks normal in IE, but in Firefox, B is left.

The solution is to set the horizontal margin of B to auto, except that you need to set the Text-align property to center in a. For example, set the CSS style for B to: Margin:0auto;

Therefore, the setting can be centered as follows:

<div id= "A" style= "width:200px;border:1px solid red;text-align:center;" >

<div id= "B" style= "Width:30px;margin:0auto" >&nbsp;</div>

</div>

27. What are the style setting methods in Web page authoring? What are the characteristics of each?

28. What is the difference between defining and using a user-defined class and ID?

When defined, the class is in the English form of a period "." As the start flag, the ID starts with "#"; When used, a class can be referenced by multiple different elements in a page, and the ID can only be referenced once in a page.

The parent element of the float element cannot specify the clear property?

If you use the Clear property for the parent element of a float element, the layout of the float elements around it is confusing. This is Macie's famous bug, if you do not know it will be a detour.

30. Briefly describe the difference between src and href.

The href represents a hypertext reference (hypertext Reference) and is used on elements such as link and a. SRC represents the source address, which is on elements such as IMG, script, IFRAME, and so on. SRC content is an essential part of the page that is introduced. The content of the href, which is associated with the page, is a reference. The difference is that the introduction and the reference.

31. What are the image formats that you will use to know your Web page production?

The mainstream image format for Web pages has jpg,png,gif and other JPG: High compression rate, small files, most commonly used. PNG: Support lossless compression, color loss is small, fidelity high, file slightly larger. GIF: Support animation display, but only support 256 color display, has been replaced by flash a lot.

32. Every HTML file has a very important thing at the beginning, Doctype, do you know what this is?

<! The doctype> declaration is at the front of the document, before the

33. What are the inline elements? What are the block-level elements? CSS box model?

Inline elements are: AB span img Input Select strong (Accent tone) block-level elements are: div ul Olli DL DT DD H1 H2 H3 H4...P. Content, padding (inner margin padding), border (border), border (margin).

Expansion: Well-known empty element:<br>

What is CSS cascading? Introduce yourself.

CSS is the abbreviation for cascading Style Sheet. Translated "cascading style sheets". is a markup language for (enhanced) Control of Web page styles and allows the separation of style information from Web page content.

What are the position values and what are the new contents of the CSS3?

Absolute generates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. Fixed generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. The relative generates relatively positioned elements that are positioned relative to their normal positions. Therefore, "left:20" adds 20 pixels to the left position of the element. static default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations). Inherit specifies that the value of the position property should be inherited from the parent element.

CSS3 Properties:

1th Selector 2nd Rgba and Transparency section 3 multi-column Layout 4 multiple background diagram 5th Word wrap 6th Text Shadow 7th @font-face Properties 8th fillet (Border radius) 9th border picture 10th box Shadow 11th box size 12th Media query 13th Voice

36. How do I open a link in a new window?

Target=_bank

Expand: Why should I clear the float?

The float property of the CSS is to change the default display of the block element object, and after the HTML tag has set the Float property, it will no longer occupy one row on its own, thus allowing the effect of multiple elements to be in the same row, so you need to clear the float after the style definition.

By specifying the value of the CSS property float, the element floats to the left or right, and then moves up by the successor element to fill the free space vacated by the previous element's float. The float property of the CSS is to change the default display of the block element object, and after the HTML tag sets the Float property, it will no longer occupy a single row, allowing the effect of multiple elements to be in the same row. Float is a powerful feature, but if you're not well-mastered, it's likely to be a nightmare for your debugging style.

With the float style, if the float is not cleared, then the parent element container with the floating element cannot be automatically stretched. If the inner float is not cleared, this causes the floating parent element to not automatically open to its own height. That is: When an element is floating, its parent element will not contain the floating element if it is not closed, because the floating element is detached from the document stream.

36-Way front-end test html+css