怎么样借助360图书馆撰写网页学习编辑代码入门教程（第一课）

我也是一个退休之后迈入老人队伍一员之人，没什么大事情可做，闲来无恙开始玩起电脑来。开始别说对代码不懂，二不会英语。连操作电脑都是一窍不通。学生时代学的是俄语，对英语是一窍不通，只是会认读字母。退休前对电脑感觉很好奇，看儿子玩电脑，见电脑里的东西可真多，感觉神奇无比，想试试看电脑里的新闻，可是不会操作，连开机都不会，于是就下决心先学会使用简单的操作电脑方法。到图书馆借了几本老年人学习电脑的书，边学习，边操作，很快学会了简单操作电脑，能够在电脑中看新闻，听音乐。最先注册酷我音乐网站，喜欢听网站的很多音乐和歌曲，以后看到贴吧里有很多漂亮图片，视频，动画，被深深的吸引住。那时候自己还不会打字，就学习打字，不会复制粘贴，又学习复制粘贴操作，就这样一点一点的学会很多操作新知识，扩大了自己使用电脑的应用范围。就这样通过不断的学习，到现在，初步学习和应用了代码的一些基本知识，能够使用代码制作很多漂亮帖子。下面就把自己学习代码的经验编写成教程，交流分享给朋友们，为想学习代码的朋友们提供一点经验，便于学习代码更快入门。

第一章

学习代码，先要认识代码中的HTML代码的概念，　HTML是一种用来制作超文本文档的简单标记语言，与普通文档不同，它可以加入文字、图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界各地主机的文件连接，通过WWW浏览器显示出效果。它的特点是用一对小尖括弧（“< 和 >"）作为标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。而且大部份是成对的双标签，即首标签和尾标签。
　　HTML代码是标签语言．不是程序语言．一张音画贴，是用若于条文字、表格、定位、移动和链接等HTML标签编辑而成的，因此，学习HTML代码就要学会使用HTML标签．

html标签基本模式:

　　仅有一个指令的标签，　只须一个标签名称的语句就可以，如居中定位代码：

<CENTER><FONT style="FONT-SIZE: 32px" color=#00ff00>

<STRONG>可人欢迎您光临</STRONG></FONT></CENTER>

显示结果：

可人欢迎光临 一条标签有多条指令时，除标签名称外还要有各项属性内容与属值等多个语句．比如：
<标签名字　第一属性＝参数　第二属性＝参数．．．．．>内容</尾标签>

　　◆标签属性内容可以有几个至十多个几十个不等．
　　◆标签属性内容必须与标签名称相关语句：如文字标签应用字体、字号和颜色等指令．表格标签应用宽度、高度、背景、边线厚度和边线颜色等指令．

用实际例子来理解HTML标签的作用和效果。

　　第一例子：文字标签．

　　我们要在页面上显示“网络世界”四个红色隶书大字，就必须用文字标签．下面就是文字设置代码。

<P align=center>

<FONT size=7><FONT color=#00ff00>

<STRONG><FONT style="FONT-SIZE: 56px">朋友们好</FONT></STRONG> </FONT></FONT></P>

显示结果：

朋友们好

红色代码是居中标签，黄色是文字颜色符号，可以更换颜色符号试试，蓝色是调整文字大小数字，可以改变一下数字看看文字有什么不同。

　　这组文字设置代码在网络世界上面的是“始标签”，在网络世界下面的是“尾标签”（也有叫围堵标签）。始标签有一个标签名字和三个属性内容。尾标签在标签名字前加一斜杆即可，不用标记属性内容。
对照说明：

<font style=font:60pt face=隶书 color=ff0000>
网络世界
</font>

◇代码的第一行标签名  属性内容依次是：字号大小  什么字体字的颜色
◇代码的第二行     文字内容
◇代码的第三行  尾标签
◇字号代码原是：size=1-7．这里用的是CSS样式定义字体：style=font: 可以最大限度地设置字号．
　　如果在这组代码前面加一个移动始标签<marquee>，在后面加一个尾标签</marquee>，这4个字就能移动了。

