I,<! Doctype>Label definition and usage.
Answer: Definition:
<! Doctype> declares the position at the beginning of the document, before the <HTML> tag. This tag tells the browser document which HTML or XHTML specifications are used..
The tag can declare three types of DTD, namely strict version, transitional version, and framework-based html version.(If the tag in the document does not follow the DTD specified by the doctype Declaration, this document may not be correctly displayed in the browser except for code verification .)
Usage:
A. If you need a clean tag to avoid confusion at the presentation layer, use the XHTML strict DTD type.
B. transitional DTD can contain the rendering attributes and elements that W3C expects to move into the style sheet. if you use a browser that does not support Cascading Style Sheets (CSS), you must use the transitional DTD type when you have to use HTML Rendering features.
C. frameset DTD is used for documents with frameworks. Except that the frameset element replaces the body element, the frameset DTD is equivalent to the transitional DTD.
II,What are the block-level and intra-row elements?
A: block-level elements: div, P, h1-h6, UL, ol, DL, form, table, HR
Row and column elements: A, B, I, span, label, input, select, IMG, strong, em, Font, textarea, u
Note: The width setting is invalid. The height setting is invalid. You can use line-height to set the height. Only the left and right margin values are valid when you set margin. When padding is set, only the left and right padding are valid, and the up and down are invalid.
III,Introduce the known CSS hack skills (such as _, *, +, \ 9 ,! Important ).
A: _ width is for IE6. * Width, + width for IE6, 7.
Color: Red \ 9;/* IE8 and earlier browsers */(but the test is compatible with ie10.
* + HTML and * HTML are unique to IE, Firefox does not currently support. And * + HTML is unique to IE7 tags (but test * HTML compatible ie6-10. * + Compatible ie7-10 ).
! Important is ignored in IE. IE6, 7, and 8 are not recognized. ie9 + (including ie9) is recognized.
4. Introduce the CSS box model.
A: The box model has four attributes: content, padding, border, and margin.
There are two types of box models: the IE box model and the standard W3C box model.
Standard box model:
The W3C box model has the following scopes: margin, border, padding, and content, and the Content Part does not contain other parts.
IE box model:
We can see that the IE box model also has the range of margin, border, padding, and content. Unlike the standard W3C box model, the content part of the IE box model contains border and padding.
5. What is CSS Cascade? Introduction.
A: Stack refers to the style priority. When a conflict occurs, the higher priority prevails.
A. developer style> reader style> Browser style (unless used! Important flag)
B. ID selector> (pseudo) class selector> element Selector
C. Take the style defined later when the weight is the same
The following is a classic HTML section. The three class names are module, title, and body.
<Div class = "Mod">
<Div class = "HD"> </div>
<Div class = "BD"> </div>
</Div>
Most HTML pages can be nested or accumulated by this structure.
VI,All CSS browser compatibility issues are known.
A: The margin doubles when IE6 is floating. Add a display: inline style.
In IE6, the height cannot be set to 1. Add the overflow: hidden style.
In IE6, the text-indent image is indented along with display: inline-block and changed to block.
The margin in IE6 is invalid. Margin works only when the container defines width, Zoom: 1, or height: 1%.
When the title contains happy and all keywords, the page under IE6 cannot be displayed, Which is blank. Set
<Title> </title> placed in <meta http-equiv = "Content-Type"
Content = "text/html; charset = UTF-8"/>.
The Z-index is invalid. Add the Z-index to the label with position: relative for the parent level, and the value must be greater than the Z-index value of the module to be overwritten.
7. Sometimes I will be asked some questions about the drill points, such as what are the position values and what new content does css3 have...
A: Position: relative positioning of relative. Absolute definitely locates relative to parent elements other than static positioning. Fixed definitely locates relative to window, but static does not, inherit inherits the position value of the parent element.
Css3: Box-shadow, border-radius rounded corner, skew curvature in transform, rotate rotation, scale scaling, etc. In transition, all 0.5 s have 0s transition time. Before and after.
8. What are the status messages of HTTP? (For example, the description corresponding to 200 and 302 ).
A: The Web server is used to tell the client what happened, that is, a quick solution to the problem.
200: OK. The server successfully processes the request.
301/302: Moved permanently (redirection), the requested URL has been removed, one is permanent transfer, and the other is temporary transfer. Response should contain a location URL, indicating the current location of the resource.
304: Not modified (not modified). The client uses the latest cache resources.
404: HTTP/1.1 404 Not found. The server cannot find the requested URL.
501: Internal server error: the server encounters an error, which makes it unable to provide services for the request.
503: Service unavailable (this service is not provided). The server cannot serve the request service currently, but the service can be restored after a while.
1xx information status code.
2XX success status code.
3xx redirection status code.
4xx client error status code.
5xx server error status code.
9. What Is Ajax? Ajax interaction model (process )? What is the cross-origin Ajax solution?
A: Asynchronous JavaScript + XML is a technology used to create fast dynamic web pages. It is a browser-server interaction technology. The basic idea is to allow a browser to make asynchronous HTTP calls to a remote page/service, and use the received data to update the current web page without refreshing the entire page. This technology can improve the client experience.
Interaction Process:
Cross-origin problems:
A simple understanding of cross-origin problems is that JavaScript under the.com domain name cannot operate on objects under B .com or c.a.com due to restrictions on the JS same-origin policy (security restrictions. AJAX can use jsonp to implement cross-origin.
The most basic principle of jsonp is:
Dynamically Add a <SCRIPT> tag, while the src attribute of the script tag has no cross-origin restrictions. In this case, this cross-origin method is not related to the Ajax XMLHttpRequest protocol. When a GET request is returned from the called page, a javascript code is returned, which automatically calls a callback function on the home page.
Advantages of jsonp:
It is not affected by the same-origin policy. It has better compatibility and can run in older Browsers without the support of XMLHttpRequest or ActiveX; after the request is complete, you can call callback to return the result.
Disadvantages of jsonp:
It only supports GET requests, but does not support post and other types of HTTP requests. It only supports cross-origin HTTP requests. It cannot solve the problem of JavaScript calls between two pages in different domains.
10. What is the difference between synchronization and Asynchronization?
A: synchronization: the script will stay and wait for the server to send a reply before continuing. When a request is submitted, wait for processing by the server, and return after processing, the client browser cannot do anything.
Asynchronous: the script allows the page to continue its process and process possible replies. Request triggered by event-> server processing (this is what the browser can do)-> processing completed
To send the returned results after processing the Ajax request, it is best to use synchronous requests.
11. Description of the two types of JavaScript inheritance.
A: Borrow constructor: In the subclass constructor, use apply/call to pass this as a parameter.
Advantages:
You can pass a parameter to the parent constructor, that is, apply the second parameter: arguments;
The attributes in the parent class are copied to the subclass instance, and there is no interference between the attributes, whether it is the reference type or the encapsulation type.
Disadvantages:
Each instance object has a copy of the parent method, which does not affect each other, so it cannot be modified in a unified manner;
Methods defined in the parent class prototype cannot be possessed;
The instance object of the subclass cannot use the instanceof operator to determine whether it is an instance of the parent class.
Prototype: Specify prototype as an instance object of the parent class.
The advantages and disadvantages are the opposite to the constructor borrow. Here we particularly illustrate the mutual interference between attributes (corresponding to advantage 2 of constructor borrow ).
Combined inheritance: the above two methods complement each other, that is, the constructor is used to inherit the parent class attributes and the prototype chain is used to inherit the parent class methods.
Advantages:
Encapsulation protects the integrity of internal data;
Encapsulation makes object reconstruction easier;
Weaken the coupling between modules to improve the reusability of objects;
Helps avoid namespace conflicts.
Disadvantages:
Private methods are difficult to test;
It must deal with complicated scope chains to make error scheduling more difficult;
It is easy to form over-encapsulation;
JavaScript does not support encapsulation in the native, so there is a problem of complexity in implementing encapsulation in JavaScript.
12. Briefly describe the operations on cookies and the attributes of cookies.
A: cookie is a mechanism provided by the browser. It provides the cookie attribute of the Document Object to JavaScript. It can be controlled by JavaScript, rather than JavaScript itself. Cookie is a file stored on the user's hard disk. This file usually corresponds to a domain name. When the browser accesses this domain name again, the cookie is available. Therefore, cookies can span multiple webpages under a domain name, but cannot be used across multiple domain names. You can save the user logon status. Tracks user behavior. Custom page. Create a shopping cart.
$. Cookie ('cookiename', 'cookievalue ', {expires: 7, path:'/', domain: 'chuhoo. com ', secure: false, raw: false });
Note: expires: Effective time; Path: Set the top-level directory that can read cookies; domain: the Domain Name of the webpage where the cookie is created; Secure: The default value is false. If it is true, the cookie transmission protocol must be HTTPS. Raw: The default value is false. It is automatically encoded and decoded during reading and writing (encodeuricomponent encoding and decodeuricomponent decoding). disable this function, set it to true.
13. Which JS compatibility does IE and FF know.
A: When listening for an event:
Identify target. attachevent (type, listener) in IE );
FF to identify target. addeventlistener (type, listener, usecapture );
Target: Document node, document, window, or XMLHttpRequest.
Type: String, event name, FF does not contain "on", such as "click", "Mouseover", and "keydown.
Listener: implements the eventlistener interface or functions in JavaScript.
Usecapture: whether to use capture. Generally, false is used.
For example, document. getelementbyid ("testtext"). addeventlistener ("keydown", function (event) {alert (event. keycode) ;}, false );
B. in IE, you can use eval ("idname") or getelementbyid ("idname") to obtain the HTML object whose ID is idname. In Firefox, you can only use getelementbyid ("idname ") to obtain the HTML object whose ID is idname.
C. You cannot use the const keyword in IE.
D. ie can access the window object corresponding to the frame through ID or name, while Firefox can only access the window object corresponding to the frame through name.
14. Dom operations-how to add, remove, move, copy, create, and search nodes (This question is really a basic question and is generally not asked ).
A: Add: append, prepend, after, before, and so on.
Delete: Remove, empty.
Replacewith and replaceall.
Copy: clone.
Create: createlement and createtextnode.
Search: getelmentbyid, getelmentsbytagname (by Tag name value), getelmentbyname (by element name value ).
15. All users know the poor jquery writing methods.
A: When defining a variable, no VaR is added to the global variable because it cannot be deleted. There is also a way of programming like writing a stream account. Many things are broken together and different objects and functions are not separated. It is best to define an object in the form of a function expression. do not define the object literal volume as much as possible, so that the private attributes or methods in the object are easily modified by the user, that is, they are not secure.
16. Which editors have I used and understood? What daily tools have you used and understood?
A: I generally use webstorm, developed by jetbrains.
I chose it mainly because it can be automatically indented and closed, but I do not like the method of adding URLs and href. You need to write the file name by yourself, but it is acceptable, because you can customize the corresponding file name as long as you enter a word.
DW can be used to add addresses, but it cannot be automatically indented or closed. I don't like it.
17. Do you know which browser kernels are available? Which browsers are compatible with developed projects?
A: IE kernel Trident, FF kernel Gecko, Safari and chrome kernel WebKit.
Compatible with IE6 +, FF, chrome, travel and 360 browsers.
18. Do you know about Waterfall flow layout or stream layout.
A: waterfall stream layout: Uses absolute positioning to locate each image or module.
Stream layout: the module is positioned in a floating manner. You can make a responsive layout.
19. What new JS APIs does HTML5 have?
A: Document. queryselector ("selector ");
Selector: returns the first matched element based on the CSS selector. If no matching element exists, null is returned.
Document. queryselectorall ("selector ");
Selector: returns an array of all matched elements based on the CSS selector. If no matching element exists, an empty array is returned;
Document. getelementsbyclassname ("selector ");
Selector: returns an array of all matched elements based on the class selector. If no array is matched, an empty array is returned.
20. What do front-end optimization knowledge know?
A: A reduces HTTP requests, merges CSS and JS files, and Apache ant.
B. reduce the size of the request file, compress CSS and JS files, and compress online JavaScript files.
C uses sprite to splice images.
D. If there is a module such as an advertisement bar, use IFRAME.
EPut the JS file to the end. This page does not need to be displayed after the JS file is loaded, that is, the page will not be blank.
Front-end Questions and answers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
