# #总结
-From this two-day course, I learned that a simple chronicle of HTML, as well as the most beneficial tagging semantics, is easy to SEO and friendly to blind devices. Also know rage Flash why will be defeated by HTML5.
-HTML5 has added a lot of features and labels, especially the canvas and Svg,video features are also very bright eyes. Actually can write things according to the method, but feel still very unfamiliar, calculate coordinates and so on can not quickly reflect. -but these two days, learn a lot to realize the needs of thinking and skills, every night after the completion of homework will write their own, pondering.
-Create a folder, for example, to put functions that may be reused frequently-flexible analysis of different needs using a combination of methods to achieve the effect (bubble object, the SVG code string splicing and so on)-need to develop a habit of extrapolate thinking, Analysis of the essence of a better way to summarize the solution (such as through the analysis of commonly used methods to generate random numbers, to summarize a formula, you can encapsulate a random number function arbitrary use)-if the above techniques are used properly, can greatly improve the code efficiency * * *
# #html编年史
-HTML4 (earliest)-XML (Strict specification)-XHTML 1.0 (Follow XML specification) 1.1 (lower spec, transition version)-HTML5-WHATWG (organization, formulation HTML5, finally back to the book)
# #标签
-Semantic-facilitates SEO-friendly to blind devices
# # Flash (Adobe)-Defeated by HTML5 (Steve Jobs)
# #新增
-Video-controls Special properties, Display control button-Redio
# # Canvas
-Canvases Canvas label-Brushes: Pen=getcontext ("2d")
-Example-Rectangle-pen.fillstyle= "red";-pen.fillrext ()//x, Y, H, W
-pen.strokestyle= "Blue"-pen.strokerect ()//
-Arc (50,110,50,0,2* Math.PI)
-Method
-. Fill fill-Stroke path-beginpath Restart path-colsepath-plot ' let Img=new Image (); img. Src= "Image/1.jpg"; Let Cs=document.getbyid ("CS") Let Ctx=cs.getcontext ("2d"); Img.onload=function () {ctx.rotate (math.pi/180 * 10); Rotate 10 degrees ctx.drawimage (img,0,0,200,200); } '-By default, rotation is rotated around 00 points in the upper-left corner-note that picture loading is asynchronous, or other on
-CTX. Translate (100,100) Change the origin of the canvas (rotation)-the Restore method (does not affect the subsequent elements)-ctx.save (); Save current state-Resotore (), back to original state-scle-Erase drag-clearrect (0,0,800,600), back parameter integer A canvas (Rectangle)
#SVG # #图片分类-vectors: By algorithm calculation, the vector image method is reduced without distortion and can not be very realistic color. Application scenarios: design, architectural drawings.
-Bitmap: Color is rich and realistic, but distorted. Application scenarios: Games, other ...
# #拖拽 drag over to use E.preventdefalut (); Block default behavior
OnDrop to appear.
***
# #本地存储-cookie HTML5 Previous translations/Dim Sum-Save the server's message to the browser-accurate push-problem-size limit, cannot exceed 4KB 4000 English, 2000 Chinese-security issues-L Ocalstorage Permanent-sessionstorage session (open a browser, close)
-access method, local storage server, the difference is the storage time-the stored data will be converted into a string-note: Before the deposit into a string-method: Json.stringify ([11,23,47,20])//array to JSON- Methods: Json.parse (); JSON to Array
HTML5, canvas, SVG
