1. New html5 features?

  • Drag and drop API;
  • Semantically better content tags (header, nav, footer, aside, article, section);
  • Audio and video API(Audio, video);
  • The Canvas (Canvas) API;
  • Geography (Geolocation) API;
  • Local offline storage localStorage Stores data for a long time. Data is not lost after the browser is closed.
  • SessionStorage data is automatically deleted after the browser closes;
  • Form controls: Calendar, Date, Time, Email, URL, search;
  • New technologies webworker, Websocket, Geolocation, etc.

Wacky tricks: Canvas stores audio, drag and drop form semantics

2. What are the types of input type

Attrs: maxLength, disabled, readonly

<input type="text" readonly="readonly"> // Read-only <input type="text" disabled="disabled" /> // Disable <input type="file" Accept ="video/*" Capture ="camcorder"Copy the code

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

  • A, b, span, img, input, select, strong;
  • Block level elements: div, ul, Li, DL, DT, DD, H1-5, P, etc.
  • Empty elements:<br>, <hr>, <img>, <link>, <meta>;

What is an empty element?

HTML elements that have no content are called empty elements. The empty element is closed in the start tag.

It is an element in HTML that cannot have child nodes (such as inline elements or text within elements).

  • <br>Is an empty element with no closing tag (

    Tag defines line breaks.
  • <hr>
  • <img>
  • <input>

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

  • altThe screen reader must be less than 100 English characters in length.
  • titleProperty provides advisory information for the element to which the property is set, and the title is displayed when the mouse hovers

4. Semantic labels

Concept: Semantization refers to the selection of appropriate tags (code semantization) according to the structure of content (content semantization), which is convenient for developers to read and write more elegant code, and at the same time, allows browser crawlers and machines to parse well.

Semantic benefits:

  • Do the right thing with the right label;
  • Removing or losing styles allows the page to have a clear structure.
  • Facilitate parsing by other devices (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful manner;
  • Good for SEO: establish good communication with search engines and help crawlers to capture more effective information: crawlers rely on tags to determine the context and the weight of each keyword;
  • Easier for teams to develop and maintain, more readable semantically, and easier for teams that follow the W3C standard to follow, reducing differentiation.

5. What are the advantages and disadvantages of iframe

Advantages:

  • reducingIframe displays the embedded web page intact.
  • modularIf more than one page references an iframe, then you only need to modify the content of the iframe, and you can implement the change of the content of each page called, easily and quickly.
  • reusableA web page with the same header and version for the same style can be written as a single page, nested with iframe to increase code reuse.
  • The iframe canCross-domain communication;
  • Fixed slow loading of third-party content such as ICONS and ads.

Disadvantages:

  • Iframe and the home page share the link pool while the browser pairsThe same domainThe connection islimit“, so it will affect the pageParallel loading;
  • Will produceA lot of pagesIt is not easy to manage.
  • There are various kinds of frame structuresThe scroll bar
  • Iframe willblockingOn the surface of the home pageOnloadThe event
  • The search engine’s retrieval program cannot interpret this kind of page, not goodSEO

6. What is the difference between SRC and href

  • The SRC is used toreplaceCurrent element; Href is used between the current document and the reference resourceEstablish contact;
  • SRC, short for source, points to the location of the external resource, and the content to which it points willThe embeddedTo the current in the documentThe labelThe position of; And href is short for Hypertext Reference,Point to theLocation of Network Resourceslocation, and the current element (anchor) or the current document (link)link.

7. What is the difference between property and attribute

  • Attribute is a feature on an HTML tag whose value can only be a string.
  • Property is a property in the DOM, it’s an object in JavaScript;

The simple understanding is:

  • Attribute is the inherent Attribute of a DOM node, such as ID, class, title, align, and so on.
  • Property is the object attached to the DOM element, such as childNodes, firstChild, and so on.

Property can be thought of as a prototype, which is essentially an object

8. There are two storage modes of HTML5 Web storage: sessionStorage and localStorage.

  • SessionStorage is used to store data in a session locally and will be destroyed when the session ends.
  • Different from sessionStorage, localStorage is used for persistent localStorage. Data will never expire unless users actively delete data.
  • Cookies are data stored (usually encrypted) on a user’s Client Side by a website to identify the user.

The difference between:

  • From the transfer between browser and server: cookie data is always in the same sourceThe HTTP requestCookie is carried (even if not required) inBrowsers and ServersBack and forth between; However, sessionStorage and localStorage do not automatically send data to the server and only store data locally.
  • In terms of size: Storage size limits vary,cookieData cannot exceed4k, only suitable for saving very small data; SessionStorage and localStorage have storage size limits, but they are much larger than cookies and can be reached5MOr more.
  • From the data validity period:sessionStorageThe session will closeImmediately shut downTherefore, it will not last long. Cookie Only set cookiesBefore expiration timeThis works even if the window or browser is closed. The localStorageAlways effective.
  • SessionStorage is not shared in different browser Windows, even on the same page. Both localStorage and cookies can be shared across all same-origin Windows.

9. What are common browser kernels

  • Trident kernel: IE was first developed or used in the 360 browser;
  • Gecko kernel: Mozilla FireFox (FireFox), k-Meleon;
  • Presto kernel: Opera browser;
  • Its kernel: Google Chrome, Safari, Sogou Browser, 360 speed browser, Ali Cloud browser, etc.

Wacky tricks – Remember kernel versus browser: TI, GM, Po, WG (Kick blocks, digger) (Trident-ie,Gecko-Mozilla,Presto-Opera, WebKit-Google Chrome)

10. Canvas

HTML5 elements are used to draw graphics, which are done by scripting (usually JavaScript); Labels are just containers for graphics, and you must use scripts to draw graphics.

Case 1- Drawing rectangles

<! DOCTYPE HTML> <html> <body> <canvas id="myCanvas">your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ,0,80,100 CTX. FillRect (0); </script> </body> </html>Copy the code

Resolution:

First, find the <canvas> element: var c= document.getelementById ("myCanvas"); Then create the context object: var CTX = c.goetContext ("2d"); The getContext(" 2D ") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images. The following two lines draw a red rectangle: ctx.fillstyle ="#FF0000"; ,0,150,75 CTX. FillRect (0); Set the fillStyle property to a CSS color, gradient, or pattern. FillStyle defaults to #000000 (black). The fillRect(x,y,width,height) method defines the current filling method for the rectangle.Copy the code

Effect:

Case 2- Draw lines

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); CTX. MoveTo (0, 0); CTX. LineTo (200100); ctx.stroke(); </script> </body> </html>Copy the code

Resolution:

Move position to start point ctx.moveto (0,0); Start with a line and end with a punctuation ctx.lineTo(200,100); Trigger stroke ctx.stroke();Copy the code

Case study 3- Drawing circles

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); CTX. Arc (95,50,40,0,2 * math.h PI); ctx.stroke(); </script>Copy the code

Case 4- Draw text

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; CTX. FillText (" Hello World ", 10, 50); </script>Copy the code

11. What is the difference between using link and @import when importing page styles

  • The link isHTML tagsAnd @ importcssProvide;
  • When the page is loaded, link willAt the same timeThe CSS referenced by @import will wait until the page is loadedLoad again after loading;
  • The link isXHTML tags, there is no compatibility problem, and @import is only available inIE5 aboveTo recognize,;
  • Link styleWeight is higher thanThe weight of @import.