开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

一、html5 head 标签

(一).html lang 属性

以前我们常用的是 <html lang="zh-CN"> 或简写的 <html lang="zh">，但实际上 W3 language tags 推荐使用 zh-Hans 简体中文、zh-Hant 繁体中文，可以提高一致性和准确。

(二).meta 标签

1.声明文档使用的字符编码
- <meta charset="utf-8"> 用于 HTML5
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 用于 HTML4 或者 XHTML 或用于过时的 dom 解析器
通常我们会使用短的。实际上，在 HTML5 中，以上两种是等价的，只是短的更容易被记住。更多对比见 stackoverflow

2.优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

3.360 使用 Google Chrome Frame

<!-- 如果没有安装 GCF(Google Chrome Frame)，使用最高版本的IE内核渲染 -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

具体详情见 360 浏览器内核控制

<!-- 强制使用webkit渲染 -->
<meta name="renderer" content="webkit"> 
<meta name="force-rendering" content="webkit">

4.百度禁止转码在使用百度移动搜索时，百度会自动将网站进行转码，添加一些烦人的广告，如果我们不做百度广告，是可以通过 meta 标签禁止网站被转码

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 表示页面同时适合在移动设备和PC上进行浏览 -->
<meta name="applicable-device" content="pc,mobile">

5.SEO 优化

页面标题 title

<title>your title</title>

页面关键词 keywords

<meta name="keywords" content="your keywords">

页面描述内容 description

<meta name="description" content="your description">

定义网页作者 author

<meta name="author" content="author,email address">

定义网页搜索引擎索引方式 SEO--Robots

<meta name="robots" content="index,follow">

6.为移动设备添加 viewport,可以让布局在移动浏览器上显示的更好
```
<meta
    name ="viewport"
    content ="
        width=device-width,
        initial-scale=1.0,
        maximum-scale=3.0,
        minimum-scale=1.0,
        user-scalable=no
    "
>
```
width=device-width 会导致 iPhone5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

注意： minimal-ui iOS8 中已经删除

7.ios 设备

添加到主屏后的标题（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="标题">

是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

<meta name="apple-mobile-web-app-capable" content="yes"/>

设置状态栏的背景颜色

<!-- 在 "apple-mobile-web-app-capable" content="yes" 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 参数

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。
    如果设置为 default 或 black ,网页内容从状态栏底部开始。
    如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

<meta name="format-detection" content="telephone=no" />
<!-- 电话号码、邮箱 -->
<meta name="format-detection" content="telephone=no,email=no" />

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta
    name="apple-itunes-app"
    content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
>

content 属性可以传三个参数，以逗号隔开:

app-id(必选) 填写应用在APPStrore的ID 
affiliate-data(可选) 是iTunes 分销联盟计划的ID 一般用不到。
app-argument（可选）点击『打开』给APP传参数

8.关闭 chrome 浏览器下翻译插件

<meta name="google" value="notranslate" />

9.去除手机半透明背景
- ios 点击链接，会出现一个半透明灰色遮罩
```
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
```
- android 点击链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可以做一下设置去除部分机器自带的效果
```
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
```
- windows phone 系统，点击标签产生的灰色半透明背景，添加 meta 标签去除
```
<meta name="msapplication-tap-highlight" content="no">
```
注意：部分机型可能去除不了，如果是按钮，可以避免使用 a、input，使用 div 代替

10.刷新浏览器 content -- 时间;网址

<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com">

11.强制竖屏与全屏 landscape -- 横屏;portrait -- 竖屏

<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

12.应用模式

<!-- UC应用模式:默认全屏，禁止长按菜单，禁止手势，标准排版，强制图片显示 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

browsermode 作用：

<!-- UC使用适屏模式显示 -->
<meta name="layoutmode" content="fitscreen">
<!-- UC强制图片显示 -->
<meta name="imagemode" content="force">
<!-- UC禁止夜间模式显示 enable|disable -->
<meta name="nightmode" content="disable">
<!-- UC当页面有太多文字时禁止缩放 -->
<meta name="wap-font-scale" content="no">

13.UC排版模式

UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。
```
<meta name="layoutmode" content="fitscreen|standard">
```

14.cookie 设定指定时间后删除

<!-- Set-Cookie(cookie设定):如果网页过期，那么存盘的cookie将被删除 GMT格式 -->
<meta
    http-equiv="Set-Cookie"
    content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"
