2018.1.11
实践是最好的老师，在学习阶段通过分析一部成型的作品来了解一门语言的运作方式不失为理解这门语言的一种方法。
这里我们选择分析HTML5版的切水果游戏来进一步了解HTML5和JavaScript。
先看html文件的代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="description" content="A simple HTML5 Template"><meta name="author" content="dron"><meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="images/index.css"><title>水果忍者HTML5网页版在线游戏</title></head><body><div id="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><canvas id="view" width="640" height="480"></canvas><div id="desc"><div style="text-align:center;clear:both;"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script></div> ???<div>水果忍者网页版，由<a href="http://weibo.com/baidujs" target="_blank">百度 JS 小组</a>倾情提供</div> ???<div id="browser"></div></div><script src="scripts/all.js"></script></body></html>
一、meta标签
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
在上面的代码里面，meta元素的charset 属性规定了 HTML 文档的字符编码为UTF-8。
meat标签的name属性语法格式是：＜meta name="参数" content="具体的参数值"＞ 。
具体来说：description用来告诉搜索引擎你的网站主要内容，author标注网页的作者。
viewport标记用于指定界面大小属性：width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。initial-scale和maximum-scale指令分别用于设置Web页面的初始缩放比例和用户对Web页面缩放比例的限制。
二、link标签
<link> 标签定义文档与外部资源的关系，href 属性规定链接的目标。其中rel 属性规定当前文档与被链接文档之间的关系。
shortcut icon,特指浏览器中地址栏左侧显示的图标，一般大小为16x16，后缀名为.icon；
icon，指的是图标，格式可为PNG\GIF\JPEG，尺寸一般为16x16、24x24、36x36等。
stylesheet指文档的外部样式表。
三、后面几个标签
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<em> 标签是一个短语标签，用来呈现为被强调的文本。
canvas 元素用于在网页上绘制图形。
style定义文本样式信息。text-align 属性规定元素中的文本的水平对齐方式。clear：both则指定在段落左右两侧均不允许浮动元素。
script src链接一个外部脚本文件。其实这里的type="text/javascript"完全可以省略，因为JavaScript 已经是所有现代浏览器以及 HTML5 中的默认脚本语言。
HTML日记——试着解剖HTML5版切水果小游戏（1）
原文地址：https://www.cnblogs.com/east1994/p/8270689.html