Shulou(Shulou.com)06/02 Report--

I hope you can read it carefully and be able to achieve something!

The newly added attributes in html5 are placeholder, calendar, date, time, email, url, search, Hidden, etc., and the newly added elements are header, footer, nav, article, canvas, svg, video and so on.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Html5- is mostly used on mobile end.

New properties

Placeholder

Calendar, date, time, email, url, search

ContentEditable (to describe whether the content in the tag is editable)

Draggable

Hidden

Context-menu

Data-val (Custom attribute)

New label

Semantic tags (a bunch of div-like things)

Canvas (artboard)

Svg (also a drawing board)

Audio (sound playback)

Video (Video playback)-html5 used to use flash- before, but now flash is rarely used, and now adobe stops maintenance

API

a. Location (requires geolocation capabilities)

b. Gravity sensing (there should be a gyroscope in the phone)

C. request-animation-frame (Animation Optimization)

D. History (controls the browsing history of the current page)

E. LocalStorage- exists all the time, SessionStorage (storing information, such as history record, chat history-local)-> page is gone when closed.

F. Websocket- is used for communication (can be used for online chat, chat room)

G. fillReader (file read and preview)

H. WebWorker (asynchronous processing of files-used to improve performance and interactive experience)

I. fetch (the legendary thing to replace AJAX is not very compatible and not used by many companies)

The new type of the attribute article input

Placeholder

Calendar class

ContentEditable

Details: this attribute can also be used by filling in a contenteditable, but not the following draggable. It can only be written in the form of draggable='true'.

In the past, if you want to modify the contents of div without this attribute, you need to add a click event to div. When clicked, change the label into an input input box, and then fill in the replacement.

Ddd

This property can be inherited. If it is not set by yourself, it will see if the parent has contenteditable.

Details: although the attribute cannot be edited without writing it, then if other elements are nested inside, and then the attribute value of the element is set to false, it just means that the content of the element cannot be modified, and then it can actually be deleted as a whole with its element name

Name: monkey

Gender: Draggable

Draggable-dragged or virtual, does not change the location of the element (you can do it yourself, using the next two drag events)

Compatibility: only chrome and safari can be used normally, but not under Firefox

A tag img tag is draggable by default

Since you can drag and drop, there is a drag event.

Life cycle of drag and drop

Dragging from press to start is called drag, and then drag, when released, the drag ends

Drag and drop to start

Drag and drop in progress

Drag and drop end

The composition of dragging

A dragged object.

Target area

The object being dragged and its life cycle

You can know the location of the element at any time through the following three events

ClientY: y-axis position of the mouse

