Home > Developer > Web Develop
2018.1.11
Practice is the best teacher, in the learning stage through the analysis of a molded work to understand the workings of a language is a way to understand the Language.
Here we choose to analyze the HTML5 version of the cut fruit game to learn more about HTML5 and Javascript.
First look at the code of the HTML file:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "utf-8"><Metaname= "description"content= "A simple HTML5 Template"><Metaname= "author"content= "dron"><Metaname= "viewport"content= "width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"><Metaname= "apple-mobile-web-app-capable"content= "yes"><Metaname= "apple-mobile-web-app-status-bar-style"content= "black"><Linkrel= "shortcut icon"href= "/favicon.ico"><Linkrel= "stylesheet"href= "images/index.css"><title>Fruit Ninja HTML5 Web version online game</title></Head><Body><DivID= "extra"></Div><em>--Fruit Ninja--</em><em>The game is developed by the Baidu JS team,</em><em>We provide the source in Git:https://github.com/chinesedron/fruit-ninja</em><em>Follow me on Weibo http://weibo.com/baidujs</em><em>or learn more, to see http://tangram.baidu.com</em><CanvasID= "view"width= "640"Height= "480"></Canvas><DivID= "desc"><Divstyle= "text-align:center;clear:both;"><Scriptsrc= "/gg_bd_ad_720x90.js"type= "text/javascript"></Script><Scriptsrc= "/follow.js"type= "text/javascript"></Script></Div> <Div>Fruit Ninja Web edition, by<ahref= "http://weibo.com/baidujs"Target= "_blank">Baidu JS Group</a>The portrait offers</Div> <DivID= "browser"></Div></Div><Scriptsrc= "scripts/all.js"></Script></Body></HTML>first, META Tags
The <meta> element provides meta-information about the page (meta-information), such as descriptions and keywords for search engines and update frequency.
The <meta> tag is located in the header of the document and does not contain any Content. The properties of the <meta> tag define the Name/value pairs associated with the Document.
In the above code, the CharSet attribute of the META element specifies that the character encoding of the HTML document is UTF-8.
The syntax format for the Name property of the meat tag is:
Specifically: description is used to tell the search engine the main content of your website, author the author of the Page.
The viewport tag is used to specify the interface size properties: the width and height directives specify the logical width and height of the viewport, respectively. Their value is either a number in pixels or a special marker Symbol. The width directive uses the device-width tag to indicate that the viewport width should be the screen width of the device. A similar height instruction uses the DEVICE-HEIGHT flag to indicate the viewport height for the Device's screen height.
The user-scalable instruction specifies whether the user can scale the viewport, that is, the view of the Web Page. A value of Yes allows the user to scale when no value is Allowed. The Initial-scale and Maximum-scale directives are used to set the initial scale of the Web page and the User's limit on the scale of the Web Page.
second, Link LabelThe <link> tag defines the relationship of the document to the external resource, and the href attribute specifies the target of the Link. Where the rel attribute specifies the relationship between the current document and the linked Document.
Shortcut icon, in particular, displays the icons to the left of the address bar in the browser, typically 16x16, with the suffix. icon;
icon, refers to the icons, the format can be png\gif\jpeg, the size is generally 16x16, 24x24, 36x36 and so On.
Stylesheet refers to the external style sheet of the Document.
third, the following several labels<div> defines a partition or section (division/section) in a Document.
<div> tags can divide documents into separate, different parts. It can be used as a strict organizational tool and is not associated with any format.
The <em> tag is a phrase tag that is used to render the highlighted Text.
The canvas element is used to draw graphics on a web Page.
Style defines text style Information. The Text-align property specifies the horizontal alignment of the text in the Element. Clear:both specifies that floating elements are not allowed on the left or right sides of the Paragraph.
Script src Links an external script file. In fact, the type= "text/javascript" can be omitted altogether, because JavaScript is already the default scripting language in all modern browsers and HTML5.
HTML Diary--try to dissect the HTML5 version of cut fruit games (1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
