加载中…^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<html>
<head>
<title>欢迎光临 +-+ 网卵之家 +-+</title>
其它头部信息......
</head>
<body>
主页显示内容...
</body>
</html>
注释：一个主页分为Head（头）和Body（文件体）两部分，以<html>开始，以</html>结束。
<html></html>
表示这是一个ＨＴＭＬ的文档，必须在整个ＨＴＭＬ文档的最前面和结尾处分别加入。
<head></head>
ＨＴＭＬ文件的“头”信息，包含主页标题、语言类型等浏览器需要的信息，其内容在主页中并不显示。
<body></body>
我们在浏览器中真正能看到的东西，文件的主体。
· 头部标记(Head)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<title>这里放该主页的标题</title> 将会显示在浏览器的标题栏（一般是左上角）
<base>定义一个相对路径的绝对路径
<link>相关文件的关联
<isindex> 提供搜索用的关键字
<meta>详细请见本站 《关于Meta标签的妙用》
<meta http-equiv="Content-type" content="text/html;charset=gb2312"> 这是我们最常见的一个meta标签，表示主页要显示中文。
· Body的属性
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<body bgcolor=#>
设置主页背景的颜色，＃表示颜色的数值，用１６(Hex)进制的数字表示 #rrggbb。例如：<body bgcolor=#000000>表示主页的背景色为黑色；#ffffff表示白色；#336699表示ＲＧＢ为（５１，１０２，１５３）的兰色。在 #rrggbb 中，ＲＲ表示红色数值；ＧＧ表示绿色数值；ＢＢ表示兰色。
<body text=#>
设置主页上字体的颜色
<body link=#>
有链接文字的颜色
<body vlink=#>
访问过的链接文字的颜色
<body alink=#>
当前访问链接文字的颜色
· Text的标签(Tags)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<pre></pre>
使用预格式的文本。
<h1></h1>
最大的标题
<h6></h6>
最小的标题 （实际上１到６之间还有，默认是字体加粗。我们可以自己定义，从而使ＨＴＭＬ具有我们自己的风格）
<b></b>
把文字加粗
<i></i>
文字斜体显示
<tt></tt>
产生打字机的效果
<cite></cite>
包含一段引用的文字
<em></em>
突出包含的文字（斜体或者粗体显示）
<strong></strong>
与ＥＭ标签一样
<font size=#></font>
设定文字的大小，＃可为１～７（通常我使用２）
<font color=#></font>
设定文字的颜色，＃为 #rrggbb
· 链接（Link）的标签
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<a href="url"></a>
对包裹的文字产生“超级链接”(HyperLink)
<a href="mail to:#"></a>
邮件链接，＃为邮件地址
<a name="NAME"></a>
标示书签位置，ＮＡＭＥ为书签的名称
<a href="#NAME"></a>
指向书签的链接
※ 练习：大家好，这是ＨＴＭＬ的第一课，所以如果基础较差的人可能会感到一些费解，请大家多查看别人的源代码，多做练习。
※ 练习一
请大家打开记事本（ＮｏｔｅＰａｄ） （Windows自带）写入以下内容（保存时选择“另存为”，选择“＊.＊”文件，加入".htm"后缀。如：netegg.htm）：
（ 最好自己一个一个单词写哦，这样便于你熟悉ＨＴＭＬ的语法结构和标签！！切切！）
※ 注释：
1.meta标签的介绍请参看《关于mata标签的妙用》，主要就是提供给浏览器一些关于主页的信息。
2.<br>标签不需要前后对应（即不需要</br>标签来表示结束），表示“硬回车”，重起一行。
3.<center></center>表示中间对齐。
· 格式（Formatting）标签
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<p></p>
标示一个段落
<p align=#>
表示该段落的对齐方式，＃可为Left（左） right（右） center（中）
<br>
中断该行，重起一行
<blockquote></blockquote>表示一个两边缩进的段落！
· 列表
<ul></ul>
创建一个无序列表
<ul type=#></ul>
＃表示列表表头的样子，可为disc（黑色圆点） circle（黑色圆圈） square（方块）
<ol></ol>
创建一个有序列表（就是说前面有数字那种）
<li></li>
列表的内容
<dl></dl>
自定义列表
<dd>
列表的内容
<dt>
定义列表的头，如 ■● 等
<div align=#></div>
一种通用标记，标示一个"html块",好象用法非常随意！。如我们在DW中做的IE层就使用div标签。如：
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
※ 注意：关于列表大家该开始可能比较费解，其实这个与Word中的列表含义很象。最早就是为了在页面中产生比较整齐的列表效果。请大家做一些练习试试看！
· 图片（Graphical）标签
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<img src="#">
＃表示图片来源的相对路径
<img src=" " align=#>
图片的对齐方式，＃可为left right center bottom top middle baseline（分别为左 右 中 中间 下 上 底线）对齐
<img src=" " border=#>
表示图片的边框大小（或者说粗细也行）＃为象素值
<hr size="#" width="##">
就是我们经常使用的水平线，＃表示高度，可为象素值或百分比;＃＃表示长度
<hr noshade>
表示没有阴影效果（做个ＳＩＺＥ＝２０的水平线试试就知道区别了！）
※ 注意：本课的内容比上节稍微费解一点，关键是要练习！！自己动手写，观察变化！（其实学习任何东西都是这样—“多动手，多动脑！”
※ 注释：
1.大家可以注意到，在<body bgcolor="#ffffff">的下面有两行空格，在ＨＴＭＬ里空格是“被忽略的”！
2.在<--// -->中的是注释，可以写入一些说明性的文字，以使ＨＴＭＬ的结构和可读性更好。
3. 这就是ＨＴＭＬ表示空格的标记，表格中调整高度小于２０时就需要我们删除它，不然表格会认为有一个字符，从而拒绝小于２０个象素。
· 表格(Table)标记
<table></table>
表示一个表格
<tr></tr>
标示一行
<td></td>
标示一列
<th></th>
标示表头，类似于word表格的含义，通常使用“粗体、居中”的文本
· 表格(Table)的属性标记
<table border=#>
表格的边框
<table cellspacing=#>
表示单元格与单元格之间的距离（或者说空间）
<table cellpadding=#>
单元格中的元素（文字或图片）与单元格边框的距离
<table width=#>
表格的宽度
<tr align=#> 或者 <td align=#>
“行”或“列”中元素（文字或图片）的水平对齐方式
<tr valign=#> 或者 <td valign=#>
“行”或“列”中元素（文字或图片）的垂直对齐方式
<td colspan=#>
跨越若干列（也就是“合并单元格”）
<td rowspan=#>
跨越若干行（也就是“合并单元格”）
<td nowrap>
表示单元格中的文字不“自动换行”
※ 注释：表格在实际中的用法很复杂，如果没有FP和DW这样的“所见即所得”的工具软件，真不知道怎么办。一个好的主页总会用到大量的表格来进行更加自由的排版。 所以我们完全应该有时也必须借助于FP、DW这样的工具来做表格。说到这里不得不谈到层，现在和以后的人们会越来越多的使用“层”ＬＡＹＥＲ，它在排版时更加自由，简直就和做平面设计一样！
· 框架(Frames)的标记
<frameset></frameset>
标志一个框架页
※ 注释：在这里我要说几句“废话”，很多初学者学习框架时都有些头晕！对这种“张三、李四、王麻子...”的结构关系总是理不顺。其实框架页（也就是我们的“主要”页面，只是记录一些包括分“几个框架”、“每个框架的大小位置”等数据。例如：你现在看到的这个主页分成 上、中、下三个框架，实际上需要４个页面。index.htm 为框架页，记录卡页相关信息；index_top.htm为上面的页面;index_content.htm为中间内容；index_bottom.htm为下面的页角。请大家自己动手做，细心体会！
<frameset rows="value,value>
定义水平方向的框架数量及大小，value可以使用象素或百分比
<frameset cols="value,value>
定义垂直方向的框架数量及大小，value可以使用象素或百分比
<frame>
定义具体某个框架的来源等信息！（请继续看下面的《框架(Frames)的属性标记》）
<noframe></noframe>
当浏览器不支持框架时显示的内容！与普通页面一样的写法！！
· 框架(Frames)的属性标记
<frame src=#>
指定某框架显示内容的来源，＃为ＵＲＬ（通用资源定位，其实就是类似于http://NetEGG.2699.com这样的网址）
<frame name=#>
该框架页的名称（在不同框架页面之间链接跳转时要用到）
<frame marginwidth=#>
留白的宽度，即左右两边保留的“页边距”
<frame marginheight=#>
留白的高度，即上下两边保留的“页边距”
<frame scrolling=#>
有没有拖动条！＃可为 yes no auto（自动），默认值（default）是 auto
<frame noresize>
用户不能拖动改变框架的大小
※ 注释：关于框架请大家用fp或dw做一框架并研究其代码！下面是本站首页框架的源代码：
我前面就说过，表单在网络交互性要求越来越高的今天，其重要性得到所有人的肯定。这里我们讲的表单（form）主要是介绍表单的一些外观和形式。要实现交互,还必须通过服务器端的ＣＧＩ（通用网关接口）Common Gateway Interface 以及数据库的支持。也就是说现在，这里我们只管做出表单提交（Post Get两种方式）就行了。做ＣＧＩ以前是用Perl，现在用asp,将来PHP会越来越多的。以后我们也会讲到相关的内容！
· 表单(Form)的标记
<form></form>
包含所有的表单在里面，否则浏览器不能提交（就是在dw里那个红色的虚线框）
<select multiple name="name" size=#></select>
建立一个滚动选单，mutiple 表示多行 size 为高度（也就是行数）
<option>
设定一个菜单选想项
<select name="name"></select>
下拉菜单
<textarea name="name" cols=40 rows=8></textarea>
文本输入区！８行４０列大小
<input type="checkbox" name="name">
选择按钮，后面跟文字！可多选
<input type="radio" name="name">
收音机？？也是选择按钮，只能单选
<input type="text" name="name" size=20>
单行文本输入区，只能打入２０个字符以内（当然是英文，一个中文相当于两个英文）
<input type="password" name="name">
单行密码输入区
<input type="summit" name="name">
就是按钮
<input type="image" border=0 name="name" src="name.gif">
用小图片来做按钮，不然多单调啊！
<input type="reset">
怎么还用我说吗？Reset啊！！！ 没用过？这.........
· 字幕(Marquee)及多媒体引用的标记
<marquee direction=# behavior=# loop=# scrollamount=# scrolldelay=#>要跑动的文字</marquee>
direction 方向 left right
behavior 动作类型 scroll（饶着走） slide（走一次就停下来） alternate（来回走）请大家仔细体会其中的区别
loop 循环 循环的次数，没有（默认）为动个不停
scrollamount “滚动数量” 也就是速度
scrolldelay “滚动延时” 就是间隔时间
※ 注意：图片也可以哦！看看这个页面！源代码如下！
<embed src=url>
引用多媒体文件（对IE浏览器而言）
<bgsound src=url loop=#>
背景音乐
<img src="111.gif" dynsrc="111.avi" start=fileopen,mouseover controls loop=# loopdelay=#>
先显示一张图片，avi动画下载完后，开始播放
<table></table>
表示一个表格
<tr></tr>
标示一行
<td></td>
标示一列
<th></th>
标示表头，类似于word表格的含义，通常使用“粗体、居中”的文本
· 表格(Table)的属性标记
<table border=#>
表格的边框
<table cellspacing=#>
表示单元格与单元格之间的距离（或者说空间）
<table cellpadding=#>
单元格中的元素（文字或图片）与单元格边框的距离
<table width=#>
表格的宽度
<tr align=#> 或者 <td align=#>
“行”或“列”中元素（文字或图片）的水平对齐方式
<tr valign=#> 或者 <td valign=#>
“行”或“列”中元素（文字或图片）的垂直对齐方式
<td colspan=#>
跨越若干列（也就是“合并单元格”）
<td rowspan=#>
跨越若干行（也就是“合并单元格”）
<td nowrap>
表示单元格中的文字不“自动换行”
※ 注释：表格在实际中的用法很复杂，如果没有FP和DW这样的“所见即所得”的工具软件，真不知道怎么办。一个好的主页总会用到大量的表格来进行更加自由的排版。 所以我们完全应该有时也必须借助于FP、DW这样的工具来做表格。说到这里不得不谈到层，现在和以后的人们会越来越多的使用“层”ＬＡＹＥＲ，它在排版时更加自由，简直就和做平面设计一样！
· 框架(Frames)的标记
<frameset></frameset>
标志一个框架页
※ 注释：在这里我要说几句“废话”，很多初学者学习框架时都有些头晕！对这种“张三、李四、王麻子...”的结构关系总是理不顺。其实框架页（也就是我们的“主要”页面，只是记录一些包括分“几个框架”、“每个框架的大小位置”等数据。例如：你现在看到的这个主页分成 上、中、下三个框架，实际上需要４个页面。index.htm 为框架页，记录卡页相关信息；index_top.htm为上面的页面;index_content.htm为中间内容；index_bottom.htm为下面的页角。请大家自己动手做，细心体会！
<frameset rows="value,value>
定义水平方向的框架数量及大小，value可以使用象素或百分比
<frameset cols="value,value>
定义垂直方向的框架数量及大小，value可以使用象素或百分比
<frame>
定义具体某个框架的来源等信息！（请继续看下面的《框架(Frames)的属性标记》）
<noframe></noframe>
当浏览器不支持框架时显示的内容！与普通页面一样的写法！！
· 框架(Frames)的属性标记
<frame src=#>
指定某框架显示内容的来源，＃为ＵＲＬ（通用资源定位，其实就是类似于http://NetEGG.2699.com这样的网址）
<frame name=#>
该框架页的名称（在不同框架页面之间链接跳转时要用到）
<frame marginwidth=#>
留白的宽度，即左右两边保留的“页边距”
<frame marginheight=#>
留白的高度，即上下两边保留的“页边距”
<frame scrolling=#>
有没有拖动条！＃可为 yes no auto（自动），默认值（default）是 auto
<frame noresize>
用户不能拖动改变框架的大小
※ 注释：关于框架请大家用fp或dw做一框架并研究其代码！下面是本站首页框架的源代码：
我前面就说过，表单在网络交互性要求越来越高的今天，其重要性得到所有人的肯定。这里我们讲的表单（form）主要是介绍表单的一些外观和形式。要实现交互,还必须通过服务器端的ＣＧＩ（通用网关接口）Common Gateway Interface 以及数据库的支持。也就是说现在，这里我们只管做出表单提交（Post Get两种方式）就行了。做ＣＧＩ以前是用Perl，现在用asp,将来PHP会越来越多的。以后我们也会讲到相关的内容！
· 表单(Form)的标记
<form></form>
包含所有的表单在里面，否则浏览器不能提交（就是在dw里那个红色的虚线框）
<select multiple name="name" size=#></select>
建立一个滚动选单，mutiple 表示多行 size 为高度（也就是行数）
<option>
设定一个菜单选想项
<select name="name"></select>
下拉菜单
<textarea name="name" cols=40 rows=8></textarea>
文本输入区！８行４０列大小
<input type="checkbox" name="name">
选择按钮，后面跟文字！可多选
<input type="radio" name="name">
收音机？？也是选择按钮，只能单选
<input type="text" name="name" size=20>
单行文本输入区，只能打入２０个字符以内（当然是英文，一个中文相当于两个英文）
<input type="password" name="name">
单行密码输入区
<input type="summit" name="name">
就是按钮
<input type="image" border=0 name="name" src="name.gif">
用小图片来做按钮，不然多单调啊！
<input type="reset">
怎么还用我说吗？Reset啊！！！ 没用过？这.........
· 字幕(Marquee)及多媒体引用的标记
<marquee direction=# behavior=# loop=# scrollamount=# scrolldelay=#>要跑动的文字</marquee>
direction 方向 left right
behavior 动作类型 scroll（饶着走） slide（走一次就停下来） alternate（来回走）请大家仔细体会其中的区别
loop 循环 循环的次数，没有（默认）为动个不停
scrollamount “滚动数量” 也就是速度
scrolldelay “滚动延时” 就是间隔时间
※ 注意：图片也可以哦！看看这个页面！源代码如下！
<embed src=url>
引用多媒体文件（对IE浏览器而言）
<bgsound src=url loop=#>
背景音乐
<img src="111.gif" dynsrc="111.avi" start=fileopen,mouseover controls loop=# loopdelay=#>
先显示一张图片，avi动画下载完后，开始播放
顶
后一篇 >如何从硬盘安装linux（双系统下）