Article 2. HTML

1. How many ways to clear float?

A. Use empty labels to clear floats.

  • This method is to add an empty tag definition CSS clear:both. The downside is adding meaningless labels.

B. Use overflow.

  • Add CSS property overflow:auto to parent tag that contains floating elements; zoom:1; Zoom :1 is compatible with Internet Explorer 6.

C. Use after pseudo-objects to clear floats.

  • This method only applies to non-Internet Explorer browsers. Note the following points in use. Height :0 must be set in the pseudo-object where the floating element is to be cleared, otherwise the element will be several pixels higher than it really is. The content attribute is required, but its value can be null. The content attribute can be set to “. .

2. What are the advantages and disadvantages of using CSS preprocessors?

Advantages:

  • The syntax of A. CSS is not strong enough, requiring many repeated selectors to be written repeatedly. The CSS preprocessor solves this problem.

  • B. Provide variable and logical control

  • C. Reasonable style reuse mechanism to reduce code redundancy

  • D. Improve code maintainability

  • E.m ixin mixed with

Disadvantages:

  • A. The cost of learning is a little high.

  • B. It is more difficult to use this preprocessor team

  • C. My personal feeling is that CSS is already very simple things, this makes it more complicated

3. If you have 5 different CSS files, what is the best way to load them into a page?

  • Replace the five CSS files with one large CSS file

4. Limitations of XHTML

  • A. The syntax is more strict, and some labels with bad semantics are abandoned

  • B. There must be head and body. The tag must be closed

  • C. Some older browsers are not compatible

5. If HTML5 is viewed as an open platform, what are the building blocks it builds?

  • A. Location-based service LBS

  • b.Web Storage API

  • C. Play audio and video without plug-ins

  • D. Invoke hardware devices such as cameras and GPU image processing units

  • E. Drag and drop and Form AP

6. What is the difference between XHTML and HTML

  • HTML is a basic WEB page design language, while XHTML is an XML-based markup language

The main differences:

  • XHTML elements must be properly nested.

  • XHTML elements must be closed.

  • The label name must be lowercase.

  • XHTML documents must have a root element.

7.HTML5 why only write! DOCTYPE HTML?

  • HTML5 is not based on SGML, so there is no need to reference DTDS, but a DOCType is needed to regulate browser behavior (let browsers behave the way they should behave)

  • HTML4.01 is based on SGML, so you need to reference a DTD to tell the browser what type of document the document is using.

8.Doctype? Strict vs. promiscuous modes – how can these two modes be triggered and what is the significance of distinguishing between them?

  • The specification used to declare the document to use (HTML /Xhtml) is generally strictly overly frame-based HTML documents.

  • Adding XMl declarations can trigger the change of parsing mode to IE5.5 has IE5.5 bugs.

9. Please describe the difference between cookies, sessionStorage and localStorage.

  • Cookies are passed back and forth between the browser and the server. SessionStorage and localStorage do not

  • SessionStorage and localStorage have more storage space;

  • SessionStorage and localStorage have more rich and easy to use interface;

  • SessionStorage and localStorage are independent storage Spaces.

10. How to implement communication between multiple tabs in the browser?

  • Invoke local storage methods such as localStorge and cookies

11. What is a box model?

  • In web pages, the space occupied by an element is composed of several parts, including content, padding, border and margin. Some of the space occupied by these four sections can be used to display corresponding content, while others are used only to separate adjacent areas or regions. Together, these four sections form the box model of elements in CSS.

12. What are the inline elements? What are block-level elements? What are the void elements?

1. Inline elements:

  • A, B, SPAN, img, INPUT, strong, SELECT, label, em, button, textarea

2. Block-level elements

  • Div, ul, li, DL, dt, DD, P, H1-H6, blockQuote

3. Empty elements:

  • That is, HTML elements without content, such as BR, meta, HR, link, input, img

13. Outline the difference between SRC and href

  • Href refers to the location of the web resource and establishes a link between the current element (anchor) or document (link) for hyperlinking.

  • SRC is the point to the external resource, which will be embedded in the document where the current tag is; SRC resources are downloaded and applied to documents when requested, such as JAVASCRIPT scripts, IMG images, and frame elements. When the browser parses the element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed, as do elements such as images and frames, similar to embedding the pointed resource in the current tag. This is why js scripts are placed at the bottom and not at the top.

What is a CSS Hack?

  • CSS hacks are generally written for different browsers.

  • Internet Explorer hacks are generally divided into three types: conditional hacks, attribution-level hacks, and selector hacks (refer to CSS documentation for details). Such as:

1, conditional Hack

2. Attribute hacks

    .test{
    color:#0909; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
Copy the code

3. Selector hacks

* html .test{color:#090; } /* For IE6 and earlier */ * + html .test{color:#ff0; } /* For IE7 */Copy the code

15. Explain the difference between synchronous and asynchronous

  • Synchronous is blocking mode, asynchronous is non-blocking mode.

  • Synchronization refers to a process that executes a request. If it takes a period of time for the request to return information, the process will wait until it receives the return information before continuing to execute the request.

  • Asynchronous means that the process does not have to wait forever, but continues to perform the following operations regardless of the state of the other processes. When a message is returned, the system notifies the process to process it, which improves the execution efficiency.

16. Difference between PX and EM

  • Px and em are both units of length. The difference is that the value of px is fixed, so it is easy to calculate. Em values are not fixed, and EM inherits the font size of the parent element.

  • The default font height for all browsers is 16px. So all untuned browsers fit: 1em=16px. So 12 px = 0.75 em, 10 px = 0.625 em

17. What is graceful degradation and progressive enhancement?

Progressive enhancement:

  • Build the page for the lower version browser to ensure the most basic functions, and then for the advanced browser effect, interaction and other improvements and additional functions to achieve a better user experience.

Graceful degradation:

  • Build full functionality from the start and then make it compatible with older browsers.

The difference between:

  • A. Graceful downgrading starts with a complex status quo and tries to reduce the supply of user experience

  • B. Progressive enhancement starts with a very basic, working version and expands to meet the needs of future environments

  • C. downgrading means looking back; Incremental enhancement means looking forward while keeping its roots in a safe zone

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

1) Create a new node

CreateDocumentFragment () // Create a DOM fragment createElement() // Create a specific element createTextNode() // create a text nodeCopy the code

2) Add, remove, replace, insert

AppendChild () // Add removeChild() // remove replaceChild() // replace insertBefore() // insertCopy the code

3) to find

GetElementsByTagName () // By the tag Name getElementsByName() // by the value of the element's Name attribute getElementById() // by the element Id, uniqueCopy the code

Clone (Number, String, Object, Array, Boolean);

/* * Object cloning * supports basic data types and object recursive methods */Copy the code
function clone(obj) { var o; switch (typeof obj) { case "undefined": break; case "string": o = obj + ""; break; case "number": o = obj - 0; break; case "boolean": o = obj; break; If (obj === null) {o = null; if (obj === null) {o = null; } else { if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") { o = []; for (var i = 0; i obj.length; i++) { o.push(clone(obj[i])); } } else { o = {}; for (var k in obj) { o[k] = clone(obj[k]); } } } break; default: o = obj; break; } return o; }Copy the code

20, How to eliminate duplicate elements in an array?

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6
Copy the code

21. What is a pseudo-array in Javascript? How do I convert a pseudo-array to a standard array?

Pseudo-arrays (array like) :

  • You can’t call the array methods directly or expect the Length attribute to behave in any particular way, but you can still iterate over them with true array traversal methods. Typically function argument parameters, while others, such as call getElementsByTagName, document. The.childnodes, such as they are returned NodeList object are pseudo array.

You can use the Array. The prototype. Slice. Call (fakeArray) Array into a true Array object.

function log(){ var args = Array.prototype.slice.call(arguments); // To use the unshift array method, convert argument to the real array args.unshift('(app)'); console.log.apply(console, args); };Copy the code

Please describe the difference between cookies, sessionStorage and localStorage.

  • SessionStorage is used to store data in a session locally, which can only be accessed by pages in the same session and is destroyed when the session ends. Therefore, sessionStorage is not a persistent local storage, only session level storage. And localStorage for persistent localStorage, unless actively delete data, otherwise the data is never expired.

23. The difference between Web storage and cookie

  • The concept of Web Storage is similar to cookie, except that it is designed for larger Storage capacity. Cookie size is limited, and every time you request a new page when the Cookie will be sent in the past, so virtually waste bandwidth, in addition to Cookie also need to specify scope, can not be called across the domain.
  • In addition, Web Storage with setItem, the getItem, removeItem, methods of the clear, don’t like cookies need encapsulation setCookie front-end developer himself, getCookie. But Cookie is also not possible or missing: the role of Cookie is to interact with the server, as part of the HTTP specification exists, and Web Storage is only in order to “store” data in the local.

Quick sort of handwritten array

  • For a detailed description of the fast sorting algorithm, you can refer to ruan Yifeng teacher’s article fast sorting

The idea of quicksort is simple, the whole sorting process only needs three steps:

  • (1) In the data set, select one element as the pivot.

  • (2) All elements smaller than “baseline” are moved to the left of “baseline”; All elements greater than the baseline are moved to the right of the baseline.

  • (3) Repeat step 1 and Step 2 for the two subsets to the left and right of the “benchmark” until only one element remains in all the subsets.

25. What does a complete HTTP transaction look like?

Basic process:

  • A. Domain name resolution

  • B. Initiate a TCP three-way handshake

  • C. Establish a TCP connection and send an HTTP request

  • D. The server responds to the HTTP request and the browser obtains the HTML code

  • E. The browser parses the HTML code and requests resources in the HTML code

  • F. The browser renders the page to the user

26. What are the ways to optimize and improve CSS performance?

  • Try to keep styles in a separate CSS file and reference them in the head element

  • ② Avoid using complex selectors with as few levels as possible

  • ③ Simplify the style file of the page, remove the unused style

  • ④ Use CSS inheritance to reduce code

27. What is the difference between XML and JSON?

  • (1) Data volume. JSON is smaller and faster than XML.

  • (2) Data interaction. JSON and JavaScript interaction is more convenient, easier to parse processing, better data interaction.

  • (3) Data description. JSON is less descriptive of data than XML.

  • (4) Transmission speed. JSON is much faster than XML.

28. What is the difference between cookie and session?

  • 1. Cookie data is stored in the client’s browser, and session data is stored on the server.

  • 2. Cookies are not very secure. Others can analyze cookies stored locally and cheat cookies.

  • 3. Sessions are stored on the server for a certain period of time. Cookies should be used to reduce server performance when the number of accesses increases.

  • 4. The data saved by a single cookie cannot exceed 4K. Many browsers limit the maximum number of cookies saved by a site to 20.