HTML5 a glance at the interview

H5 layout Label:

such as article, footer, header, nav, section aside

Form controls: Calendar, date, time, email, url, search

Form structure more free XHTML needs to be placed in a form such as INPU/BUTTON/S personnel configuration: Elect/textarea and other label elements, in HTML5 can be placed anywhere on the page, and then through the new form property to the element of the form's ID value, can be linked together. <form id= "MyForm" ></form> <input type= "text" form= "MyForm" value= "" >

Email input type Description: This type requires a properly formatted email address, otherwise the browser is not allowed to commit, and there will be an error message. This type must specify a name value, otherwise no effect. Format: <input type=email name=email> URL input type description: The text field shown above requires you to enter a well-formed URL address, which automatically adds http://At the beginning of opera. Format: <input type=url>

DateTime-Related input type description: This series is a cool type that completely solves the trivial problem of JS Calendar control. But the current MS only opera/chrome new version support, and the display effect is not the same. Format: <input type=date> <inputtype=time> <input type=month> <input type=week> <input type= Datetime> <input type=datetime-local/>

Number input type description: Enter a numeric character that throws an error format if not entered: <input type= "number" max=10 min=0 step=1 value=5/> Property value describes the maximum allowable The maximum allowable minimum value for a large value min number specifies a valid numeric interval (if step= "3", the number of valid numbers is -3,0,3,6, etc.), which specifies the default value

Range Slider Type description: Numeric value of a range of specific values, formatted as a slider bar: <input type= "range" max=10 min=0 step=1 value=5/> attribute value describes max number's allowable maximum min number specifies the minimum allowable value for step numbers to specify a valid digital interval (if step= "3", the legal number is -3,0,3,6, etc.) value

Search input type Description: This type represents the input will be a search keyword, through results=s can display a search small icon. Format: <input type=search> Tel input type description: This type requires you to enter a phone number, but in fact it does not have a special validation, which is no different from the text type. Format: <input type=tel>

Color input type Description: This type of form allows the user to select a color value from the color picker and feed back to the value of the control in the format: <input type=color>

Placeholder Property Description: This is a very useful property, eliminating the use of JS to achieve click to clear the form initial value. browser support is also good, MS in addition to Firefox, other standard browser can be very good support. Format: <input id=placeholder placeholder= "Click I'll Clear" >

Placeholder Property Description: This is a very useful property, eliminating the use of JS to achieve click to clear the form initial value. browser support is also good, MS in addition to Firefox, other standard browser can be very good support. Format: <input id=placeholder placeholder= "Click I'll Clear" >

Required/pattern Property Description: This is the new validation property of HTML5. Required type, the value cannot be empty, and there is a hint. There are two ways to do this, which is useful. And can be used for textarea and hidden/image/submit type pattern type is regular validation, you can complete a variety of complex validation. Both types must specify a name value, otherwise no effect. Format: <input id=placeholder name=require required> <input id=placeholder name=require1 required= "Required" > & Lt;input name=require2 pattern= "^[1-9]\d{5}$" >

Autofocus Auto Focus Property Description: Autofocus attribute, which can focus on a form control when the page loads, similar to the JS Focus () format: <input autofocus= "Autofocus" > 4. AutoComplete Auto-Complete Property Description: This property is provided for the form auto-complete feature. If the property is turned on, it is good to do it automatically. In general, this property must start the auto-completion feature of the browser. Format: <input autocomplete= "on/Off" >

Novalidate Property Description: The Novalidate property specifies that the form or input field should not be validated when the forms are submitted. Format: <form action= "demo_form.asp" method= "Get" novalidate= "true" > 6.multiple Property Description: Multiple The Multiple property specifies that more than one can be selected in the input field. The properties apply to the following types of <input> tags: email and file. Format: <input type= "file" Name= "img" multiple= "multiple"/>

Form Override Property Description: The form Override property (form override attributes) allows you to override some of the property settings of the form element. The form override property applies to the following types of <input> tags: the Submit form override property has: FormAction-override the form's Action property Formenctype-Override the form's Enctype property FormMethod-Heavy Write the form's Method property Formnovalidate-Rewrite the form's Novalidate property formtarget-Rewrite the form's Target Property List property Description: Use with DataList, see (Second course courseware)

