平时开发你可能只用一个meta标签，而不了解meta其他的功能，其实，一个好的meta设计可以大大提高你的网站被搜索到的可能性！

简单了解

Refresh （刷新）不推荐使用

用法：

1
<Meta http-equiv="Refresh" Content="时间（s）;url=网址">

说明：让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。

Expires （期限）

用法：

1
<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。

注意：必须使用GMT的时间格式，或直接设为0（数字表示多少时间后过期）。

Window-target （显示窗口的设定）

用法：

1
<Meta http-equiv="Widow-target" Content="_top">

说明：强制页面在当前窗口以独立页面显示。

注意：这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent

那些年meta中的name

Keywords (关键字)

用法：

1
<Meta name="Keywords" Content="关键词1,关键词2，关键词3,关键词4,……">

注意：各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个META元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。

Description (简介)

用法：

1
<Meta name="Description" Content="你网页的简述">

说明：Description用来告诉搜索引擎你的网站主要内容。

Robots (机器人向导)

用法：

1
<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">

注意：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)

index：文件将被检索；（让robot/spider登录）

follow：页面上的链接可以被查询；

noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)

nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

Author (作者)

用法：

1
<Meta name="Author" Content="张三，abc@sina.com">

注意：Content可以是：你或你的制作组的名字,或Email

Copyright (版权)

用法：

1
<Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">

Generator (编辑器)

用法：

1
<Meta name="Generator" Content="PCDATA|FrontPage|">

注意：Content=”你所用编辑器”

这里是我感觉需要知道的，有可能遇到的，如果满足不了你的需求，你可以继续搜索meta。。。。

什么是CSS hack?

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

以下是引自百度文库的定义:

简单地讲，css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。

注意：我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器（chrome）、火狐（Mozilla Firefox）即可，至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核，所以只需要兼容以上浏览器即可兼容TT\傲游浏览器。

CSS hack解决问题

CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题，如margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：.kwstu{margin-left:20px;_margin-left:20px;}。

浏览器识别字符标准对应表

从上图可以分析出以下几种情况：

1.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2.    \9    ：所有IE浏览器都支持
3.    _和-  ：仅IE6支持
4.    *     ：IE6、E7支持
5.    \0    ：IE8、IE9支持，opera部分支持
6.    \9\0  ：IE8部分支持、IE9支持
7.    \0\9  ：IE8、IE9支持

各种CSS hack情况介绍

1.区别IE和非IE浏览器

1
2
3
4
#tip{ 
background:blue;/*非IE背景蓝色  因为所有浏览器都能解释*/ 
background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别，覆盖上面样式 IE10跟11应该不识别，IE11测试确定*/ 
}

2.区别IE6,IE7,IE8,FF

【区别符号】：“\9”、“*”、“_”

1
2
3
4
5
6
#tip{ 
	background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/ 
	background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/ 
	*background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/ 
	_background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/ 
}

【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。

3.区别IE6、IE7、Firefox(方法1)

【区别符号】：“*”、“_”

1
2
3
4
5
#tip{  
background:blue;/*Firefox背景变蓝色*/  
*background:black;/*IE7背景变黑色*/  
_background:orange;/*IE6背景变橘色*/  
}

【说明】：IE7和IE6可读「」(米字号)，IE6又可以读「」(底线)，但是IE7却无法读取「」，至于Firefox(非IE浏览器)则完全无法辨识「」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE6、IE7、Firefox(方法2)

【区别符号】：“*”、“!important”

1
2
3
4
5
#tip{  
background:blue;/*Firefox背景变蓝色*/  
*background:green!important;/*IE7背景变绿色*/  
*background:orange;/*IE6背景变橘色*/  
}

【说明】：IE7可以辨识「」和「!important」，但是IE6只可以辨识「」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox

【区别符号】：“*”、“!important”

1
2
3
4
#tip{  
background:blue;/*Firefox背景变蓝色*/  
*background:green!important;/*IE7背景变绿色*/  
}

【说明】：因为Firefox可以辨识「!important」但却无法辨识「」，而IE7则可以同时看懂「」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7(方法1)

【区别符号】：“*”、“_”

