Front-end job interview HTML related questions

Front-end job interview HTML related questions

• Q: doctypeWhat is the role of (document type)?

  A: In HTML doctypehas two main purposes.

  • Verify the validity of the document:

  It tells the user agent and validator what DTD this document was written in. This action is passive. Every time the page loads, the browser will not download the DTD and check the legitimacy. It is only enabled when the page is manually verified.

  • Determine the rendering mode of the browser:

  For the actual operation, inform the browser which analysis algorithm to use when reading the document. If it is not written, the browser will parse the code according to its own rules, which may seriously affect the HTML layout. There are three ways for browsers to parse HTML documents.

  • Non-weird (standard) mode
  • Weird mode
  • Partially weird (near standard) mode

  About IE browser's document mode, browser mode, strict mode, weird mode, DOCTYPE tag, can you read the mode in detail ? standard! Content.

• Q: What is the difference between the standard mode and the weird mode of the browser?

  A: The "Standards Mode" page is rendered according to the definition of HTML and CSS, while the "Quirks Mode" is the browser designed for compatibility with the old version of the browser for a long time ago, and does not strictly follow the W3C A page rendering mode resulting from standard web pages. The browser decides which rendering mode to use based on the existence of the file type description on the page; if there is a complete one, DOCTYPEthe browser will use the standard mode, and if it is missing, the browser will use the strange mode.

  It is strongly recommended to read to deepen the understanding: the impact of Quirks Mode on HTML pages . Here is the difference between the standard mode and the strange mode of the browser:

  1. Box model:

     In weird mode, the box model is the IE box model rather than the W3C box model in standard mode: In the IE box model,
     box width = content width + padding left + padding right + border left + border right,
     box height = content height + padding top + padding bottom + border top + border bottom.
     In the W3C standard box model, the size of the box is the size of the content.

  2. Vertical alignment of picture elements:

     For inlineelements and table-cellelements, the default value of the vertical-align attribute in IE Standards Mode is baseline. And when inlinethe content of the element is only a picture, such as tablea cell table-cell. In IE Quirks Mode, tablecell picture vertical-alignproperty defaults bottom, therefore, there will be several pixel space at the bottom of the picture.

  3. <table>Fonts in elements:

     CSS, a description of fontthe property has font-family, , font-size, font-style, font-weighthe above properties are inheritable. In the IE Quirks Mode, for tableelements, some properties will be removed from the font bodyor other inherited closed elements table, in particular font-sizeproperty.

  4. Dimensions of inline elements:

     In IE Standards Mode, non-replaced inline element size can not be customized, and in IE Quirks Mode, the definition of these elements widthand heightattributes that can affect the sizes of the display elements.

  5. The percentage height of the element:

     The percentage height of the element in CSS is specified as follows. The percentage is the height of the element's containing block and cannot be a negative value. If the height of the containing block is not explicitly given, this value is equivalent to "auto" (that is, depends on the height of the content). So the height of the percentage must be used when the parent element has a declared height.

     When an element uses a percentage height, in IE Standards Mode, the height depends on the content changes, while in Quirks Mode, the percentage height is applied correctly.

  6. Handling of element overflow:

     In IE Standard Mode, the overflowdefault value visibleis taken , that is , the overflow is visible. In this case, the overflow content will not be clipped and will be displayed outside the element box. In Quirks Mode, the overflow is treated as an extension box, that is, the size of the element is determined by its content, the overflow will not be clipped, and the element frame is automatically adjusted to contain the overflow content.

  Also refer to reading: https://www.cs.tut.fi/~jkorpela/quirks-mode.html

• Q: What are the limitations of using XHTML?

  • Is there any problem if the page uses 'application / xhtml + xml'?

  A: The syntax of xhtml is strict, and there must be head, bodyeach dom must be closed. Empty tags must also be closed. For example <img />, <br/>, <input />and the like. Also use double quotes on the attribute value. Once an error is encountered, the analysis stops immediately and an error message is displayed.
  If the page uses 'application / xhtml + xml', some older browsers will be incompatible.

• Q: If the web content needs to support multiple languages, what would you do?

  • What issues must you consider when designing and developing multilingual websites?

  A: For coding UTF-8, the domain name needs to support multiple browsing addresses and prepare multiple sets of templates.
  When designing and developing multilingual websites, you need to consider

  • Application character set selection
  • Language writing habits & navigation structure
  • Database-driven website
  • The css box will appear misaligned due to different content sizes

• Q: data-What is the role of attributes?

  A: data-Provide custom properties for front-end developers. These property sets can be obtained through the datasetproperties of the object. Browsers that do not support this property can getAttributeobtain them through the method:

  <div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>

  div.dataset.commentNum; // 10

  It should be noted that the data-attributes composed of multiple words separated by hyphens later use the hump style when acquiring. Not all browsers support datasetproperties. Only Chrome and Opera are supported in the tested browsers.

  That is: when there are no suitable attributes and elements, the custom data attribute is the private custom data that can store the page or App.

  Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