朋友们好

第一节　

学习认识360图书馆撰写文章处的两种页面

　　学习代码，需要边学习边实践才能入门。这样就需要使用能够编辑文字，图片和动画的编辑器，因此，我向朋友们推荐使用360doc个人图书馆中撰写的页面就是非常实用的编辑器，操作简单，在撰写文章处的页面。来编辑文字，图片和动画，非常方便。

　　“撰写文章”处有两种页面，一种是“文字图片动画”编辑页面，另一种是“代码编辑”页面。

　　在你的图书馆首页点击“撰写”按钮，进入的页面是“文字图片”编辑页面（见图１）

图1： “文字图片”编辑页面

你再点击一下此页面下方的“代码编辑”口图标打上v

进入的是“代码”编辑页面，可以显示编辑好帖子的全部代码。

（图２）：代码编辑界面

提示说明：

使用“文字图片”编辑页面是用来撰写文章、

编辑图片使用的页面；而“代码编辑”

页面是用于编辑代码、粘贴代码使用的页面。

“撰写”文章页面下方的“代码编辑”按钮，

就是专门用于切换这两种页面的按钮。在“文字图片”

编辑页面点击一下“代码编辑”按钮，就可以切换到“代码编

辑”页面；在“代码编辑”页面点击一下“代码编辑”

按钮，就可以切换到“文字图片”编辑页面中。

能够显示图片，动画效果，方便查看。

　　在“代码编辑”页面，你可以使用代码制作网页，

修改网页代码、粘贴网页代码。完成代码编辑，

再点击代码编辑就可以转换到编辑界面显示实际内容，

作品完成后可以复制全部代码，发到你想要的论坛去。

提示一下，作品要发其他论坛，就不能点击这里发表，

否则图片就会自动转换图书馆的图片地址，就没有外连接了。

还有个“预览”按钮，

可以让你观看网页制作的实际效果的按钮。

你只要点击一下这个按钮，也可以看到实际效果了。

在这里我要说明的是，点击“预览按钮”

以后看到的效果，与“发表”

以后看到的效果有时是不一致的，不要过于依赖这个

页面，点击“发表”按钮观看实际效果才是最可靠的方法。　　

我还要说明的一点是：你在“代码编辑”

页面编辑了你要制作的网页代码以后，

当你再一次点击“代码编辑”按钮或者点击“发表”

按钮以后，你原来编写的代

码，可能有部分地方已经有所改变。这是系统自动给你修改的。

在发表之前复制全部代码，再打开一个撰写页面，

有时可能要同时打开几个这样页面，方便快速编辑代码贴，

要查看系统给你修改了哪些代码，可以这样查看：

　　将你点击“发表”按钮以后发表的文章，

点击一下“修改”按钮，然后在进入

的“文章修改页面”的下方，点击一下“代码编辑”按钮，

就可看到系统为你修改 以后的代码了。

把这份代码和你原来的代码比较一下，

就可以查出系统给你修改了哪些代码了。

　练习：

　１、认识一下“文字图片”编辑页面，

试试撰写一段文章或者粘贴几个图片。

２、认识一下“代码编辑”编辑页面，

看看与“文字图片”编辑页面有什么同。

３、自己任意寻找一篇文章，复制、粘贴到

“文字图片”编辑页面，然后点击一

下页面下方的“代码编辑”按钮，

获取其代码，认识一下代码。

第二节

认识使用、识别特效代码

1、怎样使用特效代码

当你看到一个用HTML语做出的漂亮的贴子时，一定想知道是怎么做的，但当你一看到那些密密麻麻的代码时，头又晕了。怎么办呢？先学习和熟悉如何加代码、怎么识别代码标识吧。我也仅仅在自我摸索中学到了一点点东西，仅供大家参考。

怎样使用特效代码？

只要把这些代码复制、粘贴到你的网页源代码中，保存，再在浏览器中打开，你就会看到效果了！

