Web Front End Questions series: (ii)

1. List the IE6 bugs you have encountered in your work and talk about solutions

A. Double margin bug:

For example: When you set Margin-left or Margin-right to the first floating element within the parent element, the margin property doubles, and you need to add the property display:inline.
This avoids double margins.

b when the floating element is adjacent to a non-floating element, the 3-pixel bug will appear and it will be offset by 3 pixels. My solution is to add a float to the non-floating element.

C. Adapting the parent container to the height of a child element when the child element floats an unknown height bug
Overflow:auto ——-Let the parent container adapt to the height of the child element

The IE6 will automatically expand the height of the parent layer element, and IE8 and FF, such as the browser plus Overflow:auto, can clear the float.

2. How to define the width property of IE6, 7 and 8 separately using CSS

All browsers common
height:100px;
IE6 Recognition:
_height:100px;

IE6, IE7 all recognize:
*height:100px;
IE7, FF Common
height:100px!important;

3. Which properties in CSS cannot be inherited from parent elements

such as border (border), margin (margin), padding (padding), and background

4, how do you understand the semantics of HTML structure

HTML structure is the skeleton of the page, a page is like a house, HTML structure is reinforced concrete wall, a house if there is no reinforced concrete wall that is a heap of bricks, can not live people, can not work. CSS is a decorative material, CSS If there is no HTML structure that is a pile of wood, paint together, without the actual use of value. When we refer to "semantic markup", we should say that HTML should be completely out of the performance information, where the label should be semantically defined the structure of the document.
Significance:

• This allows the reading device to display the page appropriately according to its own conditions
• Search engine crawlers are also searched based on a semantic structure.
• Facilitates team development and maintenance

5, do SEO need to consider what

SEO is the search engine optimization

1. Learn how search engines crawl Web pages and how to index them
You need to know the basic workings of some search engines, the difference between search engines

2. Meta tag optimization
Mainly includes the theme (Title), website description (Description), and Keywords (Keywords). There are other hidden text such as author (author), category (directory), Language (encoded language), etc.

3, how to select keywords and put keywords in the page
Search has to use keywords. Keyword analysis and selection is one of the most important tasks in SEO. First of all to the site to determine the main keywords (generally 5 up and down), and then to optimize for these keywords, including keyword density (Density), correlation (relavancy), prominence (prominency) and so on.

4, understand the main search engine
Although there are many search engines, there are a few things that can make a difference to the website traffic. For example, the main English has google,yahoo,bing, such as Baidu, Sogou, Youdao and so on. Different search engines do not have the same rules for crawling and indexing or sorting pages. Also understand the relationship between search portals and search engines, such as AOL Web search using Google's search technology, MSN with Bing Technology.

5, the main Internet directory

6. You have to learn to get the most clicks with the least amount of ad input.

7. Search Engine Submission

8, link exchange and link wide degree (link popularity)
Has a lot to do with getting your traffic.

9, the rational use of the label
For example, to minimize the use of IFRAME, the search engine will not crawl the contents of the IFRAME, important content should not be placed in the framework.
Display:none can not be used to hide the text, because the search engine will filter out the Display:none, inside the content, will not be retrieved by spiders. You can set text-indent to a negative number, deviate from the browser, and then use the Overflow:hidden property to hide

6, we know that can be outside the chain to introduce CSS files, please talk about the way to introduce CSS outside the chain, the performance of these methods are different?

A. In-line style
Disadvantage: Poor versatility, special effects, advantages: Using the CSS command is less, and often changes in places, the use of this method is a good choice.

B. Inline style: CSS is written in the head tag
Pros: Directly in the HTML document, using this style is faster. Cons: Code bloated, not conducive to maintenance

C. Link style: Introducing an external CSS file
A way to compare ease of maintenance and aesthetics

D. Import Style
Pros: Import multiple CSS files at once. For a large number of CSS files in the system

7, CSS sprite is what, talk about the advantages and disadvantages of this technology

CSS sprite is actually the page in a number of background images integrated into a picture file, and then use the CSS "Background-image", "Background-repeat", "background-position" combination to locate
CSS sprites can reduce the byte of the picture and speed up the load of the page. The disadvantage is that the development and maintenance are more troublesome.

8, the CSS3 standard definition of a WebKit kernel browser recognition of the fillet (size arbitrary)

border:30px;-webkit-border-radius:40px;

9, there is such a piece of HTML, please fault

< P >  The elder brother writes is not the HTML, is lonely. < BR >< BR >  I said:<br> don't crush brother, brother is just a legend

The end tag for the P tag is missing.

10. How do I trigger this DOCTYPE standard mode and promiscuous mode? What is the point of distinguishing them?

