教程
HTML:
题记：钟鼓馔玉不足贵！
在培训中，我们最多的讲的网页制作是如何用DW生成网页，像用WORD一样，很方便，瞬时一个网页在点几个鼠标的动作下快速完成。
比如：
1.改文字红色，只要把文字选定，然后用鼠标选定相应的的颜色即可，
2.放置图片，点击然后选择图片文件即可导入一张图片。
……一切操作变得对我们来说，就是点鼠标的事情了。
但是，你知不知道点击鼠标之后DW背后的动作是什么？它是怎么给你生成相应的网页的？这些培训的时候肯定是讲不到的主题。候捷曾说过：源码之前，了无秘密。不好好探究一翻，终究学有所限。最多也摆脱不了DW的束缚。
记住：DW只是工具，它只是帮助我们更快的，更便捷的生成网页。没有它，我们照样可以做网页。
我们不能依赖它！！！
思考一个问题，如果我们摆脱DW，怎么办？
第一章：可视化＆HTML
题记：为什么古老的秘技总是会失传？ 是人类太自私？不肯传？
或是人类太进步？进步到不屑去学这些古老的秘技？ –古龙
网页最主要讲的就是如何排版的问题，也就是说，把每一个元素如何放置在页面中，页面中要显示成什么样子。文字要红色？绿色？图片要100×200大小的？表格要粗一点的？细一点的？这些是网页制作所要考虑的内容。
DW是一个可视化工具，它是网页设计师的一项利器，没有可视化工具之前，写网页可是烦心事，要一边写网页排版的语言，一边再浏览。没有所见即所得的功能。它提高了简便性，极大的提高了效率。但这简便性是怎么得来的呢？换句话说，当你导入一张图片，DW会为你做些什么？
可视化工具给我们带来简便性的同时，也让我们失去了对网页排版进行一些细微控制的能力，同时，也让我们失去了对网页排版的语言掌控的能力。优秀的网页设计师必须对网页排版的语言非常熟悉，而这门语言是非常简单的。但熟练运用却是多实践才能得到的。
以前没有DW这些可视化工具之前，网页设计师都要直接写网页排版的语言，而不是用鼠标点击两下这么简单。那么这个网页排版语言叫什么呢？就叫HTML.
但很多做网页的不懂HTML，这是一件可悲的事情。就像一个搞音乐的不懂乐谱一样可悲，虽然你可以靠唱流行小曲红几年，但你绝对上不了大雅之堂。
今天我们就把HTML大卸八块，看看究竟是些什么内容，另外， 我们也知道DW工作究竟主要是为我们作些什么的？
提醒：不要害怕，HTML不难，可以说，相当简单。功夫只是在于熟不熟练而已。
第二章：什么是HTML?一些术语
题记：Good
order is the foundation of all things. (E.Burke, Btritish statesman)
良好的秩序是一切的基础。(英国政治家 伯克 E)
HTML学术名叫超文件注标式语言。它是一种描述性的语言，与计算机其它的语言又有区别，何谓描述性？
打个比方：两个人(A与B)谈话，谈话的内容是A告诉B一个人长得是什么样子。A告诉B，这个人是个美国人，皮肤是白色的，眼睛是蓝色的，个子1米8左右，非常的帅气，像极了汤姆.克鲁斯。那么，B在脑海中就有了这个人的一个基本的印象。不要否认，人的大脑真的很神奇。向一个人描述某件东西，不需要精确，只要一个大概，大脑马上就能成一个映像。
这里有一个问题，A告诉B “眼睛是蓝色的”，“他的眼睛是蓝色的”，“他有一个蓝色的眼睛”等都是一个意思，当然，表达的意思千千万。人的大脑有自动分析的功能，也就是我们所说的：智能！
但
计算机达不到这种水平。计算机很精确，如果你要告诉计算机谈一个人长得什么样子，并且让计算机为你生成图像，哈哈～你告诉它“眼睛是蓝色的”，它可能识别
出来，但换一种说法，“他的两个贼眼是蓝色的“。计算机肯定没法识别，另外的问题是，世界上的语言差别千千万，何止几百万种说法，你能叫计算机都去鉴别每
一种说法吗？所以我们不能直接拿现成的人类语言来对付计算机这个古怪的家伙。
这种情况我们怎么办？
答案是：给定一个标准，关于描述的标准！就像我们音乐中的五线谱，描述了音乐的节奏标准，每一个会看懂五线谱的人都会根椐五线谱获得它的旋律。广而泛之，每一个计算机看到这个描述的标准就知道我们要描述的是什么东西。
在网页制作上面，描述的标准就是HTML语言。
记住：他是一个标准，也就是说，我们的描述是在这个标准的框框内的。如果脱离了这个框框，计算机就不知所从。
掌握了HTML语言，就掌握了标准（当然，现在讲html标准可能不太适用了，因为W3C规定是XHTML+CSS作为标准Web），就知道我们能做什么，什么不能做。碰到问题，该怎么去描述它，脱离了纯粹的点鼠标操作的局限性。
我们先从一个空的页面开始，当建立一个html文件时，页面是空白的。当然，如果你用DW建一个html页面，页面上已经为你添置了好多代码。不要怕。我们慢慢来！一点点的把它解剖出来。
第三章：标记
题记：举手可近月，前行若无山。
我们描述某样东西，想想看，有哪几件是不可缺的？
一是主体，也就是说被描述的对象。在我们前面的例子中，那位仁兄的眼睛，鼻子等就是主体。
二是属性，也就是说被描述的对象的特征。前面例子中，蓝色的，高高的等就是属性。
在网页中，同样有这两个概念。
在网页中，显示给访问者的内容，这个内容就是主体。至于这个内容是怎么显示出来的，就是属性。
网页中的主体有：显示给访问者的文字，图像，Flash，表格。
咱们先来看一个页面：
显示的页面是这样的：
|
HTML语言剖析 太平洋网络学院 Html简介 全写： HyperText Mark-up HTML 是在 SGML 定义下的一个描述性语言，或可说 |
在DW中打上这段文字很简单，而且排版也很简单，设置左右对齐即可达到这种效果，但是，我们不用DW的可视化功能来做呢？我们用HTML来描述它！！！！
首先第一行是 “HTML语言剖析”这个标题，这个标题是居中的。下面我们来描述它：
标题的描述标记是<h1><h2><h3>，<h1>名称是标题1(header
1)，大号字题显示.<h2>名称是标题2，字体要比标题1要小，h3就不用再讲了。
我们这里用h2来描述它:
<h2>HTML语言剖析</h2>，注意，用一个描述符开始，要用一个描述符结束，并且结束符要多一个/。
标题描述完了，下面就是居中显示了。我们要用<div>标记来描述。DIV标记在标准中是这样定义的：
DIV
区隔标记 设定字、画、表格等的摆放位置
我们继续描述：
<div
align=”center”><h2>HTML语言剖析</h2></div> 这样我们就把“HTML语言剖析”这个主体给描述出来了。
疑问：
1．如果我不加</h2></div>这些结束标记会怎样？
2.如果我把</h2></div>换一换会怎么样？就像这样：
<div align=”center”><h2>HTML语言剖析</div></h2>
3.如果先描述<div>再描述<h2>会出现什么情况？就像这样：
<h2><div
align=”center”>HTML语言剖析</div></h2>
我们继续：
HTML语言剖析完了之后是另起一段落，另起段落的标记是<p>
下面的一句“太平洋网络学院”是正文，居右显示。
正文，什么标记都不要加，它就是正文了。我们只要描述居右显示即可：
<div
align=”right”>太平洋网络学院</div>
下面我们再换行显示一个段落，粗体居中显示
“HTML简介”
<p>
<div
align=”center”><B>HTML简介</B></div><p>
下面是正文，且没有什么其它修饰。直接写出即可，但要主意换行。换行不同于换段落，换行是<br> ，下面是代码：
HyperText Mark-up Language<br>
译名： 超文件注标式语言（译名之一）<br>
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。<p>
我们把这些代码结合起来：
<div align=”center”><h2>HTML语言剖析</h2></div><p>
<div align=”right”>太平洋网络学院</div><p>
<div
align=”center”>HTML简介</div><p>
HyperText Mark-up Language<br>
译名： 超文件注标式语言（译名之一）<br>
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。<p>
HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML
不是程式语言，如 C++ 和 Java 之类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于
编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然 以专业的网页编辑软件为佳。
注意：在代码中的分行与不分行是没有区别的，我们分行只是为了显示代码的清晰而作。与计算机解析没有任何关系。
小结：这一节概括的学了几个标记，以对标记有个大概的认识：
<br>换行标记
<p>换段落标记
<h1><h2><h3>标题标记
<B>粗体标记
<div>区隔标记
学习：
1.如果碰以什么标记不懂，请查GOOGLE.上面有详细解释。
2.对于这些标记，不要死记，多用，熟练了就会举一反三。
3.多尝试自已写一写标记代码，看到某个网站，想想看，用标记怎么写出来？而不是用DW画出来。
练习题：
写出如下效果：
HTML语言剖析太平洋网络学院 Html简介 全写： HyperText Mark-up HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML 不是程式语言，如 C++ 和 |
第三章：HTML标记一览：
题记：黄河远上白云间，一片孤城万仞山。
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> |
○ |
开头定义 |
让浏览器知道这是 |
|
|
<LINK> |
○ |
关系定义 |
定义该文件与其他 URL |
|
|
StyleSheet |
||||
|
<STYLE> |
● |
样式表 |
控制网页版面 |
|
|
<span> |
● |
自订标记 |
独立使用或与样式表同用 |
|
注：
- ● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
- ○ 表示该标记属空标记，即不需要关闭标记。
- IE 表示该标记只适用于 Internet Explorer。
- NC 表示该标记只适用于 Netscape Communicator。
-
反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支
持，只是 HTML
标准中有其它同功能或更好的选择。 - 弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
- 新 表示该标记是 HTML 4.0 中新增的。
第四章：各标记详解
一，文件标记：
题记：天不变，道亦不变！
文件标记就是针对这个Html文件的说明。包括这个html文件符合什么标准，标题头是什么。有什么外部文件导入进来。都需要用到文件标记，学习刚开始可能对文件标记不太了解，或者说不知其所以然。
为什么要有文件标记：
文件标记是对整个文件进行说明的，你不可能一上来就描述这是什么什么样的一个东西，打个比方，就像乐谱。正式规格的不可能上一就直接画五线谱，第一段要说明这段音乐的名称，是《波兰舞曲》，第二段要说明作曲者是肖邦，然后要注明是D大调还是D小调等。最后才是正真的主体—五线谱。
就像这样：
一个HTML也可以看成是这样的一个集合，看下图：
其中有好几项都是关于文件标记的：
1.<html>标记，标记着一个html文件的开始与结束
2.<head>标记，标记着一个html的头部的开始与结束。
3.<title>标记，标记着该html的主题是什么。
4.<body>标记,标记着html的正文的开始与结束。
5.<meta>标记，记录着该html的一些其它信息。这个以后详解。
小时候写信，不会信的格式，总是忘记信的第一行要写尊称：尊敬的老师：你好。然后再开始写正文，最后要写致 此 敬礼 还要署上我的大名。
写信有某种格式，如果我开始就把正文内容写上，最后写尊敬的老师：你好。或者我先写我的大名，最后再写尊敬的老师。更有的，乱写，比如，对方是王老师，你却写李老师，玉老师，你猜老师看了会怎样？会大骂孺子不可教也。
那么，写html也一样，也要遵循某种格式，写给人看的，模棱两可还说得过去。写给计算机的就不一样了。你乱写，计算机不接收，看你怎么办！
所以，开始的格式要掌握好。掌握了格式，写满纸的荒唐言是无所谓的！计算机就是这么笨，只认格式，不注意内容！
好，我们用一本书来打个比方。
书有封面，封尾，序，前言，索引，正文等内容。其中，封面，封尾，前言，索引只是个大概，告诉读者，这本书大概有些什么内容，另外有一些书的其它的信息，比如，读后感啊什么的。真正的内容是正文，那才是精华！
书的封面与封尾包含了本书，也就是说，一本书从封面开始，封尾结束。所有的内容都包含在里面，在封面与封尾以外的内容都不属于本书。那么html也是如此。<html>与</html>就相当于一本书的封面与封尾，在<html>与</html>之后的计算机都不给予理睬。好理解吗？我们下面继续。
接下来我们把前言，索引等内容归为书的附属信息。就相当于html的头部信息，即<head>至</head>部分。head部分包含了html的一些基本的信息，说明等内容。常见的有：
1.标题title：很好理解，不加说明。
2.引入的css，js文件，这个以后再解释。
3.meta部，作用很多，比如设定字符集，刷新时间等参数的设定。以后详解，如果想了解的话，去http://shipfi.cnblogs.com/articles/234994.html
可以查看更详细的信息。
就像电影放完片头一样，下面就是好戏开演了。从<body>标记开始至</body>标记结束，就表示网页的正文内容，网页上能显示出来的东西就在body标记嵌套的地方。
我们大部分学用的标记都是放在<body>与</body>之间的。
BODY标记的参数 —（一川烟草，满城飞絮）
body标记是正文的开始，它有相当多的参数，表示这一个页面有哪些显示属性。它有哪些参数呢？
我们先来看一段html代码：
<BODY
text=”#000000″ link=”#0000FF” alink=”#FF0000″
vlink=”#0000FF” background=”bg1.gif” bgcolor=”#FFFFFF” leftmargin=2
topmargin=2
bgproperties=”fixed”>
body的
参数可以控制全局的显示。当然，可以在各个标记之间作个体的更改。想一下，如果我们有一篇文章，里面的链接字体要全部是蓝色的。但我们默认的有超链接的字
符是黑色的，难道我们一个个的去更改吗？页面中有一个两个还好说，如果一个页面有上百个上千个呢？不可能一个个去改吧。
所以，我们对body作个全局控制，让该页面的超链接的字体默认是红色的：
….<body
link=”# FF0000″>…..正文内容….</body>….
这就是作全局控制用，如果我们看得不爽，要全部改为棕色。只要在link后面指定棕色即可。一处改动，四处受益！
各参数解释：
text —字体的默认颜色.
alink
—超链接字体刚按下后的颜色。
vlink
—超链接字体链接后的颜色。
background
— 背景图片
bgcolor — 背景颜色
leftmargin
/ topmargin–左间距/上间距
bgproperties
— 背景颜色的属性
当然，里面的一些属性有些不是很常用，或者，出于个人爱好，有些用到的很少，另外，还有更好的替代办法，如CSS。但知道有这样一用也就可以了。
BODY还有一些事件，这个讲JAVASCRIPT的时候介绍。
小结：本节讲了一些网页的格式问题，一个网页由哪几个部分组成，各个组成部分有何作用？
思考：为什么我们要给HTML划分各个部分，放在一起有何不妥？
练习：Copy一段文章，对它进行相应的排版，比如，报纸式的排版，尽自己的想象，多排几个样式。当然，要用纯HTML代码写出来。如果有不懂的标记，请查上面的表格。
二．排版标记 —（春色三分，二分尘土，一分流水）
一个好的网页设计，就像三分春色。其设计，尘土也，飘洒而无拘束，似天马行空，飘忽不定。其排版，流水也，干净透澈，若涓涓细流，静静流淌。
我们这里讲得几个排版标记，用得好，就如一滩泉水。用得不好，就如一坨污泥，当然，我这里只讲使用的方法，不讲设计，讲设计就是关公前舞大刀了。
1.<p>标记及其附带的参数：
段落标记。作用：为字、画、表格等之间留一空白行。
<p
align=”center”>
参数：
可选值：right, left, center。
内定值：
align=”left“
<p>标记前面讲过是换段落，align是表示段落是居中还是居左还是居右显示。这个标记很好理解。且现在我们所讲的参数就只有align这个参数。以前见过了，不是吗？
2.<br>标记及其附带的参数：
换行标记。作用：令字、画、表格等显示于下一行。
暂且不讲它带的任何参数。
3.<HR>水平线：
作用：插入一条水平线。
参数：<HR align=”LEFT”
size=”2″ width=”70%”
color=”#0000FF” noshade>
align不用多讲，size是表示它的大小粗细。width表示它在它的宽度，可以用像素或百分比来表示它，color是表示颜色，noshade表示平面显示，如果没有则表示具有阴影或立体显示。
4.<pre>标记：
这个标记我比较喜欢，因为不知道这个标记前在html中输空格真是个麻烦事， 输多了浏览器就不理了。还是那么多空格，但放在<pre>标记中的代码就不一样，你想要多少空格都可以，想要一行也可以。
5.<div>标记：
区隔标记，作用：设定字、画、表格等的摆放位置。
喜欢标准化的或用CSS的人肯定喜欢用它，怡然心会，妙处难与君说！
它的设计的作用是给设计师一种组织的能力。暂且放开不说也罢。不过，如果你要对某个元素进行align的控制，它会非常有用。
6. <NOBR>标记
知道<BR>标记，就知道<NOBR>标记是什么意思了。是不换行。一行太长，如果不用NOBR会自动换行，但如果不想自动换行的话，就用这个标记吧。
小结，讲了<p>,<br>,<hr>,<pre>,<div>,<nobr>标记，还是比较好掌握的，毕竟他们的附带的属性不是太多。
思考：如果要你来作HTML设计者的话，你还会带一些什么排版标记？你觉得给他们还要增加什么属性吗？
练习：把这些标记全部用上，排几篇文章，相信你会对他们有收获的。