Placeholder Text style definition:-moz-placeholder {color:blue;}::-webkit-input-placeholder {color:blue;}

text box style *:focus {outline:none;} pseudo-class selector using CSS: Required

Pseudo-class selector using CSS: required:required form style with validation rules: Required:valid Fill in the correct style: Required:invalid fill in the wrong style

***********************************

2.svg

SVG uses XML to write he is actually a text file, handed to the browser to explain the execution instance <?xml version= "1.0" standalone= "no"?> <! DOCTYPE svg public "-//W3C//DTD svg 1.1//en" "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > <svg width= "100 % "height=" 100% "version=" 1.1 "xmlns=" Http://www.w3.org/2000/svg "> <circle cx=" + "cy=" "r=" + "stroke=" Black "Stroke-width=" 2 "fill=" Red "/> </svg>

The first line contains the XML declaration. Please note the Standalone Property! This attribute specifies whether this SVG file is "stand-alone" or contains a reference to an external file. Standalone= "No" means that an SVG document will refer to an external file-here, a DTD file. The second and third lines refer to this external SVG DTD. The DTD is located in "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD is located in the consortium and contains all the allowed SVG elements. The SVG code starts with the <svg> element, including opening tags <svg> and closing tags </svg>. This is the root element. The width and Height properties set the breadth and height of this SVG document. The Version property defines the SVG versions that are used, and the xmlns attribute defines the SVG namespace. SVG <circle> is used to create a circle. The CX and CY Properties define the x and Y coordinates of the center of the circle. If these two properties are omitted, then the dot is set to (0, 0). The R property defines the radius of the circle. The stroke and Stroke-width properties control how the outline of a shape is displayed. We set the outline of the circle to a 2px wide, black border. The Fill property sets the color within the shape. We set the fill color to red. The effect of closing the tag is to close the SVG element and the document itself.

Use <embed> label <embed src= "Rect.svg" width= "height=" "type=" "Image/svg+xml" pluginspage= " www.adobe.com/svg/viewer/install/"/> Use <object> label <object data=" Rect.svg "width=" height= " "Image/svg+xml" codebase= "http://www.adobe.com/svg/viewer/install/"/> Use <iframe> tags <iframe src= " Rect.svg "width=" "height=" > </iframe> <iframe> Tags can work in most browsers.

Embed SVG directly into HTML page <svg xmlns= "http://www.w3.org/2000/svg" version= "1.1" height= "4" > <polygon points= "100,10 0,180 190,60 10,60 160,180 "style=" fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd; "/> </svg>

Rectangle <rect x= "" "y=" "width=" "height=" "style=" FILL:BLUE;STROKE:PINK;STROKE-WIDTH:5; fill-opacity:0.1;stroke-opacity:0.9 "/> Round <circle cx=" "cy=", "r=", "stroke=", "Black" stroke-width= "2" fill= " Red "/> Line <line x1=" 0 "y1=" 0 "x2=" [y2=] "style=" Stroke:rgb (99,99,99); Stroke-width:2 "/> Polygon <polygon Points= "220,100, 300,210, 170,250" style= "fill: #cccccc; stroke: #000000; stroke-width:1"/>

First get the page element Doc=document.getelementbyid ("Doc"); Gets the SVG object svg=one.getsvgdocument (); Gets the SVG document object svgdoc=svg.documentelement; Gets the SVG Document object node Circle=svgdoc.getelementsbytagname ("Circle") [0];

****************************************

3.canvas

HTML5 's canvas elements use JavaScript to draw images on a Web page. The canvas is a rectangular area where you can control each pixel. Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

SVG SVG is a language that uses XML to describe 2D graphics. SVG is based on XML, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element. In SVG, each drawn shape is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic. Canvas uses JavaScript to draw 2D graphics. The Canvas is rendered per pixel. In the canvas, once the drawing is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the graphic.

Compare canvas dependency resolution does not support event processor weak text rendering ability to save result images in. png or. jpg format best suited for image-intensive games where many objects are frequently redrawn SVG independent resolution support event handlers are best suited for applications with large rendering areas ( such as Google Maps) a high degree of complexity slows rendering speed (any application that overuse the DOM is unpleasant) is not suitable for gaming applications