1
2
3
4
#tip{  
*background:black;/*IE7背景变黑色*/  
_background:orange;/*IE6背景变橘色*/  
}

【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「」(底线)，IE7却无法辨识，透过IE7无法读取「」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、IE7(方法2)

【区别符号】：“!important”

1
2
3
4
#tip{  
background:black!important;/*IE7背景变黑色*/  
background:orange;/*IE6背景变橘色*/  
}

【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

8.区别IE6、Firefox

【区别符号】：“_”

1
2
3
4
#tip{  
background:black;/*Firefox背景变黑色*/  
_background:orange;/*IE6背景变橘色*/  
}

【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSShack。

IE浏览器下hack总结

1
2
3
4
5
element{
color：#666\9； //IE8 IE9
* color：#999；   //IE7
_color:#EBEBEB； //IE6
}

可以看出，利用字符识别无法区分IE8和IE9，我们可以从伪类的识别来区分:

1
2
3
4
5
6
element{
color：#666\9；      //IE8
* color：#999；        //IE7
_color:#EBEBEB；      //IE6
}
:root element{color：#666\9;}//IE9

【说明】：“:root”伪类IE系列只有IE9支持，其他主流浏览器均支持，利用这一点来区分IE8和IE9。另外考虑到opera部分支持，完全支持:root,所以不使用。

其他主流浏览器css hack总结

1.Firefox浏览器：mozilla私有属性:

@-moz-document url-prefix(){ .element{color:#f1f1f1;}} //Firefox

2.Webkit和Opera:

1
2
3
4
5
6
7
8
9
10
@media all and (min-width: 0px){ .element{color:#777;} }
//Webkit
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.element{color:#444;}
}
//Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.element{color:#336699;}
}

兼容各大主流浏览器(最新版本)css hack汇总如下（最全的）：

1
2
3
4
5
6
7
8
9
10
11
.element{
color:#000;             /*w3c标准*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#666\9;           /*IE8*/
*color:#999;            /*IE7*/
_color:#333;            /*IE6*/
}
:root .element{color:#0f0\9;}  /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}}  /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

附录

浏览器内核:

一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。；

二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

由于需求限制出现了好多双核浏览器，比如傲游、枫树浏览器（ChromePlus）、搜狗高速浏览器

常用css3兼容

加前缀

-webkit- //代表safari、chrome私有属性

-moz- //代表firefox浏览器私有属性

-ms- //代表ie浏览器私有属性

-o- //欧朋

神魔都不加

例如：

1
2
3
4
5
6
7
.animatin{
	-webkit-animation-name: run;
	-moz-animation-name: run;
	-ms-animation-name: run;
	-o-animation-name: run;
	animation-name: run;
}

希望对你有所帮助

兼容性

H5不兼容IE 6 7 8使IE5,IE6,IE7,IE8兼容到IE9模式

在头部输入以下代码：

<!–[if lt IE 9]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
    <![endif]–>

h5之音视频

html5增加了音视频标签——video（视频）和audio（音频），可以在网页播放音频和视频。

音频示例：

<audio src="bgm.mp3" controls autoplay loop preload>
        <source src="audio.mp3" type="audio/mp3"/>
</audio>

视频示例：

<video src="video.mp4" controls width="300" 
    loop preload>
        <source src="video.mp4" type="video/mp4"/>
        <source src="video.rmvb" type="video/rmvb"/>
        <source src="video.avi" type="video/avi"/>
</video>

其中：

controls ： 显示控制台 （播放、快进按钮）
width：视频的宽度大小
autoplay：是否自动播放
loop：播放完成是否循环
preload：是否预加载（可以提高用户体验，但也比较耗费流量）

source 可以给音视频设置多种资源，以配置多的浏览器，type代表的是
    之中资源的格式。如果浏览器支持，就会根据这个资源的src路径去找。
    （提供不同样式的资源的时候，一定确保有这些格式的视频和音频）

表单

input的属性

autofocus 自动对焦 会自动选中当前的input，只有一个

placeholder 用户输入之前会在文本框里面添加占位字符，
给用户提示，当输入第一个字符后，占位字符会消失。增强用户体验

required 代表当前的元素是必填的

pattern 可以输入正则表达式，让用户按照表达式的要求输入内容

autocomplete 自动补全

form 设置元素属于那一个表单，即使这个元素没有写到表单里面，也可以生效

canvas

当然h5的canvas不能忘了，之前已经写过了，需要的可以去查看我的其他博客，可以点击分类→canvas进去查看。

php5.5以下的是用MySQL来连接（面向过程），5.5以上用mysqli来连接（面向过程/面向对象）

面向过程我的理解是要知道每一个过程，从细节思考，比如吃一道菜，你要知道它是怎么做的，用的什么调料，菜是从哪来的，怎么种的。。。
而面向对象是宏观的，只需要关注结果，而不是去主要关注过程，比如，给你一道菜你只要去吃就好了

然而对于php连接数据库只是方式的不同

MySQL只能面向过程，mysqli面向对象和过程都可以，下面主要讲下mysqli地面向过程、对象，MySQL的连接方式大家都很熟悉了把。。。

面向过程

连接数据库

$link = mysqli_connect("域名","用户","密码","数据库");

设置编码格式

第一种：

mysqli_query($link, "set names utf8");

第二种

mysqli_set_charset($link,'utf8');

书写SQL语句 增删改查

$sql="................"

执行SQL语句

$res = mysqli_query($link, $sql);

面向对象

连接数据库

$mysqli=new mysqli("域名","用户","密码","数据库");

设置编码格式

$mysqli->query("set names utf8");

书写SQL语句 增删改查

$sql="................"

执行SQL语句

$res=$mysqli->query($sql);

今天谈谈一些关于改善和优化PHP代码的提示和技巧。

主要是由封装函数思想，需要改变的地方可以设置变量，而不是一个字符串，说的可能不太清楚，等你遇到了。。。。也就明白了

不要使用相对路径，要定义一个根路径

require_once('../../xxx.php');

这种方法有很多缺点：

1.它首先搜索php包括路径中的指定目录，然后查看当前目录。因此，会检查许多目录。

2.当一个脚本被包含在另一个脚本的不同目录中时，它的基本目录变为包含脚本的目录。

3.另一个问题是，当一个脚本从cron运行时，它可能不会将它的父目录作为工作目录。

不使用require，包括require_once或include_once

你的脚本上可能会包括各种文件，如类库，实用程序文件和辅助函数等，就像这些：

require_once('../Database1.php');
require_once('../Database2.php');
require_once('../Database3.php');

这相当粗糙。代码需要更加灵活。写好辅助函数可以更容易地包含东西。举个例子：

function load_class($class_name)
{
$path = ....;//path to the class file

if(file_exists($path))
{
    require_once( $path ); 
}
}

说白了，有重复样式的就封装成一个函数，这样做可以完成很多事情：

1.为同一个类文件搜索多个目录。

2.轻松更改包含类文件的目录，而不破坏任何地方的代码。

3.使用类似的函数用于加载包含辅助函数、HTML内容等的文件。

不要在你的应用程序中gzip输出，让apache来做

考虑使用ob_gzhandler？不，别这样做。它没有任何意义。PHP应该是来写应用程序的。不要担心PHP中有关如何优化在服务器和浏览器之间传输的数据。

使用apache mod_gzip/mod_deflate通过.htaccess文件压缩内容。

改变应用程序创建的文件的权限

当在Linux环境下工作时，权限处理会浪费你很多时间。因此，只要你的php应用程序创建了一些文件，那就应该修改它们的权限以确保它们在外面“平易近人”。否则，例如，文件是由“php”用户创建的，而你作为一个不同的用户，系统就不会让你访问或打开文件，然后你必须努力获得root权限，更改文件权限等等。

// Read and write for owner, read for everybody else
chmod("/somedir/somefile", 0644);

// Everything for owner, read and execute for others
chmod("/somedir/somefile", 0755);

使用php过滤器验证数据

你是不是使用正则表达式来验证如电子邮件，IP地址等值？是的，每个人都是这样做的。现在，让我们试试一个不同的东西，那就是过滤器。

php过滤器扩展程序将提供简单的方法来有效验证或校验值。

PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。

如果出现乱码，需要给头部设置编码格式

header("Content-type:text/html;charset=utf-8");

echo 只能打印字符串或数字

关于变量

1.定义变量 用 $

$a='hello'; 

2.双引号里面会解析变量，单引号不能

$res1="$a";// 结果 hello
$res1='$a';// 结果 $a

php必知

1.$_POST 接受提交过来的post数据

2.$_GET 接受提交过来的get数据

3.$_REQUEST 接受post和get请求

4.echo LINE;…….显示当前行数

5.echo FILE;…….显示文件的当前位置

6.echo FUNCTION;…显示当前函数的函数名

7.echo CLASS;……显示类名

8.echo METHOD;…..显示类名下的方法名

9.字符串拼接用 .

10.print_r(PHP_OS);………系统名称

11.print_r(PHP_VERSION);….PHP版本号

文件的读取

1.fopen(“文件名”,”r”)

2.file(“文件名”)

3.file_get_contents(“文件名”)

文件写入

1.文本
file_put_contents(“文件名”, “写入内容”)

2.图片

$tempPath = $_FILES[‘img’][‘tmp_name’];图片路径
$newName = $_FILES[‘img’][‘name’];图片名
move_uploaded_file($tempPath, “图片路径/{$newName}”)

事件

个人认为JavaScript事件就是用来表现js行为的，下面说说js常用的事件

onclick 点击事件，顾名思义点击触发事件

onmouseover 鼠标移入事件，鼠标移入触发

onmouseout 鼠标移出事件，鼠标移出触发

onmousemove 鼠标移动事件，鼠标移动触发

onload 预加载，等所有都加载完成后，执行

onfocus 当元素被聚焦的时候触发

onblur 当元素失去焦点时触发

onpropertychange 文本内容实时改变触发 IE独有

oninput 文本内容实时改变触发 非标准，但支持效果较理想

onchange 文本内容发生改变，且失去焦点时触

视窗单位

浏览器窗口

innerWidth        浏览器窗口的宽

innerHeight        浏览器窗口的高

元素

offsetWidth        元素实际的宽度(包含边线)

offsetHeight    元素实际的高度(包含边线)

clientWidth        =width+padding    元素宽度(不包含边线)    
clientHeight    =height+padding    元素高度(不包含边线)

offsetParent    返回距离元素最近设置position，非static样式的元素节点，没有返回body的节点

offsetLeft    返回元素与offsetParent的横向距离

offsetTop    返回元素与offsetParent的竖直距离

scrollLeft        元素的横向滚动条移动的距离 可以读取 可以设置

scrollTop        元素的竖直滚动条移动的距离 可以读取 可以设置

scrollWidth         对象的实际内容的宽度，不包边线宽度

scrollHeight    对象的实际内容的高度，不包边线宽度

鼠标

clientx  鼠标距离窗口的宽   标准
clienty  鼠标距离窗口的高

offsetx  鼠标相对距离当前元素的宽  ie chrome支持
offsety  鼠标相对距离当前元素的高

都是平时用得到的，整理了一下，希望对你有所帮助。

你是不是在为写网页的时候碰到特殊字符而头疼，那么，接下来应该可以让你放松一下。。。。。

常见

第一个为命名实体，第二个为十进制编码

1
2
3
4
5
6
7
8
9
10
©		©		©
®		®		®
<		&lt;		&#60;
>		&gt;		&#62;
¥		&yen;		&#165;
←		&larr;		&#8592;
↑		&uarr;		&#8593;
→		&rarr;		&#8594;
↓		&darr;		&#8595;
•		&bull;		&#8226;

还有更多 总有你需要的

特殊符号        命名实体        十进制编码

大部分是数学、物理、字母字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
Α		Α		Α		
Β		Β		Β	
Γ		Γ		Γ
Δ		Δ		Δ	
Ε		Ε	Ε	
Ζ		Ζ		Ζ
Η		Η		Η	
Θ		Θ		Θ	
Ι		Ι		Ι
Κ		Κ		Κ	
Λ		Λ	Λ	
Μ		Μ		Μ
Ν		Ν		Ν	
Ξ		Ξ		Ξ	
Ο		Ο	Ο
Π		Π		Π	
Ρ		Ρ		Ρ	
Σ		Σ		Σ
Τ		Τ		Τ	
Υ		Υ	Υ	
Φ		Φ		Φ
Χ		Χ		Χ	
Ψ		Ψ		Ψ	
Ω		Ω		Ω
α		α		α	
β		β		β	
γ		γ		γ
δ		δ		δ	
ε		ε	ε	
ζ		ζ		ζ
η		η		η	
θ		θ		θ	
ι		ι		ι
κ		κ		κ	
λ		λ	λ	
μ		μ		μ
ν		ν		ν	
ξ		ξ		ξ	
ο		ο	ο
π		π		π	
ρ		ρ		ρ	
ς		ς	ς
σ		σ		σ	
τ		τ		τ	
υ		υ	υ
φ		φ		φ	
χ		χ		χ	
ψ		ψ		ψ
ω		ω		ω	
ϑ		ϑ	ϑ	
ϒ		ϒ		ϒ
ϖ		ϖ		ϖ

稀奇古怪

1
2
3
4
5
6
7
8
9
10
11
•		•		•	
…		…	…
′		′		′	
″		″		″	
‾		‾		‾
⁄		⁄		⁄	
℘		℘	℘	
ℑ		ℑ		ℑ
ℜ		ℜ		ℜ	
™		™		™	
ℵ		ℵ	ℵ

箭头

1
2
3
4
5
6
7
8
9
10
11
←		←		←	
↑		↑		↑	
→		→		→
↓		↓		↓	
↔		↔		↔	
↵		↵		↵
⇐		⇐		⇐	
⇑		⇑		⇑	
⇒		⇒		⇒
⇓		⇓		⇓	
⇔		⇔		⇔

数学有关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
∀		∀	∀
∂		∂ 		∂	
∃		∃		∃	
∅		∅		∅
∇		∇		∇	
∈		∈		∈	
∉		∉		∉
∋		∋		∋	
∏		∏		∏		
∑		∑		−
−		−		−	
∗		∗	∗	
√		√		√
∝		∝		∝	
∞		∞		∞	
∠		∠		∠
∧		∧		⊥	
∨		∨		⊦	
∩		∩		∩
∪		∪		∪	
∫		∫		∫	
∴		∴	∴
∼		∼		∼	
≅		≅		≅	
≈		≈		≅
≠		≠		≠	
≡		≡		≡	
≤		≤		≤
≥		≥		≥	
⊂		⊂		⊂	
⊃		⊃		⊃
⊄		⊄		⊄	
⊆		⊆		⊆	
⊇		⊇		⊇

拐角线

1
2
3
4
5
6
7
8
9
⊕		⊕		⊕	
⊗		⊗	⊗	
⊥		⊥		⊥
⋅		⋅		⋅	
⌈		⌈		⌈	
⌉		⌉		⌉
⌊		⌊	⌊	
⌋		⌋	⌋	
◊		◊		◊

扑克

♠        ♠    ♠    
♣        ♣        ♣    
♥        ♥    ♥
♦        ♦        ♦    

稀奇 次方 正负 空格 。。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
空格		 		 	
¡		¡		¡
¢		¢		¢	
£		£		£	
¤		¤	¤
¥		¥		¥	
¦		¦	¦	
§		§		§
¨		¨		¨	
©		©		©	
ª		ª		ª
«		«		«	
¬		¬		¬	
®		®		®	
¯		¯		¯	
°		°		°
±		±	±	
²		²		²	
³		³		³
´		´		´	
µ		µ		&#181	
"		"		"
<		&lt;		&#60;	
>		&gt;		&#62;	
'	 				&#39;

HTML5新增的canvas标签，通过创建画布，在画布上创建任何想要的形状，下面将canvas的API做个整理。

1.阴影

1
2
3
4
shadowOffsetY  设置或返回阴影与形状的垂直距离 
context.shadowOffsetX:阴影的横向偏移量
context.shadowColor 阴影颜色
context.shadowBlur 模糊度

2.画线

1
2
3
4
5
6
7
8
9
10
lineCap  设置或返回线条的结束点样式（butt、round、square）
lineJoin  设置或返回当两条线交汇时，边角的类型（bevel、round、miter）
lineWidth  设置或返回当前的线条宽度
miterLimit  设置或返回最大斜接长度
moveTo(x,y) 起始点
lineTo(x,y) 下一个点
strokeStyle 边框颜色
fillStyle 填充颜色
fill() 绘制
stroke() 绘制

2.1 贝塞尔曲线

1
2
3
4
5
6
二次 
quadraticCurveTo(cpx,cpy,x,y)　　
	//cpx，cpy表示控制点的坐标, x，y表示终点坐标；
三次
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)　
//cp1x，cp1y表示第一个控制点的坐标, cp2x，cp2y表示第二个控制点的坐标, x，y表示终点的坐标

3.渐变

1
2
3
4
createLinearGradient( x0, y0, x1, y1 )  创建线性渐变
createPattern( image/canvas/video, repeat )  在指定的方向内重复绘制指定的元素
createRadialGradient( x0, y0, r0, x1, y1, r1 ) 创建径向渐变
addColorStop( stop, color )  规定渐变对象中的颜色和停止位置

4.文本

1
2
3
4
5
6
font  设置或返回文本内容的当前字体属性（和css的font一样）
textAlign  设置或返回文本内容的当前对齐方式
textBaseline  设置或返回在绘制文本时使用的当前文本基线
fillText( text, x, y )  在画布上绘制“被填充”的文本
strokeText( text, x, y )  在画布上绘制文本（无填充）
measureText( text )  返回包含指定文本宽度的对象（属性width获取宽度）

5.绘制图片

1
2
3
drawImage( image/canvas, x, y )
drawImage( image/canvas, x, y, width, height )
drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  在画布上绘制图像、画布或视频

6.绘制ImageData对象

1
2
3
4
5
6
7
createImageData( width, height )
createImageData(imageData)  绘制ImageData对象
getImageData( x, y, width, height )  返回ImageData对象，该对象为画布上指定的矩形复制像素数据。
putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  把图像数据放回画布上。
width  返回ImageData对象的宽度
height  返回ImageData对象的高度
data  返回一个对象，包含指定的ImageData对象的图像数据

7.全局变量

1
2
globalAlpha  设置或返回绘图的当前alpha或透明度 0~1
globalCompositeOperation  设置或返回新图像如何绘制到已有的图像上。

8.图形变换

1
2
3
4
5
scale( x, y )  缩放当前绘图
translate( x, y )  重新设置画布上的(0,0)位置
rotate( angle )  选择当前绘图，单位为“弧度”，角度转弧度公式（ degrees*Math.PI/180）
transform( m11, m12, m21, m22, dx, dy )  替换绘图的当前转换矩阵
setTransform()  将当前转换重置为单元矩阵，然后运行	transform()

9.包裹

1
2
3
4
5
6
beginPath() 开始绘制
closePath() 关闭绘制
保存，恢复的方式 是典型栈操作 先进后出
save()  保存当前环境的状态
restore()  恢复之前保存过的路径状态和属性

10.矩形

1
2
3
4
rect(x,y,width,height)
fillRect(x,y,width,height)
strokeRect(x,y,width,height)
clearRect(x,y,width,height) 清除一个矩形区域

11.圆

1
2
3
4
5
6
x,y:圆心位置
radius:半径
starAngle,endAngel 开始结束角度
anticlockwise:布尔值，false是默认值，顺时，true 逆时针
arc(x,y,radius,starAngle,endAngel,anticlockwise)
arcTo(startx,starty,endx,endy,弧的粗细)

12.帧动画

1
2
window.requestAnimationFrame()//开始
window.cancelAnimationFrame()//取消

出自宋代诗人苏轼的《杂说送张琥》

博观而约取，厚积而薄发，吾告子止于此矣。

多读书，取其精华，去其糟粕，我认为人生也是如此，应该记着开心的，忘掉烦心的。

无论知识，还是其他都是需要积累的，人要一步一个脚印，只有脚踏实地，才能仰望苍穹。