I don’t know if there are children’s shoes with xiaobian, with the technology by (RI) gradually (Yi) (TUI) rise (bu), for some of the underlying conceptual knowledge points but some forgotten. Sometimes you know it, but when you express it, you don’t get to the point completely. When this happens, the editor thinks it’s time to do something about it (huh!). .

The following is small make up on this HTML common problems to sort out the knowledge points, followed by CSS, JS related series of articles, used to sort out and consolidate the foundation. This article focuses on MOE new and like small make up for some basic conceptual things have forgotten children’s shoes, can also be used as a job-hopping stage of children’s shoes as a review of the article, if there is a memory extraordinary big guy please skip.

Tip: In view of the article is mainly text, it is suggested that you can collect and read it in several times to improve the reading efficiency. In the article xiaobian has marked the dividing line

1. The difference between HTML, XML, and XHTML

  • HTML: Hypertext markup language, is the syntax is relatively loose, not strictWebLanguage;
  • XMLExtensible markup language, mainly used to store data and structures, extensible
  • XHTML: Extensible Hypertext markup language, based onXML, the role andHTMLSimilar, but with more strict syntax.

2. What is HTML5 and how does it differ from HTML

concept

HTML5 is the new standard for HTML, and its main goal is to deliver all content without any additional plug-ins like Flash, Silverlight, etc. It includes animation, video, rich graphical user interface, and so on.

HTML5 is a new version of HTML created by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group.

The difference between

From the document declaration type:

  • HTMLIt’s a long piece of code. It’s hard to remember. The following code:
<! DOCTYPE html PUBLIC"- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Copy the code
  • HTML5It’s a simple statement, easy to remember. As follows:
<! DOCTYPE html>Copy the code

In terms of semantic structure:

  • HTML4.0: Labels that do not reflect the structure’s semantics are usually named this way<div id="header"></div>, which represents the head of the site.
  • HTML5: has a great semantic advantage. Some new tags are provided, such as:<header><article><footer>.

Extension: Do not enter
, the browser will not recognize the HTML file, so the HTML will not work properly.

3. What are the differences and connections between HTML, XHTML and HTML5

Differences between XHTML and HTML

  • XHTMLThe tag name must be lowercase;
  • XHTMLThe element must be closed;
  • XHTMLElements must be properly nested;
  • XHTMLThe element must have a root element.

The difference between XHTML and HTML5

  • HTML5A newcanvasPainting elements;
  • HTML5New for media playbackvideoandaudioElements;
  • More semantic tags, easy to identify the browser;
  • Better support for local offline storage;
  • MATHML.SVGWait, can be betterrender;
  • Added new form controls:calendar,date,time,emailAnd so on.

Links between HTML, XHTML, and HTML5

  • XHTMLisHTMLSpecification version;
  • HTML5isHTML,XHTMLAs well asHTML DOMThe new standard.

4. Why does HTML5 only need to write

This is because HTML5 is not based on SGML and therefore does not require a reference to a DTD, but does require a DOCTYPE to regulate the behavior of browsers (to make browsers behave the way they should) while HTML4.01 is based on SGML and therefore requires a reference to a DTD to tell browsers what type of document to use for the document.

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

  • Inline elements:a.b.span.img.input.select.strong;
  • Block-level elements:div.ul.li.dl.dt.dd.h1-5.pAnd so on;
  • Empty elements:<br>.<hr>.<img>.<link>.<meta>;

6. What’s the difference between using link and @import when importing styles

  • linkBelong toHTMLThe label, and@importiscssProvide;
  • When the page loads,linkWill be loaded at the same time, and@importThe referenced CSS will wait until the page is loaded;
  • @importOnly in theIE5That’s how you identify it, andlinkisXHTMLLabel, no compatibility problem;
  • linkThe style of the way the weight is higher than@importThe weight.

7. What browsers support HTML5

HTML5 is now supported by almost all existing browsers, such as Chrome, Opera, Safari, IE, Firefox, etc.

8. What is the function of Label? How does it work?

Label Defines the relationship between form controls. When the user selects this label, the browser automatically shifts its focus to the form controls associated with the label.