Tag Properties width Height browser support alternative content <canvas id= "MyCanvas" > Alternative content </canvas>

Rectangle API Rect () Create Rectangle FillRect () draw "filled" rectangle Strokerect () Draw Rectangle (no fill)

Parameter description
X-coordinate of the upper-left corner of the x rectangle
Y-coordinate of the upper-left corner of the y rectangle
Width rectangle, measured in pixels
Height rectangle, measured in pixels

color, style, and Shadow methods

Createlineargradient () Create a linear gradient (used on canvas content)
Createpattern () repeats the specified element in the specified direction
Createradialgradient () Creating a radial/annular gradient (used on canvas content)
Addcolorstop () specifies the color and stop position in the gradient object

color, style, and shadow properties

Property Description
FillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
Strokestyle Sets or returns the color, gradient, or pattern used for a stroke
Shadowcolor Sets or returns the color used for shadows
Shadowblur Sets or returns the level of blur used for shadows
SHADOWOFFSETX Sets or returns the horizontal distance of the shadow distance shape
Shadowoffsety Sets or returns the vertical distance of the shadow distance shape

* * Text ****************************

Font Sets or returns the current font property of the text content
TextAlign Sets or returns the current alignment (horizontal alignment) of the text content start: Default. The text starts at the specified position. End: The text ends at the specified position. Center: The centre of the text is placed at the specified location. Left: The text is aligned to the right. Right: The text is justified.
Textbaseline Sets or returns the current text baseline (vertical alignment) when the text is drawn alphabetic: default. The text baseline is a normal letter baseline. Top: The text baseline is the top of the EM box. Hanging: The text baseline is a hanging baseline middle: The text baseline is the center of the EM box. Ideographic: Text baselines are ideographic baselines. Bottom: The text baseline is the bottom of the EM box.

Filltext (text,x,y,maxwidth) draws "filled" text on the canvas text: Specifies that the output on the canvas is x: The x-coordinate position (relative to the canvas) at which the text begins to draw y: the y-coordinate position (relative to the canvas) at which the text starts to draw maxWidth: optional. The maximum allowable text width, measured in pixels
Stroketext (text,x,y,maxwidth) Draw text on canvas (no fill) Text: Specifies the output on the canvas x: The x-coordinate position (relative to the canvas) at which the text begins to draw y: the y-coordinate position (relative to the canvas) at which the text starts to draw maxWidth: Optional. The maximum allowable text width, measured in pixels
Measuretext (text) returns an object that contains the width of the specified text: Text to measure

Method	Describe
DrawImage ()	Draw an image, canvas, or video to the canvas

The DrawImage () method draws an image, canvas, or video on the canvas. The DrawImage () method can also draw portions of an image and/or increase or decrease the size of an image

Img	Specifies the image, canvas, or video to use.
Sx	Optional. The x-coordinate position at which to start clipping.
Sy	Optional. The y-coordinate position at which to start clipping.
Swidth	Optional. The width of the image being clipped.
Sheight	Optional. The height of the image being clipped.
X	Place the x-coordinate position of the image on the canvas.
Y	Places the y-coordinate position of the image on the canvas.
Width	Optional. The image that you want to use

Globalalpha Sets or returns the current alpha or transparent value of a drawing
Globalcompositeoperation Sets or returns how a new image is drawn to an existing image

The Globalalpha property sets or returns the current transparency value (alpha or transparency) of the drawing. The Globalalpha property value must be a number between 0.0 (fully transparent) and 1.0 (opaque)

Number

Transparent value. Must be between 0.0 (fully transparent) and 1.0 (opaque).

The Globalcompositeoperation property sets or returns how a source (new) image is drawn to the target (existing) image. SOURCE image = The drawing you intend to place on the canvas. Target image = The drawing you have placed on the canvas.

