赶韶光的客官可以直接去`正文开始`那里。
本日有个想法，整成手把手系列，便是假设客官是一个从来没有打仗过网页编辑、代码、编程的新手。以是会说的比较详细，比较累赘，大神们笑笑点个赞就好了，哈哈。
我的想法（初心）是，将一个有兴趣写网页，但是不知道从何开始的人，通过几篇很小的实例，让他产生兴趣，跟出效果，形本钱身动手去学习的动力，便是最好了。
以是，努力写得普通易懂，大略直接，抛开别的成分，先实现出来再说，那时候学写代码的时候也是听师傅说“先有后优”，以是，粗糙点不管，能解释问题便好。
有客官对付我前面几天码的字，有反馈，有问题提出来，非常感谢有人搭理我。提出来的1,web字体设置的方法，2,相应式布局，3,网页上面音频播放的多浏览器兼容问题，4,不知从何入手学习一个东西...我都在拿着小本记下来，空隙韶光赶紧去搜集一些比较好的方法，尽力去更新分享这些方面的一小点履历，还请各位客官多多搭理我呀。
这里先把昨天末了那个小坑给添一下，那个相应式布局，是通过在CSS里面定义不同屏幕宽度时候利用不同的样式，直接帖代码出来吧：
@media screen and ( max-width: 1920px ) { div.content { height: 600px; width: 300px; float: left; padding-top: 97px; } div.sider { float: right; } body { width: 600.111111px; margin: 0 auto; }}@media screen and ( max-width: 720px ) { div { display: block; clear:both; height: auto; } div.content { display: block; height: auto; width: 100%; } div.sider { display: block; width: 100%; padding-bottom: 100px; } body { margin: 0; padding: 0; width: 100%; }}
在1920到720这么宽的时候，两个div旁边浮动，在小于720的时候，两个div显示模式改为块级元素，宽度定义为100%，也就变成竖着排列了。就这样子。
接下来，正文开始：
1, 只用一个文件：`t.html`就好了，忘掉那些什么最佳实践，干就完了，新建文本文件，然后重命名成`t.html`，把稳，重命名成网页之后，文件的图标会发生变革，不因此前文本文档时候的样子，如果图标没变，你极可能重命名成了`t.html.txt`这样子的，我的小视频里面有如何设置windows7显示扩展名，看看也是极好的。
2, 很大略的网页基本代码：
<!doctype html><html lang=\"大众zh\"大众><head> <meta charset=\"大众UTF-8\"大众> <title>像素风头像天生器</title></head><body><div id=\公众wrapper\公众><!--第一个注释，这里等下放画板（canvas标签）--></div><!--第二个注释，这里等下放javascript代码--></body></html>
复制上面的代码到`t.html`里面，然后保存，存成utf-8编码格式(实例001里面有个图片演示了怎么保存)。
3, 连续编辑`t.html`文件，在两个注释的地方，第一个放入`<canvas>`标签，同时给它样式，定义大小(宽500,高400），还有一个边框（1像素实心线奶奶灰色），`<canvas>标签中间的一句话，在不支持canvas标签的浏览器里面会被显示出来`：
<canvas id=\公众myCanvas\"大众 width=\"大众500\"大众 height=\"大众400\"大众 style=\"大众border:1px solid #d3d3d3;\"大众> 快看，这里有一个还在用IE6/8的诚笃人，大家快来~~ </canvas>
4, 第2步里面的第二个注释的位置，加入javascript代码，看代码注释理解语句的含义：
<script type=\"大众text/javascript\"大众>//在html中用ID找到叫做`mycanvas`的画布，给它取名叫cvar c = document.getElementById(\公众myCanvas\公众);//通过这个c（刚才找到的画布），拿到一套可以画2D图片的基本工具， 取名叫ctx，可以理解成拿起一根画笔var ctx=c.getContext(\"大众2d\"大众);//给ctx这根画笔，蘸上橙色ctx.fillStyle=\"大众orange\"大众;//用ctx这根画笔，在x=100,y=90这个坐标位置，画一个长80,宽40的长方形ctx.fillRect(100,90,80,40);</script>
效果：
在画布的左上角，坐标为0,0
大小位置标注：
嗯，便是这样
是不是很大略呀，在网上可以搜索`html5 canvas 基本开关`理解更多，不知客官可否通过这个别样的“画布”画出来一个五角星呢？欢迎寻衅。
晚安