>

(三).参考链接

二、开发 HTML5 小游戏

Html5小游戏

在介绍小游戏之前，先看一个框架 Phaser。 Phaser 框架是一个快速、免费且开源的 HTML5 游戏开发框架，它提供了 Canvas 和 WebGL 两种渲染方式，兼容 PC 端与移动端浏览器。

(一).Phaser 版本

在启动 Phaser 游戏前，需要定义一个 Phaser.Game 对象实例，并同时将配置信息传至该实例：var game = Phaser.Game(config)。在 Phaser2 版本中，定义的是一个全局变量，并作为几乎全部的系统或者场景的入口。但升级至 Phaser3 版本之后，不再使用全局变量来存储游戏实例了。

Phaser2 版本之前

// Phaser.Game(
//     width,
//     height,
//     renderer,
//     parent,
//     state,
//     transparent,
//     antialias,
//     physicsConfig
// );
Phaser.Game(800, 600, 'Phaser.AUTO', 'game');

Phaser3 版本之后

const config = {};
Phaser.Game(config);

(二).游戏配置 config

const config = {
    type: 'Phaser.AUTO',
    title: "Starfall",
    width: 800,
    height: 600,
    parent: "game",
    backgroundColor: "#18216D",
    scene: [WelcomeScene, PrizeScene, GameScene, ScoreScene],
    transparent: false,
    antialias: true,
    loader: {
        baseURL: 'https://raw.githubusercontent.com/wqjiao/phaser-prize/master/', // 资源基本地址
        crossOrigin: 'anonymous'
    }
    physics: {
        default: "arcade",
        arcade: {
            debug: false
        }
    },
}

1.type 游戏使用的渲染环境可选值： Phaser.AUTO、Phaser.WEBGL、Phaser.CANVAS 推荐值： Phaser.AUTO 自动尝试使用 WebGL，如果浏览器或设备不支持，它将回退为 Canvas 父节点： Phaser 生成的画布元素 canvas 将径直添加到文档中调用脚本的那个节点上，也可以在游戏配置中指定一个父容器 parent。
2.title 游戏界面标题
3.width、height Phaser 生成的画布尺寸，即游戏界面的分辨率默认：width -- 800、height -- 600
4.parent 自定义 Phaser 生成画布(游戏界面)的父容器
5.backgroundColor 游戏界面的背景颜色，Phaser3 版本配置项

6.scene 游戏场景

单场景

const config = {
    scene: {
        preload: preload, // 预加载
        create: create, // 生成游戏界面
        update: update, // 更新游戏界面
    },
}

多场景

// 游戏配置
const config = {
    scene: [welcomeScene, gameScene],
}
// 场景1
let welcomeScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize: function welcomeScene() {
        Phaser.Scene.call(this, {key: 'welcomeScene'});
    },
    // 预加载资源
    preload: function () {
        this.load.image('wheel', 'assets/wheel.png');
    },
    // 生成游戏界面
    create: function () {
        // 游戏界面跳转
        this.input.on('pointerdown', function () {
            this.scene.start('gameScene');
        }, this);
    },
    // 更新游戏界面
    update: function () {
        console.log('update')
    },
});
// 场景2
let welcomeScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize: function gameScene() {
        Phaser.Scene.call(this, {key: 'gameScene'});
    },
    // 预加载资源
    preload: function () {
        this.load.image('pin', 'assets/pin.png');
    },
    // 生成游戏界面
    create: function () {
        // 游戏界面跳转
        this.input.on('pointerdown', function () {
            this.scene.start('welcomeScene');
        }, this);
    },
    // 更新游戏界面
    update: function () {
        console.log('update')
    },
});

以上是 Phaser3 版本的配置，但是在 Phaser2 版本中的场景设置是放在 States 中的：

var game = new Phaser.Game(240, 400, Phaser.CANVAS, 'game');

game.States = {};

game.States.preload = function() {
    this.preload = function() {
        game.load.image('wheel', 'assets/wheel.png');
        game.load.image('pin', 'assets/pin.png');
    };
    this.create = function() {
        // 点击画布 -- 场景跳转
        game.input.onDown.add(function () {
            game.state.start('main');
        }, this);
    };
};
game.States.main = function() {
    this.create = function() {};
    this.update = function() {};
};