Source-over default. Displays the source image on the target image.
The source-atop displays the source image at the top of the target image. The portion of the source image that is outside the target image is not visible.
The source-in displays the source image in the target image. Only the portion of the source image within the target image is displayed, and the target image is transparent.
Source-out Displays the source image outside of the target image. Only the source image portion outside the target image is displayed, and the target image is transparent.
Destination-over Displays the target image above the source image.
The destination-atop displays the target image at the top of the source image. The part of the target image that is outside the source image is not displayed.
Destination-in Displays the target image in the source image. Only the portion of the target image within the source image is displayed, and the source image is transparent.
Destination-out Displays the target image outside the source image. Only the part of the target image that is outside the source image is displayed, and the source image is transparent.
Lighter displays the source image + target image.
Copy displays the source image. ignores the target image.
The Source-over uses an XOR operation to combine the source image with the target image.

**********

Canvas path

Fill () fills the current drawing (path)
Stroke () draws a defined path
Beginpath () starts a path or resets the current path
MoveTo () Moves the path to the specified point in the canvas without creating a line
Closepath () Creates a path from the current point back to the starting point
LineTo () Adds a new point and creates a line from that point to the last specified point in the canvas
Clip () cuts an area of any shape and size from the original canvas
Quadraticcurveto () Create two Bezier curves
Beziercurveto () Create three-cubic Bezier curve
Arc () Create ARC/curve (used to create circular or partial circles)
ArcTo () creates an arc/curve between two tangents
Ispointinpath () returns True if the specified point is in the current path, otherwise false

Rect (x,y,w,h) stroke () Draw path Fill () Fill shape

MoveTo (x, y) starts drawing a line, specifying the beginning of the line LineTo (x1,y1) specifies where the line will arrive. Stroke () Draw path

< p>linecap	Set or return end of line style Butt: Default. Add a straight edge to each end of the line Round: Adds a circular cap to each end of the line. Square: Add a square cap to each end of the line
linejoin	Sets or returns the corner type created when two lines intersect miter: Default. Create a sharp corner; Bevel: Creates a bevel. Round: creates rounded corners.
linewidth	settings or returns the current line width Number: The width of the current line, in pixels
miterlimit	Sets or returns the maximum miter length <

Beginpath () starts a path, or resets the current path. Closepath () Creates a path from the current point to the start point, closing the current drawing path Note: If you finish drawing the previous path without re-specifying Beginpath, then drawing the other path will redraw the entire path after the most recently specified Beginpath Each time the Context.fill () is called, the start and end points of the path drawn at the time are automatically connected, and then the closed part is filled.

Quadraticcurveto (cpx,cpy,x,y) Adds a point example to the current path by using a specified control point that represents a two-time Bezier curve: Start point: MoveTo (20,20) control point: Quadraticcurveto ( 20,100,200,20) End point: Quadraticcurveto (20,100,200,20)

X-coordinate of the CPX Bezier control point
cpy the y-coordinate of a Bezier control point
X-coordinate of the X-end point
Y-coordinate of the Y-end point

Beziercurveto (cp1x,cp1y,cp2x,cp2y,x,y) Adds a point example to the current path by using a specified control point that represents a three-time Bezier curve: Start point: MoveTo (20,20) control Point 1:beziercurveto ( 20,100,200,100,200,20) Control point 2:beziercurveto (20,100,200,100,200,20) end point: Beziercurveto (20,100,200,100,200,20)

CP1X The x-coordinate of the first Bezier control point
cp1y the y-coordinate of the first Bezier control point
CP2X The x-coordinate of the second Bezier control point
cp2y the y-coordinate of the second Bezier control point
X-coordinate of the X-end point
Y-coordinate of the Y-end point

Arc (x,y,r,sangle,eangle,counterclockwise); Create Arcs/curves (for creating circles or partial circles)

The x-coordinate of the center of the X circle.
The y-coordinate of the center of the Y circle.
The radius of the R circle.
Sangle the starting angle, in radians. (The arc's circular three o'clock position is 0 degrees).
Eangle end angle, in radians.
Counterclockwise is optional. The rules should be plotted counterclockwise or clockwise. False = clockwise, true = counterclockwise.

The ArcTo (X1,y1,x2,y2,r) method creates an arc/curve between two tangents on the canvas.