In standard mode, the browser renders the page according to the specification. In promiscuous mode, the page is displayed in a more relaxed backward-compatible manner.
Trigger Chaos Mode:
Trigger for IE6:

DOCTYPE before adding the XML declaration <?xml version= "1.0" encoding= "Utf-8"? ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Trigger for IE7:

Add HTML annotations between the XML declaration and DOCTYPE <?xml version= "1.0" encoding= "Utf-8"? ><!– ... and keep IE7 in quirks mode–><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
Both IE6 and IE7 can trigger:

Add an HTML comment <!–quirks the header of the HTML4.01 DOCTYPE document mode–><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

The promiscuous mode of each browser is basically the private mode of each browser, not compatible with each other. Therefore, the promiscuous mode is used unless it is for compatibility issues

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

The inline elements are: A b span I img Input Select Strong (input is used to define individual form elements in the form)
Block-level elements are: div ul ol li DL DT DD
Box model: margin Border padding content

12. What are the three layers of the front-end page, and what are the respective ones? What is the role?

The Web page is divided into three levels, namely: structure layer, presentation layer, behavior layer.
The structure layer of a Web page: it is created by markup languages such as HTML or XHTML, which is the semantics of HTML. , it's just some labels.
The presentation layer of a Web page: White is CSS
The behavior layer of the Web page: Plainly, the JavaScript language and Dom dominate the realm.

13. have you paid attention to HTML5 and CSS3? If you have a brief talk about them!

IE9 above start support
HTML5 label changes: CSS3 implements rounded corners, shadows (Text-showdow) for text plus effects (text-overflow,word-wrap,font-size-adjust), adds more CSS selectors (global selectors, combo selectors, inheritance selectors, Pseudo-class selectors, etc.)

14. How to add, remove, move, copy, create, and find nodes

(1) Create a new node

Createdocumentfragment ()//Create a DOM fragment

Createelement_x ()//create a specific element

createTextNode ()//Create a text node

(2) Add, remove, replace, insert

AppendChild ()

RemoveChild ()

ReplaceChild ()

InsertBefore ()

(3) Find

GetElementSbytagname ()//via tag name

Getelementsbyname ()//value through the Name property of the element

getElementById ()//through element ID, uniqueness

15. Object-Oriented programming: B How to inherit a

function a{    this. Name=name?name: ' Xiao Gang ';      this. age=age?age:30;     this. say=function{        alert (this. name+ "This year"+ this. age+ "years old. ");}    }function  b{}b.prototype=new  A (); Var Cnew  B (); C.say ();

16. write a JavaScript function, parsequerystring, whose purpose is to parse the URL parameter into an object

functionparsequerystring (URL) {varPOS; varobj = {}; if(pos = Url.indexof ("?")! =-1) {        varURLString = url.substring (pos + 1, url.lenght–1); varUrlarr = Urlstring.split ("&"); varKeyValue = [];  for(vari = 0; i < urlarr.lenght; i++) {KeyValue= Urlarr[i].split ("="); obj[keyvalue[0]] = keyvalue[1]; }    }    returnobj;}varObjurl = parsequerystring (URL);

17, in the work, the compatibility of the browser how to see

In the work will often encounter some browser compatibility issues, consider the main 2-block compatibility issues, one is the compatibility of CSS style, and the other is the compatibility of JS.

(1). For CSS style, such as IE and Firefox browser, they have the default Padding,margin equivalent of their own browser, we only need to write the style when the default style of the value, the introduction of a reset.css style has to solve a lot of common problems, but of course there are Other style problems, such as IE6 's bilateral distance problem, the solution to IE6 write style display:inline, can solve the problem, such as when the child element floats unknown height, so that the parent container adaptive height of the child element bug, The solution is to add Overflow:auto to the parent container style (the problem can be IE6 in the height of the sub-elements, but IE8 and Firefox and other browsers do not, need to add just the code to achieve adaptive), For example, when a floating element is adjacent to a non-floating element, a 3-pixel bug appears, and the solution is simple enough to float the non-floating element.

(2). For JS code, there are some common browser compatibility issues, take the browser event processing, IE event handlers need 2 methods to achieve, attachevent () and DetachEvent () two methods to achieve, they have only 2 parameters inside, For example, the Attachevent () method has two parameters: the event handler name and the event handler function. Other browsers use AddEventListener () and RemoveEventListener () two methods, but their parameters are 3, take the AddEventListener () Method Example, the first argument, the event name to be processed, For example, the onclick, but do not need to add on, the parameters only need to click, the second parameter event handler function, the last parameter is a Boolean value. The Boolean value, if True, indicates that the event handler is called during the capture phase and, if false, that the event handler is called during the bubbling phase.

Web Front End Questions series: (ii)