Var oDragDiv = document.getElementsByClassName ('a') [0]; / / trigger oDragDiv.ondragstart = function (e) {console.log (e);} / / trigger many times oDragDiv.ondrag = function (e) {console.log (e)} / / trigger oDragDiv.ondragend = function (e) {console.log (e) at the end of the movement.

For all tag elements, when the drag cycle ends, the default event is to go back to the same place

Events are triggered by actions, but a behavior can trigger more than one event

For example, keyboard and mouse lifting triggers both onclick and onmouseup.

The moment the drag event was released, the ondragover ondrop was triggered.

However, after the default ondragover is executed, the default event is to return to the original place, so the ondrop event will not be triggered

Ondragover-> go back to the same place

-> execute the drop event

Chain of responsibility model:

A-> B (Block)-> default event

Block the default event, e.preventDefault ()

The target area of the dragged object (end element)

/ / 1. The event triggered by the image just after entering the target area is triggered by oDragTarget.ondragenter = function (e) {/ / is not triggered by the entry of the figure of the element, but is triggered by dragging the mouse. If there is a figure in the component that is triggered as soon as it enters, it is calculated. At the beginning, we can know the distance of the mouse relative to the edge of the figure. Then calculate console.log (e) like this } / / keep triggering / / 2. When the graph enters the target area, it will be triggered continuously as long as the coordinates change, which is a bit like the ondrag event oDragTarget.ondragover = function (e) {console.log (e);} / 3. This event indicates that after the graph enters the target area, the triggered event oDragTarget.ondragleave = function (e) {console.log (e);} / / 4. Event triggered when dragging and dropping (letting go) / / because all ondragover default when the drag cycle ends (when letting go), the default event will be triggered-back to the original place, so when using the ondrop event, you need to block the default event e.preventDefault () oDragTarget.ondrop = function (e) {console.log (e);} / the drag event occurs before the ondragend.

Little demo exercises

Supplementary attribute datatransfer

The pointer changes when dragging and entering the target area.

This property is not commonly used because of poor compatibility and is only supported in chrome

Inherited from Object MOuseEvent object-> mouse event

In fact, it's just an extra attribute.

E.dataTransfer

This property must be set in ondragevent, but when displayed, the pointer changes after entering the target area

E.dataTransfer.effectAllowed = 'link'

E.dataTransfer.dropEffect = 'link'

Type is link copy move copyMove linkMove all

Try to be more semantic when using tags

H6 has added a lot of semantic tags

The following tags only have semantics and are essentially no different from p

Header

Top of the page

Footer

Bottom of the page

Nav

Navigation bar

Article

Articles-can be directly quoted and taken away, such as the content of a blog post

Section

Paragraph structure-not a complete one

In actual development, the distinction between section and article is not particularly careful.

Aside

Sidebar-the place next to the text

Canvas tag

Features: to give the size of the artboard, you must add styles between lines instead of using css rendering styles

Canvas is to use js to manipulate the canvas element of something, which is itself a canvas and needs to be combined with js to draw.

Specification, it is recommended to add ctx.beginPath () before each stroke, that is, to add ctx.beginPath () before each ctx.moveTo (x, y).

1. Brush

Var ctx = canvas.getContext ('2d')

a. Planning path

Starting point: ctx.moveTo (x, y)

Where to draw from: ctx.lineTo (x, y)

b. Trace line

Ctx.stroke ()

c. Method

Ctx.closePath (); close the path, go back to the starting point-only for one stroke of the drawing

Ctx.fill (); filled area, does not require stroke,fill to automatically stroke, the default is the line from the start point to the end point (it is easy to see by drawing an arc)

Change the thickness of the brush line to numpx

Ctx.lineWidth = num

The figures drawn with the same stroke are of the same thickness.

Reopen a path

Ctx.beginPath ()

And start a new moveTo and lineTo.

2. Draw a rectangle

Note: the following drawing does not need to use moveTo () to indicate the starting point, because the startX, startY of the rect () method already indicates the starting point

Drawing method 1

Ctx.rect (startX, startY, length, height)

Ctx.stroke ()

Drawing method 2

Hollow rectangle

Ctx.strokeRect (startX, startY, length, height)

Drawing method 3

Solid rectangle

Ctx.fillRect (startX, startY, length, height)

Ctx.clearRect (startX, startY, length, height); / / clear the graphics in the specified area

Center (x, y), radius ®, Radian (start Radian, end Radian), Direction (counterclockwise)

Fill in 0 clockwise and 1 counterclockwise

The zero degree angle of canvas is the same as in mathematics.

The starting and ending radians are calculated clockwise by default.

90 °= pi / 2

Ctx.arc (x, y, r, radStart, radEnd, direction); var canvas = document.getElementById ('can'); var can = canvas.getContext (' 2d'); can.arc (100,100,50,0, Math.PI * 1.5,1); can.fill ()

4. Fillet

Of course, a rounded rectangle can be drawn with four lines + four 90 °arcs, but there is an easier way to draw only four strokes

Var canvas = document.getElementById ('can'); var can = canvas.getContext (' 2d'); can.moveTo (100,120); can.arcTo (100,300,300,20); can.arcTo (300,300,100,20); can.arcTo (300,100,100,20); can.arcTo (100,100,300,20); can.stroke ()

5. Bezier curve

Need to specify the starting point moveTo (x, y)

Secondary: quadraticCureTo (x1, y1, x2, y2)

Three times: bezierCurveTo (x1, y1, x2, y2, x3, y3)

/ / 4. Bezier curve var canvas = document.getElementById ('can'); var can = canvas.getContext (' 2d'); can.beginPath (); can.moveTo (100,100); / / quadraticCurveTo () can.bezierCurveTo (200,200,300,200,400,100); can.stroke ()

6. Translation, rotation and scaling of canvas coordinates

Rotate by default according to the dots of the canvas

Coordinate system can be translated according to can.translate ().

Can.translate (x, y)

Then if you rotate, it will rotate according to the new center (x, y).

Can.translate (x, y); / / globally active can.rotate (rotation radians); / / globally active can.scale (horizontal scaling, vertical scaling) / / calculation method: the x and y of each coordinate point are multiplied by the corresponding scaling value

Because the translation of the coordinate system and the rotation of the shape work globally, after setting once, the newly drawn graphics will stroke according to the conditions after changing the coordinate system and rotating the shape. If the later drawing still wants to be the same in the stroke, you need to save the following before changing the coordinate system and rotation, and then restore it, just like an interruption, protecting the scene-restoring the scene.

Can.save ()

Can save coordinate system translation data, zoom data, rotation data

Can.restore ()

7. Background filling

Can.fillStyle = 'color'var img = new Image (); img.src =' 'turn the picture into a texture and fill it with var bg = can.createPattern (img,' no-repeat'); img.onload = function () {}

By default, the picture is filled with the origin of the coordinate system of the canvas box. If you want to change the position of the background picture, you need to use can.translate (newX, newY).

8. Color gradient function

LinearGradient (direction, color1 position, color2)

RadialGradient (shape radius at position, color1, position, color2, position...)

Var canvas = document.getElementById ('can'); can = canvas.getContext (' 2d'); can.beginPath (); var bg = can.createLinearGradient (0,0200,200); bg.addColorStop (0, 'white'); bg.addColorStop (1,' black'); / / the first number can only be from zero to 1, the concept of percentage can.fillStyle = bg;// radiation gradient-find var bg = ctx.createRadialGradient in chrome favorites (x1, y1, R1, x2, y2, R2) / / gradual radiation from the edge of the start circle to the edge of the end circle / / the starting circle and the end circle can be different when the center of the start circle is larger than the end circle, the outside color is the color of the start circle, and when the end circle is larger than the start circle, the color of the outside world is the color of the end circle.

9. Shadow

Notice that the shadow is half on one side.

Ctx.shadowColor = 'blue'

Ctx.shadowBlur = num

Ctx.shadowOffset = num1

Offset of shadows in x and y directions

Ctx.shadowOffsetX = num2

Ctx.shadowOffsetY = num3

10. Canvas rendered text

Ctx.strokeText ('content', x, y); text stroke

Ctx.fillText ('content', x, y)

You can set the format text fill by setting fillStyle

Ctx.font = '20px Georgia' both fillers can be set to font

StrokeText for solid characters and fillText for hollow characters

11. Line end style

Ctx.stroke ()

Synthesis properties of canvas

Ctx.beginPath (); ctx.fillStyle = 'red';ctx.fillRect (100,100,100,100); ctx.globalCompisiteOperation =' lighter';ctx.beginPath (); ctx.fillStyle = 'green';ctx.arc (300,300,100,0, Math.PI * 2); ctx.fill (); SVG

Svg: vector graphics (zooming in without distortion, suitable for large areas of mapping, usually less or simpler animation)-draw with elements and css

Canvas: suitable for small area drawing, suitable for animation-drawing with js

All closed graphics are inherently full and effective by default in svg.

Ployline is filled by default. If the filling is removed, it will not be connected from end to end.

Ploygon is also populated by default. If the filling is removed, it will be connected from end to end.

.line1 {stoke:black;} .line2 {stroke:red; stroke-width:2px;} ployline {fill:transparent; / * not populated with * / stroke:blueviolet; / * closed * / stroke-width:3px / * after the line becomes thicker, only the middle of the line is the original position, and then the width spreads to both sides, the inside half, the outer half * / stroke-opacity:0.5;/* border transparency * / fill-opacity:0.5;/* fill transparency * / stroke-linecap:round / * square butt adds an extra length * / stroke-linejoin:round/*bevel,miter the state of two lines when they intersect * /} ploygon {fill:transparent; stroke:black;} text {stroke:blue; stroke-width:3px;} TEXT

Attributes:

Stroke-opacity: border transparency

Fill-opacity: fill transparency

Stroke-linecap: the cap at the end of the line, square,round-> extra length

Stroke-linejoin: the style of two lines when they intersect, the same as canvas

Path Arc drawing

Two points, with a known radius, can determine two circles or ellipses

SVG linear gradient example, you need to define the gradient in advance and use url to introduce texture

>

Stroke-dasharray:arr1 px, arr2 px...

Stroke-dashoffset: specifies that the fill moves a certain distance to the left

ViewBox: the scale, which represents the scale of the svg area, has four parameters, the first two parameters represent the starting point, and the last two parameters represent the ratio of the x direction and the y direction, respectively, and compare them with the original length and width

Amap just used svg.

Audio and video

Controls

Video

Paused attribute: determines whether the video is paused

Play () method: video playback method

Pause () method: video pause method

Duration attribute: the total number of seconds of the video

CurrentTime attribute: the number of s in which the video has been played

PlaybackRate attribute: adjust rate

Volume attribute: controls the volume from 0 to 1. Default is 1.

Document.documentElement.requestFullScreen ()-> enters full screen mode, which is equivalent to F11

Only if the video in the http protocol has the attribute Content-Range, can we set the time to jump. If only content-type and content-length, the video will start playing again.

This is the end of the content of "what are the newly added attributes and elements in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.