The x-coordinate of the starting point of the X1 arc
The y-coordinate of the starting point of the Y1 arc
X-coordinate of the end point of the X2 arc
The y-coordinate of the end point of the Y2 arc
Radius of R arc

The clip () method cuts any shape and size hint from the original canvas: Once an area is clipped, all subsequent drawings are restricted to the area being clipped (other areas on the canvas cannot be accessed). You can also save the current canvas area by using the Save () method before using the clip () method and restore it at any later time using the. Save to ensure the drawing state before cropping, and Context.rect () to determine the area to be trimmed; The trim action is performed by Context.clip (), and the canvas is drawn so that only the graphics in the cropping area are displayed, and the Context.restore () is restored to the state before the crop.

The Ispointinpath (x, Y) method returns True, indicating that the specified point is in the current path; otherwise false

**********************************************

HTML5 provides four new ways to store data on the client, namely Localstorage, Sessionstorage, Globalstorage, and Web Sql Database. The first three are suitable for storing less data, while Web SQL database is suitable for storing large, complex data, I am accustomed to the previous three called small storage.

Storing large Web storage is larger than cookie storage, can reach 5M in data volume, and cookies are up to 4KB, or 20 key/value pairs. High security cookies appear in the HTTP header when each HTTP request is sent to the background, while HTML5 's local storage does not, to some extent, save a certain amount of bandwidth, shortening the time of the request and response

Localstorage:localstorage does not have time-limited data storage, that is, localstorage is never expired unless the data is actively deleted. Data can span multiple windows, ignoring the current session and being collectively accessed and used in the same domain. Sessionstorage for a session of the data store, any one page stored information in the window under the same domain page can access its stored data. The value of each window is independent, its data will be lost due to the window's closing, the sessionstorage between different windows can not be shared. Like Globalstorage and sessionstorage, the information stored on any page in a domain can be shared across all pages. Currently only FF is supported, and only globalstorage storage under the current domain is supported.

Localstorage:localstorage/sessionstorage have the same API as Localstorage.length to get the number localstorage in storage. Key (n) Gets the key of the nth key-value pair in storage Localstorage.key = value Localstorage.setitem (key, value) to add Localstorage.getitem (key) to get Localstorage.removeitem (key) Remove localstorage.clear () erase

*************************************************************************

The HTML5 multimedia component refers to the video and audio components. HTML5 Multimedia components can embed multimedia components directly on your Web page without the help of third-party plug-ins such as Flash Player. The new ability of the browser to provide native support video makes it easier for web developers to add video components to their sites without relying on external plug-in availability. The ability to HTML5 multimedia components is especially important because of the limitations of the flash technology that Apple is using on the iphone and ipad at this stage.

AutoPlay AutoPlay If this property appears, the video plays as soon as it is ready.
Controls controls if this property appears, the control is displayed to the user, such as the play button.
Height pixels settings for the video player.
Loop loop If this property occurs, the media file starts playing again when it finishes playing.
Preload preload if this property appears, the video loads when the page loads and prepares to play. If you use "autoplay", the property is ignored.

Poster picture Address Displays the default picture instead of the first frame of the video.
src URL The URL of the video to play.
Width pixels Sets the size of the video player.

Audio files provide at least two different decoders to cover all browsers that support HTML5. As with the video element, you need to use the source element to implement the feature. An audio element can contain a variety of source elements, so you can provide multiple formatting support for your audio.

Media	Media Query	Defines the type of media resource for the browser to decide whether to download.
Src	Url	The URL of the media.
Type	numeric value	Defines where the player starts playing in the audio stream. By default, audio plays from the beginning.

Addtexttrack ()	Add a new text track to audio/video (no browser support)
Canplaytype ()	Detects if the browser can play the specified audio/video type
Load ()	Reload Audio/Video elements
Play ()	Start playing audio/video
Requestfullscreen ()	Fullscreen. WebKit Core: Webkitrequestfullscreen () Moz Core: Mozrequestfullscreen ()
Document.exitfullscreen	Exit full screen. WebKit Core: Webkitcancelfullscreen () Moz Core: Mozcancelfullscreen ()
Pause ()	Pause the currently playing audio <

HTML5 a glance at the interview