interview html5

HTML5 Q&A

Web Developer

Posted by Alexa on May 28, 2018

What is DOCTYPE?The difference between Quirks(compatibility) mode and Standard mode?

  1. <!DOCTYPE>declaration must be the very first thing in your HTML document, before <html> to inform Browser parser what type of doc to expect.It is not an HTML tag; it is an instruction to the wen browser about what version of HTML the page is written in. if DOCTYPE no find or not correct the doc will be run based on Quirks mode.
  2. Under Standard mode, layout and js running mode are running based on the highest standard of the browser. Under Quirks mode , layout emulates nonstandard behavior in Navigator 4 and IE 5. These were needed for websites written before introduction of web standards to avoid website can not work.

Why HTML5 only need to use <!DOCTYPE html>?

  1. HTML5 is not based on SGML(Standard Generalized Markup Language,), thus do not require a reference to a DTD;
  2. HTML4 is based on SGML,<!DOCTYPE>declaration refers to a DTD(Document Type Definition),The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

List several inline elements,block element,void element? what is the difference?

  1. inline element: a b span img inpute select strong;
  2. block element: div ul ol li dl dt dd h1 h2 h3 h4…p;
  3. normal void element: <br> <hr> <img> <input> <link> <meta>; unkown element: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>; 8Tips: Based on CSS standard , each elements all have display property to confirm the type of element,each elements have default value of dispaly, for example: div is block as block element ,however span is inline as inlent element;

When page inport style, the difference to use link and @import?

  1. <link> as XHTML tag, besides loading css, can be used in defining RSS or rel connection attribute and more; but @import is provited by CSS, so only can be use loading CSS file;
  2. <link>will be loaded when page is loading(the latter blocks parallel downloads), but as <@import>is inverse,it will be loaded after content loaded.
  3. <@import>was released on css2.1,so it only can be identified above IE5, <link>is XHTML tag without compatibility issue;
  4. <link>support using js control DOM to change CSS , but <@import>can not;

Introduce Browser Kernel.

mainly divided into two parts: Rendering Engine(Layout engineer) and JS Engine;Originally,these two ehgines have no clear difference, with time gone, JS Engine become more and more individual, kenel is going to define Rendering Engine.

  • Rendering Engine: working for dispalying web content(HTML\XTML\Image more),manage information (impoert CSS more),different browser kernel will effect diplay.and all the browsers, email terminal and other applications which required editing and dispalying web content all need kernel.
  • JS engine: analysis and run JavaScript to achieve web dynamic effects; list several popular browser kernel: Trident: IE,360,sougo;[MSHTML] Gecko: Netscapes 6 and above,FairFox,MozillaSuite/SeaMonkey; Presto: Opoera 7 and above;[Operaused to be Presto, now is Blink] Webkit:Safari,Chrome;[Chrome:Blink(branch of Webkit)] [IE\FireFox\Chrome\Safari]

What features/elements HTML have created or have removed ? How to solve html5 now tags compability issue?

  1. mainly update functions related image, location, storage, mutiples and more; new tag:
    • canvas
    • video audio
    • localStorage , local off-line storage,longtime will not be lost after browser closed;
    • sessionStorage , data will clear after browser closed
    • article\footer\header\nav\section
    • calender\date\time\email\url\search
    • webworker\websocket\Geolocation moved tag:
    • basefont\big\center\font\s\strike\tt\u
    • have nagtive effect on usability: frame\frameset\noframes; 2.support HTML5 new tag: IE8/7/6 support the tags which created by document.creatElement method; can use several features to make browser can support HTML5 new tags?? meanwhile need to add default css style;

Sure some matual frameworks can be used like html5shim;

  1. How to distinguish HTML5? DOCTYPE declaration \ new structure element(footer\header…)\function element(video\audio…)

What is Quirks mode? What the difference compare with Standard mode?

  1. Actually, standard mode was intoduced at the beginning of IE6 ， it try to work well with document which measure up to the standard.
  2. As IE6 can support CSS accessable, many pages were based on old layout which will affect new rendering. So it will use DTD as a “prameter” if there is DTD written, it means the pages should apply css to layout , if not use old one.
  3. Summary:layout\Style Parsing\Script Execution three aspects： Box Model：Based on W3C standard, if set an element’s width and height(just about content);but based on Quirks mode , IE’width and height include padding and border.

Compare with table ，div+CSS layout have any pros?

  1. It is convenient for iteration, only need to modify css file;
  2. pages loading fast and structuring clear
  3. expression and structure are divided
  4. optimize SEO

what transparency difference between rgba() and opacity()?

  1. opacity affect elements and all the content under the element.
  2. rgba affect only this element’s color and background color.

#

CATALOG
    FEATURED TAGS
    Java JAVASE CSS html5