代码入门教程前言我是一个年已花甲的退休教师，一不懂代码，二不会英语。前年，儿子给我买了一个笔记本电脑，刚开始玩的时候，连“关机”也不会，看个电子书、玩个游戏，都十分困难。后来，又给我注册了360doc个人图书馆，更找不着“北”了。进入网络以后，页面中的内容五彩缤纷，这儿闪烁，那儿跳动，文字内容，五颜六色，真不知该点击什么地方了！然而，就是在这个图书馆中，我学到了不少的知识。现在，我不但能够浏览别人的文章、收藏别人的文章，而且还学会了自己撰写文章，编辑图片，使用边框，在实践操作的过程中，我知道了那些五彩缤纷的美丽网页，都是用代码制作的。于是，我对代码产生了兴趣，开始学习代码、研究代码。经过一段时间的努力学习、刻苦钻研，终于迈进了代码的门槛。我已经撰写了几十篇关于360doc图书馆的知识和操作方法的文章，制作了几百个个人图书馆的顶图，还有一些底图、图书馆首页的模块等作品， 永不独行初步地尝到了学习代码的甜头。在实践的过程中，我认识到，代码并不是什么神秘的天书，也不是高不可攀的山峰，不懂英语，没有学过系统的电脑知识，照样可以学会代码，用代码制作自己喜欢的各种漂亮的网页。在这里，我把自己学习代码的体会撰写成这些文章，编辑成小册子，陆续发表，提供给大家，用以帮助愿意学习代码而又不知从哪里入手的朋友们，希望我的这些文章能够对这些馆友们有所帮助，引导你们步入代码的门槛。我的这些文章，成功案例语言不一定十分规范，概念不一定非常准确。我本着这样一条原则，力求通俗易懂，讲解具体，能够操作，使大家能够看明白，会操作，真正起到引导入门的作用。由于本人的水平有限，文章中一定存在不少纰漏和错误之处，希望大家批评指正。在此我预先向给我提出宝贵意见的朋友们表示感谢。

图片

图片

图片

图片

图片

图片

２０１２年１０月２日于北京

图片

图片

第一章　代码基础知识第一节　认识撰写文章处的两种页面学习代码，离不开实践活动。而实践活动，离不开编辑器。因此，我们有必要先来认识一下360doc个人图书馆中编辑器的页面，也就是撰写文章处的页面。“撰写文章”处有两种页面，一种是“文字图片”编辑页面，另一种是“代码编辑”页面。在你的图书馆首页点击“撰写”按钮，进入的页面是“文字图片”编辑页面（见图１）；你再点击一下此页面下方的“代码编辑”，进入的是“代码”编辑页面（见图２）图1：“文字图片”编辑页面

图片

 图２：“代码”编辑页面

图片

“文字图片”编辑页面是用来撰写文章、编辑图片使用的页面；而“代码编辑”页面是用于编辑代码、粘贴代码使用的页面。“撰写”文章页面下方的“代码编辑”按钮，就是专门用于切换这两种页面的按钮。在“文字图片”编辑页面点击一下“代码编辑”按钮，就可以切换到“代码编辑”页面；在“代码编辑”页面点击一下“代码编辑”按钮，就可以切换到“文字图片”编辑页面中。在“代码编辑”页面，你可以使用代码制作网页，修改网页代码、粘贴网页代码。而这个“预览”按钮，就是让你观看网页制作的实际效果的按钮。你只要点击一下这个按钮，就可以看到实际效果了。在这里我要说明的是，点击“预览按钮”以后看到的效果，与“发表”以后看到的效果有时是不一致的，不要过于依赖这个页面，点击“发表”按钮观看实际效果才是最可靠的方法。我还要说明的一点是：你在“代码编辑”页面编辑了你要制作的网页代码以后，当你再一次点击“代码编辑”按钮或者点击“发表”按钮以后，你原来编写的代码，可能有部分地方已经有所改变。这是系统自动给你修改的。要查看系统给你修改了哪些代码，可以这样查看：将你点击“发表”按钮以后发表的文章，点击一下“修改”按钮，然后在进入的“文章修改页面”的下方，点击一下“代码编辑”按钮，就可看到系统为你修改以后的代码了。把这份代码和你原来的代码比较一下，就可以查出系统给你修改了哪些代码了。

图片

图片

图片

图片

图片

作业：１、认识一下“文字图片”编辑页面，试着撰写一段文章或者粘贴几个图片。２、认识一下“代码编辑”编辑页面，看看与“文字图片”编辑页面有什么不同。３、自己任意寻找一篇文章，复制、粘贴到“文字图片”编辑页面，然后点击一下页面下方的“代码编辑”按钮，获取其代码，认识一下代码。代码入门教程(1)代码入门教程(2)代码入门教程(3)代码入门教程(4)代码入门教程(5)代码入门教程(6)代码入门教程(7)

图片

２０１２年１０月２日于北京