Skip to content

Instantly share code, notes, and snippets.

@ethanjiezhou
Last active July 25, 2016 01:40
Show Gist options
  • Save ethanjiezhou/dcd98651f3e6cc8552fc962fc0b742a2 to your computer and use it in GitHub Desktop.
Save ethanjiezhou/dcd98651f3e6cc8552fc962fc0b742a2 to your computer and use it in GitHub Desktop.
Q&A GUIDE - HTML
  1. Difference between HTML, XML, and XHTML? * HTML is a markup language used for displaying text and documents across different platforms and machines. It was originally intended for a very specific audience, and has expanded to include hypertext, multimedia, as well as the style of the documents displayed * XML is an extensible markup language that was developed to retain the flexibility and power of HTML while reducing most of the complexity. * XHTML combines the flexibility of HTML with the extensibility of XML. For XHTML, the DOCTYPE, The xmlns attribute in <html>, <html>, <head>, <title>, and <body> is mandatory

  2. Name 3 of the minimum HTML elements needed for an HTML document html <!DOCTYPE html>, <html>, <body>, <head>

  3. What is Semantic HTML? - HTML using markup that also conveys the containing content. HTML5 has more semantic tags than prior versions (nav, aside, article, header, footer), but using descriptive classes and id’s could also be an example of semantic markup - Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look

  4. If you have an issue with your page, how do you debug it, what tools do you use? - Looking for common debugging practices like W3c validator, Firebug, Chrome Dev Tools

  5. Call an external style sheet and an external script located in the ROOT folder called style.css and main.js with HTML html <script src="main.js"></script> <link href="style.css" rel="stylesheet"></link>

  6. Name 4 new elements in HTML5 that were not available in previous HTML versions html <canvas>, <audio>, <svg>, <header>, <footer>, <aside>, <article>, <nav>, <section>

  7. What is DOM? - Document Object Model. The HTML DOM model is constructed as a tree of Objects Image of DOM - The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree.

  8. What is event bubbling and event capturing? - Event bubbling and capturing are two ways of event propagation in HTML DOM - In bubbling the event is first captured and handled by the inner most element and then propagated to outer elements - In capturing the event is first captured by the outer most element and propagated to the inner most element. - During the time of Netscape browser they were advocates of event capturing and Microsoft was from event bubbling school. Both are part of the W3C standard. As per the standard first the event will capture it till it reaches the target then it will bubble up to the outer most element. IE uses only event bubbling where as firefox supports both bubbling and capturing. We can use the addEventListener(type, listener, useCapture) to register event handlers for bubbling and capturing phases. To use the capturing phase event handling pass the third argument as true - Only event bubbling model is supported by all the major browsers. So if you are going to use event capturing still you need to handle event bubbling for IE. So it will easier to use event bubbling instead of capturing ```html

</div>
```
- If you take this structure and assume that a click event has happiened in the `li` element. In capturing model the event will be handled by the `div` first(click event handlers in the `div` will fire first) then in the `ul` then at the last in the target element `li`. In bubbling model it is the opposite. In this model the event will be first handled by the `li` first and the `ul` and at the last by the `div` element.
  1. Methods GET and POST in HTML forms - what's the difference? - GET: Parameters are passed in the querystring. Maximum amount of data that can be sent via the GET method is limited to about 2kb
    • Some other notes on GET requests:
      • GET requests can be cached
      • GET requests remain in the browser history
      • GET requests can be bookmarked
      • GET requests should never be used when dealing with sensitive data
      • GET requests have length restrictions
      • GET requests should be used only to retrieve data - POST: Parameters are passed in the request body. There is no limit to the amount of data that can be transferred using POST. However, there are limits on the maximum amount of data that can be transferred in one name/value pair
    • Some other notes on POST requests:
      • POST requests are never cached
      • POST requests do not remain in the browser history
      • POST requests cannot be bookmarked
      • POST requests have no restrictions on data length

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment