机器之歌
mind+游戏开发--血战血糖
Mind+ 图形编程
在线编辑：https://ide.mindplus.top/
转化工具：https://mindplus.cc/transformTool.html
官方教程：https://mindplus.dfrobot.com.cn/
模块简介：https://mindplus.dfrobot.com.cn/ss-mokuai
Mind+是一款基于scratch开发的积木编程软件。它适合青少年学习编程思维、开发智力、构建科学模式等，它也可以成为有效的学习工具和科学教育工具。
Mind+的编程界面（在线网址），由四部分构成。最左侧是积木，中间是编辑窗口，最右侧上方是测试窗口，最右侧下方是对象选择窗口。
编写的过程包括：编写代码、测试、调试三个部分。
编写代码
编写代码需要选择特点的对象，然后将左侧的积木拖拽到中间编辑的代码窗口与其他积木拼接即可。要注意由于代码是写在特点的对象中的，所以默认控制的也是该对象，其引用的属性也是该对象的属性。
测试
测试只需要点击测试窗口上方的绿色小旗子，就开始运行积木代码，并将运行结果显示在测试状况。
调试
调试是当程序的运行效果不符合要求时，对代码存在的错误或问题进行修改的过程。
网络成瘾
发表于
分类于
网络成瘾
建构和创造是人的基本需要。但是当下人们越来越成谜于网络。或者看小说、或者追剧、或者社交、或者游戏、或者看直播，网络拉近了人们的距离，但是好像太近了，反而过犹不及，欲罢不能，伤了眼睛，坏了身体，耽误了发展，失落了理想，总之，让人被控制，而不是自我实现。
不能说网络都是坏的，但是也不能说网络是都是好的，但是如果沉迷在自己或者别人编织的虚幻中，那么就是一种联合了别人的自我欺骗，对人对己都不是好事。
Internet addiction is when a person has a compulsive need to spend a great deal of time on the Internet, to the point where other areas of life (such as relationships, work or health) are allowed to suffer. The person becomes dependent on using the Internet and needs to spend more and more time online to achieve the same ‘high’.
为什么需要对网络成瘾保持警惕呢？难道休闲娱乐不可以吗？适当的放松当然是可以的，但是问题是网络成瘾是不由自主的、失去自我掌控的现象。如何判断是否网络成瘾呢？随时可以放下、心无挂碍就不算网络成瘾。如果做不大，哪你就再陷入网络成瘾的陷阱。
如何从网络成瘾中挣脱，重获新生。首先要认识到自己陷入到了怎样一个成瘾的怪圈循环。这个循环有哪些环节构成。接下来尝试延迟进入这个循环。如果不小心进入这个循环，那么尝试延迟进入下一个环节。注意，这里用的是延迟而不是禁止。你可以尝试体会和感受延迟时头脑和身体的反应。尝试做出延迟是摆脱循环的第一步，它让你有自主的机会，以及感知头脑和思想反应的机会。它的目的不是直接摆脱循环，而是认识到循环的存在。当你的意识关注循环念头的时候，当你感知它的时候，而不是攻击或者逃避它的时候，它会逐渐弱化，这样你就可以夺回身体和思想的自主权。
摆脱成瘾的另一个关键是做更有意义的事。循环会遮蔽你的视野，但是反过来更有意义的目标也会指引你前行。但是一起的前提是你现有夺回自己的自主权。也许你会想，我就喜欢这样。但是你要知道，你头脑中的你并不只一个，而控制你进入死循环的哪个肯定不是最好的哪个。从这个意义上，我们就可以理解”做最好的自己意义“这句话的真正含义了。
成瘾其实有大有小，如果是能自控、得当的并不不妥。但是现在越来越多的人明明知道自己不应该沉迷，但是却管不住自己，事后会责备自己，甚至惩罚自己，但是还会重新进入循环。
与自己做朋友
发表于
更新于
1 你并不是你自己
有一个事实是你并不是你自己。或者说我和我自己并不相同。我并不存在，存在的我只是一个虚构的叙事主体，它并不是真正的、自我控制的我，它的本质是本能驱动的、大脑幻想的、过去现在未来交流体。
有的人会认为存在不同的我，他们的声音各不相同，有点像精神分裂或者多重人格。但这并不是本文要表述的。我是虚幻的，是一个事实，而不是一个呈现不同人格特征、行为不一致的个体。我曾经想过，我是如何产生的。在大学的时候就想过这个问题，和一位同学还探讨过这个问题，后来这位同学保研去了心理系。但是当时并没讨论出什么结果，除了镜像神经元和一些自己想象的可能的进化机制。
2 镜像神经元
人有镜像神经元，可以让人轻松模仿他人，这对人的社会协作十分重要。有科学家做过实验，让不同的动物去观察镜子，有些动物知道镜中的是自己，有些动物则不知道。比如大猩猩就知道，镜子中的是自己。因为，科学家在大猩猩额头上画一个红点，在猩猩睡觉时偷偷画的，但是当猩猩看镜子中自己额头有红点时，他会用手去触摸自己额头上的红点，而不是镜子中的红点。有人管这个实验叫做镜子实验（或者红点实验、MSR实验，MSR是镜像自我认知（Mirror Self-recognition）的英文缩写）。有些动物比如大猩猩、海豚、大象、乌鸦都通过了镜子实验，但是猫、狗却不能通过镜子实验，认出镜子中的自己。
3 我产生的进化机制
我产生的进化机制。首先，我的产生离不开社会协作。如果是纯个体的生活，其实我这个概念并没有什么意义，如果这个个体只需要单独应对自然界的各种挑战的话。但是，人显然不是这种情况。人是有性生殖的动物，需要配偶才能繁殖后代，所以人至少需要区分自己和伴侣以及孩子。通常，这个生物家庭是合作的，比如男人狩猎，女人采集，共同养育后代。如此，看了我这个概念起源很早，甚至在原始社会就有。我是一种自己指代词。在社群中，每个个体为了相互区分，使用的是名字。于是某某就是我，我就是某某，是个体自我的第一个概念。我这个概念甚至要早于文字的产生。并且和语言的产生也有密切的关系。
我的概念产生的价值在于它要求个体具有可预测性和自我约束力。我让个体行为趋向一致，进而获得社会角色和标签，从而能成为社会生产协作的一员。不具有这种概念的个体无法有效参与社会协作而脱离群体，最终被淘汰。所以我本质上是社群进化压力选择的结果。如果没有社会，就没有我。我除了名字，还有更丰富的内涵，比如我的特征，我的特长，我的种族，我的相貌，我的财富等等诸多属性。我是人类社会属性的必然需求。
我们知道了我的概念的重要性，那么，它是真实存在的吗？并不存在不变的我，我是一个变化体。我并不能完全控制我，我只能是我的行为的注解员。所以我并不能控制我，因此它本质上并不属于我的范畴。那么，什么是我能控制的范畴，不知道。但是，显然我不并不是我可以控制的范畴。正因如此，所以并不存在那个可以控制我的我。那个能够指挥自己行动、控制所有行为、做出自由选择的我并不存在，而是大脑虚构出来的叙事自我。
4 我和我的关系
那么，这个虚假的我和真实的我（我们暂时这样称呼）是什么关系呢？ 我是真我的船，是真我的壳，也是真我自我解放的束缚。
有诗云：为爱寻光纸上钻，不能透处几多难。忽然撞着来时路，始觉平生被眼瞒。（《蝇子透窗偈》）
我是由我而来的，我也因我而去。所以虽然我是我的行路船，我也是我的船中客，奈何可奈何，只能相伴而行，与我自己做朋友。
5 禅诗三首
归湖南作
唐—灵澈
山边水边待月明，暂向人间借路行。
如今还向山边去，只有湖水无行路。
头头尽是吾家物
心化禅师
翠竹黄花非外境，白云明月露全真。
头头尽是吾家物，信手拈来不是尘。
插秧诗
南北朝-契此和尚
手把青秧插满田，低头便见水中天。
心地清净方为道，退步原来是向前。共同抗疫：快递安全收取
发表于
分类于
抗疫知识
疫情常态化下，快递该怎样安全收取？
摘自：http://www.stdaily.com/cehua/Jan19th/fmxw.shtml
第一、静置暂缓打开包装，防疫的安全性会增加。
第二、尽量避免人跟人的直接接触，建议把货品放到快递柜。
第三、拿快递的时候戴上口罩，最好戴上手套。如果没有手套，应该在处理完之后，用手消毒剂进行手消。
第四、拿到快递后，可以用消毒剂对快递表面进行喷雾或者擦试，全方位做一个消毒。消毒剂的剂量要用对，每一面都要完全湿润，能够看到表面有薄薄一层水雾，消毒才是到位的。随便喷洒几下的消毒是没效的。
关于消毒剂的选择：除了洗必泰类消毒剂，可以说所有的消毒剂都是有效的，不用刻意挑选一个对新冠病毒有效的消毒剂。
第五、假设包装袋里还有一层物品，也可以再把它做一个消毒处理，步骤如上。
第六、接触完物品以后，用手消毒剂进行手消或者用流动水按六步法洗手。
最后，已经喷了消毒剂的外包装，可以按普通垃圾进行处置。如果确定是被新冠病毒污染的外包装，需要按照医疗废物来进行处理。
食物等必备物资如何处理？
1、勤洗手；
2、对食材多冲洗；
3、放置3天以后再用。
如何消毒图解版
摘自：https://m.voc.com.cn/wxhn/article/202203/202203222108355418.html
教育纵览——《他乡的童年》观感
发表于
更新于
最近看了《他乡的童年》一个记录片，探讨不同国家文化下的教育以及孩子的童年。对于关心教育的人来说，包括家长，都很有看点。就像标题一样，我们也都有童年，有或快乐或伤心的往事，作为教师、作为家长，我们又想给孩子们一个怎样的童年。视野决定格局，如果我们只是盯着小升初，盯着补习和学业竞争，我们能给孩子的童年也许骨感，但绝不会丰满，也许实用，但绝不会享用。我们是否要继续在挤压孩子童年的道路上狂奔？让我们看看他乡的童年会是怎样……
日本注重社会集体性的培养
日本的教育可以说是非常激进的，他们强调通过身体锻炼意志品质。片中的学校曾经让孩子无论春夏秋冬，都赤裸上身进行体育锻炼，后来因为太多人非议，终于改为穿短袖了。可见，他们对身体锻炼和意志品质发展的关注。幼儿园的小学生就要学会生活自理，自己穿衣、吃饭、活动，克服膝盖不适学习击剑。当问道要培养学生哪些品质时，她们的幼稚园老师的一句话高度概括了日本教育的价值追求，那就是“永不放弃并为他人着想”。这种教育一方面要培养坚强的个体，同时又是具有融入社会、具体集体性的个体。最重要的，这种理念不是一两个课程或者仅仅持续一段时间，而是长期的、融入学校的方方面面，这是难做到的。
我们也有军训，但是这样的训练往往是短期的，而且常常脱离真实生活，军训过后往往又原型毕现。所以对个人意志品质的培养和集体性即便是有效的，但还难于真正融入教育生活，成为孩子的文化基因。
芬兰让教育回归真实、自由、自主
与日本的鸡娃不同，芬兰没有日本哪种高度竞争的外部环境。相反，芬兰是一个教育三无国家，没有考试、没有督导、没有职称评定。我们会以为，考试、督导、考核是教育的必须品，但是在芬兰这些都没有，但是其教育质量却是全球领先的，在历次PISA考试中，芬兰都位居前行，特别是其学习效率（学习成绩/学习时间投入）更是高的惊人。这不得不说打破了我们对教育的认识，当外部没有压力时，真正热爱教育的人反而能投身教育并且做好教育。真正热爱学习的孩子，反而更愿意参与学习，突破自我。
我们不禁要关心，这是如何发生的，这怎么可能。教育不一定是来自外部压力，外部压力往往容易导致一种错误的认识，那就是因为压力我才工作，因为压力我才学习，教育和学习真正动力却被遮盖了。因为热爱我从事教育，因为喜欢我从事学习，因为教育和学习我不断进步。这不得不说是理想环境下，教育工作者所追求的理想教育。如果对标芬兰，我们还差什么，我们可能实现这样的教育吗？不仅让学生学得好，还让学生学得真实、自由、自主。
透过影片，我们看到芬兰教师具有的品质，那就是非常高的职业素养和责任心。而他们的教育系统也正是依赖于具有高度责任感、能力和自信心的教师，他们形成了一种信任的文化，学校相信教师，教师相信学生，学生相信自己。这种信任不需要检查和监督，而恰恰是这种无条件的信任又成为师生成长的动力。到底是信任文化成就了高素质的教师，还是高素质的教师成就了这种信任的文化。无论是哪一种，其结果就是大大降低了不信任所带的心理内耗。
一个典型的例子，那就是芬兰的课程都是老师自己开发的。如果大家能去芬兰工作生活一年，相信会有更深刻的体验。一位老师会四五点钟起床，乘地铁去上班，路上会准备今天的课程，她想把现象学教育运用到自己的课程中，给学生创造解决真实问题、开展跨学科学习的机会。其中一堂令人难忘的课，她是这样设计的，让孩子们去养老院与老人互动，学习“时间与生命”这一主题，学生作为模特让老师们素描，学生也以老人为模特画画，并与老人们交谈，互相学习各自的技能，了解不同时代发生的事。课后，这位老师说，也许毕业后我上课的内容他们都不记得，但是一定会记得今天在养老院的对话。
另一个有趣的细节是校长会精心选择一个CD音乐来代替刺耳的上课铃声，孩子们则会跟着音乐律动。虽然是一件小事，但是正是这样的细节，展现了芬兰教育的自由、开发和艺术。
印度教育追求灵活适应的问题解决而不是完美方案
印度贫富差距大，很多教育的基本条件都不具备，而且社会环境复杂。但是，大多跨国企业的职业经理却被他们占据，这一方面是他们彼此的相互帮助，另一各方面就是他们善于应对突发事件和解决复杂问题。就像一位大学老师说的，也许他的学生的答案不是最佳答案，但是他会最先提出解决方案，并再交流中不断完善自己的方案。
以色列培养学生自信、创新的品格
在访谈中，以色列教师描述他们的一种文化，那就是不把失败视为结局。与不让孩子犯错不同，他们的家长和教师更在意如何让孩子经历和看待失败，而且尽早经历失败，并从失败中站起来，从而养成自信、创新的品格。他们的高中毕业生，很多都已经是公司的创始人或者CEO了，尽管99%的创新企业都会失败，但是即便失败他们也能收获很多，这是这些失败经验为成功奠定了条件，失败永远不是结局，而是通往成功的阶梯。
中国教育中传统与现代的冲突与联系
中国社会巨变，体现在教育上，就是传统与现代的冲突和割不断的联系。一方面，社会要继承传统文化，一方面又要突破发展。这种继承和突破不仅体现在教育理念上，更体现在教育内容和方式、方法上。如果说传统是母亲，现代就是孩子，中国现代教育需要在“梦你所梦，愿你所愿”的同时，也要能“见你未见的世界，写你未写的诗篇”。当然中国地大物博，影片所能展现的只是中国教育的一角，不同教育人的看法也大相径庭，既有自豪满足又有担忧无奈，大家在一种难以言表的复杂情绪中探索着前进。
纵览各国基础教育，虽然是管中窥豹，看到教育现象不能代表各国基础教育的全部，但也能让我们看到不一样的他乡的童年。我们会发现环境对教育的影响，学校教育不仅仅是改变学校就能做好的。就像一土教育的创始人说的那样，“教育不仅是课程，也不仅是学校，而是一场几乎全社会不得不参与的社会体验”。而在这场必须参与的社会体验中，作为家长，作为老师，你想给孩子编织一个怎样的童年？这非常关键，因为你也是这场社会体验的导演、演员、编剧、观众、评委……。
愿每个孩子都能拥有一个美好的童年！
我们是如何思维的
发表于
分类于
读书
杜威写过一本书，今天偶然在图书馆门口瞥见，就翻看起来，恰好就是这本《我们如何思维》。书的前面还介绍了杜威的生平和思想发展历程，本书是他作为实用主义思想的代表作之一。
有一些句子和观点至今依然十分鲜活。
如果不能对其个人或民族生产巨大影响，那就不能称之为交流。
工作与游戏分开，过程与结果分开，最终导致的就是伤害。
活着当下与品读当下的意义并不矛盾。
与其说我们主观上思维，不如说思维发生在我们的头脑之中。
教育呈现的材料不是观点，而是一种刺激，让学习者拥有更为广阔的思维和经验。 这些话语可能不是原话，比如讲过了我个人的理解和更改，但是大意应该是没错的。一分钟阅读和一小时阅读都是阅读，游戏和工作可以交替。
教育是什么
教育是国家持续发展的根基，孩子是祖国的未来、民主的希望，因此一说到教育，就会涉及到每个孩子、每个家庭、每个学校。但是人们关于教育的理解，却显著不同。
教育是希望
对于相对贫困的农村地区，教育带来的是希望。父母希望孩子好好读书，长大改变自己的经济状况，活的比自己好。父母的想法很伟大，也很天真，他们对自己已经不报答的希望了，但却把希望寄托在孩子身上，并为他们的读书努力赚钱，给孩子提供足够的物质支撑。
教育是负担
对于城里的孩子，教育是没完没了的课业。父母给孩子安排了各种补习班，孩子回到家做各种作业，有些作业完成不了的还需要家长帮忙，写完了还有家长签字。人们越来越认识到过早、过度教育对孩子的危害，于是提出减负、双减、禁辅等措施，但是结果还是不理想，孩子还是要上各种课，只不过上的时间、方式、种类进行的变化而已。
所以你看，没有教育不可以，教育过度也不行，如何让农村的孩子和城市的孩子相互平衡平衡，是一个很有意义的问题。
教育是指向个体发展的集体性社会实践
教育并不是社会产生时就有的，教育是一种集体性社会实践，只不过这种社会实践不再仅仅指向高效的生产，而是指向帮助部分人群学会生产本身。
为了让学习者更好的观察生产的过程，于是委派一个专门的负责人对实践活动进行优化，优化包括活动内容、形式、时间、顺序等，这个专门的负责人就是教师。
教育具有社会角色再分配的功能
对于社会来讲，教育是社会职业再分配的实现方式。如果教育不能改变人们的命运，社会阶级固化，贫富差距加大，且无法改变，那么教育就失去的其社会再分配的功能。
不是教育决定你的人生轨迹，而是你决定了自己的教育轨迹
教育似乎是导致个人发展路径不同的原因。比如每个人的学历不同，其工作岗位也不同，似乎是教育过程决定了工作岗位。比如，从名牌大学毕业，进入外企或者国企或者从政就成为理所当然。这种表面的前后顺序关系，具有很强的迷惑性，先后发生并不一定是因果关系，但因果关系肯定是前因后果。实际上，你可以从事任何你想从事的职业，只有你为此付出足够多的努力。
教育是个体迭代发展的过程
教育是个体能力和观念自我迭代的过程。有的人喜欢说是能力发展，我则喜欢用迭代，因为有的时候能力会短暂的退步，然后又踏上一个新台阶。这时说发展就没有迭代合适，迭代是对原有能力的重新选择和组合。能力发展是个体在新情境压力下选择、优选出来的，而不是原有能力的简单延伸。
教育就是自我解放的过程
教育的终极是自我教育。我们通常理解的教育都是教育别人，教育是一个及物动词。有时我们会认为，学生发展是教师的教育导致的。我们当然不是要否定教师的作用，教师的职责就是帮助他人获得发展。但是对于发展或者自我超越发挥更大作为的不是别人，恰恰是你自己。没有人能替别人认知，也没有人能替你认识自己。教师只是在你认识你自己的过程中发挥了一定的引导作用而已，但是行路人还必须是学习者自己。从这个意义上来说，教育的极致必然是指向自己的。换句话说，他人教育只能通过自我教育发挥作用。所以他人教育的最大成就也是唤醒个体的自我教育。教是为了不教，就是这个道理。
教育的终极目的是自我解放。既然教育最终都会指向自我，那么其中终极目的又是什么呢？自我的超越和解放就是教育的终极目的。有人会将教育的终极目的表述为某种状态，比如自由、幸福、随心所欲不逾矩、天人合一、自然无为、立德、立功、立言。但是这些状态却差异很大，每个人的理解也不同，但是总体而言都是实现某种形式的自我超越和自我解放。所以教育的根本目的不是实现某种状态，而是超越某种状态。超越的方式有多种，超越之后获得状态也不同，所以实现超越的路径也因人而异，不可复制。其根本原因是我的束缚不同，解放路径当然也不同。
教师是以教育谋生的人，也是以教育为使命的人
教师是以从事教育活动为职业谋生的人。有人说教师是灵魂的工程师、是园丁，可见教师对人的影响作用。但是如果单纯从职业而言，教师就是以从事教育活动赚钱的人。当然也有不赚钱的教育，但是教育总要活着，中药养家糊口，所以说教师是从事教育活动谋生的人，谋取的可能不一定是钱财，也可能是自己想要的生活。说教师是以教谋生不是一种贬低，而是实事求是。认识到这一点，反而能让教师活的更踏实，教育就是教师与社会交互而付出的个人劳动，而且这种劳动或者服务对社会以及个人是产生积极作用的，它当然是有价值的，值得付费的。
生物学教师首先是教师，然后才是生物学教师
我们首先是教师，然后才是某一个学科的教师。作为教师，为了刚好的分工合作，教师只教授自己擅长的领域，所以有了学科教师和学科教育。但不能因为自己是物理老师或者生物老师，而就对学生没有任何其他的责任，相反，因为教育的终极目的是自我解放，教师不能只局限与自己的学科教育职责，而必须相互配合为学生成为更好的自己而作额外的事儿。也就是教师必须首先是教师，不分科的对学生具有引领职责的教师，然后才是负责某个科目的教师。教师的眼中是一个完整的希望自我超越和自我解放的人，而不是只关注学科成绩的教师，那是教育的异化，学科教育的异化，它将导致学科的割裂，把教师和学生束缚在认为附加的学科边界束缚之中。不仅不利于学生的整体发展，也不利于教师自身的发展。
比如在各学科布置作业，如果都站在自己的学科的角度，那么布置更多的作业无疑是对提高学科成绩有利的，但是对学生的发展却十分不利，导致这个结局不仅是博弈论的囚徒困境，更根本的原因是教师身份定位的问题，你把自己首先当成一个教师还是一个学科教师，假如所以学科教师都能把自己首先作为一名教师，那么关心孩子的成长、合理布置作业才是正解，而不是陷入学科作业竞赛之中。
教育是艺术也是科学
教育需要符合认知规律和学习科学。教育不是任何方式都可以，也不是怎么教都行。教育方式方法可以多用，但是必须要能充分吸收已有的教育教学经验，从而优化教学过程。教育必然是一个自我迭代的过程，一个反复优化和选择的过程。有方向的多样化，有原则的选择，是教育快速优化的重要保障。从这个意义上来说，教育的发展是进化过程，我们可以借助进化的规律和思想来做教育。
教育的成功可以借鉴，但不可复制
教育的成功不是同样一种成功。有的时候，我们看到某个班级、某位教师、某个学习的教育成功，特别有复制成功的冲动。但是复制的前提是成功是同样的，起点也是相同，这样复制方法和路径才有意义。但是对于教育而言，第一点就不成立，在不同社会环境中，不同的生态环境下，成功的定义也不尽相同。所以整体复制的意义不大。其次学生不同，不同学校、班级学生有显著差别，不同学生个体也有显著差别，所以我们不复制，我们也复制不了。教育的目标不是让所有人都相信同一种成功，教育的目的恰恰是打破这种观念，让个体踏上自己与众不同的自我教育的道路。
大学教育在于开拓你的人生，而不是相反
大学教育不是简单的提供学生达成目标的能力和效率，大学教育更在于帮助学生认识自己和发展自己。有人说教育是为未来做准备，未来要谋生，要从事某一职业，未来有哪些挑战学校教育就要教哪些内容。简单的说人生是一条跑道，学校的作用就是加速，让学生跑的比别人更快。哪是不是也死得更快呢？！教育不该如此之狭隘！为什么是一条跑道，每个人的跑道都不同！跑去哪里？每个人的终点都不一样，当然死亡除外。为什么非要跑，走可不可以，散步可以不，为什么要错过身边的风景。所以，大学教育，不是学生的人生加速器，虽然它会教授你很多学习方法，也会提高你的能力，它是你重新定义人生、认识自己的交叉路口。
学校是一个高效、相对安全的试错场
我们总是希望自己少犯错，多正确。但是人生的很多事情，你不尝试永远也不知道自己是否适合。所以，与其说学校是一个教授正确知识的场所，还不如说学校是一个高效试错的安全场所，因为一旦你进入社会犯错成本会非常高，所以同学们，你有理想吗，那么一定在大学期间把自己的想法都试一试，目的当然不是高效的犯错，而是充分利用这段时间和大学场域的天然优势，降低你的人生犯错成本。
从这个意义上说，教师是最幸福的人，因为他一生计划都停留在这个场域，只有他又一颗天真的心，和被讨厌的勇气，那么它就可以通过不断试错找到自己的道路，走在终身学习的路上。
所以教师一定是一个爱学习的人，因为对于爱学习的人，这是一生幸福，是天堂，对于讨厌学习的人，这是地狱。天堂地狱只是一念间。
Web开发简明教程
发表于
分类于
web开发
写在前面的话
有一种语言几乎每个没学过编程的人也都会天天接触，这种语言就是html语言。几乎所以的网页都需要它来写，所以的网站都离不开他，所有的电脑都支持它，所以学一点html不一定是要从事web开发，而是让你对互联网世界有更深层的了解，并在必要的时候读懂和改写代码，让创造性得到施展，让工作和生活更顺畅。
本教程将带你快速浏览网页背后的代码，涉及的内容包括html、CSS、JavaScript、Python、Bootstrap、Jquery、SQL。这些语言和工具足够你开发一个自己的网站和实现想要的功能了。下面，就开始你的探索之旅吧！！
出发前的准备
- 建议安装一个好用的文本编辑器，用于写代码，比如sublime、Visual Studio Code等，如果不按照用系统自动的文本编辑器也可以，只不过用户体验不会很好。
- 建议选择一个可多端同步笔记软件，比如印象笔记、Onenote、有道云笔记等，实在不行也可以用纸质笔记本记录自己的学习过程，特别是重要的语句和技术思想，这是你能否学以致用的关键。
- 安装谷歌或者火狐浏览器，便于对网页进行调试和预览。
- 测试以下代码的方法，拷贝代码，用编辑器新建文件，粘贴代码，另存为test.html,双击用浏览器打开预览效果，如果对效果不满意，可以对文件重新编辑。
- 在线测试的方法，点击这个链接，然后把代码粘贴进去，运行即可。
html基本
html是网页注释语言，你可以用它来创建自己的网页。
html文档
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>标题h
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>段落p
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>超级连接a
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>网页链接用a标记</p>
<a href="zhangchunlei.com">连接</a>
</body>
</html>图片img
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>按钮和JS特效
<!DOCTYPE html>
<html>
<body>
<h2>按钮</h2>
<p>HTML按钮使用关键字button标记:</p>
<p id="demo" style="display:none">这是JS特性!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">点我!</button>
</body>
</html>列表ul和ol
<!DOCTYPE html>
<html>
<body>
<h2>无序列表</h2>
<ul>
<li>无丝分裂</li>
<li>有丝分裂</li>
<li>减数分裂</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>前期</li>
<li>中期</li>
<li>后期</li>
</ol>
</body>
</html>样式style
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>文本格式
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>注释
注释虽然并不显示，但是可以帮助阅读和理解代码。
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>颜色color
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>CSS样式
可以使得代码更简洁
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>在新窗口打开连接
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<p>如果target="_blank"，网页会在新窗口或便签页打开。</p>
</body>
</html>图片大小尺寸width&height
<!DOCTYPE html>
<html>
<body>
<h2>图谱尺寸</h2>
<p>自定义图片长宽</p>
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>图片picture
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p>改变浏览器宽度可以自动更换图,部分浏览器版本可能不支持</p>
</body>
</html>span
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid; color:black">Hello World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>
</body>
</html>class
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>ID +JS
<!DOCTYPE html>
<html>
<body>
<h2>用JavaScript调用ID</h2>
<p>JavaScript可以使用getElementById()方法来改变元素内容</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>还可以使用JS和getElementById方法改变特定元素的属性。
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
document.getElementById("image").src = "picture.gif";iframe行内框架
<!DOCTYPE html>
<html>
<body>
<h2>制定特定网页在特定位置打开</h2>
<iframe src="" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<p>当点击链接时，该页面会在制定框架打开</p>
</body>
</html>file path
<img src="picture.jpg"> 文件在网页相同目录（当前目录）#相对路径
<img src="images/picture.jpg"> 文件在当前目录下的images文件夹中
<img src="/images/picture.jpg"> 文件中根目录下的images文件夹中
<img src="../picture.jpg"> 文件中当前目录上一层文件夹中
<img src="https://www.w3schools.com/images/picture.jpg"> #绝对路径head
head是一个包含下列元素title, style, meta, link, script，base的容器。 它位于html和body标记之间。例如：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyle.css">
<base href="https://www.w3schools.com/" target="_blank">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<p>All meta information goes inside the head section.</p>
</body>
</html>canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
//line
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
//circle
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
//hello world 1
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
//hello world 2
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
// gradient
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>绘制图片
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>CSS
CSS是定义网页显示风格的语言。
什么是CSS?
CSS是Cascading Style Sheets的缩写
CSS描述了HTML元素如何在屏幕或者其他媒体中现实的样式。
CSS能节省大量的工作。它能够轻松定制多个网页。
外部风格定义表单存储在CSS文件中。我们只需要一个CSS文件，就可以管控所以网页。
CSS插入的3种方式
- 外部CSS文件
- 在网页head容器内插入CSS
- 在元素内插入CSS
外部CSS文件
<link rel="stylesheet" href="mystyle.css">网页内嵌风格
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
color: red;
text-align: center;
}
p.center {
text-align: center;
color: red;
}
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>行内插入CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>JavaScript
改变元素内容
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>改变元素属性值
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif'">Turn off the light</button>
</body>
</html>对象object
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>There are two different ways to access an object property.</p>
<p>You can use person.property or person["property"].</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>事件events
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>函数调用
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Math.random() returns a random number between 0 and 1:</p>
<button type="button" onclick='myFunction()'>Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
</script>
</body>
</html>数据类型
let length = 16; // Number
let lastName = "Johnson"; // String
let x = {firstName:"John", lastName:"Doe"}; // Object应遵循的良好习惯
best practice you should follow
代码示例
博客网站layout样例
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>钟表代码
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
//define functions
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>web game实例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
myGamePiece = new component(20, 20, "red", 10, 120);
myGamePiece.gravity = 0.5;
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
function myrefresh(){
window.location.reload();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.score = 0;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed = this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
//event listener
document.addEventListener("keydown",keyDownHandler, false);
document.addEventListener("keyup",keyUpHandler, false);
}
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myScore.text="SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function accelerate(n) {
myGamePiece.gravity = n;
}
//------------
//Key Handlers
//------------
function keyDownHandler(event)
{
var keyPressed = String.fromCharCode(event.keyCode);
if ((keyPressed == "W") || (keyPressed == "&"))
{
accelerate(-1.5);
}
}
function keyUpHandler(event)
{
var keyPressed = String.fromCharCode(event.keyCode);
if ((keyPressed == "W") || (keyPressed == "&") )
{
accelerate(1);
}
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<button onclick="myrefresh()">Restart</button>
<p>使用上下方向键控制</p>
<p>看你能坚持多久?</p>
</body>
</html>利用github完成网站维护与更新
发表于
分类于
网站维护
自己写一个主页index.html，替代原有的padlet，原有是padlet间歇性无法访问。但是发现提交到服务器没有反应。
问题是网站使用的是python django框架，每次更新页面需要重启python manage.py。重启的办法是首先要找到并关闭该进程，然后再重新开启。
###找到服务进程、kill并重启
netstat -tnlp #查看端口
kill 18283 # 关闭python所在进程
nohup python manage.py runserver 0.0.0.0:3000 #重新开启这时本地服务就开启了，但是还需要开启反向代理才能访问。注意，这一步需要新建一个端口，否则会导致刚开启的3000服务终止。
/bin/systemctl restart nginx.service服务器上让代码生效
至于上传代码，则可以依靠强大的github来完成，其原理是更新本地代码，然后推送到github，然后登录服务器pull远程代码到本地，这样就实现了代码上传服务器。
cd /var/djangoweb/ictweb/
git status
git pull其实也快成自己上传代码到服务器，只不过不便于多人协作管理。
###遇到的问题：
图片无法正常显示，需要使用static/images/logo.png这样的相对路径。
git合并冲突，需要先手动解决冲突，然后commit，之后就正常了。可以参考这里