<label for="Name">Number:</label> 
<input type"Name = =" text"Name" id="Name"/>
Copy the code

9. What is the difference between the title attribute and the Alt attribute on the tag

  • altIs to give text description when the picture does not display properly (screen reader). The length must be less than 100 Characters or the user must ensure that the replacement text is as short as possible.
  • titleProperty provides advisory information for the element on which it is set. usetitleProperties provide additional information that is not essential.

10. How to understand semantic tags

concept

Semantic refers to the choice of appropriate tags (code semantic) based on the structure of the content (content semantic), so that developers can read and write more elegant code, while allowing browsers and machines to parse well.

Benefits of semantics

  • Do the right thing with the right label;
  • Remove or lose style to make the page appear clear structure;
  • Convenient for other devices (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
  • Is conducive toSEO: Establishing good communication with search engines helps crawlers capture more effective information: crawlers rely on tags to determine the context and the weight of each keyword;
  • Ease of team development and maintenance, more readable semantics, W3C compliance teams follow this standard, can reduce differentiation.

11. Document declaration (Doctype) and <! Doctype HTML > How to distinguish strict mode from promiscuous mode? What do they mean?

What the document states

The document declaration tells the browser what version of HTML the HTML document we are writing is currently written in, so that the browser can properly parse it according to the version we have declared.

<! Doctype HTML > function

allows the browser to go into standard mode and parse the rendered page using the latest HTML5 standards; If you don’t, the browser will go into promiscuous mode, and we need to avoid that.

Distinction between strict mode and promiscuous mode

Strict mode: Also known as standard mode, in which browsers parse code according to W3C standards;

Promiscuous mode: Also known as weird mode or compatible mode, this means that the browser parses the code in its own way. Promiscuous mode often mimics the behavior of older browsers to prevent older sites from not working;

Distinguish between:

A DTD in a web page directly affects whether the strict or browsing mode is used, and the use of DTDS is closely related to the difference between the two approaches.

  • If the document contains strictDOCTYPE, then it is usually rendered in strict mode (Strict DTD — Strict schema);
  • Contains the transitionDTD 和 URI 的 DOCTYPE“Is also presented in strict mode, but with transitionsDTDwithoutURI(uniform resource identifier, which is the last address declared) causes the page to render in promiscuous mode (Transitional DTD with URIs – strict schema; Transition DTD without URIs — promiscuous mode);
  • DOCTYPENonexistence or incorrect form can cause documents to be rendered in promiscuous mode (DTD does not exist or is incorrectly formatted — promiscuous mode);
  • HTML5There is noDTDSo there is no distinction between strict mode and promiscuous mode,HTML5Has a relatively loose syntax and is implemented with as much backward compatibility as possible (HTML5 is not rigid or promiscuous).

In general, strict mode allows browsers to implement one set of specifications. Compatibility mode ensures the normal operation of old websites.

12. How to communicate between multiple tabs in a browser

You can use local storage methods such as localStorge and cookies.

13. How does webSocket work with low browsers

  • Adobe Flash Socket;
  • ActiveX HTMLFile (IE) ；
  • Based on themultipartCode to sendXHR;
  • XHR based on long polling;

14. What are the advantages and disadvantages of iframe

advantages

  • iframeCan achieve no refresh file upload;
  • iframeCross-domain communication;
  • Fixed loading problems with slow loading of third-party content such as ICONS and ads.

disadvantages

  • iframeBlocks the Onload event on the main page;
  • Cannot be indexed by some search engines.
  • The page will add servershttpRequests;
  • It produces a lot of pages and is not easy to manage.

15. What is the difference between SRC and href

  • srcReplaces the current element;hrefUsed to establish a connection between the current document and the referenced resource;
  • srcissourceThe location of an external resource that will be embedded in the document where the current tag is located. whilehrefisHypertext ReferenceAn abbreviation for “the location of a network resource” that establishes a link between the current element (anchor) or the current document (link).

16. The role of table and its advantages and disadvantages

role

  • Available for layouts (out of date);
  • Used to display batch data;

advantages

In some cases, using tables is 100% appropriate, appropriate, and correct. For example, using tables for tables is perfectly correct

disadvantages

  • TableThan the otherhtmlTags occupy more bytes, which delays the download time and consumes more traffic resources on the server.
  • TableIt blocks the render order of the browser rendering engine, which delays page generation and makes users wait longer.
  • Poor flexibility, such as to pass moretdTo set uptrtheborderProperties;
  • Code bloat, when intableIn the formtableReading the code can be incredibly confusing.
  • The chaoticcolspanwithrowspanWhen used for layout, frequent use of them can cause the whole document to be out of order;
  • Deep nesting makes it difficult for search engines to read, and increases code redundancy to a large extent.
  • Not semantic enough.

17. What causes garbled browser characters? How to solve it?

Causes of garbled characters

  • The web source code isgbkWhile the Chinese characters in the content areutf-8Coded so that it appears when the browser openshtmlThe code. On the contrary, there will be garbled;
  • htmlWeb code isgbkWhile the program calls the render from the database isutf-8The content of the code will also cause garbled code;
  • The browser cannot automatically detect the web page code, resulting in garbled web pages.

The solution

  • Use software for editingHTMLWeb page content;
  • If the page setting code isgbk, and the database store data in the encoding format isUTF-8At this time, the program needs to query the database data display data forward program transcoding;
  • If the browser appears garbled web pages when browsing, find the conversion code menu in the browser to convert;

18. What is the relationship between HTML and DOM?

HTML is dead, just a string; The DOM, on the other hand, is parsed from HTML, is alive, and can be maintained through Javascript.

19. What is the difference between a property and an attribute

  • propertyisDOMProperty in, isJavaScriptThe object of;
  • attributeisHTMLA property on a tag whose value can only be a string;

Attribute is the Attribute of DOM node, such as ID, class, title, align, etc. The Property is the DOM element as an object, and its additional content, such as childNodes, firstChild, and so on.

20. How do HTML elements represent their nested relationships

  • Block-level elements can contain inline elements;
  • Block-level elements may not contain block-level elements;
  • Inline elements generally cannot contain block-level elements (aElement exception)

21. Several Doctype document types

Tags can declare three DTD types, representing strict versions, transitional versions, and frame-based HTML documents.

  • HTML 4.01Three document types are specified: one isStrict,TransitionalAs well asFrameset;
  • XHTML 1.0Three XML document types are specified: one isStrict,TransitionalAs well asFrameset;
  • Standards(Standard) mode (i.e., strict presentation mode) is used to render web pages that conform to the latest standards;
  • QuirksThe (inclusive) mode (also known as loose rendering mode or compatibility mode) is used to render web pages designed for traditional browsers.

22. What’s new in HTML5 and what elements have been removed

New features

HTML5 is now no longer a subset of SGML, it’s all about graphics, location, storage, multitasking, etc.

  • Drag and drop the release(Drag and drop) API;
  • Semantically better content tags (header.nav.footer.aside.article.section);
  • Audio and video API(audio.video);
  • The canvas(Canvas) API;
  • geographic(Geolocation) API;
  • Local Offline StoragelocalStorageLong-term storage of data, data is not lost after the browser is closed;
  • sessionStorageThe data is automatically deleted after the browser is closed.
  • Form controls:calendar,date,time,email,url,search ;
  • The new technologywebworker.websocket.GeolocationAnd so on;

Remove elements

Pure expressive elements:

  • <basefont>Default font, no font set, to render;
  • <font>Font label;
  • <center>Horizontal center;
  • <u>The underline.
  • <big>Font;
  • <strike>In the cross word;
  • <tt>Text equal width;

Elements that negatively affect usability:

< frameset >, < noframes > and < frame >;

23. What is the Quirks mode? How is it different from Standards mode?

Quirks mode

Quirks mode is also known as Quirks mode, Quirks mode, and Quirks mode.

The difference between Quirks and Standards modes

When we write a program, when the old and new functions are not compatible, how to do to ensure that the original interface unchanged, but also can provide powerful functions?

Generally, this can be solved by adding parameters and branching. That is, when an argument is true, the new function is used, and when it is false, the old function is used, so that the old program is not broken, but the new function is provided.

IE6 is similar to do so, it took a DTD for this “argument”, because people will not go to previous page to write a DTD, the first 6 to assume that, if the DTD means that the page will use better support for CSS layout, and if there is no use compatible with the previous layout, this is Quirks mode (eccentricity, eerie, Weird mode).

The differences with Standards generally include layout, style resolution, and script execution:

  • The box modelIn:W3CIn the standard, if you set the width and height of an element, it refers to the width and height of the element content, while in theQuirksMode, IE width and height are also includedpaddingandborder;
  • Sets the height and width of the elements in the rowIn:StandardsMode, for elements within the same linewdithandheightIt’s not going to work. It’s not going to workquirksMode, will take effect;
  • Set the height of the percentageIn:standardsIn mode, the height of an element is determined by the content it contains. If the parent element does not have a percentage height, setting a percentage height for the child element is invalid.
  • Set horizontal centerUse:margin:0 autoinstandardsMode can be centered horizontally, but inquirksMode will fail.

24. What is the separation of front-end structure, style and behavior? And what are the benefits of separation?

Separation of structure, style, and behavior

If the front end is compared to a person, for example, the structure (HTML) is equivalent to the “skeleton” of the human body, and the style is equivalent to the “decoration” of the human body, such as clothes, jewelry, etc. Behavior is a series of “actions” that a person makes.

In the separation of structure, style and behavior, it is to separate the three, each responsible for its own content, each part can be used by reference.

On the basis of separation, we need to do code: lean, reuse, order.

Benefits of separation

  • Code separation is conducive to team development and later maintenance;
  • Reduced maintenance costs, improved readability and better compatibility;

25. What do you know about HTML5?

  • Good mobility, mainly on mobile devices;
  • Responsive design to accommodate automatically changing screen sizes;
  • Supports offline caching technology,webStorageLocal cache;
  • A newcanvas.video.audioEtc.; And special content elements:article.footer.header.nav.sectionAnd so on; And form controls:calendar.date.time.email.url.searchAnd so on;
  • newwebSocket/webWorkTechnology;
  • There are new geographical location and so on.

26. How to optimize the files and resources of the website

  • File merge (the purpose is to reducehttpRequest);
  • File compression (the goal is to directly reduce the size of files downloaded);
  • Use cache;
  • usecdnManaged resources;
  • gizpCompress required JS and CSS files;
  • Backlink, website outside link optimization;
  • Meta Tag optimization (title.description.keywords),headingTag optimization,altOptimization;

27. What is datalist in Html5

The tag, which defines the list of options, is used in conjunction with the input element to define the possible values of the input.

The datalist and its options are not displayed; they are only valid input list values.

<input id="fruits" list="fruit" /><datalist id="fruit">  <option value="apple">  <option value="orange">  <option value="banana"></datalist>
Copy the code

28. What is the concept of local storage in Html5, what are its advantages, and what is the difference between it and cookies?

HTML5 Web storage has two types of storage: sessionStorage and localStorage.

  • sessionStorageUsed to store data locally in a session and is destroyed when the session ends.
  • andsessionStorageDifferent,localStorageLocal storage for persistence, where data never expires unless the user proactively deletes it;
  • cookieIs stored at the user’s local terminal (Client Side), usually encrypted.

The difference between:

  • In terms of the transfer between the browser and the server:cookieData is always carried in the same origin HTTP request (even if it is not needed), i.ecookieBack and forth between the browser and the server; whilesessionStorageandlocalStorageData is not automatically sent to the server and is saved locally.
  • Look from the size: Storage size limits are different,cookieData cannot exceed4k, only suitable for storing very small data; whilesessionStorageandlocalStorageAlthough there is also a storage size limit, but thancookieMuch larger, up to 5M or more.
  • From the data validity period:sessionStorageThe session is closed immediately, so it does not last long.cookieThe cookie is valid only until the set expiration time, even if the window or browser is closed. whilelocalStorageIt always works.
  • In terms of scope:sessionStorageNot shared across different browser Windows, even the same page; whilelocalStorageandcookieAre shared across all the same origin Windows.

29. What are the common browser cores

  • TridentKernel: First developed or used by IE, 360 browser;
  • WebkitKernel: Google Chrome, Safari, Sogou browser, 360 speed browser, Ali Cloud browser, etc.
  • GeckoKernel: Mozilla FireFox, K-Meleon;
  • PrestoKernel: Opera browser;

30. What is Canvas? How do I write Canvas?

concept

Canvas is an element of HTML5 that uses JavaScript to draw graphics on a web page. Canvas is a rectangular area. Every pixel of it is controlled by the HTML5 language. There are several ways to draw paths, boxes, circles, characters, and add images using the Canvas.

use

If we want to add a Canvas tag to our HTML document, we need an ID, width, and height. Here’s an example of how to write a basic Canvas tag to an HTML document.

<canvas id="myCanvas" width="100" height="100"> </canvas>
Copy the code

31. What rules to follow when using HTML5

  • New features should be based onHTML,CSS,DOMandJavaScript.
  • Reduce the need for external plug-ins (e.gFlash);
  • Better error handling;
  • More replacement script flags;
  • HTML5Should be independent of equipment;
  • The development process must be visible;

32. What’s the difference between AN Html5 application cache and an HTML browser cache

The key to the new HTML5 specification for application caching is support for offline applications, allowing browsers to prefetch some or all of the site’s assets, such as HTML files, images, CSS, and JS, when linking to clients. Prefetching files speeds up site performance. In other words, the application cache can prefetch pages that are not accessed at all, making them unavailable in regular browser caches. In contrast to traditional browser caching, this feature does not force users to visit websites.

33. What are the apis in the latest HTML5 standards

  • Canvas ：CanvasbyHTMLConsists of a drawable region with height and width attributes defined in code.JavaScriptCode can access this area through a complete set of drawing functions, which are similar to other common2D APISimilar, thus allowing the dynamic generation of graphs.CanvasSome of its intended uses include building graphics, animations, games, and image composition.
  • Media timing playback;
  • Offline storage of databases;
  • Document editing;
  • Drag and drop.
  • Cross-document messaging;
  • Browser history management;
  • MIMEType and protocol handler registration;

What is the use of LocalStorage in HTML5

LocalStorage is equivalent to a lightweight database, can store data in the local permanent (unless manually deleted). In addition, you can read cookies from the local cache even when you are disconnected from the Internet.

  • uselocalStorageSave data:localStorage.setItem(key, value);
  • uselocalStorageGet the saved data:localStorage.getItem(key);
  • removelocalStorageSaved data:localStorage.removeItem(key);
  • Remove alllocalStorageObject holds data:localStorage.clear( );

35. About new input type attributes in HTML5

type role
search Is used to search for fields, which are displayed as regular text fields
email For the input field that should contain the email address, the value of the email field is automatically validated when the form is submitted
url The field value for the INPUT field that should contain the URL address is automatically validated when the form is submitted
number For input fields that should contain numeric values, custom numeric qualification
range For an input field that should contain a range of numeric values, with the type displayed as a slider
dateTime Select time, day, month, year (UTC)
date Used to select day, month, and year
month Used to select month, year
week Used to select weeks and years
time Used to select time (minutes and hours)
dateTime-local Used to select time, day, month, year (local time)

36. Understanding and understanding of Web standards and W3C

In the case of the WEB: WEB standards can simply be divided into structure, presentation, and behavior. Web standards typically separate these three parts to make them more modular. But in general, when behavior occurs, there will be a change in structure or performance, which makes the boundary between the three not so clear;

In terms of W3C: The W3C puts forward the specification requirements for Web standards, which are some code specifications in actual programming, as follows:

Structural requirements:

  • The tags must be closed, lowercase and not nested, which can improve the search probability of the search robot for web content.

For CSS and JS:

  • It is recommended to use external chainscssandjsScript, so as to achieve the structure and behavior, structure and performance of the separation, improve the page rendering speed, can faster display page content;
  • The separation of style and label, more reasonable semantic tags, so that the content can be accessed by more users, the content can be accessed by a wider range of devices, less code and components, so as to reduce the maintenance cost, more convenient revision;
  • No need to change the content of the page, providing a printed version without copying the content, improving the usability of the website;

In short, following the Web standards developed by the W3C makes it easier for users and browsers to read, and enables better communication between web developers.

37. What are the new HTML5 document types and character sets

  • HTML5Document type:<! doctype html>
  • Character set:HTML5Code used< meta charset = "utf-8" >

38. The difference between progressive enhancement and graceful degradation

Progressive Enhancement: Reconstructs pages for browsers of earlier versions. When basic functions are guaranteed, improvements and additional functions are made for advanced browsers in terms of effect and interaction to achieve better user experience.

Graceful degradation: Build full functionality from the start, and then work with lower browser versions.

The difference between

  • Elegant downgrading starts with a complicated status quo and tries to reduce the supply of user experience; Progressive enhancement starts with a very basic, working version and builds on it to adapt to the needs of future environments.
  • Downgrading means looking back, while gradual enhancement means looking forward while keeping its roots in the safe zone.

39. Why is it more efficient to use multiple domain names to store web resources

  • CDNCaching is more convenient;
  • Breaking browser concurrency limits;
  • savecookieBroadband;
  • Save the number of connections of the primary domain name, optimize the response speed under the page;
  • Prevent unnecessary safety problems;

40. What is your understanding of web standards and the importance of standards bodies

Xiaobian personally think: web standards and standards establishment is to make the Web more standard, more standard, the healthy development of essential things.

  • For developers: developers can follow the unified development standards, greatly reducing the difficulty of development, development costs, so as to improve the code readable and easy maintenance;
  • For SEO:SEOMore friendly, improved search efficiency.

The use of web standards and standards bodies plays an important role in improving the usability of web sites.

41. Which browsers support HTML5

Almost all advanced browsers — Safari, Chrome, Firefox, Opera, IE8 and above — support HTML5.

42. Why don’t we need a DTD for HTML5

HTML5 doesn’t use SGML or XHTML. HTML5 is a brand new thing, so there’s no need to refer to a DTD. For HTML5, just place the following document type code to tell the browser to recognize it as an HTML5 document.

43.. how does the browser manage and load the HTML5 offline storage resources

  • Wired case:

(1) when the browser finds the MANIFEST attribute in the HTML header, it will request the manifest file. If it is the first time to access the app, the browser will download the corresponding resources according to the contents of the manifest file and store them offline.

(2), if you have accessed the APP and the resources have been stored offline, then the browser will use offline resources to load the page, and then the browser will compare the new manifest file with the old one, if the file has not changed, do not do any operation, if the file has changed, The resources in the file are then redownloaded and stored offline.

  • Offline: The browser directly uses the resources cached offline.

What the Page Visibility API can be used for

Automatically pauses music or video while the page is switched to another background process.

44. How to turn off autocomplete for HTML5 forms

For input that you don’t want to prompt, set autoComplete =off.

The differences and use of several image formats in HTML

There are several commonly used image formats in the page: PNG, JPG (JPEG), GIF, BMP, etc.

(1) Features of Png format

Features: Image background transparent, can support a variety of colors.

Range of use: relatively wide, in the current use of the highest frequency.

(2) Features of JPG format

Features: the picture does not support transparent, static diagram, support more colors, can be compressed.

Scope of use: a wide range of use, can be used as computer wallpaper, mobile phone screen saver, etc., according to the demand to use the resolution of the picture,

(3) FEATURES of GIF format

Features: Dynamic graph, supports few colors.

Scope of use: low frequency of use within the site as seen at present.

46. There are two ways of dealing with compatibility issues

  • IE6/IE7/IE8Supported bydocumentMethod, using this feature to make these browsers supportedHTML5The new label;
  • Use ishtml5shimFrame in addition,DOCTYPEThe way to declare it is to distinguishHTMLandHTML5An important element of the logo, in addition, can be distinguished by the addition of structural and functional elements.

Write in the last

The above is small make up this share content. As the overall planning of HTML common interview knowledge points, some knowledge points in this paper borrow (Chao) and mirror (XI) from Baidu. So, if you see your knowledge grows on it, don’t panic ！！！！ Having fun alone is not as good as having fun together. Sharing knowledge is also a very happy thing

Finally, this post will be updated continuously. In addition, if there are deficiencies in the article, please leave a comment below to point out, xiaobian will see timely correction.

Update: the latest CSS has been compiled, can be signed ~