7.transparent 是否设置游戏界面为透明，默认 false，Phaser2 版本配置项
8.antialias 是否显示图片抗锯齿，默认 true
9.loader 表示加载器 baseURL -- 资源的基础地址
10.physics 游戏物理引擎配置

(三).Phaser API

以下分三个阶段(preload、create、update)做 Phaser3 API 的介绍

1、preload

preload 表示预加载函数，通过调用 Phaser 中的 Loader 加载器预先加载所需要的各种资源图片、视频、雪碧图等。

function preload () {
    this.load.setBaseURL('https://raw.githubusercontent.com/wqjiao/phaser-prize/master/');
    this.load.setCORS('anonymous');
    this.load.setPath('assets/');
    this.load.image('sky', 'sky.png');
    this.load.spritesheet('dude', 'dude.png', { frameWidth: 32, frameHeight: 48 });
    this.load.image('btnStart', 'assets/btn-start.png');
}

this.load.setBaseURL(basePath) 修改服务器基本路径 basePath -- 基本路径地址(资源位置的服务器地址),如果所有场景的图片路径均一致，可以在 config 的加载器 loader 中预先配置但是本地运行时，需要注意环境搭建，可以在本地搭建一个服务，或者资源放在远程服务。
this.load.setCORS([crossOrigin]) 设置加载文件时使用的跨源资源共享值
this.load.setPath('assets/') 设置资源路径，与 this.load.setBaseURL(basePath) 类似
this.load.image(key, [url]) 预加载图片 key -- 表示资源的key，这个字符串是一个链接，指向已加载的资源，在生成游戏对象中使用。 url -- 表示图片路径
this.load.spritesheet(key, [url], [frameConfig], [xhrSetting]);

this.load.spritesheet({
    key: 'bot',
    url: 'images/robot.png',
    frameConfig: {
        frameWidth: 32,
        frameHeight: 38,
        startFrame: 0,
        endFrame: 8
    }
});

key -- 雪碧图的key url -- 雪碧图路径 frameConfig -- 框架配置对象，至少有一个icon的宽高属性 frameWidth、frameHeight xhrSetting -- XHR设置配置对象。用于替换加载器的默认XHR设置，不常用。

this.load.audio(key, [urls]) 预加载音频
this.load.bitmapFont(key, [url]) 预加载字体图像文件

this.load.bitmapFont({
    key: 'goldenFont',
    textureURL: 'images/GoldFont.png',
    fontDataURL: 'images/GoldFont.xml'
});

textureURL -- 加载字体图像文件的绝对或相对 URL fontDataURL -- 加载字体 xml 数据文件的绝对或相对 URL

2、create

create 表示生成/创建函数，生成游戏对象，比如在 preload 函数中预加载的图片，在该函数中生成显示在画布中

function create () {
    let sky = this.add.image(400, 300, 'sky');
    sky.setOrigin(0, 0);
    let dude = this.add.sprite(32, 48,'dude');
    let imgText = this.add.text(60, 70, '');
    this.add.button(200, 300, 'btnStart', function () {
        this.scene.start('GameScene');
    }, this);
}

this.add.image(x, y, [key]) 添加图像 x,y -- 图像坐标；key -- 在 preload 中预加载图片的key 注意：图片的添加顺序是有层叠性的
this.add.sprite(x, y, [key]) 添加雪碧图 x, y -- 图像坐标；key -- 在 preload 中预加载图片的key 注意：可以设置动画 this.anims.create([config])

// 向左走
this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});
// 转身
this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});
// 向右走
this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

setOrigin(originX, originY) 设置图像的原点位置 (0, 0) || (0) -- 图像左上角 (0.5, 0.5) || (0.5) -- 图像中心在 Phaser2 版本中使用 anchor 锚点做设置 anchor.set(0.5)
this.add.text(x, y, [text]) 添加文本内容 x,y -- 文本坐标；text -- 文本内容注意：可以通过 imgText.text = '测试文本' 设置文本内容
this.add.button(x, y, [key], function () {}, this) 添加按钮
this.input.on('pointerdown', function () {}, this) 点击画布
this.scene.start([scene]) 场景跳转 scene -- 场景名称

3、update

update 表示更新函数，聚焦画布市，即可执行该函数

meta与html5小游戏小记