1. What is the difference between xhtml and html
HTML is the same A basic WEB web design language, XHTML is based on XML Markup language
The main difference:
XHTML elements must be nested correctly.
The XHTML element must be closed.
Tag names must use lowercase letters.
XHTML The document must have a root element
2. Briefly describe the difference between src and href:
href points to the location of the network resource, establishes a link to the current element (anchor) or current document (link), and is used for hyperlinks.
src points to the location of the external resource. The content pointed to will be embedded in the document at the location of the current tag; when the src resource is requested, the resource it points to will be downloaded and applied to the document. Within, such as js scripts, img pictures, frames and other elements. When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, which is similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.
3. What are the inline elements? What are the block-level elements? What are the void elements?
Inline elements: a, b, span, img, input, strong, select, label, em, button, textarea
Block-level elements: div, ul, li, dl, dt, dd, p, h1-h6, blockquote
Empty elements: HTML elements with no content , for example: br, meta, hr, link, input, img
4, action in form Properties and methodWhat is the meaning of the properties? methodWhat are the commonly used values?
action attribute is used to specify the background program address of form form submission；method attribute is used to specify the form method for form submission. Common values for
method are : get and post
5. What are the new attributes of form elements?
required： Required items
placeholder: Prompt information,will disappear when you click the input content
pattern:Verification regular expression
antofocus：Automatically obtain focus
aotucomplete:Autocomplete
6. What are the methods to submit data to the designated server?
Ajax Form
URL?Parameters
AngularJS’s $HTTP
JQ Ajax: $.POST(,,) $.GET(,,) $.Ajax({})
JS Ajax: 5 steps. (Refer to question 25)
7. Write a function to clear the spaces before and after the string. (Compatible with all browsers)
##function trim(str) {
if ( str && typeof str === "string") {
Return str.replace(/(^\s*)|(\s*)$/ g,""); //Remove leading and trailing whitespace characters
# }
}
8. How to eliminate duplicate elements in an array?
var arr1 =[1,2,2,2,3,3,3,4,5,6],
var arr2 = [ ];
## for(var i = 0; i< arr1.length; i++){## If(arr2.indexOf(arr1[i]) < 0){
# arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6
##9. Please describe the difference between cookies, sessionStorage and localStorage
sessionStorage is used to locally store data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage. LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.
The difference between web storage and cookiesThe concept of Web Storage is similar to that of cookies. The difference is that it is designed for larger capacity storage. The size of the cookie is limited, and the cookie will be sent every time you request a new page, which wastes bandwidth. In addition, the cookie needs to specify a scope and cannot be called across domains.
In addition, Web Storage has setItem, getItem, removeItem, clear and other methods. Unlike cookies, front-end developers need to encapsulate setCookie and getCookie themselves. But Cookies are also indispensable: Cookies are used to interact with the server and exist as part of the HTTP specification, while Web Storage is only created to "store" data locally. What is the difference between
##10, cookie
and session? ## Cookie is saved on the client machine；
Session is saved on the server side;
Contact: id of session Exists in cookie
.11. When importing styles into the page, what is the difference between using link and @import? 1）.linkbelongs toXHTML tag, and @import is provided by CSS; ## 2) .When the page is loaded, link will be loaded simultaneously, and @ The CSS referenced by import will wait until the page is loaded before loading; 3 ) .import can only be recognized by IE5 and above, while link is XHTML tag, no compatibility issues; 4）.link The weight of the style>The weight of @import 12. Briefly describe the positioning Position: Relative:Relative positioning. Relative to its original positioning, the original DOM space will be retained; Absolute:Absolute positioning. Positioning relative to the first non-static positioned ancestor element will delete the original DOM space; Fixed: Fixed locator window for positioning; will delete the DOM space Static : default value. Without positioning, the elements appear in normal flow (ignoring the top, bottom, left, right z-index declarations). Inherit: Specifies that the value of the position attribute is inherited from the parent element. 13. What are the values of display? Explain their role. block Displayed like a block type element. none Default value. Displayed like an inline element type. inline-block Displayed like an inline element, but its content is displayed like a block type element. list-item Display like a block type element and add style list tags. table This element will be displayed as a block-level table ## inherit The value of the display attribute 、jqueryHow to convert an array into Convert to json string and then convert it back? $.parseJSON $.fn.stringify = function() { return JSON.stringify(this); } Use :$(array).stringify(); ? JSON (JavaScript Object Notation) #It is based on a subset of JavaScript. The data format is simple, easy to read and write, occupies small bandwidth {"age":"12", "name":"back"}##JSONConvert the string to JSONObject:##var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str); JSONObject converted to string: ##var last=obj.toJSONString();
16. What is responsive design? What are the basic principles of responsive design? Based on the screen size, resolution, orientation, etc. of different devices, the unified website is displayed with different effects. Mobile first. You can use JS to jump to different mobile sites and PC sites, and you can use MediaQuery to detect the properties of different devices. Showing different CSS, various responsive front-end frameworks can be used. Advantages: Good user experience, especially on mobile phones. Disadvantages: Contains a lot of redundant code, the development cost is high(But it is much lower than developing a mobile site Mode)17. visibility hiddenanddisplay: The difference between none? Use display: noneAfter hiding, the space of the element is released, and other elements can occupy the space; Use visibility: hidden It is just invisible, but the space of the element still occupies, otherwise Element cannot be used. 18. List common methods related to arrays push/pop , shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter ##19, List string related Commonly used methods
20、What are the common browser kernels? Kernel: IE,MaxThon,TT,The World,360,Sogou Browser wait. [ Also known as MSHTML]##Gecko Netscape6 and above, FireFox (Firefox), MozillaSuite/SeaMonkey, etc. Presto Opera7 and above. [OperaThe kernel was originally: Presto, now it is: Blink;] Webkit Safari (Apple’s own browser) , Chrome (Google) wait. [ Chrome’s: Blink (branch of WebKit)] 21. The difference between and h1, b The difference between strong, the difference between i and em? The title H1 represents a clearly hierarchical title. , also has a great impact on the capture of page information; strong will be emphasized, while will display the emphasis. i em indicates emphasized text; 22、What is the web page verification code for? What security issues is it to solve? A public fully automatic program that distinguishes whether the user is a computer or a human. It can prevent malicious cracking of passwords, ticket fraud, and forum flooding; Effectively prevents hackers from making continuous login attempts against a specific registered user using a specific program to brute force. 23. How do you understand the position of front-end engineer? ##a. The front-end is the programmer closest to the user. The ability of the front-end is to make the product evolve from 90 points to 100 points, or even better b. Participate in the project, quickly Complete high-quality renderings, accurate to 1px; c. Communicate with team members, UI design, and product managers; d . Good page structure, page reconstruction and user experience; e. Handle hacks, be compatible, and write beautiful code formats; f. Optimize the server and embrace the latest front-end technology. ##24、What is closure(closure),Why should we use it? ? A closure is a function that has access to a variable in the scope of another function. The most common way to create a closure is in a function Create another function within the function, and access the local variables of this function through another function,Using closures can break through the scope of the scope chain and pass the variables and methods inside the function to the outside. Closures can be simply understood as "functions defined inside a function" Characteristics of closures: Nest functions within functions Internal functions can reference outer parameters and variables Parameters and variables will not be recycled by the garbage collection mechanism ## of the node #onclick events can correctly pop up the currently clicked liindex ## ## ##
25、What is Ajax? How to create an Ajax?
ajax stands for : Asynchronous javascript and XML, means asynchronous JavaScript and xml, is also called page brushless technology. The asynchronous here can be simply understood as: When sending a request to the server, we do not have to wait for the result, but can do other things at the same time. When the result is available, it will Set to perform subsequent operations. At the same time, the page will not refresh the entire page, which improves the user experience.
How to create an Ajax?
(1)CreateXMLHttpRequestobject,also Just create an asynchronous call object
(2)Create a newHTTPrequest,And specify the HTTP request method, URL and verification information
(3)Set responseHTTPFunction for request status change
(4)Send HTTP request
##(5)Get the data returned by the asynchronous call
(6)Use JavaScript and DOM to achieve partial refresh
26.NativeJSwindow.onload What is the difference between and Jquery’s $(document).ready(function(){})? How to use native JS to implement the ready method of Jq?
window.onload()The method must wait until all elements in the page, including images, are loaded before it can be executed.
$(document).ready() is executed after the DOM structure is drawn, without waiting for loading complete.
27. (Design question) Want to implement a drag on a node on the page? How to do? (Use nativeJS)
Just answer the concept, here are a few key points
Bind the node that needs to be draggedmousedown, mousemove, mouseupEvents
mousedown After the event is triggered, start draggingWhen
mousemove, you need to obtain the dragging position through event.clientX and clientY, and perform real-time When updating the position
mouseup, dragging ends
28, apply, call# What is the difference between ## and bind?
All three You can apply a function to other objects, not the own object. apply,call is to directly execute the function call, bind is to bind, and execution needs to be called again. The difference between
##apply and call is apply accepts an array as a parameter, while call accepts an unlimited number of parameter lists separated by commas,
What are the shortcomings of code demonstration function Person() {
}
Person.prototype.sayName() { alert(this.name); }
var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例
1) apply
Person.prototype.sayName.apply(obj, [param1, param2, param3]);
2) call
Person.prototype.sayName.call(obj, param1, param2, param3);
3) bind
var sn = Person.prototype.sayName.bind(obj);
sn([param1, param2, param3]); // bind需要先绑定，再执行
sn(param1, param2, param3); // bind需要先绑定，再执行
29 and iframe?
*iframewill block the Onload event of the main page;
*The search engine’s retrieval program cannot interpret this kind of page, which is not conducive toSEO;
*iframeShare the connection pool with the main page, and the browser has restrictions on connections in the same domain, so it will affect the parallel loading of the page.
You need to consider these two disadvantages before using iframe. If you need to use iframe, it is best to give ## dynamically through javascript
#iframeAdd src attribute value, which can circumvent the above two problems.
##30、How to solve the ajax cross-domain problem? ##jsonp,
iframe, window.name、window.postMessage、Set the proxy page on the serverMy own practice
：jQueryUsage of
ajax$.ajax({
dataType:'jsonp'
})
The above is the detailed content of What is the difference between xhtml and html?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