怎样在我的网页中插入代码？
·使用DreamWeaver：
在编辑状态下按F10即弹出源代码窗口，将特效代码粘贴进去即可。
·使用FrontPage：
点击编辑窗口左下角的“HTML”选项卡即出现源代码窗口，将特效代码粘贴进去即可。
·直接使用“记事本”等编辑器：
直接用这些编辑器打开网页文件，出现的就是源代码，将特效代码粘贴进去即可。

在什么地方插入代码？

一般来说，在网页源代码的<body>与</body>之间的任何地方插入代码都可以（除非特别指明，例如要求插入到<head>与</head>之间）。
提示：在<td>与</td>之间插入代码，一般不会出错。如果你怕加错，也可以在需要加代码的地方，用汉字或其它符号作标记，再加就不会出错了。

试试吧，不难的

HTML语言标记大观
< a="">

标记类型 译名或意义 作用 备注

文件标记

<HTML> ● 文件声明 让浏览器知道这是 HTML 文件

<HEAD> ● 开头 提供文件整体资讯

<TITLE> ● 标题 定义文件标题，将显示于浏览顶端

<BODY> ● 本文 设计文件格式及内文所在

排版标记

 ○ 说明标记 为文件加上说明，但不被显示

<P> ○ 段落标记 为字、画、表格等之间留一空白行

<BR> ○ 换行标记 令字、画、表格等显示于下一行

<HR> ○ 水平线 插入一条水平线

<CENTER> ● 居中 令字、画、表格等显示于中间 反对

<PRE> ● 预设格式 令文件按照原始码的排列方式显示

<DIV> ● 区隔标记 设定字、画、表格等的摆放位置

<NOBR> ● 不折行 令文字不因太长而绕行

<WBR> ● 建议折行 预设折行部位

字体标记

<STRONG> ● 加重语气 产生字体加粗 Bold 的效果

<B> ● 粗体标记 产生字体加粗的效果

<EM> ● 强调标记 字体出现斜体效果

<I> ● 斜体标记 字体出现斜体效果

<TT> ● 打字字体 Courier字体，字母宽度相同

<U> ● 加上底线 加上底线 反对

<H1> ● 一级标题标记 变粗变大加宽，程度与级数反比

<H2> ● 二级标题标记 将字体变粗变大加宽

<H3> ● 三级标题标记 将字体变粗变大加宽

<H4> ● 四级标题标记 将字体变粗变大加宽

<H5> ● 五级标题标记 将字体变粗变大加宽

<H6> ● 六级标题标记 将字体变粗变大加宽

<FONT> ● 字形标记 设定字形、大小、颜色 反对

<BASEFONT> ○ 基准字形标记 设定所有字形、大小、颜色 反对

<BIG> ● 字体加大 令字体稍为加大

<SMALL> ● 字体缩细 令字体稍为缩细

<STRIKE> ● 画线删除 为字体加一删除线 反对

<CODE> ● 程式码 字体稍为加宽如<TT>

<KBD> ● 键盘字 字体稍为加宽，单一空白

<SAMP> ● 范例 字体稍为加宽如<TT>

<VAR> ● 变数 斜体效果

<CITE> ● 传记引述 斜体效果

<BLOCKQUOTE> ● 引述文字区块 缩排字体

<DFN> ● 述语定义 斜体效果

<ADDRESS> ● 地址标记 斜体效果

<SUB> ● 下标字 下标字

<SUP> ● 上标字 指数（平方、立方等）

清单标记

<OL> ● 顺序清单 清单项目将以数字、字母顺序排列

<UL> ● 无序清单 清单项目将以圆点排列

<LI> ○ 清单项目 每一标记标示一项清单项目

<MENU> ● 选单清单 清单项目将以圆点排列，如<UL> 反对

<DIR> ● 目录清单 清单项目将以圆点排列，如<UL> 反对

<DL> ● 定义清单 清单分两层出现

<DT> ○ 定义条目 标示该项定义的标题

<DD> ○ 定义内容 标示定义内容

表格标记

<TABLE> ● 表格标记 设定该表格的各项参数

