What is the difference between xhtml and html?

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; i247e33d5448715382fa6b71279332e5fThe 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

14

、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();

15. Understanding JSON

? JSON (JavaScript Object Notation)

is a lightweight data exchange format.

#It is based on a subset of

JavaScript. The data format is simple, easy to read and write, occupies small bandwidth

For example:

{"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

JSON

string: ##var last=obj.toJSONString();

var last=JSON.stringify(obj);

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

+PC

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

##indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

20、What are the common browser kernels?

Trident

Kernel: IE,MaxThon,TT,The World,360,Sogou Browser wait. [ Also known as MSHTML]##Gecko

Kernel:

Netscape6 and above, FireFox (Firefox), MozillaSuite/SeaMonkey, etc. Presto

Kernel:

Opera7 and above. [OperaThe kernel was originally: Presto, now it is: Blink;] Webkit

Kernel:

Safari (Apple’s own browser) , Chrome (Google) wait. [ Chrome’s: Blink (branch of WebKit)] 21. The difference between

title

and h1, b The difference between strong, the difference between i and em? The title

attribute has no clear meaning and only represents a title, while

H1 represents a clearly hierarchical title. , also has a great impact on the capture of page information; strong

is to indicate key content and has the meaning of strengthening the tone. When using a reading device to read the Internet:

8e99a69fbe029cd4e2b854e244eab143 will be emphasized, while a4b561c25d9afb9ac8dc4d70affff419 will display the emphasis. i

content is displayed in italics,

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:

1.

Nest functions within functions

2.

Internal functions can reference outer parameters and variables

3.

Parameters and variables will not be recycled by the garbage collection mechanism

//li

## of the node #onclick events can correctly pop up the currently clicked liindex 2527ec485009cc6b4bf1ad48fc6d7f3c

##  25edfb22a4f469ecb59f1190150159c6 index = 0bed06894275b65c1ab86501b08a632eb

##  25edfb22a4f469ecb59f1190150159c6 index = 1 bed06894275b65c1ab86501b08a632eb

## li>

929d1f5ca49e04fdcb27f9465b944689

##4ec11beb6c39d0703d1751d203c17053

var nodes = document.getElementsByTagName("li");

for(i = 0;i8ab1c1479c196972f7131bd9340f1dfc

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?

*iframe

will 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;

*iframe

Share 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!