• Q: If you think of HTML5 as an open platform, what are its building blocks?

  A: Open network platform:

  The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. Using the Open Web Platform, everyone has the right to implement a software component of the Web without requiring any approvals or waiving license fees.

  The Open Web Platform is a collection of open (copyright-free) technologies that have activated the Internet. When using an open network platform, everyone has the right to implement a component on the Web without asking for permission and certificates from anyone.

  Consider HTML5 as an open web platform, what are its building blocks? I think that the so-called building block refers to the technology in the open network platform technology collection.

  • HTML
  • JUDGMENT
  • CSS
  • SVG
  • MathML
  • Web APIs
    
    
    • Canvas WebGL
    • Audio
    • Web Storage
    • File, File System
    • History, contentEditable, Drag & Drop, HTML Editing Commands
    • Web Sockets
    • Web Workers
    • Server-Send Events
    • XMLHttpRequest
    • Geolocation, Device Orientation
    • DOM Events, Touch Events, Progress Events
    • Custom application development
    • Clipboard and events
    • Web Notifications, Web Messaging
    • Offine Web Applications
    • Media Capture API
    • Timing control for script-based animations, Page Visibility, Navigation + Timing, Resource Timing
    • Selectors
    • DOM Traversal, DOM XPath, Element Traversal
    • EcmaScript / JavaScript
    • HTTP
    • HATE
    • Media Accessibility Checklist

  The answer is quoted from: http://witcher42.github.io/2014/06/03/open-web-platform/

• Q: Please describe the difference between cookies, sessionStorage and localStorage?

  A: sessionStorage and localStorage are provided by HTML5 Web Storage API, which can conveniently save data between web requests. With local data, you can avoid unnecessary data transfer back and forth between the browser and the server.

  SessionStorage, localStorage, and cookie are all data stored in the browser. The concept of sessionStorage is very special, introducing a concept of "browser window". sessionStorage is data that always exists in the same window (or tab) of the same source. In other words, as long as the browser window is not closed, even if you refresh the page or enter another page with the same source, the data still exists. After closing the window, sessionStorage is destroyed. At the same time, different windows opened "independently", even on the same page, the sessionStorage object is also different

  Cookies will be sent to the server. The remaining two will not.

  Microsoft pointed out that Internet Explorer 8 increased the cookie limit to 50 per domain name, but IE7 also seems to allow 50 cookies per domain name. Firefox has a limit of 50 cookies per domain. Opera has a limit of 30 cookies per domain. Firefox and Safari allow cookies up to 4097 bytes, including name, value and equal sign. Opera allows cookies up to 4096 bytes, including: name, value and equal sign. Internet Explorer allows cookies up to 4095 bytes, including: name, value, and equal sign.

  • Cookie
    
    
    • The storage capacity of each domain name is relatively small (different browsers, roughly 4K)
    • The storage capacity of all domain names is limited (different browsers, roughly 4K)
    • There is a limit (different for each browser)
    • Will be sent to the server with the request
  • LocalStorage
    
    
    • Permanent storage
    • The storage capacity of a single domain name is relatively large (5MB recommended, different for each browser)
    • Unlimited total number
  • SessionStorage
    
    
    • Only valid in Session
    • Larger storage capacity (recommended without limit, but in fact different browsers)

• Describe GETand POSTdifferences?

  A: The differences are as follows:

  • get requests data from the specified resource, the requested data will be appended to the URL, which is to put the data in the request line (request line), to separate the URL and transfer data, multiple parameters are connected with &;
  • post submits the data to be processed to the specified resource. The get method, the query request is displayed in the url, there is a length limit, the get method is safe idempotent. The post method request is encapsulated in the http message body

&	get	post
Back / Refresh	harmless	Request to resubmit
Bookmark	Bookmarkable	Can't do
Cache	Can be cached	Cannot be cached
history	Keep in browser history	Not Retained
Data length limit	Limit (2048 characters)	not limited
safety	Data exposed in url	Relatively safe
Visibility	visible in url	Invisible

to sum up:

• For get, it is to request data from the server. The request is visible in the url. Its length is limited (2048 characters). The individual method is safe idempotent. Security here refers to obtaining information rather than modifying information. Refers to the same result for each request.
• For post, the data is submitted to the server, and it will be resubmitted every time it is refreshed or backed up. The data of the post request is encapsulated in the header of the http request.

tips: The answers to the above parts are from:

• paddingme
• Witcher42
• Zhengzhou Net Construction