<CAPTION> ● 表格标题 做成一打通列以填入表格标题

<TR> ● 表格列 设定该表格的列

<TD> ● 表格栏 设定该表格的栏

<TH> ● 表格标头 相等于<TD>，但其内之字体会变粗

表单标记

<FORM> ● 表单标记 决定单一表单的运作模式

<TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字

<INPUT> ○ 输入标记 决定输入形式

<SELECT> ● 选择标记 建立 pop-up 卷动清单

<OPTION> ○ 选项 每一标记标示一个选项

图形标记

<IMG> ○ 图形标记 用以插入图形及设定图形属性

连结标记

<A> ● 连结标记 加入连结

<BASE> ○ 基准标记 可将相对 URL 转绝对及指定连结目标

框架标记

<FRAMESET> ● 框架设定 设定框架

<FRAME> ○ 框窗设定 设定框窗

<IFRAME> ○ 页内框架 于网页中间插入框架 IE

<NOFRAMES> ● 不支援框架 设定当浏览器不支援框架时的提示

影像地图

<MAP> ● 影像地图名称 设定影像地图名称

<AREA> ○ 连结区域 设定各连结区域

多媒体

<BGSOUND> ○ 背景声音 于背景播放声音或音乐 IE

<EMBED> ○ 多媒体 加入声音、音乐或影像

其他标记

<MARQUEE> ● 走动文字 令文字左右走动 IE

<BLINK> ● 闪烁文字 闪烁文字 NC

<ISINDEX> ○ 页内寻找器 可输入关键字寻找于该一页 反对

<META> ○ 开头定义 让浏览器知道这是 HTML 文件

<LINK> ○ 关系定义 定义该文件与其他 URL 的关系

StyleSheet

<STYLE> ● 样式表 控制网页版面

<span> ● 自订标记 独立使用或与样式表同用

注：

● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
○ 表示该标记属空标记，即不需要关闭标记。
IE 表示该标记只适用于 Internet Explorer。
NC 表示该标记只适用于 Netscape Communicator。
反对表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支持，只是 HTML 标准中有其它同功能或更好的选择。
弃用表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特性，不用担心新浏览器不支援旧标记。
新表示该标记是 HTML 4.0 中新增的。

HTML语言基本代码识别
< a="">

第一类：成双成对的标识符：这类代码单词当出现一个后，它的后面在一定的地方一定要有加斜杠的结束符，如：

  <table>表格开始，</table>表格结束
  <body>表体开始</body>表体结束
  <tr>表格的一行开始,(可简单理解为横向)</tr>表格的一行结束
  <td>一行中填充开始,(可简单理解为纵向)</td>填充结束
  <p>~</p>创建一个段落及段落结束
  <font>文字修饰开始</font>文字修饰结束
  <center>~</center>居中开始与结束

    第二类不是成双成对的，它只是表示某种属性，在代码中巧妙运用，会收到意想不到效果呢。如：

  borderColor= 表格边框的颜色
  bgColor= 大背景颜色代码
  cellSpacing=边框与内置边框的宽度
  cellPadding=文本与表格框的距离
  border=  表格边框的粗细
  width=表格宽度,用数字或用"100%"百分比
  height=表格高度,用法同上.
  align=center内容居中位置改变center为left，则表示内容是左对齐，……
  background= 作为背景图片的地址
  borderColorDark=边框背光颜色
  borderColorLight=边框向光颜色

上面代码单词并不是在每个贴子代码中都要用，可以根据需要进行运用。

    第三类是最简单的代码，不需要成对，也不需要数字选择，直接输入代码就行，如：

  <hr>表示是在Html文档中加入一条水平线
  <br>表示创建一个回车换行.它没有结束标志.

    初学时一是要熟悉这些单词，二就是照葫芦画瓢，搬别人的代码，从简到繁，循序渐进。应该很快就可以学会了。

        该怎样修改代码？

插入代码之后，把代码中的文字替换成你自己的内容即可。
注意：为避免出错，请不要改动除中文文字之外的代码，否则程序可能会不能运行！